💅✨Decorate from CSS : 캐스케이딩(2)

Notice

Recent Posts

Recent Comments

Link

« 2024/07 »
일	월	화	수	목	금	토
	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	31

Tags more

Archives

Today

Total

관리 메뉴

C-log

💅✨Decorate from CSS : 캐스케이딩(2) 본문

💅CSS/⚡ver.0

💅✨Decorate from CSS : 캐스케이딩(2)

4:Bee 2024. 2. 19. 13:49

728x90

캐스케이딩 1부에 이어서 2부를 시작하겠다. 이번 포스팅에서는 캐스케이딩의 규칙을 살펴볼 것이다. 여려 css가 중첩되어 있을 때 우선순위에 관해서 다룰 것이다. 먼저 코드를 살펴보자.

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<ul>

</ul>

</body>

</html>

li {

color: red;

}

#idsel {

color: blue;

}

.classsel {

color: green;

}

이렇게 작서된 코드의 li들의 코드 색상은 어떻게 적용이 될지 먼저 예상을 해보자. 결과는 아래 더보기와 같다.

결과적으로 보았을 때는 html에 작성한 style의 attribute color가 우선적으로 적용이 되었다. 그렇다면 해당 style attribute를 삭제하고 나면 어떻게 우선순위가 적용이 될까? 아래 더보기를 살펴보자.

이제는 id태그의 선택자가 적용이 되었다. 그렇다면 우리는 알 수있다. html에 직접적인 style attribute가 우선순위가 높고 그 다음으로 id의 선택자가 우선순위가 높다는 것을 말이다. 그렇다면 이번엔 id의 선택자를 삭제하게 되면 class의 선택자가 적용이되는 것을 확인 할 수 있다. 그렇게 class 선택자마저 지우면 남는 선택자는 li tag 선택자만이 남게 된다. 이제 캐스케이딩의 규칙을 정리해 보자면 아래 와같은 순서를 가지게 된다.

* attribute와 property의 차이 : 둘 다 속성이란 뜻을 지니고 있지만 attribute는 html의 속성이다. property는 DOM의 속성이다.

style attribute
id selector
class selector
tag selector

마지막으로 중첩된 css의 캐스케이딩의 규칙을 무시하고 내가 원하는 선택자를 우선순위로 두는 방법은 아래와 같다.

li {

color: red !important;

}

#idsel {

color: blue;

}

.classsel {

color: green;

}

우리가 작성한 css의 캐스케이딩 규칙 중 가장 낮은 순위는 li tag 선택자이다. 따라 이 선택자를 가장 우선순위로 두기 위해서는 !important 문법을 사용하면 된다. 그렇다면 나머지 우선순위들을 모두 무시하고 결과가 아래와 같이 나온다.

하지만 이 방법이 좋은 방법은 아니지만 간혹 css를 작성하는 도중에 우선순위를 확인하는 차원에서 사용하는 정도가 권장되는 방법으로 보인다.

이렇게 css의 캐스케이딩에 관한 포스팅을 마쳤다. css의 공식문서에 가장 첫 페이지에 등장되는 만큼 중요한 개념이다. css를 작성할 때 이를 주의하면서 작성하면 된다. 더 나아가서 우리가 이제 여러 css 라이브러리를 사용할 것인데 css의 캐스케이딩을 생각하면서 각 라이브러리들을 비교하며 살펴보면 더 좋은 선택을 하게 되지 않을까 한다.

728x90

저작자표시

'💅CSS > ⚡ver.0' 카테고리의 다른 글

💅✨Decorate from CSS : inline block (0)	2024.02.19
💅Decorate from CSS : barcket&Emmet (0)	2024.02.19
💅✨Decorate from CSS : 캐스케이딩(1) (0)	2024.02.19
💅Decorate from CSS : 상속 (0)	2024.02.18
💅Decorate from CSS : Text - align (0)	2024.02.18

'💅CSS/⚡ver.0' Related Articles

Comments

C-log

💅✨Decorate from CSS : 캐스케이딩(2) 본문

💅✨Decorate from CSS : 캐스케이딩(2)

'💅CSS > ⚡ver.0' 카테고리의 다른 글

티스토리툴바