CSS 레퍼런스 북
| 속성 | 예시 | 설명 |
|---|---|---|
| 전체 선택자 | * { color: #fff} | 전체 태그를 선택하여 글씨 색을 하얀색으로 변경합니다. |
| 태그 선택자 | div { color: #fff} | div 태그를 선택하여 글씨 색을 하얀색으로 변경합니다. |
| 클래스 선택자 | .class { color: #fff} | class 클래스를 선택하여 글씨 색을 하얀색으로 변경합니다. |
| 아이디 선택자 | #id { color: #fff} | id 아이디를 선택하여 글씨 색을 하얀색으로 변경합니다. |
| 그룹 선택자 | div, p { color: #fff} | div 태그와 p 태그를 선택하여 글씨 색을 하얀색으로 변경합니다. |
| 속성 | 예시 | 설명 |
|---|---|---|
| 하위 선택자 (Descendant Selector) |
div p {color: #fff} | div 태그의 하위 p 태그를 선택하여 글씨 색을 하얀색으로 변경합니다. |
| 자식 선택자 (Child Selector) |
div > p {color: #fff} | div 태그의 모든 자식 중 첫번째 자식 p 태그를 선택하여 글씨 색을 하얀색으로 변경합니다. |
| 형제 선택자 (Sibling Selector) |
div ~ p {color: #fff} | div 태그의 인접한 형제 p 태그를 모두 선택하여 글씨 색을 하얀색으로 변경합니다. |
| 인접 형제 선택자 (Adjacent Sibling Selector) |
div + p {color: #fff} | div 태그의 인접한 형제 첫번째 p 태그를 선택하여 글씨 색을 하얀색으로 변경합니다. |
| 종류 | 예시 | 설명 |
|---|---|---|
| [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:'시작'} | 문단 시작 부분에 '시작'이라는 요소를 추가합니다. |
| ::after | p::after {content:'끝'} | 문단 끝 부분에 '끝'이라는 요소를 추가합니다. |
| ::selection | p::selection {color: red} | 드래그로 선택하였을 경우 글씨 색을 하얀색으로 변경합니다. |
| 종류 | 예시 | 설명 |
|---|---|---|
| :first-child | li:first-child {color: #fff} | li 자식 요소 중 첫 번째 자식 요소에게 컬러를 하얀색으로 변경합니다. |
| :last-child | li:last-child {color: #fff} | li 자식 요소 중 마지막 번째 자식 요소에게 컬러를 하얀색으로 변경합니다. |
| :first-of-type | p:first-of-type {color: #fff} | 자식 요소 중 p 태그 첫 번째 자식 요소에게 컬러를 하얀색으로 변경합니다. |
| :last-of-type | p:last-of-type {color: #fff} | 자식 요소 중 p 태그 마지막 번째 자식 요소에게 컬러를 하얀색으로 변경합니다. |
| :nth-child(2) | li:nth-child(2) {color: #fff} | li 자식 요소 중 2번째 자식 요소에게 컬러를 하얀색으로 변경합니다. |
| :nth-last-child(2) | li:nth-last-child(2) {color: #fff} | li 자식 요소 중 뒤에서 2번째 자식 요소에게 컬러를 하얀색으로 변경합니다. |
| :nth-of-type() | p:nth-of-type() {color: #fff} | 자식 요소 중 p 태그 2번째 자식 요소에게 컬러를 하얀색으로 변경합니다. |
| :nth-last-of-type() | p:nth-last-of-type() {color: #fff} | 자식 요소 중 p 태그 뒤에서 2번째 자식 요소에게 컬러를 하얀색으로 변경합니다. |
| :only-child | p:only-child {color: #fff} | 자식 요소 중 유일한 태그 자식 요소에게 컬러를 하얀색으로 변경합니다. |
| :only-of-type() | p:only-of-type() {color: #fff} | 자식 요소 중 유일한 p 태그 자식 요소에게 컬러를 하얀색으로 변경합니다. |
| :not() | li:not(:nth-child(2)) {color: #fff} | li 자식 요소 중 2번째 자식 요소를 제외하고 컬러를 하얀색으로 변경합니다. |
| :root | :root {color: #fff} | 기본 루트 요소의 컬러를 하얀색으로 변경합니다. |
| :empty | :empty {color: #fff} | 컨텐츠 요소가 없는 요소의 컬러를 하얀색으로 변경합니다. |
| 종류 | 예시 | 설명 |
|---|---|---|
| :link | a:link {color: #fff} | 방문하지 않는 링크의 글씨 색을 하얀색으로 설정합니다. |
| :visited | a:visited {color: #fff} | 방문한 링크의 글씨 색을 하얀색으로 설정합니다. |
| :hover | a:hover {color: #fff} | 링크 위에 마우스를 올려 놓았을 경우 글씨 색을 하얀색으로 설정합니다. |
| :active | a:active {color: #fff} | 링크가 활성화되었을 경우 글씨 색을 하얀색으로 변경합니다. |
| 종류 | 예시 | 설명 |
|---|---|---|
| :checked | input:checked {color: #fff} | input태그가 체크되었을때의 CSS설정해주는 선택자 |
| :focus | input:focus {color: #fff} | input태그에 초점을 받았을때의 CSS설정해주는 선택자 |
| :enabled | input:enabled {color: #fff} | input태그가 사용가능할 때의 CSS설정해주는 선택자 |
| :disabled | input:disabled {color: #fff} | input태그가 사용불가능할 때의 CSS설정해주는 선택자 |