CSS 기본기

선택자
CSS에서의 선택자의 종류는 다양하다. 하지만 주로 사용하게 되는 선택자는 3가지로 압축할 수 있다. 우선 간략하게 이야기하자면, 태그명, 클래스명 그리고 아이디를 들 수 있다. 우선 태그명은 해당 태그명을 가진 모든 앨리먼트를 선택할 때 유용하게 사용된다. 예를 들면,

p {margin:0; font-size:13px;}

위와 같이 사용하게되면 p라는 태그명을 가진 모든 앨리먼트에 margin과 font-size가 적용된다. 이 방법은 CSS를 초기화 할 때 사용하기 좋다.
두번째로는 클래스명인데 이 것이 가장 많이 사용하는 방법인 것 같다. 우선 다음과 같이 태그에 클래스명을 주고

또 다음과 같이 선택자를 사용해 접근할 수 있다.

.selector {border:1px solid #FAA;}

위와같이 하면 클래스명이 selector인 모든 앨리먼트에 작성한 스타일이 적용된다. 그리고 특정한 태그에 대하여 적용하려면

p.selector {color:red;}

위와 같이 쓰면 된다. "참 쉽죠잉~?" ㅋㅋ
그리고 또 한가지! ID! 중요한 값이다. 페이지 내에 한개만 쓸 수 있으며 자바스크립트로도 쉽게 접근할 수 있는 아주 유용한 선택자이다. 쓰는 방법은 앞의 것들과 동일하게

h2#selector {font-weight:bold;}

#이 바로 ID를 나타내는 선택자의 표시다. 여기에서도 클래스와 동일한 방법으로 #을 제일 먼저쓸 수 도 있다.

클래스명 중복 사용에 의한 스타일시트의 오류를 방지하기 위하, 유니크한 디자인을 할 경우 유니크한 클래스명과 클래스명과 앞의 태그명을 붙이고, 부모개체부터 타고 들어가는 형식을 사용 하면 좋다.
예를 들면,

div.header p {border:1px solid #f00;}

위와 같은 방식으로 스타일 시차를 작성하게 되면 클래스명이 header인 div 안에 있는 모든 p에 border 속성이 적용되게 된다.