기초) box model 개념 및 사이즈 측정법

 

 

 

기본 개념

 

 

 

1️⃣

Box level element

 

 

박스 레벨 요소 중 하나인

div로 예를 들어 보자면

 

 

<div>박스모델</div>

 

 

위와 같이 입력 후

출력을 해보면

 

 

'박스 모델'이라는

글자만 보일 뿐,

글자를 둘러싼

박스의 모양이나

크기는 보이지 않는데,

 

 

인라인 스타일 속성

<div style="">

이나

 

 

임베디드 스타일 요소

<style>

div { }

</style>

어느 것이 로든,

 

 

속성으로

border 값을 설정해 주면

 

 

현재 글자가 속해 있는

숨겨져 있던 박스의

총 범위가 보인다.

 

 

div { border:1px solid red;}

이런 식으로.

 

 

 

숨겨왔던 너에~

 

 

이게

박스의 기본 사이즈이고

 

 

box level element는

글자가 속해 있는

공간 전체를 사용한다.

 

 

참고로

inline level element는

딱 글자 사이즈만큼의

공간만 차지!

 

---

 

박스 사이즈 계산법

 

 

1️⃣padding

 

박스의 크기를

가로세로 100px로 만들어 보자.

 

 

div { width:98px; height:98px;

border: 1px solid red; }

 

 

이 경우 박스의 크기는 100*100!

 

 

하지만 위 코드에

패딩 값을 추가해 주면

 

 

div { width:98px; height:98px;

border: 1px solid red;

padding: 20px; }

 

 

박스 사이즈는

140*140 이 되고 만다.

 

 

?

 

 

 

출처 : 유튜브 리베하얀님 css1 박스모델 강의 중

 

 

 

padding 이란 바로

박스의 안쪽 여백!

 

 

큰 박스 안쪽 회색 부분이

패딩 영역인데 이 패딩 값은

박스 사이즈에 영향을 끼친다.

 

 

위 박스 사진처럼

박스 크기 가로 세로 100*100

을 유지하려면

 

 

내부에 들어가 있는 패딩 값,

각 20px을 계산하여

width/height 값을

설정해야 한다.

 

 

즉

 

 

div { width:58px; height:58px;

border: 1px solid red;

padding: 20px; }

 

 

 

잘 참고하여 사용하자!

 

 

 

 

같은 개념으로,

 

 

박스 크기를 계산할 때

잊지 말고 고려해야 하는

또 한 가지가 바로

 

 

border!

 

 

즉, 선 굵기가 달라지는 것 또한

고려하고 동일한 방법으로 계산하여

박스 크기를 설정해야 한다.

 

 

 

예)

border를 10px 설정하고

박스 사이즈 100*100 유지하려면,

 

 

div { width:40px; height:40px;

border: 10px solid red;

padding: 20px; }

 

 

 

*팁으로

margin은

박스 바깥쪽 여백이기 때문에

박스 사이즈에는

영향을 끼치지 않는다.