CSS 레퍼런스 북
기본 선택자
| 속성 | 예시 | 설명 |
|---|---|---|
| 태그 선택자 | div {color:#fff} | div 태그를 선택해 텍스트의 색상을 흰색(#fff)으로 설정한다 |
| 클래스 선택자 | .test {color: #fff} | test라는 이름의 클래스를 선택해 텍스트의 색상을 흰색(#fff)으로 설정한다 |
| 아이디 선택자 | #testId {color: #fff} | testId라는 이름의 아이디를 선택해 텍스트의 색상을 흰색(#fff)으로 설정한다 |
| 그룹 선택자 | div, p, .class{color: #fff} | div 태그, p 태그, class 이름을 선택해 텍스트의 색상을 흰색(#fff)으로 설정한다 |
| 전체 선택자 | * {color: #fff} | 전체 태그를 선택해 텍스트의 색상을 흰색(#fff)으로 설정한다 |
계층 선택자
| 속성 | 예시 | 설명 |
|---|---|---|
| 하위 선택자 Description Selector |
div p {color: #fff} | div 태그 아래에 있는 모든 p 태그들의 텍스트의 색상을 흰색(#fff)으로 설정한다 |
| 자식 선택자 Child selector |
div > p {color: #fff} | div 태그 자식의 첫번째 p 태그의 텍스트의 색상을 흰색(#fff)으로 설정한다 |
| 형제 선택자 Sibling selector |
div ~ p {color: #fff} | |
| 인접 형제 선택자 Adjacent sibling selector |
div + p {color: #fff} |
| 종류 | 예시 | 설명 |
|---|---|---|
| [name] | a[href] | a 태그 속성 중에 href가 있으면 선택합니다. |
| [name="value"] | a[href="#header"] | a 태그 href 속성의 값이 '#header'이면 선택합니다. |
| [name~="value"] | a[href~="web"] | a 태그 href 속성의 값이 'web'을 포함한 요소를 선택합니다. |
| [name|="value"] | a[href|="web"] | a 태그 href 속성의 값이 'web'이거나 'web'으로 시작하는 요소를 선택합니다. |
| [name^="value"] | a[href^="web"] | a 태그 href 속성의 값이 'web'으로 시작하는 태그를 선택합니다. |
| [name*="value"] | a[href*="web"] | a 태그 href 속성의 값이 'web'이 포함되어 있는 태그를 선택합니다. |
| [name$="value"] | a[href$="com"] | a 태그 href 속성의 값이 'com'으로 끝나는 태그를 선택합니다. |
가상 선택자
| 종류 | 예시 | 설명 |
|---|---|---|
| ::first-line | p::first-line {color: #fff } | 해당하는 태그의 첫번째 줄의 텍스트의 색상을 흰색으로 설정한다 |
| ::first-letter | p::first-letter {color: #fff } | 텍스트의 첫번째 문자의 색상을 흰색으로 설정한다 |
| ::before | p::before {content: '시작'} | p 태그 내용 앞에 시작 텍스트를 추가 |
| ::after | p::after {content: '끝'} | p 태그 내용 뒤에 끝 텍스트 추가 |
| ::selection | p::selection {color: #red;} | 사용자가 드래그로 선택한 블록 전체나 일부의 텍스트 색상을 red로 설정 |
가상 클래스
| 종류 | 예시 | 설명 |
|---|---|---|
| :first-child | li:first-child {color: #fff;} | 첫번째 자식 li 태그 요소의 텍스트 색상을 흰색(#fff)으로 설정한다 |
| :last-child | p:last-child {color: #fff;} | 마지막 자식 요소인 p 태그의 텍스트 색상을 흰색으로 설정한다 |
| :first-of-type | p:first-of-type {color: #fff;} | 자식 요소들 중 첫번째 p 태그 요소일때 텍스트 색상을 흰색으로 설정한다 |
| :last-of-type | p:last-of-type {color: #fff;} | 자식 요소들 중 마지막 p 태그 요소 텍스트 색상을 흰색으로 설정한다 |
| :nth-child() | p:nth-child(2) | 자식 요소들중 2번째 p 태그를 선택한다 |
| :nth-last-child() | p:nth-last-child(3) | 자식 요소 중 가장 마지막 요소로부터 3번째 p 태그를 선택한다 |
| :nth-of-type() | p:nth-of-type(5) | p와 같은 유형의 5번째 태그를 선택한다 |
| :nth-last-of-type | p:nth-last-of-type | p 태그형태의 마지막 요소를 선택한다 |
| :only-child | p:only-child | 유일한 자식 요소를 선택한다 |
| :only-of-type | p:only-of-type | 유일한 자식 요소 p 태그를 선택한다 |
| :not() | p:not(".item") | 선택한 요소들 중 .item 클래스명이 붙은 태그를 제외한 나머지 p 태그를 선택한다 |
| :root | p:root | 문서의 루트 요소를 선택한다 |
| :empty | p:empty | 자식 요소가 없는 p 태그를 선택한다 |
링크 가상 선택자
| 속성 | 예시 | 설명 |
|---|---|---|
| :link | a:link {color: #fff;} | 방문하지 않은 링크의 텍스트 색상을 흰색으로 설정 |
| :visited | a:visited {color: #fff;} | 방문한 링크의 텍스트 색상을 흰색으로 설정 |
| :hover | a:hover {color: #fff;} | 마우스를 요소에 올려놓았을때 링크의 텍스트 색상을 흰색으로 설정 |
| :active | a:active {color: #fff;} |
폼 선택자
| 속성 | 예시 | 설명 |
|---|---|---|
| input:enabled | input:enabled{background-color: black;} | 사용 가능한 input 태그의 배경 색상을 검정색으로 설정한다 |
| input:disabled | input:disabled{background-color: black;} | 사용 불가능한 input 태그의 배경 색상을 검정색으로 설정한다 |
| input:focus | input:focus{background-color: black;} | 집중되고 있는 input 태그의 배경 색상을 검정색으로 설정한다 |
| input:placeholder | input:placeholder{background-color: black;} | input 태그의 예시 텍스트를 검정색으로 설정한다 |
| none | textarea {resize = "none";} | 사용자가 요소를 크기를 변경하지 못하게 한다 |
|---|---|---|
| horizontal | textarea {resize = "horizontal";} | 사용자가 요소를 수평 크기를 변경 가능하게 설정한다 |
| vertical | textarea {resize = "vertical";} | 사용자가 요소를 수직 크기를 변경 가능하게 설정한다 |
| both | textarea {resize = "both";} | 요소를 수평, 수직 크기를 모두 변경 가능하게 설정한다 |