| ์์ฑ | ์ค๋ช | ์์ |
|---|---|---|
color |
๊ธ์ ์์ | color: red; |
font-size |
๊ธ์ ํฌ๊ธฐ | font-size: 16px; |
font-weight |
๊ธ์ ๊ตต๊ธฐ (normal, bold, 100~900) |
font-weight: bold; |
font-family |
๊ธ๊ผด ์ข ๋ฅ | font-family: Arial, sans-serif; |
text-align |
์ ๋ ฌ (left, center, right) |
text-align: center; |
line-height |
์ค ๊ฐ๊ฒฉ | line-height: 1.5; |
letter-spacing |
๊ธ์ ๊ฐ๊ฒฉ | letter-spacing: 2px; |
text-decoration |
๋ฐ์ค ๋ฑ (none, underline, line-through) |
text-decoration: none; |
text-transform |
๋์๋ฌธ์ ๋ณํ (uppercase, lowercase, capitalize) |
text-transform: uppercase; |
| ์์ฑ | ์ค๋ช | ์์ |
|---|---|---|
width / height |
๋๋น / ๋์ด | width: 200px; |
padding |
์์ชฝ ์ฌ๋ฐฑ | padding: 10px; |
margin |
๋ฐ๊นฅ ์ฌ๋ฐฑ | margin: 20px; |
border |
ํ ๋๋ฆฌ | border: 1px solid black; |
box-sizing |
ํฌ๊ธฐ ๊ณ์ฐ ๋ฐฉ์ (content-box, border-box) |
box-sizing: border-box; |
| ์์ฑ | ์ค๋ช | ์์ |
|---|---|---|
background-color |
๋ฐฐ๊ฒฝ์ | background-color: #f0f0f0; |
background-image |
๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง | background-image: url('bg.jpg'); |
background-size |
์ด๋ฏธ์ง ํฌ๊ธฐ (cover, contain) |
background-size: cover; |
background-repeat |
๋ฐ๋ณต ์ฌ๋ถ | background-repeat: no-repeat; |
background-position |
๋ฐฐ๊ฒฝ ์์น | background-position: center; |
| ์์ฑ | ์ค๋ช | ์์ |
|---|---|---|
display |
์์ ์ ํ (block, inline, flex, none) |
display: flex; |
position |
์์น ์ง์ (static, relative, absolute, fixed) |
position: relative; |
top / left / right / bottom |
์์น ์กฐ์ | top: 10px; |
z-index |
์์ ์๋ ์์ | z-index: 10; |
float |
์ข์ฐ ๋์ | float: left; |
clear |
float ํด์ | clear: both; |
| ์์ฑ | ์ค๋ช | ์์ |
|---|---|---|
display |
Flexbox๋ก ์ค์ | display: flex; |
flex-direction |
๋ฐฉํฅ (row, column) |
flex-direction: row; |
justify-content |
์ฃผ์ถ ์ ๋ ฌ | justify-content: space-between; |
align-items |
๊ต์ฐจ์ถ ์ ๋ ฌ | align-items: center; |
gap |
์์ ๊ฐ ๊ฐ๊ฒฉ | gap: 10px; |
| ์์ฑ | ์ค๋ช | ์์ |
|---|---|---|
@media |
๋ฏธ๋์ด ์ฟผ๋ฆฌ (ํ๋ฉด ํฌ๊ธฐ ์กฐ๊ฑด) |
@media (max-width: 768px) {
body { font-size: 14px; }
}