HTML_CSS/CSS (3) 썸네일형 리스트형 태그에 테두리를 만들어내는 border 속성 border border 속성은 HTML의 각 태그들에 테두리를 만들어낼 수 있다. border 속성을 이용하여 태그들의 경계가 어디까지인지 육안으로 식별 가능하며, 웹 브라우저에서 각각의 태그들을 구분하기 쉬워진다. border 스타일 종류 각각의 스타일은 전부 3px의 두께를 기준으로 표현했다. solid dotted dashed double inset outset ridge groove border 속성 사용법 border 속성 하나만 사용 border 속성 하나만을 이용하여 두께, 테두리 스타일, 색상을 지정할 수 있다. 단, 테두리의 형태는 필수로 지정해줘야지 화면에 나오게 된다. border.html border (실행결과) border border-style 속성 사용 border-style.. CSS를 HTML에 적용시키는 방법 CSS CSS는 'Cascading Style Sheets'의 약자로써, HTML을 이용하여 기본적인 웹 페이지의 골격을 만들었다면 CSS를 이용하여 색상, 크기, 위치, 모양 등을 지정할 수 있다. CSS에 대해 아는게 많을 수록 웹 페이지의 가시성이 높아지고, 스타일있게 꾸밀 수 있다. CSS를 HTML에 적용시키는 방법 CSS를 HTML에 적용시키는 방법에는 3가지 정도가 있다. HTML 내부에 태그를 이용한 '내부 스타일시트' 방식 별도의 파일을 이용하여 HTML에 링크시키는 '외부 스타일시트' 방식 HTML 태그 내부에 속성으로 스타일을 지정하는 '인라인' 방식 내부 스타일시트 내부 스타일시트 방식은 HTML의 Hello CSS (실행결과) 외부 스타일시트 외부 스타일시트 방식은 html 파일 .. 글자에 테두리, 그림자 넣기 위의 사진처럼 메인화면에서 슬라이드 부분에 사진이 하얀색 계열이면 제목의 가독성이 떨어져 보여서 그림자를 넣거나 테두리 색을 입히기로 했다. 개발자 모드로 대충 코드의 어느 부분인지 파악한다. 찾아보니 빨간선으로 친 부분을 보면 될듯 하다. 그 중, 글씨를 제어하는 font 가 들어간 첫번제 빨간 밑줄 부분으로 가서 밑의 코드를 추가하도록 한다. text-shadow text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000; (실행결과) 간단하게 설명해서 첫번째 줄부터 밑에 줄까지 위, 오른쪽, 아래, 왼쪽 이다. 각각 한 부분 씩 1px로 색을 주어서 테두리 처럼 만드는 것이다. 당연하게도 픽셀을 높이면 굵기가 굵어진다. (1px 차이가 꽤나 커보인.. 이전 1 다음
