01 CSS
스타일 속성을 이용하여 페이지를 디자인 하는 것을 style 이라고 하고, 이러한 style을 모아 놓은 것을 'stylesheet' 라고 한다. 한 문서에 같이 작성할 수도 있지만 이 후 페이지 유지 보수에 적절하지 않기 때문에 Html(구조)과 CSS(디자인)으로 나누어 작업하는 것이 좋다.
02 CSS의 형태
선택자{속성1:값1; 속성2:값2; 속성3:값3; ...}
위와 같이 선택자를 먼저 지정하고 { } 괄호 안에 속성과 속성값을 작성한다. 속성은 콜론 ( : ) 으로 구분하고 값은 세미콜론 ( ; )으로 구분한다. 이때 선택자에는 태그 이름도 올 수 있고, class나 id 값도 올 수 있다.
02-1 tag
p{ color: red; }
tag 자체에 스타일을 적용하는 방식이다. 태그 스타일을 초기화 하거나 문서 내 모든 해당 태그에 스타일을 적용하고 싶을 때 사용한다.
02-2 #id
#p_red{color: red;}
<p id="p_red">id를 가진 p태그</p> <p> 평범한 p태그</p>
id를 활용하면 수많은 동일한 태그 중 특정한 이름을 가진 요소만 선택할 수 있다. 위의 경우 본문 내용의 위의 p태그만 "p_red"이 적용되어 있다. 이 경우 위의 p 태그의 내용물은 글자색이 red로 변경되고, 아래의 p 태그는 변경되지 않는다.
스타일 시트에서는 #아이디명{스타일 속성: 값;} 으로 표현하고 아이디명은 중복 사용이 불가능하다.
02-3 .class
.title{font-weight: 700;}
<p class="title">title01</p> <div class="title">title02</div> <span class="title">title03</span>
class는 여러 객체에 동일한 스타일을 적용하고자 할 때 사용한다. 위의 경우 p태그와 div태그, span 태그 모두 "title"이라는 class를 가지고 있다. 위의 경우 "title" 클래스를 가진 세가지 태그 모두 글씨 두께가 두꺼워 진다.
스타일 시트에서는 .클래스명{스타일 속성: 값;}으로 푷현하고 클래스명은 중복 사용이 가능하다.
03 CSS의 적용
03-1 인라인 스타일
<h1 style="color: red;">인라인 스타일</h1>
위와 같이 <태그 style="속성: 속성값;"> 으로 작성한다.
인라인 스타일을 사용하면 간편하지만 적용할 style이 많아지면 코드의 가독성이 떨어지고 html(구조)와 style(디자인) 이 혼재해 있어 가독성이 떨어지므로 유지보수에 효율적이지 못하다.
03-2 내부 스타일시트
<style> p{ text-align: center; } </style>
내부 스타일 시트는 html문서 안에 사용할 스타일을 따로 정리한 것이다. 위와 같이 <style> </style> 사이에 디자인 속성을 작성하고 이를 html 문서의 상단, <head> </head> 안에 배치한다.
03-3 외부 스타일시트
보통의 경우에 html문서와 stylesheet문서는 분리되어 작성된다. 유지 보수에도 효율적이고 페이지를 불러오는 속도와도 관련이 있다..
외부로 분리한 css 파일을 html에 연결하는 방법은 다음과 같다.
<link href="외부 스타일 파일 경로" rel="stylesheet" type="text/css">
link : 사용할 css 파일을 연결하기 위한 태그
href : css 파일의 위치 경로를 작성
rel : html 파일과 css 파일의 관계, css 파일을 연결할 경우 항상 "stylesheet"를 작성
type : 연결되는 파일이 어떤 것인지 설명하는 속성
