box-sizing 관련 질문

Question

안녕하세요 이거 카드 만들기하다가, 음.. 이렇게 하면 안될꺼 같은데? 하고 하니까 안되더라구요. 그래서 코드를 다운받아서 제가 확인해보니 box-sizing이 border-box더라구요.  저는 default 값인 content-box를 주로 사용하고 있는데요,  저는 처음배울때부터 content-box를 그냥 사용해서 그냥 이렇게 사용하고 있었는데, 문득 이 둘의 장단? 에 대해서는 한번도 제대로 생각해본적이 없는거 같아요.  강사님이 border-box를 사용하시는 이유에 대해서 혹시 여쭤볼 수 있을까요? (위는 calc 사용해서 해결했습니다)

1분코딩 · Answer

저도 오래전에는 기본값인 content-box를 주로 사용했었는데요, 아주 오래된 구형 브라우저(IE7 이하)를 지원할 필요가 없어지면서부터는 border-box를 사용하는 빈도가 더 높아졌습니다. 잘 아시다시피 border-box가 width, height값을 더 명시적으로 세팅할 수 있기 때문에 많은 개발자들이 사용하고 있어서, 저도 자연스럽게 그렇게 했었던 것 같아요. 그래서인지 요즘 인기있는 CSS 라이브러리나 CSS 레이아웃 테마들도 border-box를 기본값으로 하는 경우가 많은 것 같더라고요.
그렇다고 content-box를 사용하지 말자는 이야기는 물론 아니고요, 비오님처럼 두가지의 차이를 명확히 이해하시고 상황에 맞게 사용하신다면 어느 방향이든 문제 없다고 생각합니다^^