CSS 레퍼런스 북

Alphabet

Topics

Transform

선택자

종류 예시 설명
태그 선택자 p {color:#fff;} p 태그를 선택하여 글씨 색을 하얀색으로 변경합니다.
클래스 선택자 .class {color:#fff;} class 클래스를 선택하여 글씨 색을 하얀색으로 변경합니다.
아이디 선택자 #id {color:#fff;} id 아이디를 선택하여 글씨 색을 하얀색으로 변경합니다.
그룹 선택자 p, div {color:#fff;} p 태그와 div 태그를 선택하여 글씨 색을 하얀색으로 변경합니다.
전체 선택자 * {color:#fff;} 전체 태그를 선택하여 글씨 색을 하얀색으로 변경합니다.

계층 선택자

종류 예시 설명
하위 선택자(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:#fff;} 드래그로 선택하였을 경우 글씨 색을 하얀색으로 변경합니다.

가상 클래스

종류 예시 설명
:first-child li:first-line {color:#fff;} li 자식 요소 중 첫 번째 자식 요소에게 컬러를 하얀색으로 변경합니다.
:last-child li:last-line {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() li:nth-child(2) {color:#fff;} li 자식 요소 중 2번째 자식 요소에게 컬러를 하얀색으로 변경합니다.
:nth-last-child() li:nth-last-child(2) {color:#fff;} li 자식 요소 중 뒤에서 2번째 자식 요소에게 컬러를 하얀색으로 변경합니다.
:nth-of-type() p:nth-of-type(2) {color:#fff;} 자식 요소 중 p 태그 2번째 자식 요소에게 컬러를 하얀색으로 변경합니다.
:nth-last-of-type() p:nth-last-of-type(2) {color:#fff;} 자식 요소 중 p 태그 뒤에서 2번째 자식 요소에게 컬러를 하얀색으로 변경합니다.
:only-child :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 태그가 체크되었을 때 글씨 색을 하얀색으로 변경합니다.
:focus input:link {color:#fff;} input 태그에 초점이 맞추어졌을 때 글씨 색을 하얀색으로 변경합니다.
:enabled input:enabled {color:#fff;} input 태그가 사용 가능하면 글씨 색을 하얀색으로 변경합니다.
:disabled input:disabled {color:#fff;} input 태그가 사용 가능하지 않으면 글씨 색을 하얀색으로 변경합니다.

애니메이션

종류 속성 설명
변형 transform transform 속성은 요소의 움직임을 일괄적으로 설정합니다.
transform-orgin transform-origin 속성은 요소의 움직임 방향을 설정합니다.
transform-style transform-style 속성은 요소의 움직임 스타일을 설정합니다.
perspective perspective 속성은 3D 위치 요소에 약간의 원근감을 주기 위해 z=0 평면과 사용자 사이의 거리를 결정합니다.
perspective-orgin perspective-origin 속성은 3D를 표현할 때 원근점의 방향을 정의합니다.
backface-visibility backface-visibility 속성은 요소의 뒷면을 정의합니다.
애니메이션 animation animation 속성은 애니메이션을 정의합니다.
animation-delay animation-delay 속성은 요소가 로드된 후 애니메이션이 시작될 때 까지의 시간을 나타냅니다.
animation-duration animation-duration 속성은 애니메이션 움직임 시간을 설정합니다.
animation-fill-mode animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정합니다.
animation-name animation-name 속성은 애니메이션 keyframe 이름을 설정합니다.
animation-play-state animation-play-state 속성은 애니메이션 진행상태를 설정합니다.
animation-timimg-fuction animation-timing-function 속성은 움직임의 속도를 정의합니다.
@keyframes @keyframes 속성은
트랜지션 transition transition 속성은 요소의 움직임 시간을 일괄적으로 설정합니다.
transition-delay transition-delay 속성은 요소의 움직임 지연 시간을 설정합니다.
transition-duration transition-duration 속성은 요소의 움직임 지속 시간을 설정합니다.
transition-property transition-property 속성은 요소의 움직임 속성을 설정합니다.
transition-timing-function transition-timing-function 속성은 요소의 움직임 기능을 설정합니다.

백그라운드

종류 속성 설명
백그라운드 background background 속성은
background-attachment background-attachment 속성은 배경 이미지의 고정 여부를 설정합니다.
background-blend-mode background-blend-mode 속성은 배경을 혼합했을 때의 상태를 설정합니다.
background-clip background-clip 속성은 백그라운드 이미지의 위치 기준점을 설정합니다.
background-color background-color 속성은 백그라운드 색을 설정합니다.
background-image background-image 속성은 백그라운드 이미지 및 배경 속성을 설정합니다.
background-origin background-origin 속성은 백그라운드 이미지의 위치 기준점을 설정합니다.
background-position background-position 속성은 백그라운드 이미지 위치 영역을 설정합니다.
background-repeat background-repeat 속성은 백그라운드 이미지의 반복 여부를 설정합니다.
background-size background-size 속성은 백그라운드 이미지의 사이즈를 설정합니다.

박스

종류 속성 설명
크기 width width 속성은 요소의 가로 값을 설정합니다.
height height 속성은 요소의 세로값을 설정합니다.
max-width max-width 속성은 요소의 최대 가로 값을 설정합니다.
max-height max-height 속성은 요소의 최대 세로값을 설정합니다.
min-width min-width 속성은 요소의 최소 가로 값을 설정합니다.
min-height min-height 속성은 요소의 최소 세로 값을 설정합니다.
마진 margin margin 속성은 박스 요소의 바깥 여백을 일괄적으로 설정합니다.
margin-top margin-top 속성은 박스 요소 위쪽의 바깥 여백을 설정합니다.
margin-right margin-right 속성은 박스 요소 오른쪽의 바깥 여백을 설정합니다.
margin-bottom margin-bottom 속성은 박스 요소 아래의 바깥 여백을 설정합니다.
margin-left margin-left 속성은 박스 요소 왼쪽의 바깥 여백을 설정합니다.
패딩 padding padding 속성은 박스 요소의 안쪽 여백을 일괄적으로 설정합니다.
padding-top padding-top 속성은 박스 요소 위쪽의 안쪽 여백을 설정합니다.
padding-right padding-right 속성은 박스 요소 오른쪽의 안쪽 여백을 설정합니다.
padding-bottom padding-bottom 속성은 박스 요소 아래의 안쪽 여백을 설정합니다.
padding-left padding-left 속성은 박스 요소 왼쪽의 안쪽 여백을 설정합니다.
보더 border border 속성은 테두리 속성을 일괄적으로 설정합니다.
border-color border-color 속성은 테두리 색 속성을 설정합니다.
border-style border-style 속성은 테두리 스타일 속성을 설정합니다.
border-width border-width 속성은 테두리 두께 속성을 설정합니다.
border-top border-top 속성은 테두리 위쪽 속성을 일괄적으로 설정합니다.
border-right border-right 속성은 테두리 오른쪽 속성을 일괄적으로 설정합니다.
border-bottom border-bottom 속성은 테두리 아래쪽 속성을 일괄적으로 설정합니다.
border-left border-left 속성은 테두리 왼쪽 속성을 일괄적으로 설정합니다.
border-top-color border-top-color 속성은 테두리 위쪽 색 속성을 설정합니다.
border-top-style border-top-style 속성은 테두리 위쪽 스타일 속성을 설정합니다.
border-top-width border-top-width 속성은 테두리 위쪽 두께 속성을 설정합니다.
border-right-color border-right-color 속성은 테두리 오른쪽 색 속성을 설정합니다.
border-right-style border-right-style 속성은 테두리 오른쪽 스타일 속성을 설정합니다.
border-right-width border-right-width 속성은 테두리 오른쪽 두께 속성을 설정합니다.
border-bottom-color border-bottom-color 속성은 테두리 아래쪽 색 속성을 설정합니다.
border-bottom-style border-bottom-style 속성은 테두리 아래쪽 스타일 속성을 설정합니다.
border-bottom-width border-bottom-width 속성은 테두리 아래쪽 두께 속성을 설정합니다.
border-left-color border-left-color 속성은 테두리 왼쪽 색 속성을 설정합니다.
border-left-style border-left-style 속성은 테두리 왼쪽 스타일 속성을 설정합니다.
border-left-width border-left-width 속성은 테두리 왼쪽 두께 속성을 설정합니다.
보더 이미지 border-image border-image 속성은 테두리 이미지 속성을 설정합니다.
border-image-outset border-image-outset 속성은 테두리 이미지 간격 속성을 설정합니다.
border-image-repeat border-image-repeat 속성은 테두리 이미지 반복 속성을 설정합니다.
border-image-slice border-image-slice 속성은 테두리 이미지 크기 속성을 설정합니다.
border-image-source border-image-source 속성은 테두리 이미지 경로 속성을 설정합니다.
border-image-width border-image-width 속성은 테두리 이미지 두께 속성을 설정합니다.
보더 레디우스 border-radius border-radius 속성은 테두리 굴곡을 설정합니다.
border-top-left-radius border-top-left-radius 속성은 윗부분 왼쪽 모서리 굴곡을 설정합니다.
border-top-right-radius border-top-right-radius 속성은 윗부분 오른쪽 모서리 굴곡을 설정합니다.
border-bottom-left-radius border-bottom-left-radius 속성은 아래부분 왼쪽 모서리 굴곡을 설정합니다.
border-bottom-right-radius border-bottom-right-radius 속성은 아래부분 오른쪽 모서리 굴곡을 설정합니다.
아웃라인 outline outline 속성은 아웃라인의 색, 스타일, 두께를 정의합니다.
outline-color outline-color 속성은 아웃라인의 색을 정의합니다.
outline-offset outline-offset 속성은 아웃라인의 간격을 정의합니다.
outline-style outline-style 속성은 아웃라인 스타일을 정의합니다.
outline-width outline-width 속성은 아웃라인의 두께를 정의합니다.
보더 테이블 border-collapse border-collapse 속성은 테이블의 테두리 분리 여부를 설정합니다.
border-spacing border-spacing 속성은 테이블의 테두리 간격을 설정합니다.
table-layout table-layout 속성은 표의 레이아웃 크기를 정의합니다.
empty-cells empty-cells 속성은 테이블의 빈요소의 속성을 설정합니다.
caption-side caption-side 속성은 caption의 위치를 설정합니다.