안녕하세요! 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를 사용하여 객체의 디자인을 설정하게 됩니다.
CSS라는 언어는 객체의 디자인을 설정할 때 아래과 같이 설정하게 됩니다.
사진 속에 padding이라는 글자가 보이나요?
바로 이 값이 css에서 내부 여백을 설정하는 키워드 입니다.
구조를 더 자세히 살펴볼까요?
바로 이 구조 때문에 개발자와 디자이너가 박스를 만드는 방식이 다른 이유입니다.
그러면, 과연 어떤 방식으로 디자인 가이드를 줘야 할까요?
이번에도 박스를 하나 만들어 보겠습니다.
박스의 속성은 다음과 같습니다.
이 경우, 우리는 다음과 같이 디자인 가이드를 작성할 수 있습니다. (고르지 않은 디자인 양해 부탁드려요 🙏)
이런 식으로 디자인 가이드를 만들어 준다면, 개발자는 더욱 빠르고 안정적으로 개발 할수 있었습니다.
디자이너 여러분들도 한번 이 글을 읽어보시고, 다음 디자인 가이드부터 적용해 보시는건 어떠신가요?
아마 개발자들이 매우 행복해하며 작업할 수도 있습니다.
오늘의 강좌는 여기까지입니다.
언젠간 또 만나요 😉
안녕하세요. 잘 봤습니다.
그런데 제일 마지막 이미지 우측 숫자가 40px 인데 오타인것 같습니다.