CSS ( Cascating Style Sheets )의 약자로HTML 을 꾸밀때 사용하는 스타일 시트 언어다.
위와 같은 코드를 CSS 블록이라고 한다.
이번 챕터에서는 CSS 선택자에 대해 나오는데
이 선택자는 스타일 시트 뿐만 아니라 자바스크립트에서도 사용된다.
선택자 종류 | 선택자 형태 | 사용 예 |
전체 선택자 | * | * |
태그 선택자 | 태그 | h1 |
아이디 선택자 | #아이디 | #header |
클래스 선택자 | .클래스 | .item |
속성 선택자 | 선택자 [ 속성 = 값 ] | input [ type = text ] |
선택자 [ 속성 ~= 값 ] | div [ data - role ~= row ] | |
선택자 [ 속성 |= 값 ] | div [ data - role |= row ] | |
선택자 [ 속성 ^= 값 ] | div [ data - role ^= row ] | |
선택자 [ 속성 $= 값 ] | div [ data - role $= row ] | |
선택자 [ 속성 *= 값 ] | div [ data - role *= row ] | |
후손 선택자 | 선택자 선택자 | header h1 |
자손 선택자 | 선택자 > 선택자 | header > h1 |
반응 선택자 | 선택자 : active ( 눌렀을 때 ) | div : active |
선택자 : hover ( 하이퍼링크에 마우스 올릴때 ) | div:hover | |
상태 선택자 | : checked | input : checked |
: focus | input : focus | |
: enabled | input : inabled | |
: disabled | input : disabled | |
구조 선택자 | 선택자 : first - child | li : first-child |
선택자 : last - child | li : last-child | |
선택자 : nth - child ( 수열 ) | li : nth-child (2n+1) | |
선택자 : nth - last - child ( 수열 ) | li : nth-last-child(2n+1) | |
선택자 : first-of-type | li : first-of-type | |
선택자 : last-of-type | li : last-of-type | |
선택자 : nth-of-type( 수열 ) | li : nth-of-type (2n+1) | |
선택자 : nth-last-of-type ( 수열 ) | li : nth-last-of-type(2n+1) | |
동위 선택자 | 선택자 + 선택자 | h1 + div |
선택자 ~ 선택자 | h1 ~ div |
이 외에도 많은 선택자가 있다.
따로 외우기 보다 필요한게 있으면 그때마다
http://www.w3.org/TR/CSS 를 참고하자
첫번째로 선택자중 가장 중요한 "기본 선택자" 이다.
기본 선택자에는 총 4가지가 있다.
선택자 종류 | 선택자 형태 | 설명 |
전체 선택자 | * | HTML 문서 안에 있는 태그를 모두 선택 |
태그 선택자 | 태그 | HTML 페이지 내부의 특정 태그를 모두 선택 |
아이디 선택자 | #아이디 | 특정 id 속성이 있는 태그를 선택 ( id는 중복 불가 ) |
클래스 선택자 | .클래스 | 특정 클래스의 태그를 선택 |
다음은 "속성 선택자" 이다.
선택자[속성] 또는 선택자[속성=값]의 형태다.
선택자 종류 |
설명 |
선택자[속성] |
특정 속성의 태그를 선택 |
선택자[속성=값] |
특정한 속성 안에서 특정 값을 가진 태그를 선택 |
input 태그는 이름이 같지만 type 속성에 따라 형태가 달라지기 때문에 위와 같은 속성 선택자를 많이 사용한다.
ex ) input [type="text"] { background : green }
이어서 "후손 선택자"와 "자손 선택자" 이다.
햇갈릴 수도 있겠지만 말 그대로다.
부모 태그의 바로 자식 태그가 "자손 선택자" ( 딸, 아들 )그리고
자손 선택자의 내부에 있는 태그가 "후손 선택자" ( 손녀 손자 )이다.
선택자 종류 | 선택자 형태 | 설명 |
후손 선택자 | 선택자A 선택자B | 선택자A의 후손인 선택자 B |
자손 선택자 | 선택자A > 선택자B | 선택자 A의 자손인 선택자 B |
위의 두 선태자에서 주의할 사항이 있다.
이전 <table> 태그를 설명했을 때 말했듯이
table태그 사용시 자동으로 <tbody> 태그가 자동으로 추가 된다.
스타일 시트를 적용하려면 table > tbody > tr > th 를 입력해야한다.
혼동하기 쉬우므로 table태그의 스타일 시트로는 자손 선택자 사용을 줄이자.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | h2 { color: white; background: green; } li { list-style: none; float: left; padding-right: 10px; padding-bottom: 10px; } li>a:hover { color: gray; } #title { background: rgb(153, 204, 204); padding: 10px; } div h6{ color: rgb(255, 102, 102); } | cs |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!DOCTYPE html> <html> <head> <title> DODAM </title> <link rel="stylesheet" href="style.css"> </head> <body> <h2> 안녕 도담씨 :) </h2> <fieldset> <legend> CONTEXT </legend> <ul> <li> <a href="http://do-dam.tistory.com/category/Web%20Programming"># WEB PROGRAMMING </a></li> <li> # ANDROID </li> <li> # DAILY </li> <li> # PLAY GAME </li> </ul> </fieldset> <div> <h3 id="title"> 오늘의 도담씨 </h3> <p> 오늘은 먹고 자고 숨쉬기를 했다. <h6> 완전 신난다 XD </p> </p> </div> </body> </html> | cs |
'웹 프로그래밍' 카테고리의 다른 글
| CSS 속성 2편 ( display + 배경 속성 ) (1) | 2018.05.09 |
|---|---|
| CSS 속성 1편 ( 단위 + 박스 속성 ) (1) | 2018.05.08 |
| CSS 내부 스타일시트, 외부 스타일 시트 (1) | 2018.05.04 |
| HTML 입력 양식 태그 <form> <input> (0) | 2018.04.16 |
| HTML 멀티미디어 태그와 입력 양식 태그 (0) | 2018.04.15 |