지난 시간에 이어서 CSS 우선순위 규칙에 대해서 알아보도록 하겠습니다.
CSS 스타일이 여러개 적용된 경우 어떻게 우선 순위를 정해야하는지 이어서 살펴 보도록 하겠습니다.
CSS의 우선순의를 결정하는 세가지 요소
2) 명시도
스타일이 여러개가 적용되면 당연히 충돌이 일어나겠죠? 그런데 그럼에도 불구하고 웹페이지는 에러를 쏟아내지 않습니다. 알아서 스타일의 우선순위에 따라 스타일을 적용했기때문입니다. 이번에는 스타일 적용 범위에 따라 우선순위를 정하는 '명시도'에 대해 알아보겠습니다.
명시도를 적용하면 범위가 작으면 작을 수록 우선 순위가 높아집니다.
인라인 스타일 > id 스타일 > 클래스 스타일 > 태그 스타일
예를 들어 id 선택자는 클래스 선택자나 태그 선택자보다도 명시도가 높습니다.
인라인 스타일이란?
: style 속성을 바로 사용하여 CSS 스타일을 적용하는 방법으로 해당 요소에만 스타일을 적용할 수 있습니다.
<p style="color:blue;"> 명시도 </p>
id 스타일?
: 특정 id를 가지는 요소에 스타일을 적용하는 방법입니다.
<p id="test"> 명시도 </p> #test {color: red;}
클래스 스타일이란?
: 동일한 클래스 이름을 가지는 모든 요소들에게 스타일을 적용하는 방법입니다.
<p class="test"> 명시도 </p> .test {color: red;}
태그 스타일
: 웹 문서에 사용되는 특정 태그에 스타일을 적용하는 방법입니다. 같은 태그를 사용한 요소는 같은 스타일이 적용됩니다.
h1 {color: black;}
3) 코드 순서
스타일 시트에서 중요도와 명시도가 같다면, 코드의 순서를 고려해야 합니다.
나중에 적용된 스타일이 이전에 적용된 스타일을 덮어쓰기 때문입니다. 아래 예제에서는 둘 다 p태그의 스타일을 적용했는데요. 더 아래 쓰여진 p태그의 스타일이 더 우선시 되는 걸 볼 수있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet">
<title>우선순위</title>
</head>
<body>
<p>안녕하세요</p>
<p>내 이름은 '지금'입니다</p>
<p>나이는 24살입니다</p>
<p>모두 반가워요</p>
</body>
</html>p {
font-size: 20px;
text-align: center;
color: red;
}
p {
color: green;
}
짜잔, 아래에 있는 p태그가 적용된 걸 볼 수 있습니다.
근데 혹시 눈치채셨나요? 지난 시간의 '!important'와 같은 예제입니다. 중요 스타일을 사용하지 않았어도 사실은 소스의 순서 때문에 아래에 있는 태그가 적용되었을 것입니다.
'지금, 개발하기 > CSS' 카테고리의 다른 글
| HTML/CSS] 폰트 설정 (0) | 2021.05.31 |
|---|---|
| HTML/CSS] 한글이 깨져요 ㅜㅜ (0) | 2021.05.29 |
| HTML/CSS] CSS 우선순위는어떻게 정해지나요? 1탄 (0) | 2021.05.27 |
| HTML/CSS] CSS에도 상속이 있나요? (0) | 2021.05.25 |
| HTML/CSS] 가상클래스(Pseudo-class)란? (0) | 2021.05.24 |
