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-origin 속성은 요소의 움직임 방향을 정의합니다.
transform-style 속성은 요소의 움직임 스타일을 정의합니다.
perspective 속성은 3D를 표현할 때 원근점을 정의합니다.
perspective-origin 속성은 3D를 표현할 때 원근점의 방향을 정의합니다.
backface-visibility 속성은 요소의 뒷면을 정의합니다.
애니메이션 ainimation 속성은 애니메이션을 정의합니다.
ainimation-delay 속성은 요소가 로드된 후 애니메이션이 시작될 때 까지의 시간을 나타냅니다.
ainimation-duration 속성은 애니메이션 움직임 시간을 설정합니다.
ainimation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정합니다.
ainimation-name 속성은 애니메이션 keyframe 이름을 설정합니다.
ainimation-play-state 속성은 애니메이션 진행상태를 설정합니다.
ainimation-timing-fuction 속성은 움직임의 속도를 정의합니다.
@keyframes 속성은 애니메이션이 시작할 때부터 종료될 때까지의 동작을 설정합니다.
트랜지션 transiton 속성은 요소의 움직임을 일괄적으로 설정합니다.
transiton-delay 속성은 요소의 움직임 시간을 지연합니다.
transiton-duration 속성은 요소의 움직임 지속시간을 정의합니다.
transiton-property 속성은 transition의 적용 여부를 정의합니다.
transiton-timing-function 속성은 요소의 움직임 기능을 정의합니다.

백그라운드

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

박스 모델

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