CSS 기본 세팅

웹사이트 디자인, 구축을 위해서 CSS는 필수적이죠. 그런데 CSS도 기본 세팅을 해 주면 좋다는 사실을 알고 계신가요? 오늘은 처음 CSS를 배우시는 분들의 경우 잘 모르고 넘어갈 수 있는 초기 세팅에 대해 다뤄보려고 합니다. 저 역시 다양한 프로젝트를 통해 따라 쓰면서 익숙해졌습니다. 활용의 구체적인 이유를 정리해 보는 것도 좋을 것 같네요.

물론 앞으로 말할 기본 세팅이 ‘진리’인 것은 아닙니다. 만약 본인이 이런 세팅이 없는 것이 편하다면 ‘세팅 없음’이 본인에게 맞는 세팅인 것이죠. 또한 웹 구축 환경이 변한다면 바뀔 수 있기 때문에 개발을 위한 편의 제공 정도로만 들어주셔도 좋겠습니다.

- 전체 세팅

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

’*‘선택자는 모든 형태의 모든 요소를 선택하는 강력한 선택자입니다. 즉 특별한 제한이 없다면 제작하는 모든 요소에 효과를 주는 것이죠. 개발의 유지, 보수와 다른 개발자와의 협력을 원활하게 하기 위해선 이런 general한 선택자의 사용은 일반적으로 지양하는게 맞습니다. 새로운 요소를 개발하거나 적용할 때 모두 원치 않는 CSS 효과를 적용할 수 있기 때문에 조심해야 하죠. 그러나 위의 3가지 요소는 대부분의 프로젝트에서 적용하고 있습니다. 광범위한 효과 적용을 지양하면서도 저 3가지는 쓰는 이유는 무엇일까요? 바로 이 효과들이 개발을 순조롭게 도와주기 때문입니다.

box-sizing: border-box;

먼저 box-sizing입니다. box-sizing의 기본값은 content-box입니다. 즉 margin과 padding 내부의 contents 크기가 박스의 크기 즉 width로 나타나는 것이죠. 이는 굉장한 불편함을 주죠. width를 500px로 설정했는데 padding이 50px 들어가면 실질적인 width는 600px이 됩니다. 직관적으로 width만 보고도 컨텐츠의 크기를 파악하기 힘들게 됩니다. 이를 개선하는 것이 border-box입니다. Border-box를 적용하면 width는 컨텐츠+padding+margin의 값과 동일하게됩니다. 이로서 width만 보고도 전체 컨텐츠의 크기를 가늠할 수 있게 되는 거죠.

margin: 0;
padding: 0;

margin과 padding 값을 제거하는 것도 편의를 위함입니다. CSS는 기본 설정으로 margin, padding에 1~3 정도 적용된 경우가 많이 있습니다. 이 역시 직관적인 요소의 크기 파악, 그리고 조절에 방해를 하기 때문에 지워주는 경우가 많습니다.

- HTML, body 세팅

html,
body {
  height: 100%;
}

위 세팅은 저 역시 최근에 배우게 되었습니다. Height 세팅을 100%로 해주면 디스플레이 전체화면을 body, 혹은 html이 활용하게 됩니다. 만약 이 설정이 없다면 단순히 내용물의 크기만으로 body가 조절될 수 있습니다. 이 경우 전체 화면을 사용하지 않기 때문에 아무리 디스플레이 중앙에 배치하려고 노력해도 그 작은 body의 가운데로 컨텐츠가 이동하게 됩니다. 레이아웃이나, 컨텐츠 이동을 자유롭게 하기 위해서 기본적으로 설정해두면 상당히 유용합니다.