CSS) [box-sizing: border-box] 화면 밖으로 요소가 벗어나는 경우

box-sizing 특성의 실용적인 측면만 포스팅 한다.

 

간단하게 원래의 특성에 대해 말하자면, box-sizing은 'Box의 크기를 어떤 것을 기준으로 계산할지'에 대한 것이다.

 

• content-box : 콘텐트 영역을 기준으로 크기를 정함
• border-box : 테두리를 기준으로 크기를 정함
• initial : 기본값으로 설정
• inherit : 부모 요소의 속성값을 상속

defalut는 content-box 이다.

 

하지만 content-box의 문제점이 있다.

 

기존의 특정 Box에 Padding 값을 부여한 상태에서 해당 Box 안의 요소에 특정 너비값을 준 경우가 그 예시에 속한다.

 

 

 

실제 실습 예시이다. 원래는 아이콘 4개가 보여야 하는데, 하나가 화면 밖으로 사라졌다.

 

 

이미 Padding으로 50px을 준 상태였다. 브라우저는 사용자가 이 padding값을 원했으니, 이 값을 유지한 채로 작업을 수행한다. 즉, padding값과 기존 컨텐츠의 너비를 모두 유지하려고 하는 것이다.

 

하지만 이건 사용자가 원하는 방식이 아니다. 이를 무시하고(포함하고) 적용시키기 위해서는

 

box-sizing: border-box;

 

위 코드가 필요하다.

 

padding값을 주지만, 기존의 Box 크기는 유지하고 싶다는 뜻이다.

 

 

결과적으로는 컨텐츠의 너비가 줄어들고, 의도한 Box의 크기는 유지하게 된다.

---

참고)

 

https://www.codingfactory.net/10630

 

https://nomadcoders.co/kokoa-clone/lectures/1781