본문 바로가기
TIL/웹 프로그래밍(풀스택) - boostcourse

3-2) 상속과 우선순위 결정-2

by _din 2020. 12. 27.
<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 라는 사이트를 이용해서 테스트해보세요.

 

생각해보기

  1. class는 우선점수가 10점, id는 100점이라고 표현했습니다. 그런데 class 가 11개라면 어떻게 될까요?  id보다 우선순위가 높을까요? 실제로는 그렇지 않습니다.
    이현상은 올림픽순위가 금메달의 갯수를 통해 우선결정되는 것과 비슷한데요.
    id는 금메달, class는 은메달, tag는 동메달로 이해하는게 편합니다. 
  2. 참조 : 구글에 "css specificity" 검색

 

udemy css 유료강의 필기 (링크)

<블럭의 우선순위 적용방법>

  1. 블럭 하나에 적혀있는 아래 4가지의 갯수를 세어본다.
  2. 아래 적힌 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

댓글