요즘, 회사에서 CSS 를 정리하고 있다. 내가 CSS 를 많이 알고 있다고 생각하지만, CSS로 체계적으로 어떻게 디자인 하는지에 대해 배워본적이 없다. 그러다보니 이것저것 고민하는게 많다.
가장 고민하는 것은 margin vs padding 이다. 어떨때 margin 을 사용하는게 맞는지 어떨 때 padding 을 사용하는게 맞는지 잘 모르겠다. 확실히 border 가 있거나 background 가 있는 경우에는 margin 과 padding 이 확실히 차이가 있다. background-color 는 padding 까지만 적용된다. border 안쪽은 padding 영역이다. 그리고 margin 의 경우 clickable 하지 않다. 이런 경우 명확히 margin 과 padding 이 구별된다. 그 외에는 두 element 사이(경우에 따라서는 sibling 끼리, 경우에 따라서는 parent와 child사이) 를 어떻게 공간을 구별해야 하는지 잘모르겠다.
웹디자이너는 아니지만 sketch 로 UI를 만들어주는 디자이너와 이야기 하다보니 그 디자이너도 유사한 고민을 한다고 한다. 이야기를 계속 듣다보니 margin 보다는 padding 위주로 그리는 것 같이 느껴졌다. 특히 개념적인 box 안의 공간은 padding 위주로 그리는 공간을 띄우는 것 같았다.
그리고 margin 의 경우 vertical margin collapse 라고 해서 위 엘레멘트의 margin-bottom 과 아래 엘레멘트의 margin-top 이 합쳐져서 둘 중 가장 큰 것만 적용되는 현상이 있다. 이 rule 이 복잡하다보니 margin-bottom 만 주거나 margin-top 만 주는 방식으로 사용하는 경우가 꽤 있는 것 같다. 물론 경우에 따라서는 vertical margin collapse 을 이용해서 디자인 하기도 한다.
UI 를 디자인 하는 툴의 경우 그런 것 없어서 margin-top 과 margin-bottom 중 하나를 선택해야 한다. 같이 일하는 디자이너는 margin-bottom 위주로 작업한다고 한다. 이게 디자이너의 관념적인것인지 모르겠지만 나름 괜찮은 규칙인 것 같아서 나도 margin-bottom 위주로 작업하려고 한다.
그래서 내가 내린 결론은 margin vs padding 일 경우 margin 위주로
margin-top vs margin-bottom 의 경우 margin-bottom 이 좋을 것 같다.
그래서
<div class="outter">
<div class="inner1"></div><div class="inner1"></div> <div class="inner2"></div>
</div>
이런 식의 코드가 있다면
.outer 의 padding 을 잡고, .inner 의 margin-bottom 의 .inner1 , .inner2 고유의 간격을 만드는 형태로 해야 할 것 같다.