CSS 초기 값 (initial value)

HTML과 CSS를 통해 홈페이지를 만들다 보면 내가 원하지 않는 곳에 패딩과 마진 혹은 높이값이 들어가 있는 경험들을 많이 하게 됩니다.

이런 경험 들을 하면 보통을 그냥 지나 가거나 별 생각 없이 초기화를 해주게 되죠. 저도 별생각 없이 지나갓던 것들인데 오늘은 당연하게 생각하지 않고 정리를 한번 해보겠습니다. 당연하게도 모든 프로퍼티에 대해 정리 할 수는 없을 겁니다.

크게 initial value가 뭔지 그리고 initial value를 맞이 했을 떄 어떻게 대처하고 또 어떤 때 대처 하지 않는지에 대한 소개를 해보겠습니다.

initial value가 뭘까?

initial value란 말 그대로 CSS의 초기 값입니다.

뭔지 이미지를 통해서 확인해 보겠습니다.

위의 두 이미지의 차이가 보이시나요?

왜 이런 차이가 발생할까요?. 앞서 계속 말했지만 바로 요소의 초기값 때문입니다(크기 말고 위치에 집중해 주시면 감사합니다!).

이 친구들은 h2의 초기값들입니다. 개발을 할 때 도움이 될 때도 아닐 때도 있는데, 마진 병합 현상처럼 적절하게 핸들링 하는 법을 아셔야 합니다.

가령 극적인 예를 들어 “난 저런 초기값들 다 필요없어 다 처음부터 만들거야!” 라고 하시면 지옥을 맛보실수 있는데, 추천하지는 않습니다.

혹시 태초에 아무 것도 없는 우주의 조물주의 심정이 궁금하신 분들을 위해 알려드리면

* {
    all: unset;
}

 

사용하지 않는건, 이런 아수라장을 보실 수 있기 때문이죠..

초기값 핸들링

사실 초기값은 개발자들이 사용하기 쉽게 만들어진 친절한 선조들의 레거시들이죠. 그렇다고 무작정 받아 들이면 안되고 적절하게 받아들이셔야 합니다.

h1,h2, ul, p {
    margin: initial;
    padding: initial
}

이런 식으로 말이죠.

사실 핸들링에 관해서는 쓰면서도 느끼지만 애매합니다. 사람마다 사용하는 법도 다르고 초기값들도 천차만별이거든요. 그렇기에  존재를 알고 있는 것 자체 만으로도 충분하다고 생각합니다.

 

예를 들어 img태그에는 아래 약간의 텀이 존재하는데,

img {
    vertical-align: top;
}

이런 명령어를 넣기 보다는 “어? 공간이 남네?, 초기값이 들어가 있나보구나” 이런 식의 생각이 필요합니다.

또 다른 예를 들어보면 <ul> <li>를 만들어 보시면 bullet이 생깁니다.

• 이런 식으로 말이죠. 이것도 일종의 초기값 입니다. list-style-type: none;

속성을 넣으면 해결되는데, 누군가는 이것을 이용하고 사용하고 싶을 거고 또 누군가는 사용하고 싶지 않을 수 있죠.

거듭 말하지만 중요한 것은 이것 초기값을 인지하는 것입니다. 알아야 쓸건 쓰고 버릴건 버릴 수 있기 때문이죠.

 

이상 css 초기값에 대한 설명이였습니다.

그럼 다들 예쁜 화면 만드시길~

끝