[Do it! HTML+CSS+자바스크립트 웹 표준의 정석] 08 CSS 박스 모델

찬은·2025년 4월 16일

[Do it! HTML+CSS+자바스크립트 웹 표준의 정석]

목록 보기

8/15

08-1 CSS와 박스모델

블록 벨 요소와 인라인 레벨 요소

블록 레벨 요소(Block-level element)

한 줄 전체를 차지, 기본 너비는 100%
다른 요소가 양옆에 올 수 없음
대표 태그: <div>, <p>, <h1> ~ <h6> 등

인라인 레벨 요소(Inline-level element)

한 줄 전체를 차지하지 않음, 콘텐츠만큼만 공간 차지
한 줄에 여러 개 올 수 있음
대표 태그: <span>, <img>, <strong> 등

박스 모델의 기본 구성

Content (내용): 텍스트나 이미지가 들어가는 부분
Padding (패딩): 콘텐츠와 테두리 사이의 공간
Border (테두리): 박스의 경계선
Margin (마진): 박스와 다른 박스 사이의 간격

참고: 인라인 요소는 마진과 패딩이 제한적으로 적용됨

콘텐츠 영역의 크기를 지정하는 width, height 속성

width, height로 콘텐츠 영역의 크기를 지정
단위: px, %, em, auto 등

.box1 {
  width: 400px;
  height: 100px;
}

박스 모델의 크기를 계산하는 box-sizing 속성

width와 height에 무엇까지 포함할건지 정하는 속성

content-box (기본값)
- width, height는 콘텐츠만 포함
- padding, border는 추가로 더해짐
border-box
- width, height에 padding, border가 포함됨
- 실제 박스 크기 계산이 쉬워짐

.box2 {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 10px solid #000;
}
/* 실제 콘텐츠 너비 200 - 40(padding) - 20(border) = 140px */

박스 모델에 그림자 효과를 주는 box-shadow 속성

그림자 효과를 주는 속성

box-shadow: <수평 거리> <수직 거리) <흐림 정도> <번짐 정도> <색상> inset

08-2 테두리 스타일 지정하기

박스 모델의 방향 살펴보기

4방향: top, right, bottom, left
여러 값을 줄 땐 시계 방향(top → right → bottom → left)

테두리 스타일을 지정하는 border-style 속성

기본값: none
주요 값들:
- solid: 실선
- dotted: 점선
- dashed: 짧은 직선
- double: 이중선
- groove, ridge, inset, outset: 입체 효과

테두리 두께를 지정하는 border-width 속성

px로 직접 지정하거나 thin, medium, thick 사용
값 개수에 따라
- 1개: 모든 방향 동일
- 2개: 위/아래, 좌/우
- 3개: 위, 좌우, 아래
- 4개: top, right, bottom, left (시계 방향)

테두리 색상을 지정하는 border-color 속성

전체 지정: border-color: red;
개별 지정: border-top-color, border-left-color 등

테두리 스타일을 묶어 지정하는 border 속성

border: 3px dotted blue;

순서는 자유 (스타일, 색상, 두께 아무 순서나 가능)

꼭짓점을 둥글게 만드는 border-radius 속성

네 꼭짓점 모두 둥글게 만들기: border-radius: 25px;
원 만들기: 요소 너비와 높이 같게 설정 + border-radius: 50%;

꼭짓점마다 따로 둥글게 처리하기

각 꼭짓점 따로 지정: border-top-left-radius, border-top-right-radius 등
타원형으로 만들기:
- 한 꼭짓점: border-top-left-radius: 30px 10px;
- 전체: border-radius: 30px / 10px;

08-3 여백을 조절하는 속성

요소 주변의 여백을 설정하는 margin 속성

마진(margin)

요소 밖 여백 → 요소끼리 간격 조절 가능
기본형: margin: 값;
방향 지정: margin-top, margin-right, margin-bottom, margin-left
속성값
- px, % 등 크기
- auto: 브라우저가 자동 계산

margin 속성을 사용하여 웹 문서를 가운데 정렬하기

width 필수 설정
margin-left: auto; margin-right: auto; 사용
→ 수평 가운데 정렬

마진 중첩 이해하기

세로 배치 시 위/아래 마진이 겹침
- 예) 두 박스에 각각 margin: 30px → 사이 여백은 30px (60px 아님)
좌우 마진은 중첩 안 됨

콘텐츠와 테두리 사이의 여백을 설정하는 padding 속성

의미: 요소 안쪽 여백 → 콘텐츠와 테두리 사이 공간
사용 방법: margin이랑 같음
- padding, padding-top, padding-right 등
- 방향별 지정도 가능

08-4 웹 문서의 레이아웃 만들기

블록 레벨과 인라인 레벨을 바꾸는 display 속성

display

요소를 화면에 어떻게 보여줄지를 정하는 CSS 속성
블록 레벨 요소 ↔ 인라인 레벨 요소 변경 가능
주요 속성값:
- block: 블록 요소로 표시 (한 줄 전체 차지)
- inline: 인라인 요소로 표시 (내용 크기만큼 차지)
- inline-block: 인라인처럼 나란히 배치되지만, 블록처럼 width/height 지정 가능
- none: 화면에 표시되지 않음