11.1 계단식 스타일 (Cascading)
CSS의 기본 원리들에는 계단식 스타일, 상속, 특이성이 포함돼. 이 원리들을 이해하면 웹 페이지의 스타일과 외관을 더 잘 조절할 수 있어.
계단식 스타일 (Cascading)
계단식 스타일은 CSS의 기본 원리로, 여러 규칙이 충돌할 때 스타일을 어떻게 적용할지 결정해. 계단식 스타일에서는 브라우저가 다음 규칙을 사용해서 충돌을 해결해:
-
원천의 순서: 스타일은 외부 스타일 시트 (CSS 파일), 내부 스타일 시트 (
<style>태그 내부), 인라인 스타일 (HTML 요소의style속성) 등 여러 장소에서 정의될 수 있어. 규칙은 나타난 순서대로 적용돼. - 특이성: 각 선택자는 자신만의 특이성 레벨을 가지고 있어. 선택자의 특이성이 높을수록 우선 순위가 높아.
-
중요성 (Importance):
!important지시어가 있는 규칙은 가장 높은 우선 순위를 가짐으로 다른 충돌하는 규칙이 있어도 적용돼.
계단식 스타일의 예:
이 예시에서는, 인라인 스타일이 내부 스타일보다 우선하기 때문에 배경색은 노란색이 될 거야. 텍스트 색상도 인라인 스타일이 우선해서 빨간색이 돼.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 계단식 스타일의 예시</title>
<style>
body {
background-color: lightblue; /* 내부 스타일 */
}
p {
color: green;
}
</style>
</head>
<body style="background-color: yellow;"> <!-- 인라인 스타일 -->
<p style="color: red;">CSS 계단식 스타일의 예시</p>
</body>
</html>
11.2 상속 (Inheritance)
상속은 자식 요소들이 부모 요소의 스타일을 받아들이는 과정이야. 모든 CSS 속성이 상속되지는 않아. 상속 가능한 속성에는 텍스트 색, 글꼴 가족, 줄 간격 등이 있어.
상속의 예:
이 예시에서는 <p> 요소가 <body> 요소의 글꼴과 색상을 상속하고, .container 클래스에서 글꼴 크기를 상속해.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 상속의 예시</title>
<style>
body {
font-family: Arial, sans-serif;
color: blue;
}
.container {
font-size: 18px;
}
</style>
</head>
<body>
<div class="container">
<p>이 텍스트는 body에서 글꼴과 색상을 상속하고, ".container"에서 글꼴 크기를 상속해.</p>
</div>
</body>
</html>
11.3 특이성 (Specificity)
특이성은 여러 규칙이 동일한 요소와 일치할 때 어떤 CSS 규칙이 요소에 적용될지를 결정해. 특이성은 규칙에서 선택자의 수와 유형에 따라 계산돼.
특이성 계산 규칙:
- 인라인 스타일이 가장 높은 특이성을 가짐
- ID 선택자가 클래스, 가상 클래스, 속성보다 특이성이 높아
- 클래스, 가상 클래스, 속성이 요소 및 가상 요소보다 특이성이 높아
- 요소 및 가상 요소는 가장 낮은 특이성을 가짐
특이성 계산의 예:
이 예시에서는 #unique 선택자가 가장 높은 특이성을 가지기 때문에 텍스트가 빨간색으로 표시될 거야.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 특이성의 예시</title>
<style>
p {
color: blue; /* 특이성 0-0-0-1 */
}
.highlight {
color: green; /* 특이성 0-0-1-0 */
}
#unique {
color: red; /* 특이성 0-1-0-0 */
}
</style>
</head>
<body>
<p class="highlight" id="unique">이 텍스트는 빨간색으로 표시될 거야.</p>
</body>
</html>
11.4 중요성 (Importance)
CSS는 개발자가 !important 지시어를 사용해 스타일의 우선순위를 명시적으로 지정할 수 있게 해줘. 이 지시어가 있는 규칙은 다른 규칙의 특이성과 상관없이 항상 적용돼.
!important 사용 예시:
이 예시에서는 !important를 사용한 규칙이 가장 높은 우선순위를 가지므로 텍스트가 파란색으로 표시될 거야.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS에서 !important 사용 예시</title>
<style>
p {
color: blue !important;
}
.highlight {
color: green;
}
</style>
</head>
<body>
<p class="highlight">이 텍스트는 "!important" 때문에 파란색으로 표시될 거야.</p>
</body>
</html>
11.5 CSS 원리들의 사용 예시
실제 작업에서 CSS 원리들의 사용 예시.
계단식 스타일과 특이성의 예시:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 계단식 스타일과 특이성의 예시</title>
<style>
body {
background-color: lightgray;
}
p {
color: blue;
}
.important {
color: red;
}
</style>
</head>
<body>
<p class="important">이 텍스트는 .important가 "p"보다 높은 특이성을 가지고 있어서 빨간색으로 표시될 거야.</p>
</body>
</html>
상속과 특이성의 예시:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 상속과 특이성의 예시</title>
<style>
body {
font-family: Arial, sans-serif;
color: blue;
}
.container {
color: green; /* body에서 모든 자식 요소들에 대한 색상을 덮어씀 */
}
.highlight {
color: red; /* .container 보다 높은 특이성을 가짐 */
}
</style>
</head>
<body>
<div class="container">
<p class="highlight">이 텍스트는 .highlight 클래스의 특이성 때문에 빨간색으로 표시될 거야.</p>
</div>
</body>
</html>
GO TO FULL VERSION