3단계
3단계 — CSS, 보이는 모습
30 분
3단계 — CSS, 보이는 모습
HTML 이 무엇 이라면, CSS 는 어떻게 보일지 입니다. 색·여백·정렬·반응형까지 모두 CSS 한 가지로 다뤄요.
박스 모델 — 모든 요소는 네 겹
화면의 모든 요소는 안에서 밖으로 네 겹입니다.
[ margin (바깥 여백) ]
[ border (테두리) ]
[ padding (안쪽 여백) ]
[ content (내용) ]
.card {
margin: 16px;
padding: 12px 20px;
border: 1px solid #e2e8f0;
border-radius: 12px;
}
이 네 겹을 머릿속에 그려 두면 모든 레이아웃 디버깅이 쉬워져요.
Flexbox — 한 줄·한 열 정렬
가로 또는 세로 한 방향 정렬은 Flexbox 가 정답입니다.
.row {
display: flex;
gap: 12px; /* 사이 간격 */
align-items: center; /* 세로 가운데 */
justify-content: space-between; /* 좌우 끝으로 분산 */
}
gap, align-items, justify-content 셋만 알면 90% 의 레이아웃이 됩니다.
Grid — 2차원 레이아웃
행·열을 동시에 다루면 Grid:
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3열 균등 */
gap: 16px;
}
@media (max-width: 768px) {
.cards { grid-template-columns: 1fr; } /* 모바일은 1열 */
}
직접 해 보기
위 index.html (2단계의) 의 <head> 안에 다음 한 줄을 넣어 보세요.
<style>
body { font-family: system-ui, sans-serif; max-width: 640px; margin: 40px auto; }
h1 { color: #0ea5e9; }
</style>
새로고침하면 글이 가운데 모아지고 제목이 sky-blue 가 됩니다. CSS 의 첫 효과.
더 깊이
- CSS 노트
- Tailwind CSS 노트 — 클래스로 박는 CSS
다음 단계
4단계에서는 페이지를 움직이는 JavaScript 를 만나요.