CSS 속성 154개 사전
속성마다 무엇을 하는지, 자주 쓰는 값은 무엇인지, 자식에게 물려주는지를 한 줄로 정리했습니다.
배치11
요소를 어떤 상자로 다룰지, 넘칠 때 어떻게 할지 정하는 속성들입니다.
display요소를 어떤 상자로 다룰지 정합니다. 배치의 시작점이 되는 속성입니다.visibility보이거나 숨깁니다. hidden으로 숨겨도 자리는 그대로 차지합니다.float요소를 한쪽으로 띄워 글이 옆으로 흐르게 합니다. 지금은 flex와 grid가 대신합니다.clear앞선 float 아래로 내려가게 합니다.overflow넘치는 내용을 자를지 스크롤할지 정합니다.overflow-x가로로 넘칠 때만 따로 정합니다.overflow-y세로로 넘칠 때만 따로 정합니다.box-sizing너비에 테두리와 안쪽 여백을 포함할지 정합니다. border-box가 계산이 편합니다.aspect-ratio가로세로 비를 고정합니다. 한쪽만 정하면 나머지가 따라옵니다.container-type화면이 아니라 부모 상자의 크기에 따라 스타일을 바꿀 수 있게 합니다.isolation블렌드가 바깥으로 새지 않게 층을 따로 만듭니다.
플렉스·그리드24
요소를 줄 세우고 격자에 앉히는 속성들입니다. 오늘날 배치는 대부분 이 둘로 합니다.
flex-direction플렉스 항목을 가로로 놓을지 세로로 놓을지 정합니다.flex-wrap한 줄에 다 못 들어갈 때 줄을 바꿀지 정합니다.flex남는 자리를 어떻게 나눌지 한 번에 정합니다. flex: 1이면 고르게 나눕니다.flex-grow남는 자리를 얼마나 가져갈지 정합니다.flex-shrink자리가 모자랄 때 얼마나 줄어들지 정합니다. 0이면 안 줄어듭니다.flex-basis늘거나 줄기 전의 기준 크기입니다.justify-content주축 방향으로 항목들을 어떻게 늘어놓을지 정합니다.align-items교차축 방향으로 항목들을 어떻게 맞출지 정합니다. center가 세로 가운데입니다.align-self한 항목만 다르게 맞출 때 씁니다.align-content줄이 여러 개일 때 줄 사이를 어떻게 나눌지 정합니다.gap항목 사이의 간격입니다. 여백과 달리 바깥쪽에는 생기지 않습니다.row-gap줄과 줄 사이의 간격만 정합니다.column-gap칸과 칸 사이의 간격만 정합니다.orderHTML 순서를 그대로 두고 보이는 차례만 바꿉니다.grid-template-columns그리드의 칸을 몇 개, 어떤 너비로 만들지 정합니다.grid-template-rows그리드의 줄을 몇 개, 어떤 높이로 만들지 정합니다.grid-template-areas칸에 이름을 붙여 배치를 그림처럼 적습니다.grid-column한 항목이 가로로 몇 칸을 차지할지 정합니다.grid-row한 항목이 세로로 몇 줄을 차지할지 정합니다.grid-auto-flow자리를 지정하지 않은 항목을 어느 방향으로 채울지 정합니다.grid-auto-rows자동으로 생기는 줄의 높이를 정합니다.place-items가로와 세로 정렬을 한 번에 정합니다. center 하나로 가운데가 됩니다.place-content내용 덩어리 자체를 가로세로로 어디에 놓을지 정합니다.justify-items각 칸 안에서 항목을 가로로 어디에 둘지 정합니다.
상자와 여백16
크기와 여백입니다. 바깥 여백은 겹쳐 합쳐지고, 안쪽 여백에는 배경색이 칠해집니다.
width가로 크기입니다. 100%는 부모 기준, 100vw는 화면 기준입니다.height세로 크기입니다. auto면 내용만큼만 차지합니다.min-width이보다 좁아지지 않게 막습니다. 플렉스에서 0으로 두면 줄어들 수 있습니다.max-width이보다 넓어지지 않게 막습니다. 글줄 길이를 잡을 때 자주 씁니다.min-height이보다 낮아지지 않게 막습니다.max-height이보다 높아지지 않게 막습니다. 넘치면 overflow가 처리합니다.margin바깥 여백입니다. 위아래는 서로 겹쳐 하나로 합쳐집니다.margin-top위쪽 바깥 여백입니다.margin-right오른쪽 바깥 여백입니다. auto를 주면 왼쪽으로 밀립니다.margin-bottom아래쪽 바깥 여백입니다.margin-left왼쪽 바깥 여백입니다. 좌우를 auto로 두면 가운데 정렬이 됩니다.padding안쪽 여백입니다. 배경색이 여기까지 칠해집니다.padding-top위쪽 안 여백입니다.padding-right오른쪽 안 여백입니다.padding-bottom아래쪽 안 여백입니다. 비율로 주면 높이를 만드는 데도 쓰입니다.padding-left왼쪽 안 여백입니다.
글자25
글꼴과 줄 간격, 정렬처럼 읽히는 모양을 정합니다. 대부분 자식에게 물려집니다.
font-size글자 크기입니다. rem은 뿌리 글자 크기의 배수라 확대 설정을 따라갑니다.font-family글꼴을 정합니다. 앞의 것이 없으면 뒤로 넘어가므로 마지막에 갈래를 적습니다.font-weight글자 굵기입니다. 400이 보통, 700이 굵게입니다.font-style기울임 여부를 정합니다.font글꼴 관련 값을 한 줄에 몰아 적습니다. 빠뜨린 값은 기본값으로 되돌아갑니다.line-height줄 간격입니다. 단위 없이 1.5처럼 적는 편이 물려줄 때 안전합니다.letter-spacing글자 사이 간격입니다. 큰 제목에서 살짝 좁히면 정돈돼 보입니다.word-spacing낱말 사이 간격입니다.text-align글의 좌우 정렬을 정합니다.text-decoration밑줄이나 취소선을 붙입니다. 링크의 기본 밑줄을 없앨 때도 씁니다.text-decoration-line어떤 줄을 그을지만 정합니다.text-decoration-color그 줄의 색만 따로 정합니다.text-decoration-style줄의 모양을 정합니다. wavy는 맞춤법 검사처럼 물결선입니다.text-transform대소문자를 강제로 바꿉니다. 화면만 바뀌고 원래 글자는 그대로입니다.text-indent첫 줄을 들여씁니다.text-overflow넘치는 글을 말줄임표로 잘라 보여 줍니다. overflow와 nowrap이 함께 있어야 합니다.text-shadow글자에 그림자를 답니다. 밝은 배경 위 흰 글씨를 살릴 때 씁니다.white-space공백과 줄바꿈을 어떻게 다룰지 정합니다. nowrap이면 한 줄로 이어집니다.word-break긴 낱말을 어디서 자를지 정합니다. keep-all은 한국어에서 낱말이 쪼개지지 않게 합니다.overflow-wrap줄을 넘기지 못하는 긴 문자열을 강제로 넘깁니다. 긴 주소에 씁니다.writing-mode글의 흐름 방향을 바꿉니다. 세로쓰기에 씁니다.vertical-align한 줄 안에서 위아래로 어디에 맞출지 정합니다. 표 칸에서도 쓰입니다.font-variant-numeric숫자 모양을 고릅니다. tabular-nums는 자릿수를 맞춰 표에서 흔들리지 않게 합니다.hyphens줄 끝에서 낱말을 붙임표로 나눌지 정합니다. 언어 설정이 있어야 동작합니다.text-wrap줄을 어떻게 나눌지 정합니다. balance는 제목의 줄 길이를 고르게 맞춥니다.
색과 배경13
글자색과 배경색, 그러데이션과 투명도입니다.
color글자 색입니다. currentColor는 이 값을 그대로 물려받습니다.background-color배경색입니다. 안쪽 여백까지 칠해집니다.background-image배경에 그림이나 그러데이션을 깝니다. 여러 장을 겹칠 수도 있습니다.background-size배경 그림의 크기입니다. cover는 빈틈없이 채우고 contain은 다 보이게 넣습니다.background-position배경 그림을 어디에 둘지 정합니다.background-repeat배경 그림을 반복할지 정합니다.background-attachment배경이 스크롤을 따라갈지 붙어 있을지 정합니다.background배경 관련 값을 한 줄에 몰아 적습니다. 빠뜨린 값은 기본값으로 되돌아갑니다.background-clip배경을 어디까지 칠할지 정합니다. text로 두면 글자 모양으로 잘립니다.opacity전체 투명도입니다. 자식까지 함께 흐려집니다.mix-blend-mode아래 요소와 색을 섞는 방식을 정합니다.accent-color체크박스나 라디오처럼 브라우저가 그리는 부분의 색을 정합니다.color-scheme밝은 화면과 어두운 화면 중 어느 쪽을 지원하는지 알립니다.
테두리13
테두리와 모서리, 그림자입니다. outline은 자리를 차지하지 않습니다.
border테두리 굵기·모양·색을 한 줄에 적습니다.border-width테두리 굵기만 정합니다.border-style테두리 모양만 정합니다. 이 값이 없으면 테두리가 안 보입니다.border-color테두리 색만 정합니다.border-top위쪽 테두리만 정합니다.border-bottom아래쪽 테두리만 정합니다. 목록 구분선에 자주 씁니다.border-radius모서리를 둥글게 깎습니다. 50%면 원, 9999px면 알약 모양이 됩니다.outline테두리 바깥에 그리는 선입니다. 자리를 차지하지 않아 키보드 초점 표시에 씁니다.outline-width그 선의 굵기만 정합니다.outline-style그 선의 모양만 정합니다.outline-color그 선의 색만 정합니다.outline-offset그 선을 요소에서 얼마나 띄울지 정합니다.box-shadow상자에 그림자를 답니다. inset을 붙이면 안쪽으로 들어갑니다.
효과7
흐림·자르기·채우기처럼 다 그린 뒤에 거는 효과입니다.
filter흐림·흑백·밝기 같은 효과를 겁니다. 여러 개를 이어 쓸 수 있습니다.backdrop-filter요소 뒤쪽 화면에 효과를 겁니다. 반투명 유리 느낌을 만들 때 씁니다.clip-path요소를 정해진 모양으로 잘라 냅니다.mask-image그림의 밝기에 따라 요소를 가립니다. 가장자리를 부드럽게 사라지게 할 때 씁니다.object-fit그림이나 영상을 상자에 어떻게 채울지 정합니다. cover가 잘라서 채우기입니다.object-position잘릴 때 어느 부분을 남길지 정합니다. 인물 사진에서 얼굴을 살릴 때 씁니다.image-rendering확대할 때 부드럽게 할지 또렷하게 할지 정합니다. 도트 그림에는 pixelated를 씁니다.
변형과 움직임14
옮기고 돌리고 부드럽게 잇습니다. 배치를 건드리지 않아 화면이 덜 흔들립니다.
transform옮기고 돌리고 키웁니다. 자리는 그대로 두고 그림만 움직이므로 배치가 흔들리지 않습니다.transform-origin돌리거나 키울 때의 기준점입니다.transition값이 바뀔 때 부드럽게 이어 줍니다. 무엇을 얼마 동안 어떻게 바꿀지 한 줄에 적습니다.transition-property어떤 속성을 부드럽게 바꿀지 정합니다. all은 편하지만 느려질 수 있습니다.transition-delay시작을 얼마나 미룰지 정합니다.transition-duration바뀌는 데 걸리는 시간입니다. 0.2초 안팎이 자연스럽습니다.transition-timing-function빠르기의 흐름을 정합니다. ease는 시작과 끝이 부드럽습니다.animation정해 둔 키프레임을 재생합니다. 이름·시간·반복을 한 줄에 적습니다.animation-name재생할 키프레임의 이름입니다.animation-timing-function움직임의 빠르기 흐름입니다. steps로 두면 뚝뚝 끊깁니다.animation-duration한 번 도는 데 걸리는 시간입니다.animation-iteration-count몇 번 반복할지 정합니다. infinite면 멈추지 않습니다.will-change곧 바뀔 속성을 미리 알려 브라우저가 준비하게 합니다. 남발하면 오히려 느려집니다.perspective3차원 변형의 원근감을 정합니다. 값이 작을수록 과장됩니다.
위치7
요소를 흐름에서 떼어 원하는 자리에 놓습니다. 앞뒤는 z-index로 정합니다.
표4
표의 테두리와 칸 너비를 다루는 속성들입니다.
목록4
목록 기호의 모양과 자리를 정합니다.
조작9
마우스와 손가락, 스크롤에 어떻게 반응할지 정합니다.
cursor마우스 포인터 모양을 정합니다. 누를 수 있는 것에는 pointer를 씁니다.pointer-events마우스 입력을 받을지 정합니다. none이면 클릭이 뒤로 통과합니다.user-select글자를 드래그해 선택할 수 있는지 정합니다.touch-action터치 제스처를 브라우저가 처리할지 정합니다. manipulation은 더블탭 확대를 없앱니다.scroll-behavior스크롤을 부드럽게 할지 정합니다.scroll-snap-type스크롤이 정해진 자리에 착 붙게 합니다. 가로 목록에 자주 씁니다.overscroll-behavior끝까지 스크롤했을 때 부모까지 움직일지 정합니다. contain이면 안에서 멈춥니다.resize사용자가 크기를 바꿀 수 있게 할지 정합니다. textarea에서 자주 씁니다.caret-color입력 칸의 깜빡이는 커서 색을 정합니다.
인쇄·기타7
인쇄와 자동 번호 매기기처럼 나머지 쓰임입니다.
page-break-after인쇄할 때 이 뒤에서 쪽을 넘길지 정합니다.break-inside인쇄나 다단에서 요소 가운데가 잘리지 않게 막습니다.content::before나 ::after로 만들어 넣을 내용입니다. 빈 따옴표만 두는 일도 많습니다.counter-reset번호 매기기를 시작하거나 되돌립니다.counter-increment번호를 하나 올립니다. content와 짝을 이뤄 목차 번호를 만듭니다.quotesq 태그가 쓸 따옴표 모양을 언어에 맞게 정합니다.all그 요소의 모든 속성을 한 번에 되돌립니다. 낯선 스타일을 지울 때 씁니다.
읽는 방법
- 상속되는 속성은 부모에 한 번만 적으면 자식이 모두 물려받습니다. 글자에 관한 속성이 대부분 그렇습니다.
- 단축 속성은 적지 않은 값을 기본값으로 되돌립니다. background: red만 쓰면 앞서 넣은 배경 그림도 함께 지워집니다.
- 같은 요소에 규칙이 겹치면 더 구체적인 선택자가 이깁니다. 구체성이 같을 때만 나중에 적힌 것이 이깁니다.
- 움직임은 transform과 opacity로 만드는 편이 부드럽습니다. width나 top을 바꾸면 배치를 다시 계산해야 합니다.
자주 묻는 질문
Q. CSS 속성은 모두 몇 개인가요?
표준에 올라 있는 것만 500개가 넘지만, 실제로 손이 가는 것은 그중 일부입니다. 여기에는 화면을 만들 때 반복해서 쓰게 되는 154개를 갈래별로 실었습니다.
Q. 상속된다는 게 무슨 뜻인가요?
부모에 적으면 자식이 따로 적지 않아도 같은 값을 쓴다는 뜻입니다. 글꼴·글자색·줄 간격처럼 글에 관한 속성이 대부분 그렇고, 여백이나 테두리는 물려주지 않습니다.
Q. 단축 속성을 쓰면 뭐가 달라지나요?
한 줄로 여러 값을 정할 수 있지만, 적지 않은 값은 기본값으로 되돌아갑니다. background: red만 쓰면 앞서 넣은 배경 그림이 함께 지워지는 것이 그 때문입니다.
Q. 같은 속성을 두 번 적으면 어느 쪽이 이기나요?
선택자가 얼마나 구체적인지를 먼저 봅니다. id가 class보다, class가 태그보다 셉니다. 구체성이 같을 때만 나중에 적힌 것이 이깁니다. !important는 그 판을 뒤집지만 쓰지 않는 편이 낫습니다.
Q. px과 rem 중 무엇을 써야 하나요?
rem은 뿌리 글자 크기의 배수라, 사용자가 브라우저에서 글자를 키우면 함께 커집니다. 글자와 여백에는 rem이 안전하고, 얇은 테두리처럼 늘 같아야 하는 값에는 px이 낫습니다.