Type 선택자
xhtml 요소명을 선택자로 사용하는 것을 “Type 선택자” 또는 “요소 선택자”, “태그 선택자” 라고 함.
요소명 { 속성 : 값; } // ex) p { color:#ff0000; }
전체 선택자
선택자에 * 기호를 사용하면 모든 요소에 스타일을 지정할 수 있음.
이를 “전체 선택자” 또는 “유니버셜(universal) 선택자” 라고 함.
* { margin:0; padding:0; }
class 선택자와 id 선택자
xhtml 요소에 class나 id 속성을 부여한 경우에 해당 class나 id 이름으로 접근하여 선택할 수 있음.
class 이름은 여러 번 사용할 수 있으니 한꺼번에 스타일 지정할 때 사용하면 편함.
id 이름은 한번만 사용할 수 있기 때문에 특정 요소에 접근하여 스타일을 지정할 때 사용할 수 있음.
class 선택자 (요소명 생략 가능)
요소명.클래스명 { 속성 : 값; }
id 선택자 (요소명 생략 가능)
요소명#아이디명 { 속성 : 값; }
속성 선택자
xhtml 요소가 특정 속성명이나 속성값을 가진 경우 해당 속성명으로 접근하여 스타일을 적용하는 방법.
IE6 과 같은 구버전의 브라우저에서는 지원하지 않는게 함정.
a[target] { background-color:#ff0000; } // a 요소에 target 속성이 있는 경우
a[target=”_blank”] { background-color:#ff0000; } // a 요소에 target 속성의 값이 _blank인 경우
a[class~=”new”] { background-color:#ff0000; } // a 요소의 class 속성이 여러 개 있는 경우
가상 요소와 가상 클래스
사용자가 지정할 필요 없이 기본적으로 제공되는 요소와 클래스.
1. first-line, first-letter 가상 요소
first-line 선택자는 요소의 첫 번째 줄에 있는 컨텐츠만 선택하여 스타일을 지정할 때 사용. first-line 가상 요소 선택자.
고정된 영역이 아니라 웹 브라우저의 크기에 따라 유동적으로 스타일이 적용됨.
first-letter 선택자는 요소의 첫 글자만 선택하여 스타일을 지정할 때 사용. first-letter 가상 요소 선택자.
2. before, after 가상요소
특정 요소에서 내용의 앞이나 뒤에 가상 컨텐츠를 삽입할 때 :before 가상요소와 :after 가상요소를 선택자로 사용.
IE의 경우 8 이상 버전부터 지원 가능.
p:before { content:"문단시작 컨텐츠 삽입"; }
p:before { content:"문단종료 컨텐츠 삽입"; }
근데 이거 쓸 일이 있긴 있으려나 싶음.
3. first-child 가상 클래스
첫 번째 자식 요소에만 스타일을 적용할 수 있는 선택자.
4. 링크 가상 클래스
상황에 따라 링크 스타일을 적용하는 방식.
1. :link - 방문하지 않은 링크
2. :visited - 방문한 링크
3. :hover - 마우스를 올려놓았을 경우
4. :active - 활성화 되었을 경우
5. :focus - 포커스가 생긴 경우
위의 순서대로 선언해야 함.
선택자 조합
1. 하위 선택자
상위 요소가 포함하고 있는 모든 하위 요소에 스타일을 지정할 때 하위 선택자를 사용할 수 있음.
하위 선택자 방식으로 조합할 때는 선택자와 선택자를 공백으로 구분하여 선언.
선택자 선택자 { 속성 : 값; }
div 요소 안의 p 요소에만 color 속성이 적용.
2. 자식 선택자
자식 선택자는 부모 요소의 바로 다음에 있는 자식 요소에 스타일을 적용하는 방법.
선택자와 선택자를 왼쪽 부등호(>)로 구분하여 선언.
IE6 같은 구버전 웹브라우저에서는 지원하지 않음.
선택자 > 선택자 { 속성 : 값; }
child 클래스가 적용된 div 요소의 자식 요소인 p 요소에만 ("동해물과 백두산이 마르고 닳도록") 부분만 적용.
다른 p 요소("하느님이 보우하사 우리나라만세") 부분은 자식이 아닌 손자이기 때문에 적용되지 않음.
3. 인접 형제 선택자
계층 구조로 접근했을 때 먼저 나오는 요소를 형 요소, 뒤에 나오는 요소를 동생요소라고 봄.
동생 요소에 스타일을 적용할 때 사용.
선택자 + 선택자 { 속성 : 값; } // 플러스기호(+)로 구분.
같은 동생 요소라 하더라도 인접한 형 요소가 없으면 두 번째 나오는 동생요소는 스타일이 적용되지 않음.
선택자 그룹화
다수의 요소에 똑같은 선언을 지정할 경우 같은 선언문을 반복해서 작성해야 하기 때문에 코드가 길어짐.
그룹화 하여 같은 선언문을 사용할 수 있음.
선택자, 선택자, 선택자 { 속성 : 값; } // 콤마로 나열함.
