CSS에서 box-sizing을 왜 border-box로 하는걸까? (2022년)

시작하는 말

오늘은 CSS를 공부하며 알게된 지식을 공유해볼까 합니다. 지금의 저처럼 코드를 이제 막 배우기 시작하셨다면, 마진과 패딩 때문에 한 번 쯤은 답답함을 느끼셨으리라 생각됩니다. 내가 설정하지도 않은 마진과 패딩을 어떻게든 내가 원하는 상태로 만들기 위해 요리조리 만지다보면, 도대체 어떻게 된 노릇인지 내가 원하는대로 바뀌질 않을 때가 있죠. 뭐가 문제였을까요?

바로 초기 설정 값이 있었기 때문인데요. 이건 CSS Box Model 이라고 구글에 검색해보면 여러 정보들이 나옵니다. 우리는 이론적인 얘기보다는 당장 사용할 수 있는 좀 더 실용적인 방법을 알아야겠죠? 우선 이 초기 설정된 마진과 패딩을 전부 "0"으로 만들고, 경계의 기준을 컨텐츠(텍스트나 이미지 등등)가 아닌 경계선(border)으로 바꾸면 되는데 이건 좀 어려운 얘기라 차차 설명드릴게요! 자 그럼 기초적인 코딩 공부 시작해볼까요?

본문

마진과 패딩 때문에 골머리를 앓다가 제 지인인 유능한 개발자분께 여쭤보니, 이런 코드를 하나 알려주셨네요. 이 코드는 별모양으로 시작하더라고요. 이 별모양(*)은 한국말로는 전체 선택자, 유니버설 셀렉터 Universal Selector 라는 녀석인데, 쉽게 말하면 문서 전체에 적용시킬 때 사용하는 선택자인가봅니다. (처음..써봤다는..)

 

See the Pen Untitled by JI WON YOO (@yoojiwon7) on CodePen.

 

코드를 보면 너무 간단하죠? .저도 처음 코드를 받았을 때, 사실 마진과 패딩을 모두 제로로 만들어버린다는 것까지는 쉽게 이해가 되더라고요. 그런데 마지막 코드는 좀 낯설어서 물어봤어요. 박스 사이징이.. 뭐죠? "CSS Box Model" 이라고 검색해보니 다음 그림과 같이 나오더라고요.

figure1. CSS Box Model - Standard

이 그림을 보면, 우리가 아무 것도 건드리지 않고 코드를 사용할 경우, 컨텐츠(텍스트 혹은 이미지)를 기준으로 패딩과 마진이 설정된다는 것을 알 수 있어요. 딱히 문제점이 안 느껴지시나요? 저도 처음에는 그렇게 생각했습니다. 하지만, 문제는 border값에 두께를 줄 때 생깁니다. 이게 우리 머리를 복잡하게 만드는 주요 원인이 되는 것이죠. 예를 들어 border 값을 100px 을 주면, 우리는 인지구조상, border의 외곽 라인을 박스 크기로 인식하게 되는데요. 즉, 100px 바깥 외곽선까지를 박스의 가로(width)로 인지한다는 말입니다. 하지만 만약 figure1 처럼 생각할 경우, 그 border의 두께는 포함되지 않습니다. 이게 왜 문제가 되느냐? 만약 이 상태에서 우리가 코드를 입력해서 가로(width)나 세로(height)값을 우리가 원하는 값으로 지정할 때, 그 값이 같더라도 크기가 다르게 보이는 결과가 나오는 것입니다. 사실 오류는 아니고, 엄밀히 말하면, 인지상 차이가 나는 것이죠. 어쨌든 핵심은 아래 그림처럼 컨텐츠 뿐만 아니라 border까지 포함한 box가 width 와 height의 영향을 받게 만들어야 합니다.

figure2. CSS Box Model - border-box;

이렇게 border 포함해 기준으로 삼으면, 선 두께를 주더라도 두께의 외곽선까지가 박스 사이즈이기 때문에, 박스 사이즈를 에측하기 수월해집니다. 바로 이렇게 만드는 코드가 저 마지막 줄인 box-sizing: border-box; 인 것입니다. 이제 어렵지 않죠?

맺음말

결국 처음 질문인 왜 border-box 라는 코드를 사용하는지에 대한 답은 "이렇게 바꾸는 것이 우리 인지상 편하기 때문" 입니다. 사실 코드 세 줄에 불과하지만, 이 코드 세 줄 덕에 저는 더이상 패딩과 마진을 붙잡고 씨름하지 않게 되어 얼마나 고맙던지요. 이 글을 끝까지 보신 여러분들도 부디 도움이 되셨으면 좋겠습니다. 그럼 저는 다음 포스팅을 기약하며 마무리하겠습니다!