인프런 커뮤니티 질문&답변

Hwi Kwon님의 프로필 이미지
Hwi Kwon

작성한 질문수

애플 웹사이트 인터랙션 클론!

SVG 로딩 애니메이션 1

main-message, sticky-elem CSS 상 위치에 따른 display 변경

작성

·

124

1

sticky-elem이 main-message보다 style.css 상에 위에 존재하게 되면 display: none이 적용되지 않는 것을 확인했습니다.

CSS 페이지 내에서 class 순서가 눈에 잘 들어오지 않는데(자주 실수할 것 같은 부분입니다.) 이 부분을 좀 더 효과적으로 관리할 수 있는 방법이 있을까요? 

답변 2

0

Hwi Kwon님의 프로필 이미지
Hwi Kwon
질문자

감사합니다.!

0

1분코딩님의 프로필 이미지
1분코딩
지식공유자

CSS 선택자가 확실하게 우선권을 가지게 하려면,
선택자의 선언 자체를 더 구체적으로 명시해주는 방법이 있습니다.

.modal{}

.modal.active {}

이런 식으로요~ 이렇게 해주시면 순서에 관계 없이, 더 구체적으로 기술된 .modal.active가 우선권을 갖게 됩니다.

CSS선택자 우선순위에 대해 생활코딩에 아주 자세히 기술되어 있는 문서가 있어서,
링크 올려드릴게요!

https://opentutorials.org/module/484/4149

Hwi Kwon님의 프로필 이미지
Hwi Kwon

작성한 질문수

질문하기