[HTML/CSS] 04. CSS 박스 모델

🔍 inline과 block 방식

 

div와 span의 또 다른 차이점은, div와 달리 span 태그는 너비와 높이를 가지지 않는다는 것이다.

 

span은 inline 태그로 안에 content가 없으면 너비와 높이를 가지지 않는다.

그래서 span은 텍스트를 입력하는데만 사용되며 대부분의 작업은 div가 사용된다.

display: inline; // 인라인 방식으로 변경
display: block; // 블록 방식으로 변경

 

이 display 속성에 inline, block 등 값을 줘서 어떻게 동작할지 방식을 바꿔줄 수 있다.

 

 

 

🔍 CSS의 박스모델

• Contents : 콘텐츠 영역으로 텍스트 및 이미지의 실제 영역.
• Padding : 테투리와 콘텐츠 사이의 안쪽 여백.
• Border : 박스를 둘러싼 테투리 영역.
• Margin : 박스의 외부 영역으로 바로 주위 박스와의 여백.

 

테두리와 content 사이가 padding, 테두리 바깥쪽이 margin이다.

div {
    width: 300px;
    padding: 10px;
    border: 1px solid black;
    margin: 30px;
}

 

이렇게 속성값들을 주어 안쪽 여백, 바깥쪽 여백, 그리고 테두리 옵션에 대한 값들을 설정할 수 있다.

각 컴포넌트를 padding과 margin, border를 이용해 적절히 배치시키는 게 css.

 

 

 

🔍 <width>, <height>는 어떻게 계산될까?

 

box-sizing: content-box; (기본값)
box-sizing: border-box;

 

• content-box : Content Width는 콘텐츠만의 너비를 의미
• border-box : Content Width에 Padding과 Border가 포함

 

모든 박스 모델의 기본 box-sizing 옵션은 content-box다.

width와 height는 내부의 content을 기점으로 계산되는데, content-box 옵션은 오직 content 영역만 width, height 계산에 포함시키라는 의미다.

 

그래서 주어진 width, height 그대로 콘텐츠 영역의 크기가 된다.

반대로 border-box는 명시한 width, height에 padding, border가 포함되어 주어진 width, height보다 실제로 표시되는 콘텐츠 영역의 크기는 줄어든다.