본 게시글은 인프런 강의 "CSS 기본부터 활용까지"를 보고 공부한 내용을 정리하고 있습니다.
[무료] CSS 기본부터 활용까지 - 인프런 | 강의
CSS는 HTML을 아름답게 꾸며주는 디자이너의 언어입니다. CSS는 디지털 컨텐츠를 생산하는 사람들에게는 붓 질과 같은 것이 아닐까 싶습니다. 이 수업에서는 디지털 붓 질을 하는 법을 알려드립니
www.inflearn.com
우선순위
하나의 태그에 여러 CSS효과가 중첩되어 있을 경우의 우선순위를 알아보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li{color:red;}
#idSel{color:blue;}
.classSel{color:green;}
</style>
</head>
<body>
<ul>
<li>html</li>
<li id="idSel" class="classSel" style="color:yellow">css</li>
<li>javascript</li>
</ul>
</body>
</html>다음과 같은 코드가 있을때 실행을 해서 나오는 css의 색에 따라 우선순위를 알아보려고한다.
다음을 실행하면 노란색이 나온다.
태그안에 style시트를 삭제해보자.
다음에 실행하면 파란색이 나온다.
id를 제거하고 실행해보면 초록색이 나온다.
클래스를 지우고 실행해보며 빨간색이 나온다.
다음의 실습의 결과로 알아낸 우선순위는
- style attribute
- id selector
- class selector
- tag selector
이렇게 된다.
간단하게 구체적이고 명시적일수록 우선순위가 높게 되고 포괄적이고 일반적일수록 우선순위가 낮다는 것을 알수 있게 된다.
하지만 !important 키워드를 사용하게 된다면 우선순위는 무시당하고 가장 높아진다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li{color:red !important;}
#idSel{color:blue;}
.classSel{color:green;}
</style>
</head>
<body>
<ul>
<li>html</li>
<li id="idSel" class="classSel" style="color:yellow">css</li>
<li>javascript</li>
</ul>
</body>
</html>
'프론트엔드 > CSS' 카테고리의 다른 글
| CSS 기본부터 활용까지 - 색상 color (0) | 2022.07.28 |
|---|---|
| CSS 기본부터 활용까지 - 크기 : font-size (0) | 2022.07.28 |
| CSS 기본부터 활용까지 - 캐스케이딩 소개 (0) | 2022.07.28 |
| CSS 기본부터 활용까지 - 상속 (0) | 2022.07.28 |
| CSS 기본부터 활용까지 - 가상클래스 선택자 (0) | 2022.07.25 |