К содержанию

CSS 참고서

쉽게 작성된 CSS 참고서로, 예제와 함께 꼭 필요한 내용뿐만 아니라 플렉스박스, 그리드, 애니메이션, 그라디언트, 변형 및 모든 최신 기능을 포함하고 있습니다!

가장 필요한 것

font-size 속성

font-style 속성

font-weight 속성

line-height 속성

font-family 속성

font 속성

text-indent 속성

text-align 속성

줄 바꿈

white-space 속성

word-break 속성

overflow-wrap 속성

overflow 속성

overflow-x 속성

overflow-y 속성

tab-size 속성

text-overflow 속성

hyphens 속성

line-clamp 속성

색상

color 속성

모서리 둥글게

border-radius 속성

속성 border-top-left-radius

border-top-right-radius 속성

border-bottom-left-radius 속성

border-bottom-right-radius 속성

윤곽선

outline 속성

outline-width 속성

outline-style 속성

속성 outline-color

outline-offset 속성

그림자

text-shadow 속성

box-shadow 속성

투명도

opacity 속성

visibility 속성

그라데이션

linear-gradient 함수

radial-gradient 함수

repeating-linear-gradient 함수

함수 repeating-radial-gradient

클리핑

clip 속성

clip-path 속성

속성 mask

속성 mask-position

mask-image 속성

속성 mask-mode

속성 mask-size

mask-repeat 속성

속성 mask-origin

mask-clip 속성

mask-composite 속성

테두리 이미지

border-image 속성

border-image-source 속성

border-image-slice 속성

border-image-repeat 속성

속성 border-image-outset

border-image-width 속성

마우스 작업

가상 요소 selection

user-select 속성 - 텍스트 선택 금지

pointer-events 속성

cursor 속성

스타일

!important 명령어

미디어 쿼리

supports 명령어

import 명령어

기본값 의사 클래스

:fullscreen 의사 클래스

:in-range 의사 클래스

의사 클래스 indeterminate

:invalid 의사 클래스

:optional 가상 클래스

out-of-range 의사 클래스

placeholder-shown 의사 클래스

read-only 가상 클래스

read-write 의사 클래스

required 의사 클래스

유효(valid) 의사 클래스

caret-color 속성

가상 클래스 focus-within

scroll-behavior 속성

목록

list-style-type 속성

속성 list-style-position

list-style-image 속성

list-style 속성

테이블

border-collapse 속성

border-spacing 속성

empty-cells 속성

table-layout 속성

링크

가상 클래스 link

가상 클래스 visited

가상 클래스 hover

의사 클래스 active

폼

포커스 가상 클래스

플레이스홀더 의사 요소

가상 클래스 checked

가상 클래스 disabled

enabled 의사 클래스

크기

width 속성

height 속성

속성 min-width

max-width 속성

min-height 속성

max-height 속성

여백

margin 속성

margin-top 속성

margin-bottom 속성

margin-left 속성

margin-right 속성

padding 속성

padding-top 속성

padding-bottom 속성

padding-left 속성

속성 padding-right

padding-block-end 속성

padding-block-start 속성

padding-inline-end 속성

padding-inline-start 속성

기타

box-sizing 속성

display 속성

resize 속성

aspect-ratio 속성

object-fit 속성

계산

calc 함수

clamp 함수

min 함수

max 함수

크기 단위

px 단위

em 단위

rem 단위

% 단위

fr 단위

vw 단위

CSS에서 크기를 위한 vh 단위

vmax 단위

vmin 단위

플렉스

flex-direction 속성

justify-content 속성

align-items 속성

flex-wrap 속성

flex-flow 속성

align-self 속성

속성 order

flex-basis 속성

flex-grow 속성

flex-shrink 속성

flex 속성

포지셔닝

position 속성

z-index 속성

backdrop 의사 요소

bottom 속성

top 속성

left 속성

right 속성

caption-side 속성

플로팅

float 속성

clear 속성

shape-outside 속성

shape-margin 속성

다중 칼럼

column-count 속성

column-rule 속성

속성 column-width

column-span 속성

columns 속성

부정

not 의사 클래스

위치별

의사 클래스 first-child

가상 클래스 last-child

의사 클래스 nth-child

가상 클래스 nth-last-child

의사 클래스 only-child

유형 및 위치별

가상 클래스 first-of-type

의사 클래스 last-of-type

의사 클래스 nth-of-type

의사 클래스 nth-last-of-type

의사 클래스 only-of-type

기타

가상 클래스 empty

lang 의사 클래스

타겟 의사 클래스

텍스트 일부

의사 요소 first-letter

의사 요소 first-line

부드러운 전환

transition-duration 속성

transition-delay 속성

transition-property 속성

transition-timing-function 속성

transition 속성

애니메이션

@keyframes 명령어

animation-name 속성

속성 animation-duration

animation-delay 속성

속성 animation-timing-function

animation-iteration-count 속성

속성 animation-direction

animation-fill-mode 속성

속성 animation-play-state

animation 속성

변형

transform 속성

transform-origin 속성

회전

rotate 함수

rotateX 함수

rotateY 함수

rotateZ 함수

rotate3d 함수

크기 조절

scale 함수

scaleX 함수

scaleY 함수

기울이기

skew 함수

skewX 함수

skewY 함수

이동

translate 함수

translateX 함수

translateY 함수

텍스트 삽입

가상 요소 after

가상 요소 before

content 속성

attr 함수

카운터

counter-increment 속성

counter-reset 속성

선택자

CSS 컨텍스트 셀렉터

CSS의 자식 선택자

CSS 인접 형제 선택자

CSS의 형제 선택자

CSS의 전체 선택자

선택자

속성 이름 선택자

속성 값 선택자

속성값 시작 부분 선택자

속성값 끝 부분 선택자

텍스트 기준 속성 선택자

속성 값 중 하나로 선택

값의 하이픈을 기준으로 하는 속성 선택자