[Nomad coder/코코아톡 클론코딩 7일차] box-sizing 종류와 특징(#6.10 ~ #6.20)

클론코딩 6일차 (#6.0 ~ #6.9--Border Box)

---

1. Box Sizing

박스의 크기를 정하는 기준을 변경할 때 사용한다.

 

→ content-box : content 영역을 기준으로 크기를 정한다.(default)

 

→ content는 사진에서 하늘색 부분(가운데)에 속한다.

 

→ border-box : border 영역을 기준으로 크기를 정한다.

 

→ border는 사진에서 노란색 부분(border)에 속한다.

 

 

 

 

---

1. content-box

초기 기본값(default)이다.

width와 height 속성이 content 영역만 포함한다.

→ width 속성값을 사용하면 content width만 변경된다.

→ heigth 속성값을 사용하면 content height만 변경된다.

 

ex) .box { width: 200px; border: 10px....}

width = 220px

---

2. border-box

width와 height 속성이 padding과 border를 포함하고, margin은 포함하지 않는다.

모든 element가 border의 크기를 width와 height로 사용할 수 있게 도와준다.

→ width 속성값을 사용하면 content width + padding + border width가 포함된다.

→ height 속성값을 사용하면 content height + padding + border width가 포함된다.

 

ex) .box { width: 200px; border: 10px....}

width = 200px

---

2. 느낀 점

box-sizing:border-box를 알기 전까지는 width, heigth를 하나하나 계산해서 해야 하나? 다른 쉬운 방법이 있을 텐데... 생각을 했었다. 역시 똑똑하시고 나보다 대단한 선배님들께서 간편한 방법을 만들어 두셨다. 처음부터 최신의 기술을 배우는 것보다, 불편함을 느껴보고 새로운 기술을 익혔을 때 이 기술이 얼마나 대단한지 더 와 닿는 것 같다. 처음부터 발전된 기술을 배우는것이 더 좋을 순 있지만, 이 기술이 나오게 된 이유가 분명 있을 테니, 그 이유를 생각하며 공부를 해 나가야겠다고 생각하게 되었다. 사이에 적당한 조율이 중요할것 같다.