CSS 레퍼런스 북

기본 선택자

CSS 레퍼런스 속성과 설명을 나타내는 표입니다.
속성 예시 설명
태그 선택자 태그명 {color : #fff} 태그를 선택하여 글씨 색을 하얀색으로 변경합니다.
클래스 선택자 .클래스명 {color : #fff} 클래스를 선택하여 글씨 색을 하얀색으로 변경합니다.
아이디 선택자 #아이디명 {color : #fff} ID를 선택하여 글씨 색을 하얀색으로 변경합니다.
그룹 선택자 태그명, 태그명 {color : #fff} 여러 태그를 그룹으로 선택하여 글씨 색을 하얀색으로 변경합니다.
전체 선택자 * {color : #fff} 모든 태그를 선택하여 글씨 색을 하얀색으로 변경합니다.

계층 선택자

CSS 레퍼런스 속성과 설명을 나타내는 표입니다.
속성 예시 설명
하위 선택자
(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 태그를 선택하여 글씨 색을 하얀색으로 변경합니다.

속성 선택자

CSS 레퍼런스 속성과 설명을 나타내는 표입니다.
종류 예시 설명
[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'으로 끝나는 태그를 선택합니다.

가상 선택자

CSS 레퍼런스 속성과 설명을 나타내는 표입니다.
속성 예시 설명
::first-letter p::first-letter {color: #fff;} p태그 요소의 첫 번째 글자를 흰색으로 변경합니다.
::before p::before {content: "시작";} p태그 요소의 바로 앞에 시작이라는 내용을 추가합니다.
::after p::after {content : "끝";} p태그 요소의 바로 뒤에 끝이라는 내용을 추가합니다.
::selection p::selection {color: red;} 사용자가 드래그한 요소의 글씨색을 red로 변경합니다.

가상 요소

CSS 레퍼런스 속성과 설명을 나타내는 표입니다.
속성 예시 설명
:first-child p:first-child {color: #fff;} 첫 번째 자식요소가 p태그라면 요소의 색을 흰색으로 변경합니다.
: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태그의 색을 흰색으로 변경합니다.