05 장 CSS3 선택자
1. 선택자개요 2. 기본선택자 3. 속성선택자 4. 후손선택자와자손선택자 5. 반응 / 상태 / 구조선택자
CSS 블록을생성할수있다. 선택자를이해하고적절한선택자를활용할수있다.
1 선택자개요 CSS3 선택자 특정한 HTML 태그를선택할때사용하는기능 선택한태그에원하는스타일이나스크립트적용가능 그림 5-1 CSS 블록 CSS 블록 style 태그내부에입력 스타일시트 style 태그내부에입력하는코드
1 선택자개요 표 5-1 CSS3 선택자 선택자종류 선택자형태 사용예 전체선택자 * * 태그선택자 태그 h1 아이디선택자 # 아이디 #header 클래스선택자. 클래스.item 속성선택자 선택자 [ 속성 = 값 ] input[type = text] 선택자 [ 속성 ~= 값 ] div[data-role ~= row] 선택자 [ 속성 = 값 ] div[data-role = row] 선택자 [ 속성 ^= 값 ] div[data-role ^= row] 선택자 [ 속성 $= 값 ] div[data-role $= 9] 선택자 [ 속성 *= 값 ] div[data-role *= row] 후손선택자 선택자선택자 header h1 자손선택자 선택자 > 선택자 header > h1 반응선택자 선택자 :active div:active 선택자 :hover div:hover...
2 기본선택자 표 5-2 기본선택자 선택자종류선택자형태설명 전체선택자 * HTML 문서안에있는태그를모두선택 태그선택자태그 HTML 페이지내부의특정태그를모두선택 아이디선택자 # 아이디 클래스선택자. 클래스 특정 id 속성이있는태그를선택. 특정태그하나를선택할때사용 특정클래스가있는태그를선택
기본예제 5-1 전체선택자와태그선택자익히기 1. 전체선택자적용하기 모든태그의 color 스타일속성을 red 로변경 [ 코드 5-1] 과같이작성 2. 태그선택자적용하기 h1 태그, p 태그에스타일적용 [ 코드 5-2] 와같이작성
2 기본선택자 한꺼번에여러개의선택자를입력하여스타일속성적용 -> 쉼표사용 코드 5-3 여러개의선택자사용 (reference_multi.html)
기본예제 5-2 아이디선택자익히기 예제의포인트 공간분할태그에아이디선택자를사용하여 id 속성을적용 [ 코드 5-4] 와같이작성 NOTE_id 속성중복 id 속성이중복되면해당 id 속성을표시한모든태그에스타일이적용됨. 스타일시트에서는문제가없지만자바스크립트에서는 id 속성이중복되면문제가발생하므로주의!
기본예제 5-3 클래스선택자익히기 예제의포인트 클래스선택자로특정한클래스를가지고있는태그를선택 [ 코드 5-6] 과같이작성 NOTE_ 여러개의클래스선택자사용 class 속성은공백으로구분하여클래스를여러개사용가능 NOTE_ 태그선택자와클래스선택자 id 속성은중복되지않아야하지만 class 속성은중복될수있음. class 속성이서로다른태그에적용되는경우선택자와클래스선택자를함께사용해서더정확하게태그선택가능.
3 속성선택자 속성선택자 특정속성과값을가지는태그를선택할때사용 속성과같은 [ ] 괄호를이용 표 5-3 속성선택자 선택자형태 선택자 [ 속성 ] 설명 특정한속성이있는태그를선택 선택자 [ 속성 = 값 ] 특정한속성안의값이특정값과같은태그를선택
기본예제 5-4 속성선택자익히기 예제의포인트 속성선택자를사용해 input 태그선택 [ 코드 5-9] 와같이작성
4 후손선택자와자손선택자 그림 5-3 자손선택자와후손선택자 자손 div 태그를기준으로 h1, h2, ul 태그 후손 div 태그아래모든태그
4.1 후손선택자 후손선택자 특정한태그의후손을선택할때사용 표 5-4 후손선택자선택자형태설명선택자A 선택자B 선택자A의후손인선택자B 선택
기본예제 5-5 후손선택자익히기 예제의포인트 후손선택자를사용해특정한대상의후손이라는것을구별 [ 코드 5-10] 과같이작성
4.1 후손선택자 여러개의선택자를함께사용할때주의사항 코드 5-11 후손선택자주의사항 1 (reference_descendants1.html) header 태그의후손인 h1 태그를선택하고일반적인 h2 태그를선택 코드 5-12 후손선택자주의사항 2 (reference_descendants2.html) header 태그의후손인 h1 태그와 header 태그의후손인 h2 태그선택
4.2 자손선택자 자손선택자 특정한태그의자손을선택할때사용 표 5-5 자손선택자 선택자형태 선택자 A > 선택자 B 설명 선택자 A 의자손인선택자 B 선택
기본예제 5-6 자손선택자익히기 예제의포인트 #nav 태그아래에있는 h1 태그는후손이지자손은아니기때문에스타일이적용되지않음 [ 코드 5-13] 과같이작성
4.2 자손선택자 table 태그의요소를선택할때주의점 자손선택자사용시번거로움 웹브라우저가 tbody 태그를자동으로추가하므로스타일속성이적용되지않음 그림 5-5 요소검사결과
5.1 반응선택자 반응선택자 사용자의반응으로생성되는특정한상태를선택 표 5-6 반응선택자 선택자형태 :active :hover 설명 사용자가마우스로클릭한태그선택 사용자가마우스커서를올린태그선택
기본예제 5-7 반응선택자익히기 예제의포인트 마우스커서의움직임에따라다른스타일적용 [ 코드 5-15] 와같이작성
5.2 상태선택자 상태선택자 입력양식의상태를선택할때사용 표 5-7 상태선택자 선택자형태 :checked :focus :enabled :disabled 설명체크상태의 input 태그선택초점이맞추어진 input 태그선택사용가능한 input 태그선택사용불가능한 input 태그선택 그림 5-6 checked 상태 그림 5-7 focus 상태
기본예제 5-8 상태선택자익히기 [ 코드 5-16] 과같이작성 NOTE_ 스타일시트주석 HTML5 의주석형태 : <! 주석 > 스타일시트의주석형태 : /* 주석입니다. */
5.3 구조선택자 구조선택자 특정한위치에있는태그를선택할때사용 표 5-8 구조선택자 선택자형태 :first-child :last-child :nth-child( 수열 ) :nht-last-child( 수열 ) 설명형제관계에서첫번째로등장하는태그선택형제관계에서마지막으로등장하는태그선택형제관계에서앞에서수열번째로등장하는태그선택형제관계에서뒤에서수열번째로등장하는태그선택
기본예제 5-9 구조선택자익히기 예제의포인트 첫번째태그와마지막태그는둥근테두리가적용 홀수와짝수번째에각각다른색상의스타일이적용 [ 코드 5-17] 과같이작성
5.3 구조선택자 구조선택자주의사항 [ 코드 5-18] 과같이작성시전체태그에붉은색이적용됨 첫번째의 a 태그에만붉은색을적용하려면 코드 5-19 올바른구조선택자사용 (reference_structureture.html)