Day 6. Creating Lists
초보 시절 CSS는 나에게 마법 같은 존재였다. 때로는 내가 원하는 대로 동작하고, 때로는 전혀 예상치 못한 결과를 보여줬다. 특히 같은 스타일을 여러 곳에 적용했는데 어떤 건 적용되고 어떤 건 무시되는 상황이 자주 있었다.
"왜 이 스타일은 안 먹히지? 분명히 똑같이 썼는데..."
그러다 리스트 스타일링을 하면서 중요한 깨달음을 얻었다.
목록에서 숫자를 없애려고 list-style: none을 적용할 때였다. 처음엔 각각의 리스트 아이템(<li>)에 하나씩 적용했다. 당연히 잘 동작했다.
그런데 문득 생각해보니, 굳이 세 번 반복할 필요가 있을까? 부모 요소인 <ol>에 한 번만 적용하면 안 될까?
시도해봤더니, 놀랍게도 똑같이 동작했다. 부모에게 적용한 스타일이 자식들에게 자동으로 전달된 거였다.
이때 깨달았다. CSS는 무작정 아무렇게나 동작하는 게 아니라, 나름의 논리가 있다는 것을.
더 신기한 건 이거였다. 같은 요소에 같은 속성을 다른 값으로 두 번 적용하면 어떻게 될까?
li {
list-style: square;
list-style: none;
}
결과는? 마지막에 쓴 none이 이겼다.
처음엔 "뭐야, 그냥 나중에 쓴 게 이기는 거구나"라고 생각했다. 하지만 더 복잡한 상황에서는 그렇지 않았다. 때로는 더 구체적으로 지정한 스타일이 이기고, 때로는 상속받은 스타일이 무시되고...
그제서야 알았다. CSS에는 '우선순위'라는 개념이 있다는 것을.
이후로 CSS 상속과 우선순위에 대해 제대로 공부했다. 그러니까 갑자기 CSS가 훨씬 예측 가능해졌다.
부모 요소의 스타일은 자식에게 상속된다 (모든 속성이 다 그런 건 아니지만)
더 구체적으로 지정한 스타일이 우선된다
같은 우선순위라면 나중에 쓴 스타일이 이긴다
이런 규칙들을 알고 나니, "왜 이 스타일이 안 먹히지?"라고 헤매는 시간이 확 줄었다.
그리고 개발자 도구의 소중함도 깨달았다. 브라우저에서 F12를 누르고 요소를 선택하면, 어떤 스타일이 적용되고 있는지, 어떤 건 왜 무시되고 있는지 한눈에 볼 수 있다.
취소선이 그어진 스타일들을 보면서 "아, 이 스타일이 더 구체적인 다른 스타일에 의해 덮어씌워졌구나"라고 이해할 수 있게 됐다.
돌이켜보면, CSS도 결국 사람이 만든 언어다. 완전히 무작위로 동작할 리가 없다. 나름의 논리와 일관성이 있을 수밖에 없다.
문제는 내가 그 논리를 모르고 있었다는 것이었다. 규칙을 모르고 게임을 하려니 당연히 답답할 수밖에.
지금도 가끔 예상과 다르게 동작하는 CSS를 만날 때가 있다. 하지만 예전처럼 막막하지는 않다. "아, 내가 놓친 규칙이 있구나"라고 생각하고 차근차근 찾아보면 된다는 걸 알기 때문이다.
초보 개발자들에게 하고 싶은 말이 있다면, CSS가 이상하게 동작한다고 CSS를 탓하지 말라는 것이다. 대부분은 우리가 규칙을 몰라서 생기는 일이다. 규칙을 익히고 나면 CSS는 생각보다 친절하고 논리적인 언어라는 걸 알게 될 것이다.