CSS 박스 모델에 대하여 알아보자.

안녕하세요! CSS 깎는 개발자 김피노입니다 😇

이 시리즈에서는 디자이너와 개발자가 협업하면서 한번쯤은 겪는 문제와, 그에 대한 제 해결방법을 공유해보는 포스트 입니다.

이번에는 CSS Box Model에 대하여 알아보도록 하겠습니다 :)

개발자와 디자이너의 가장 큰 차이점

CSS Box Model과 디자인 객체의 가장 큰 차이점이라고 한다면,
디자인 객체는 내부 여백이 없지만, CSS Box Model은 내부 여백이 있다는 점이 가장 큰 차이점입니다.
이 말은 곧, "특정 디자인을 가진 상자를 만들 때, 디자이너와 개발자가 만드는 방식이 다른다" 라는 뜻입니다.

📦 박스를 만들어 봅시다.

예시를 하나 들어보죠, 우리는 길이 500px의 주황색 배경을 가진 내부에 여백이 조금 있는 안녕하세요라는 글씨가 적힌 버튼을 하나 만들고자 합니다.

🎨 디자이너는...

이 경우 디자이너 여러분들은 어떻게 박스를 만드시나요?
먼저 레이어를 하나 만들고, 배경을 칠한 다음, 텍스트 툴을 사용하여 "안녕하세요" 라고 적고, 배경 속 적절한 위치에 드래그를 해 만들 것입니다.

🖥 개발자는...

또 개발자들은 어떤 방식으로 박스를 만들까요?
먼저, html 파일에 div 객체를 추가해줍니다.

<div> 안녕하세요 </div>

그리고 css를 추가해줍니다.

div {
  /* 배경화면 색 지정 */
  background-color : orange;
  
  /* 넓이 지정 */
  width : 500px;
  
  /* 내부 여백 지정 */
  padding : 5px 15px;
}

css의 padding을 추가하는 과정에서 디자이너와 개발자의 가장 큰 차이가 나타나게 됩니다.

차이점

내부 간격을 설정할 때 디자이너는 마우스를 사용하여 적절한 위치에 드래그를 해주기만 하면 되지만, 개발자의 경우 padding 속성을 사용하여 직접 수치를 입력해 주어야 합니다.

왜 이런 결과가 나타나게 되는 것일까요?

CSS Box Model

개발자들은 CSS를 사용하여 객체의 디자인을 설정하게 됩니다.
CSS라는 언어는 객체의 디자인을 설정할 때 아래과 같이 설정하게 됩니다.

사진 속에 padding이라는 글자가 보이나요?
바로 이 값이 css에서 내부 여백을 설정하는 키워드 입니다.

구조를 더 자세히 살펴볼까요?

Box Model의 구조

• Margin : 외부 간격을 설정합니다.
• Border : 객체의 외곽 선을 설정합니다.
• Padding : 객체의 내부 여백을 설정합니다.
• Content : 객체의 내용입니다.

바로 이 구조 때문에 개발자와 디자이너가 박스를 만드는 방식이 다른 이유입니다.
그러면, 과연 어떤 방식으로 디자인 가이드를 줘야 할까요?

Box Model을 고려한 디자인 가이드

내부 padding

이번에도 박스를 하나 만들어 보겠습니다.
박스의 속성은 다음과 같습니다.

• 배경 색은 주황색입니다.
• 좌우 간격은 40px여야 합니다.
• 상하 간격은 20px여야 합니다.

이 경우, 우리는 다음과 같이 디자인 가이드를 작성할 수 있습니다. (고르지 않은 디자인 양해 부탁드려요 🙏)

이런 식으로 디자인 가이드를 만들어 준다면, 개발자는 더욱 빠르고 안정적으로 개발 할수 있었습니다.

디자이너 여러분들도 한번 이 글을 읽어보시고, 다음 디자인 가이드부터 적용해 보시는건 어떠신가요?

아마 개발자들이 매우 행복해하며 작업할 수도 있습니다.

오늘의 강좌는 여기까지입니다.
언젠간 또 만나요 😉