[CSS] css 디자인 적용이 되지 않는 문제

 

 자바 스크립트 기초를 공부하면서 클래스를 추가해서 버튼을 누르면 모달 창을 띄우는 것을 구현하는 중이었다.

 

 

 분명 css를 적용한 class 를 추가했는데 모달창이 뜨지 않았다.

 

 

 개발자 도구로 확인해보니 show-modal의 속성에 취소선이 그어져 있었다.

 

원인을 찾다가 css의 우선순위에 대한 정보를 찾았다.

 

 

 해답은 .css에서 show-modal을 black-bg의 아래에 두는 것이었다.

 

그래야 나중에 적어진 것이 적용된다.

 

 

 

이제 버튼을 누르면 모달 창이 제대로 뜬다. 닫기를 누르면 다시 꺼진다.

 

내가 css의 우선순위가 class 에 배치된 순서로 적용된다고 착각해서 발생한 문제였다.

css는 .css의 위에서 아래 순서로 적용되니까

새로 적용할 css 속성은 아래에 적어야 한다는 것을 배웠다.

 

 

아무래도 js 기초 전에 css 기초부터 익혀야겠다 생각했다.