250x250
Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Tags more
Archives
Today
Total
관리 메뉴

막내의 막무가내 프로그래밍 & 일상

[HTML&CSS] CSS cascading (우선순위) 본문

웹/HTML&CSS

[HTML&CSS] CSS cascading (우선순위)

막무가내막내 2019. 4. 9. 12:07
728x90

CSS는 똑똑하게 동작하며 우선순위가 있다.

1. 첫번쨰 우선순위

먼저 크게 우선순위를 나누면 inline방식 < internal, external 이다.

internal과 external은 뭐가 뒤에 오냐에 따라 우선순위가 그떄그떄 달라진다. (CSS는 기본적으로 만약 똑같은 내용이 있을 경우 뒤에 온 CSS스타일을 적용한다.

 

<head>
	<style>div { color:red; }</style>
	<link rel="stylesheet" href="css.css">
</head>

예를들어 이렇게 head태그사이에 internal방식과 그 뒤에 external방식이 있다고 치자. 물론 css.css에도 똑같이 internal 스타일처럼

<style>div { color:blue; }</style> 이렇게 되있는데 색만 blue라고 해보자. 

그럼 external 방식이 internal방식보다 뒤에 선언되있으므로 external css가 적용되서 div태그사이의 색은 blue가 된다.

 

2. 두번쨰 우선순위

이렇게 어디에 선언되있냐에 따라 동작방식이 나뉜뒤, id, class, tag(Element) 냐에 따라 우선순위가 달라지는데 id는 금메달, class는 은메달, tag는 동메달이라 생각하면된다. 즉 우선순위는 id > class > tag순으로 결정된다.

 

<div id="a" class="b">
	text....
</div>


#a{
 color : red;
}

.b{
 color : blue;
}

div{
 color : green;
}

그래서 여기서 텍스트(text....)는 id의 css스타일이 적용되게 된다.

 

이거에 대한 우선순위는 다음 사이트에서 더 자세히 알아볼 수 있다.

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

 

Specificity

Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of CSS selectors.

developer.mozilla.org

 

3. 세번째 우선순위

마지막으로 tag끼리(Element, 엘리먼트) 비교를 할떄 만약 그냥 p태그로 선언된것과 div p 태그로 선언된 css가 있고 다음과 같은 바디 구조를 지녔다면

 

<body>
	<div>
    	<p> TEXT </p>
     </div>
</body>

TEXT는 div p 태그로 선언된 CSS가 적용된다. 물론 div p 태그가 없었다면 div태그로 선언된 CSS가 적용되겠지만 태그로 선언된 CSS끼리 비교할 때는 태그의 수가 더 많은게 적용된다고 한다. 예를들어, 태그 세개로 선언된 CSS와 태그 두개로 선언된 CSS가 있고 어떤 body구조에 둘다 적용할 수 있다면 세개로 선언된 CSS는 3점 두개로 선언된 CSS는 2점 이런식으로 3점이 더높으므로 3개 태그를 사용한 CSS순위가 더 높아서 사용한다고 이해하면 좋을 것이다.

즉, 구체적인걸 우선순위로 한다.

 

P.S) div ul li { color : red }  ==>자손관계

      div > span { color : red } ==> 자식관계

 

 

댓글과 공감은 큰 힘이됩니다.!

 

출처: https://www.edwith.org/boostcourse-web/lecture/16674/ 

728x90
저작자표시 동일조건

'웹 > HTML&CSS' 카테고리의 다른 글

[웹] 깔끔하고 예쁜 alert창 SweetAlert2 사용법 (샘플)  (5) 2020.02.25
[HTML&CSS] jquery 다중자식값 접근 children()  (0) 2020.01.05
[HTML&CSS] DOM과 querySelector 정리  (2) 2019.04.17
'웹/HTML&CSS' Related Articles more
Comments