[CSS] box-sizing

1.  CSS
   • css box padding의 기본 원리
   • box-sizing: border-box;

---

 

navigation은 보통 ul로 나눠지고, 그 안에 많은 li들로 구성됨

구글도 navigation을 찾아서 ul의 li에 있는 link를 가져오게끔 설정되어 있음

 

vscode 단축키

nav>ul>li*개수>a (이후 tab만으로 편하게 작성 가능)

 

css box padding의 디폴트 원리
width가 200px인 box에 50px의 padding을 주면, css는 기존 box의 width를 유지하기 위해 padding의 크기만큼 박스를 늘리기 때문에 결과적으로 box의 크기는 250px이 됨

 

box-sizing: border-box;

css에게 padding을 줘도 box 사이즈를 늘리지 말라고 하는 것