Day 6. Inheritance, Cascading, etc.
초보 시절 CSS는 정말 예측 불가능한 존재였다. 똑같은 스타일을 적용했는데 어떤 때는 되고 어떤 때는 안 되고. 같은 코드인데 순서만 바뀌어도 결과가 달라지고.
"CSS는 정말 변덕스러운 언어야..."
그렇게 생각하고 있던 어느 날, 선배 개발자가 이런 말을 해줬다.
"CSS는 무작위로 동작하는 게 아니야. 명확한 3가지 규칙이 있거든."
가장 먼저 이해한 건 '상속'이었다. 부모 요소에 색상을 지정하면 자식 요소들도 같은 색상을 갖게 되는 것.
처음엔 "왜 일일이 지정하지 않았는데도 적용되지?"라고 신기해했다. 하지만 생각해보니 당연한 일이었다. 만약 상속이 없다면, 100개의 텍스트 요소가 있을 때 100번 똑같은 색상을 지정해야 할 테니까.
다만 모든 속성이 다 상속되는 건 아니라는 것도 알게 됐다. 색상이나 폰트는 상속되지만, 너비나 여백 같은 건 상속되지 않는다. 생각해보면 이것도 당연하다. 부모의 너비가 자식에게도 똑같이 적용된다면 레이아웃이 엉망이 될 테니까.
두 번째로 이해한 건 '계단식(Cascading)' 개념이었다. 하나의 요소에 여러 스타일이 적용될 수 있고, 나중에 쓴 스타일이 이긴다는 것.
li {
color: red;
color: blue;
}
이렇게 하면 파란색이 적용된다. 순서가 중요하다는 걸 알고 나니, "왜 내 스타일이 안 먹히지?"라고 헤맸던 많은 순간들이 이해됐다.
가장 중요한 깨달음은 '구체성(Specificity)'이었다. 더 구체하게 지정한 스타일이 우선된다는 것.
예를 들어:
ul { color: red; } (목록 전체)
li { color: blue; } (목록 항목 개별)
이 두 개가 충돌하면 후자가 이긴다. 더 구체적으로 대상을 지정했기 때문이다.
이걸 이해하고 나니, 왜 부모에게 적용한 스타일이 자식에게서 무시되는 경우가 있는지 알 수 있었다.
이 3가지 규칙을 이해하고 나니 CSS가 완전히 달라 보였다. 더 이상 "왜 이렇게 될까?"라고 헤매지 않았다.
스타일이 적용 안 될 때:
1. 상속 문제인가? (부모-자식 관계 확인)
2. 계단식 문제인가? (순서 확인)
3. 구체성 문제인가? (선택자의 구체성 비교)
이 순서로 체크하면 대부분 해결됐다.
개발자 도구에서 스타일을 볼 때도 이제 의미를 알 수 있게 됐다.
취소선이 그어진 스타일: 더 구체적인 스타일에 의해 덮어써진 것
"inherited from..."이라고 표시된 것: 부모로부터 상속받은 것
같은 속성이 여러 개 있을 때: 계단식 적용으로 마지막 것이 승리한 것
이런 정보들이 CSS의 '판단 과정'을 보여주는 거였다.
이 원리들을 알고 나니 CSS 작성 전략도 바뀌었다.
공통 스타일은 상위 요소에 정의해서 상속을 활용하고, 예외적인 스타일만 구체적으로 지정한다. 그리고 스타일시트의 순서도 신경 써서 배치한다.
무엇보다 "왜 이 스타일이 안 먹히지?"라고 당황하는 시간이 확 줄었다. 규칙을 아니까 원인을 바로 찾을 수 있다.
CSS를 배우는 후배들을 보면, 여전히 CSS를 마법 같은 존재로 생각하는 경우가 많다. 하지만 CSS는 명확한 규칙이 있는 논리적인 언어다.
상속, 계단식, 구체성. 이 3가지만 제대로 이해하면 CSS가 훨씬 친근해질 것이다. 그리고 개발자 도구를 적극 활용하자. 거기에 모든 답이 있다.
CSS는 변덕스러운 게 아니다. 우리가 규칙을 몰랐을 뿐이다. 규칙을 알고 나면, CSS만큼 예측 가능하고 논리적인 언어도 드물다는 걸 깨닫게 될 것이다.