인터넷에서 많이 쓴다던 CSS Reset code(CSS 초기화 코드)를 복붙 할 때, 리스트 스타일을 없애는 코드를 빼도 리스트 스타일이 사라진다.
왜 그럴까?
일단 리스트 스타일이 제대로 적용된 화면을 보자.
그리고 이건 li { list-style: none; }을 써서 리스트 스타일을 없앤 모습이다. ol, ul { list-style: none; }을 써도 된다.
그리고 많이들 쓰는 Eric Meyer's Reset CSS에서 ol, ul { list-style: none; }를 지우고 붙여넣기를 하면 이렇게 나온다.
결과를 놓고 비교하니 답이 나온다.
'공백'이 문제다.
<ol>과 <ul>은 기본적으로 리스트의 위아래로 16px의 margin을 갖고, 왼쪽으로는 40px의 패딩을 갖는다. 그리고 이 padding값 안에 리스트 스타일이 포함된다.
그런데 CSS 초기화 코드를 보면 보통 전체 태그의 margin과 padding을 0으로 설정한다.
* { margin: 0; padding: 0;} 을 쓰는 경우, 또는 Eric Meyer's Reset CSS에서처럼 ol, ul { margin: 0; padding: 0; }을 적용하면 <ol>과 <ul> 이 갖는 숫자와 점 같은 리스트 스타일뿐만 아니라 여백까지 사라진다. margin과 padding을 없애니 리스트 스타일이 함께 사라지는 것이다.
참고로 리스트 스타일은 padding에 포함되므로 margin만 0으로 초기화하면 리스트 스타일은 적용되고 위아래 여백만 사라진다.
반대로 margin은 그대로 두고 padding만 초기화하면 <ol> 리스트 앞에는 .dummy 와 같이 점이 붙어있는 이상한 모양이 된다.
별 쓸데 없는 내용으로 한 시간 넘게 버렸다. 하지만 원인을 알고 나니 뿌듯하다. 이런 게 개발의 재미인가?