<head>
<style>div { color:red; }</style>
<link rel="stylesheet" href="css.css">
</head>
만약 css.css에서 div color를 blue로 주었다면, 뒤에 선언된 external방식의 css내용이 반영됩니다. 따라서 blue색깔로 나오겠죠.
즉 internal과 external은 같은 우선순위로 결정된다고 아셔야 합니다.
CSS는 여러가지 스타일정보를 기반으로 최종적으로 '경쟁'에 의해서 적절한 스타일이 반영된다는 점을 잘 기억해야 합니다.
<div id="a" class="b">
text....
</div>
#a{
color : red;
}
.b{
color : blue;
}
div{
color : green;
}
위 코드에서 id, class, 엘리먼트 순으로 우선순위를 가집니다.
id는 클래스보다 우선되고 클래스는 엘리먼트보다 우선됩니다.
위 코드에서는 id인 a의 색상이 적용되게 됩니다.
CSS의 이런 성질을 캐스캐이딩이라고 합니다.
선언방식에 따른 차이
같은 선택자(selector)라면 나중에 선언한 것이 반영됩니다.
선택자의 표현이 구체적인 것이 있다면 먼저 적용됩니다.
- body > span (O)
- span (X)
ID > CLASS > ELEMENT 순으로 반영
만약 h1태그가 div > p > h1 구조로 HTML으로 짜여있다고 가정하면, 아래에 색깔 중 h1이 가진 색깔은 어떤 것일까요?
여러분들이 실험을 통해서 그 결과를 확인해보세요.
jsbin과 유사한 사이트 하나 더 알려드릴게요.
이번에는 codepen.io 라는 사이트를 이용해서 테스트해보세요.
생각해보기
- class는 우선점수가 10점, id는 100점이라고 표현했습니다. 그런데 class 가 11개라면 어떻게 될까요? id보다 우선순위가 높을까요? 실제로는 그렇지 않습니다.
이현상은 올림픽순위가 금메달의 갯수를 통해 우선결정되는 것과 비슷한데요.
id는 금메달, class는 은메달, tag는 동메달로 이해하는게 편합니다. - 참조 : 구글에 "css specificity" 검색
udemy css 유료강의 필기 (링크)
<블럭의 우선순위 적용방법>
- 블럭 하나에 적혀있는 아래 4가지의 갯수를 세어본다.
- 아래 적힌 4가지의 순서가 우선순위이다. 예를 들어 한 블럭의 ID 개수가 10개여도 다른 블럭의 inline스타일이 1개이면 inline스타일 1개인 블럭이 우선 적용된다.
- 1) inline 스타일
- 2) ID (e.g.#btn)
- 3) 클래스 (e.g. .btn)
- 4) element (e.g. div)
출처 Boostcourse - 3-2) 상속과 우선순위 결정-2
웹 프로그래밍(풀스택)
부스트코스 무료 강의
www.boostcourse.org
반응형
'TIL > 웹 프로그래밍(풀스택) - boostcourse' 카테고리의 다른 글
3-4) CSS 기본 Style 변경하기 (0) | 2020.12.27 |
---|---|
3-3) CSS Selector (0) | 2020.12.27 |
3-2) 상속과 우선순위 결정-1 (0) | 2020.12.27 |
3-1) CSS 선언방법 (0) | 2020.12.27 |
2-4) class 와 id 속성 (0) | 2020.12.27 |
댓글