본문 바로가기
프론트엔드/생활코딩

[생활코딩] CSS 6. 박스 모델 (레이아웃 제작)

by cejin 2023. 11. 5.

[생활코딩] CSS 목차
 
 

출처 : 생활코딩

 
두 번째 목표인 레이아웃 제작입니다.
박스모델을 이용하면 1차 작업을 끝낼 수 있습니다.
 
 

1. 박스 모델 (Box model)

- HTML 태그 하나하나를 박스로 취급
- 부피감 결정

 

1. 콘텐츠 (Contents)

1) width: 콘텐츠 폭
2) height: 콘텐츠 높이
 
 

2. 패딩 (padding)

- 콘텐츠 바깥쪽에 있는 테두리 사이 간격
 
 

3. 마진 (margin)

- 테두리와 테두리 사이
 
 
 

2. 실습

1. 결과

- 회색 선 그리기
1) 가로선: h1 태그
2) 세로선: ol 태그
 
 

2. 코드