캐스케이딩이란? (적용 우선순위) 및 실습

CSS

- Cascading Style Sheet의 약자

- 웹브라우저와 사용자, 저자 모두가 조화를 이루어져햐 하는 철학을 구현하기 위한 방법으로 CSS를 탄생시킴

- 하지만 조화를 위해서는 대가가 필요, 대가가 바로 우선순위이다.

- 동시에 같은 디자인을 적용하면 저자 > 사용자 > 웹브라우저 우선순위가 적용한다.

실습

- 더 구체적인 것이 우선순위를 가진다.

- 다만 id 선택자보단 태그 안의 style 속성이 우선순위를 가진다.

- 더 포괄적인 것이 우선순위가 낮다.

제일 낮은 우선 순위인 li 선택자를 최상위 우선순위로 올리려면 !important를 사용해 우선순위를 높힐 수 있다.

다만 가급적 사용하지 않는 것이 좋다.

<!DOCTYPE html>

<html>

<head>

<style>

li {

color: red;

}

#idsel {

color: green;

}

.classel {

color: blue;

}

</style>

</head>

<body>

<ul>

<li>javascript</li>

</ul>

<ol>

<li>style attribute</li>

<li>id selector</li>

<li>class selector</li>

<li>tag selector</li>

</ol>

</body>

</html>

Frontend repository!