안녕하세요 오늘은 CSS의 우선순위에 대해 작성해보려고 합니다.
작성할 생각이 없긴 했는데
업무하다 가 CSS 관련 우선순위 에 대한 테스트 파일을 만들게 된게 조금 아쉬워서
포스팅하게 되었습니다.
기본적으로 CSS 우선순위는
1 순위 -> !important
2 순위 -> inline style attirbute ex: <button style="background: red; color:white;"></button>
3 순위 -> id
4 순위 -> 없는 attribute가 있을 경우
5 순위 -> tag element
아래의 자료를 보면 어느정도 이해가 되실텐데요
CSS order
https://www.w3schools.com/css/css_howto.asp
오늘 포스팅할 내용은 우선순위가 같을 경우는 지정한 개수가 더 많은 css가 높은 우선순위를 지니게 되는데요
이점에 대해서 작성하려고 합니다.
우선 아래의 이미지를 보시면
기본적으로 화면은 이렇게 되어있습니다.
화면에 대한 태그는
이러한 형태의 구성을 지니고있습니다.
csstestArea -> dummyDiv > 버튼들
각각 버튼에 css를 보시면 .btn 클래스와 .cssFirst .btn 클래스와 .cssSecond 클래스 형태로 붙어있습니다.
지정된 css는
이런형태로 지정이 되어 있습니다.
.btn .cssFirst는
.btn 의셀렉터를 통하여 기본적으로 지정이된 후에
.cssFirst가 입혀집니다.
가장 좌측에 있는 버튼의 색상이 변경되는 이유입니다.
이 상태에서 cssFirst를 선택자를 더늘려서 선택 해보겠습니다.
뒤에 선언됐으니까
겹쳐진거 아니냐 할수도있어서
위로 올려보면
결과는 이렇습니다.
전체 테스트 하였던 파일은 아래에 적어 놓겠습니다.
글 읽어 주셔서 감사합니다.
'Web(Front-End) > CSS3 & HTML5' 카테고리의 다른 글
| [VanillaJS] Index.html ( 페이지 기본 구성 ) (0) | 2019.01.09 |
|---|---|
| [HTML5] i 태그 및 span 태그 (3) | 2018.11.19 |
| [CSS3] flex Box - justify-content, align-items (0) | 2018.08.16 |
| [CSS3] flex Box - flex-wrap (줄 넘기기 ) && flex-flow (방향 + 줄 넘기기) (0) | 2018.07.24 |
| [CSS3] flex Box - flex-direction (생성 방향) (0) | 2018.07.23 |