제로베이스 데일리 스크럼을 하던 중 팀원 중 한 분의 의문을 제기한 게 사건의 발단이었다. 그분이 제시한 의문은 굉장히 흥미로웠는데 css style을 attribute를 통해 주게 되었을 때 class로 준 스타일이 먹지 않는다는 의문이었다.
다음은 의문의 코드와 비슷한 맥락으로 재현한 전체 코드다.
전체 코드 예시)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li[class^=item] {
background-color: aqua;
}
.item2 {
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<ul class="list">
<li class="item1">안녕</li>
<li class="item2">나는 </li>
</ul>
</div>
</body>
</html>
위 코드처럼 했을 때 우리 팀원들은 tag로 준 스타일의 우선순위 보다 class로 준 우선순위가 더 높을 거라 예상해 당연히 될 것이라 굳게 믿었다. 하지만, 늘 그렇듯 믿음은 배신당한다^.^
당연히 빨간색이라는 자신감을 처참히 뭉개고 시퍼런 아쿠아색을 뽐내고 있었다. 그래서 차근차근 단계를 밟아가 알아보기로 했다.
테스트 코드 예시)
<style>
li {
background-color: aqua;
}
.item2 {
background-color: red;
}
</style>
처음 시도한 것은 attribute 속성 없이 일반 tag style을 주었다. 그러자 우리가 알고 있던 지식이 틀리지 않았음은 확신하게 되었다.
그리고 tag에 attribute로 style을 줄 경우 class보다 우선순위가 더 높아지는 게 아닐까란 한 가지 가설을 세웠다.
가설을 근거로 해결책으로 style을 주고 싶은 해당 class의 parent에 있는 class를 같이 가지고 와서 조금 더 셀렉터에 명시도를 줘 봤다.
해결책 코드 예시)
<style>
li[class^=item] {
background-color: aqua;
}
.list .item2 {
background-color: red;
}
</style>
그 결과,
다행히 좋은 결과가 나와 이슈는 해결되었다.
다 같이 해결하느라 고생해 주신 팀원분들 감사합니다. 끝까지 파이팅!😆
'CSS' 카테고리의 다른 글
| [CSS] CSS Attribute 선택자 정리 (0) | 2023.02.23 |
|---|---|
| [CSS] 자주 쓰이는 Scss 핵심 기능 (0) | 2023.02.14 |
| [CSS] position 정리 (0) | 2023.02.13 |
| [CSS] CSS Box Model (0) | 2023.02.13 |
| [CSS] Grid 활용법 (0) | 2023.02.09 |
댓글