브라우저의 렌더링 엔진은 문서의 레이아웃을 계산할 때
표준 CSS 기본 박스 모델에 따라 각각의 요소를 사각형 박스로
표현하며 CSS는 박스의 크기, 위치, 속성을 결정한다.
하나의 박스는 네 가지 영역으로 구성되고 각 영역의 이름을
콘텐츠, 내부 여백(패딩) 영역, 테두리 영역, 외부 여백(마진)영역이라 부른다.
CSS 박스의 예제 사진
바로 위에서 언급했던 네 가지 영역으로 분할된 것을 확인할 수 있다.
1. Content
- 요소의 텍스트나 이미지 등 실제 내용이 담기는 영역으로
너비(width)와 높이(height) 조정이 가능하다.
- width와 height는 각 요소의 너비와 높이를 조절하기 위해 사용되며
조절한 콘텐츠 영역보다 콘텐츠의 크기가 크다면 설정한 영역을 벗어나게 된다.아래 사진과 같이 영역을 벗어난 것을 확인할 수 있다.
2. Margin & Padding
마진과 패딩은 각각 외부 여백과 내부 여백을 지정할 때 사용하며
두 속성 모두 top, right, bottom, left 영역의 너비를 각각 조절할 수 있는데
속기법이란 방법을 사용하여 한 번에 지정할 수 있다.2-1. Margin & Padding 속기법
- padding: 10px;
== 상/하/좌/우 모두 10px 크기를 적용
- padding: 10px 20px;
== 상/하 (10px), 좌/우 (20px) 적용
- padding: 10px 20px 15px;
== 상 (10px) 좌/우 (20px) 하 (15px) 적용
- padding: 10px 15px 20px 25px;
== 상/우/하/좌 (시계 방향) 순서로 적용
<body> 태그는 기본 값으로 Margin을 갖고 있기 때문에
불필요한 공간 차지를 줄이기 위해 초기 값을 0으로 설정한다.Margin 값에 auto 값을 부여할 시 해당 요소를 웹페이지 가운데로 정렬한다.
요소의 너비가 웹 페이지의 너비가 클 경우 스크롤바가 생성되는데
이러한 문제는 max-width를 설정하여 해결할 수 있다.
3. Border (테두리)
border 속성을 통해 테두리 선의 스타일을 지정할 수 있으며
아래의 예제 코드와 실행 결과 사진은 border가 적용된 예시이다.
4. Box-sizing
해당 속성은 요소의 크기 계산 방식을 제어하며 두 가지 값을 가진다.
4-1. Content-box:
- 요소의 너비와 높이는 오로지 콘텐츠 영역만을 기준으로 하며
패딩과 테두리(Border)는 콘텐츠 너비와 높이에 추가된다.
- 아래는 "width: 100px; padding: 10px; border: 5px solid black"
경우의 예제 코드이며 실제 요소의 너비는
100px + 10px(좌/우 패딩) + 5px(좌/우 테두리) = 130px이다.
4-2. Border-box:
- 패딩과 테두리가 요소의 총 너비와 높이에 포함된다.
- 아래는 "width: 100px; padding: 10px; border: 5px solid black"
경우의 예제 코드이며 실제 요소의 너비는 100px로 유지되고
내부의 패딩과 테두리가 총 너비와 높이에 포함된다.
박스 모델 참고 블로그5. Inline 박스 모델
- 행 내부 요소 : inline 요소는 같은 줄에 나란히 배치되며 여러 inline 요소가 한 줄에 위치하고 줄 바꿈이 없다.
- 너비와 높이 : inline 요소는 width와 height 속성이 적용되지 않으며 크기는 콘텐츠에 따라 자동으로 조정된다.
- 패딩과 마진 : inline 요소의 padding과 margin은 좌우에만 적용된고 상하 패딩과 마진은 적용되지 않는다.
- 테두리 : inline 요소에 border를 적용하면 테두리는 요소의 내용 주위에만 적용된다.
- 박스 모델 : inline 요소는 박스 모델을 사용하긴 하지만 콘텐츠 영역만큼만 공간을 차지하고 box-sizing 속성이 content-box로 설정되면, 패딩과 테두리는 콘텐츠 영역에 추가로 쌓인다.
CSS 박스 이미지 인용 블로그
인라인 박스 모델 참고 블로그
컴공 편입 폴붕이의 일상
https://lowly-fireman-a84.notion.site/7-bfa9ed95180a49839469d1c0dfed9d17?pvs=74