"어김없이 찾아오는 CSS의 늪"
Specificity (명시도) 에 관한 공식 mdn 문서는 명시도를 다음과 같이 설명하고 있습니다.
명시도란 브라우저가 어느 요소와 가장 연관된 속성을 찾는 수단으로, 이렇게 찾은 속성이 해당 요소에 적용됩니다.
브라우저는 CSS 를 참고해 어떻게 출력할지를 결정합니다. 요소와 CSS 속성이 1:1로 매칭된다면 좋겠지만, 그렇지 않은 경우가 대부분이죠. 하나의 요소에 간섭하는 속성이 여럿인 경우가 있습니다. 이 때 브라우저는 specificity 를 파악해 어떤 속성값을 적용할 지를 결정한다는 겁니다.
따라서 specificity 는 우선 순위를 지닙니다. 다음의 만화는 이 우선 순위가 어떻게 적용되는지 잘 설명해주고 있습니다.
specificity 의 이해를 돕기 위해, 오늘 제가 CSS 를 다루면서 접근했던 방법과 꿀팁 하나를 말씀드릴까 합니다.
오늘의 과제는 웹사이트의 회원가입 창을 구현하는 것이었습니다. 비밀번호를 작성할 수 있도록 input type="password" 를 2개 만들어 하나에서는 비밀번호를, 다른 하나에서는 비밀번호 확인을 할 수 있도록 했습니다.
둘을 비교했을 때 비밀번호가 서로 다르다면 DOM을 활용해 class="failure" 를 추가하도록 했습니다. 그리고 .failure 를 구분하기 위해 CSS 속성을 다음처럼 구성해주었습니다.
.failure {
border: 10px solid red;
} 제가 기대한 건 사용자가 비밀번호를 다르게 입력했을 때, input 창의 테두리가 빨간색으로 적용되는 것입니다. 근데 실제로 적용해보니 생각대로 작동하지 않았습니다. input 창을 선택했을 때(input:focus) 적용되는 CSS 효과가 우선적으로 작용해 파란색 테두리로 나타나더라구요.
위의 만화를 참고해보면 :focus 는 Pseudo-classes(의사 클래스) 이기 때문에 Class 보다 specificity 순위가 높아 기본으로 설정된 파란색 테두리가 보인다는 걸 알게 됐습니다. 키보드 입력을 다른 데로 옮기고 나면 focus 가 해제되면서 그제서야 빨간색 테두리를 보여주더라구요.
!important 라는 방법을 쓸 수도 있겠지만 Specificity 문서는 이를 권장하지 않는 방법이라고 말하고 있습니다. Class 를 ID 로 만드는 방법도 있겠지만 Class 의 활용도가 높은 만큼 다른 방법은 없을까 찾아보게 되었습니다.
그리고 발견한 정말 손쉬운 방법! 우선 순위를 높이기 위해서는 Class 의 attribute 값을 반복해주면 됩니다. CSS 속성을 다음처럼 바꿔주면 되는 것이죠.
.failure.failure {
border: 10px solid red;
}만화를 다시 볼까요. pseudo classes 의 우선순위가 class 보다 높긴 하지만 둘은 같은 물고기입니다. 그래서 지정한 attribute 를 반복해주면 specificity 가 높아지는 것이라고 이해할 수 있을 것 같습니다.
다른 것들도 이렇게 반복해서 specificity 를 높일 수 있을까요? 이리저리 실험을 해봤지만 결론을 '잘 모르겠다' 입니다. .failure.failure 에 대응할 수 있도록 다음처럼 코드를 추가해봤지만 잘 작동하지 않더라구요.
.failure.failure {
border: 10px solid red;
}
input:focus input:focus {
border: 10px solid blue;지금으로선 띄어쓰기가 있어서 그런게 아닌가 추측만 할 뿐입니다. 그래서 이 방법은 Class 의 우선순위를 잠시 높이는 데만 적용할 수 있는 것으로 정리해봅니다.
사실 CSS 는 상당히 재미있는 편이라고 할 수 있습니다. 내가 작성한 코드가 바로 눈 앞에 보이는 형태로 드러나기 때문이죠. 그럼에도 아직 늪이라고 느껴지는 건, CSS 숙련도가 말할 수 없을 만큼 낮기 때문일 겁니다.
이제 막 공부하기 시작한 초보 개발자인 만큼 숙련도가 당연히 높을리는 없겠지만, 그 외에 또 하나의 이유는 아무래도 관심도인 것 같습니다. 개인적인 흥미도에도 차이가 나겠지만, 무엇보다 이제껏 웹페이지를 목표중심적으로 활용해왔기 때문에 세세하게 홈페이지의 구성을 살핀 적이 없었거든요.
앞으로는 홈페이지를 여럿 둘러보고, 멋진 효과들을 보면 CSS 를 어떻게 적용했는지를 찾아보기도 하려고 합니다. 많이 볼수록 더 많이 알아가게 되는 법이니까요.
