Day 6. Parents, Children, Containers
웹 개발을 배우면서 가장 헷갈렸던 게 CSS였다. 분명히 부모 요소에 스타일을 적용했는데 자식 요소에는 왜 어떤 건 적용되고 어떤 건 안 되는지 이해할 수 없었다.
그러다 어느 날, HTML 구조를 들여다보면서 문득 깨달았다. 이게 마치 가족 관계 같다는 것을.
생각해보면 현실에서도 그렇다. 부모의 특징이 자식에게 자연스럽게 전달되는 것들이 있다. 키, 눈 색깔, 성격의 일부분들. 하지만 모든 게 다 전달되는 건 아니다.
CSS도 비슷하다. 부모 요소에 색상을 지정하면 자식 요소들도 그 색상을 물려받는다. 폰트 크기나 폰트 종류도 마찬가지다.
body (부모) - 검은색 글자
├── h1 (첫째 자식) - 검은색 물려받음
└── ul (둘째 자식) - 검은색 물려받음
├── li (첫째 손자) - 검은색 물려받음
├── li (둘째 손자) - 검은색 물려받음
└── li (셋째 손자) - 검은색 물려받음
이렇게 위에서 아래로 자연스럽게 흘러내려온다.
처음엔 "왜 이 스타일은 상속이 안 되지?"라고 답답해했다. 특히 링크 색상이 그랬다. 분명히 부모에게 회색을 지정했는데 링크는 여전히 파란색이었다.
나중에 알고 보니, 브라우저가 링크에 대해서는 기본적으로 파란색을 지정해놨더라. 그리고 이런 '직접 지정된' 스타일이 '상속받은' 스타일보다 우선순위가 높다는 것도 알게 됐다.
마치 집안에서 물려받은 특성보다, 개인이 후천적으로 선택한 특성이 더 강하게 나타나는 것처럼.
정말 고마운 게 브라우저 개발자 도구였다. F12를 누르고 요소를 선택하면, 어떤 스타일이 어디서 왔는지 족보처럼 보여준다.
"아, 이 색상은 body에서 상속받았구나" "어? 이건 왜 취소선이 그어져 있지? 아, 더 구체적인 스타일이 덮어씌웠구나"
이런 식으로 CSS의 '가계도'를 추적할 수 있게 됐다.
이 원리를 이해하고 나니 CSS 작성이 훨씬 효율적이어졌다.
공통으로 적용할 스타일들은 부모 요소에 한 번만 지정하면 된다. 폰트, 기본 색상, 줄 간격 같은 것들. 그러면 자식 요소들이 알아서 물려받는다.
예외적으로 다르게 보여야 하는 요소들만 따로 스타일을 지정하면 된다. 링크 색상이나 제목 크기처럼.
이렇게 하면:
코드가 훨씬 간결해진다
나중에 수정할 때도 한 곳만 바꾸면 된다
일관성 있는 디자인을 유지하기 쉽다
지금도 HTML을 짤 때 가족 관계를 생각한다. 이 요소가 부모가 되고, 저 요소들이 자식이 되고. 부모에게서 뭘 물려받을지, 자식은 어떤 개성을 가질지.
그렇게 생각하니까 CSS가 훨씬 예측 가능해졌다. 더 이상 "왜 이 스타일이 안 먹히지?"라고 헤매지 않는다.
결국 CSS도 사람이 만든 언어다. 현실의 논리를 반영하고 있다. 그 논리만 이해하면, CSS는 생각보다 친근하고 합리적인 도구라는 걸 알 수 있다.
웹 개발 초보자들에게 하고 싶은 말은, CSS를 마법처럼 생각하지 말라는 것이다. 그냥 가족 관계처럼 생각해보자. 부모에서 자식으로 흘러가는 자연스러운 흐름으로 이해하면, 훨씬 쉽게 다가올 것이다.