[CSS] 개인프로젝트 중 발견한 오류 - CSS 우선순위 / 명시도 점수

작은 개인 프로젝트를 하는 도중에 오류가 생겼다.

체크 버튼이 처음에는 안보이다가 체크버튼의 부모인 div를 클릭 시 주황색으로 나타나야하는 부분이 있었는데

 

 

hide 클래스를 주어서 체크 아이콘인 i태그를 숨기려해도 숨겨지지 않고 ,,,,,,,,,,,,

 

 

 

icon_show 클래스로 체크 아이콘을 보여주려고 해도 보여지지 않았다 ㅠㅠ

 

개발자 분들에게 정보도 얻고 어려운 것들 물어보기 위해 들어가 있었던 프론트엔드 개발자 오픈채팅방에 1차로 여쭈어 보았는데 다른 곳에서 덮어씌워져서 그런거라고 하셨다.

 

처음 알게된 것 :  css에 줄이 쳐진다 -> 다른게 덮어씌운 것이다.

 

 

아무튼 어제는 도대체 뭐가 덮어씌운것인가를 찾아보았는데 i태그 (체크 아이콘)을 

 

https://fontawesome.com/icons/user-plus?s=solid 

Font Awesome

 

여기에서 받아와서 사용하는 중인데 이 아이콘들에 기본으로 설정되어있는 css 때문에 그랬던 것이다 ㅠㅠ

 

근데 어젠 단순히 저 아이콘의 기본 설정 때문이라는 것만 알게되어서 

 

'아 그럼 저걸 어떻게 없애지..?' 이 생각만 하다가

 

결국은 체크 아이콘을 원래 계획처럼 hide 클래스를 주지않고 color: white를 줘버렸었다 ㅋㅋㅋㅋ

 

그런데! 오늘도 비슷한? 아니 똑같은 경우로 헤매는 일이 발생했다.

 

 

버튼 클릭 시 주황색 -> 빨간색으로 변하게 하고 애니메이션을 주는 클래스를 넣어야했는데

 

갑자기 쌩뚱맞게 line-height가 먹히질 않았다.

 

도대체 ...!!!!!!!! 또 왜그ㅡ래ㅐ.1!!!!!!!!

 

라는 불같은 마음으로 오늘은 css를 마구마구 건들여보았다.

 

그런데..? 막 건들이다 보니까 약간 감이 잡혀왔다.

 

어떻게 하니까 line-height가 먹히고 어떻게 하니까 변할때의 클래스가 또 안먹네..?

 

그러다가 찾아낸 것이 바로 

 

css 우선순위!!!

 

참고)

https://www.zerocho.com/category/CSS/post/588cb95ca63e64132496a5d5

(CSS) CSS 적용 우선순위 - CSS간 충돌 해결 방법

 

하 맞아 ㅠㅠ 분명 깃헙 클론코딩할때에도 우선순위가 넘 복잡해서 (그땐 심지어 프론트엔드 공부 극극초반이었음)

 

와 되게 어렵다 잘 알아둬야지.. 했었는데 ㅠㅠ 그걸 그새 까먹다니 ..

 

 

변하려는 클래스인 cancelBtn 클래스보다 기존의 i태그를 꾸며주던 todo_btn 클래스의 우선순위가 낮아서 

line-height가 먹히지 않았던 것이다 ㅠㅠ 

 

다른데에서 line-height를 쓴건 없고.. 아무리 생각해도 이것때문인 것 같다!

 

이번에는 정말로 까먹지 않기 위해 포스팅한다!

 

 

실제 내 코드에서 보면 todo_btn의 우선순위를 결정하는 명시도 점수는 10점이고

cancelBtn 부분의 명시도 점수는 20점이다.

 

이부분을 똑같이 맞추어주고 다시 확인해보면

 

 

line-height가 잘 작동된다!

 

---

✨<css 적용 우선순위 명시도 점수>✨

- !important : 점수 무한대 (다른 모든 방식들보다 우선이다. 강제적용)

- inline 방식 : 1000점

- id 선택자 : 100점

- class 선택자 : 10점

- 태그 선택자 : 1점

- 전체 선택자 : 0점

- 상속 : 점수 x

 

 

명시도 점수가 높은 선언이 우선적용되며 점수가 같은 경우,

가장 마지막에 해석되는 선언이 우선이고 명시도는 상속 규칙보다 우선이다.