CSS에서의 상속
이 기사에서는 CSS의 상속에 대해 설명합니다.
상속되는 속성과 상속되지 않는 속성의 예를 확인할 수 있습니다.
YouTube Video
미리보기를 위한 HTML
css-inheritance.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Inheritance</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-inheritance.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Inheritance</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header><h2>CSS Inheritance</h2></header>
19 <article>
20 <h3>Example of Inheritance</h3>
21 <section>
22 <p>
23 Example of P Element.<br>
24 <span>Example of Span Element</span>
25 </p>
26 </section>
27 <div>
28 Example of Div Element
29 </div>
30 <ul>
31 <li>List Item 1</li>
32 <li>List Item 2</li>
33 <li>List Item 3</li>
34 </ul>
35 </article>
36 <article>
37 <h3>all</h3>
38 <section>
39 <h4>Initial</h4>
40 <div class="all-initial">This is an initial element</div>
41 </section>
42 <section>
43 <h4>Inherit</h4>
44 <div class="parent-inherit">
45 <div class="all-inherit">This is an inherited element</div>
46 </div>
47 </section>
48 <section>
49 <h4>Unset All</h4>
50 <div class="parent-unset">
51 <div class="all-unset">This is an unset element</div>
52 </div>
53 </section>
54 <section>
55 <h4>all and !important</h4>
56 <div class="important-style">
57 <div class="all-with-important">
58 This is an initial element with !important
59 </div>
60 </div>
61 </section>
62 </article>
63 </main>
64</body>
65</html>CSS에서의 상속
CSS에서는 일부 속성이 부모 요소에서 자식 요소로 자동 상속됩니다. 이것은 매우 유용한 메커니즘으로, 특정 속성을 한 번 설정하면 자식 요소도 동일한 스타일을 갖게 되어 반복적으로 설정할 필요가 없습니다. 그러나 모든 속성이 상속되는 것은 아니며, 일부 속성은 상속되고 다른 일부는 상속되지 않습니다. 예를 들어, color와 font-family는 상속되지만, margin과 padding과 같은 박스 모델 속성은 상속되지 않습니다.
상속 속성
상속 가능한 속성은 주로 텍스트 및 폰트와 관련된 것입니다.
일반적으로 상속되는 속성
color: 텍스트 색상
1body {
2 color: black;
3}- 이 경우,
body안의 모든 자식 요소는 검은 텍스트 색상을 가질 것입니다.
font-family: 폰트 종류
1body {
2 font-family: "Times New Roman", cursive;
3}- 모든 자식 요소는
Arial글꼴을 사용합니다.
font-size: 텍스트 크기
1body {
2 font-size: 16px;
3}body내 모든 텍스트는 기본적으로16px입니다.
line-height: 줄 간격
1p {
2 line-height: 1.5;
3}<p>요소 내 텍스트는 1.5배의 줄 간격으로 표시되며, 자식 요소에도 영향을 미칩니다.
text-align: 텍스트 정렬
1div {
2 text-align: center;
3}div요소 내 텍스트 및 인라인 요소는 중앙에 배치됩니다.
visibility: 요소 가시성
1div {
2 visibility: hidden;
3}visibility는 요소의 가시성을 제어하는 속성입니다. 숨김으로 설정하면 해당 요소는 보이지 않게 됩니다.- 이 경우,
div내부의 자식 요소도 숨겨집니다.
list-style: 목록 스타일 (<ul>및<ol>의 목록 표시자)
1ul {
2 list-style: square;
3}- 이 경우,
ul태그 내의 목록 항목은 사각형 표식으로 표시됩니다.
예제:
상속되지 않는 속성
레이아웃 및 박스 모델과 관련된 속성은 일반적으로 상속되지 않습니다. 이러한 속성은 각 요소에 개별적으로 설정해야 합니다.
일반적인 상속되지 않는 속성
margin,padding: 요소의 외부 및 내부 여백
1div {
2 margin: 10px;
3 padding: 20px;
4}div요소에 외부 또는 내부 여백을 설정해도 자식 요소에는 영향을 미치지 않습니다.
border: 요소 테두리
1div {
2 border: 1px solid black;
3}- 부모 요소에 테두리를 설정해도 자식 요소에는 영향을 미치지 않습니다.
width,height: 요소의 너비 및 높이
1div {
2 width: 100px;
3 height: 50px;
4}- 부모 요소의 너비와 높이는 자식 요소에 자동으로 영향을 미치지 않습니다.
background: 배경 스타일
1body {
2 background-color: lightblue;
3}body에 설정된 배경색은 자식 요소에 직접 영향을 미치지 않습니다. 하지만 자식 요소의 배경이 투명한 경우, 부모 요소의 배경색이 비쳐 보일 수 있습니다.
예제:
상속 제어
상속은 inherit, initial, 또는 unset 키워드를 사용하여 제어할 수 있습니다.
- 상속을 활성화하려면:
inherit키워드를 사용하여 상속을 명시적으로 강제할 수 있습니다.
1div {
2 color: inherit; /* Inherit the color from its parent element */
3}- 상속을 원하지 않는 경우:
initial또는unset키워드를 사용하여 속성을 초기값으로 재설정할 수 있습니다.
1p {
2 color: initial; /* Reset the color to its initial/default value */
3}예제:
all 속성
all 속성은 상속 가능한 속성을 포함하여 특정 요소의 거의 모든 CSS 속성을 한 번에 재설정할 수 있는 속성입니다. 구체적으로, 다음 세 가지 키워드를 사용하여 요소의 속성을 설정할 수 있습니다:.
initial: 모든 속성을 초기값으로 재설정합니다.inherit: 부모 요소로부터 모든 속성을 상속받습니다.unset: 상속 가능한 속성은 상속되고, 그렇지 않은 경우 초기값으로 재설정됩니다.
all은 특정 속성만 개별적으로 설정하는 대신 속성을 대량으로 재설정하거나 설정하고자 할 때 매우 유용합니다.
초기값으로 재설정하는 예
1.all-initial {
2 all: initial;
3 background-color: lightskyblue;
4}-
특정 요소에 대해 이전에 설정한 모든 스타일을 재설정하고 초기 상태로 되돌리고 싶을 때, 다음과 같이
all: initial을 사용하세요. -
이 예에서
.all-initial클래스가 있는<div>요소의 모든 속성은 브라우저의 기본 초기값으로 재설정됩니다.
상속의 예
1.parent-inherit {
2 color: blue;
3 font-size: 20px;
4 border: 1px solid blue;
5}
6
7.all-inherit {
8 all: inherit;
9 background-color: lightskyblue;
10}all: inherit을 사용하면 모든 속성이 부모 요소로부터 상속됩니다.- 이 예에서는
.all-inherit클래스가 있는 요소가 부모 요소로부터color,font-size와 같은 모든 속성을 상속받습니다.
조건에 따라 초기값 또는 상속을 결정하는 예
1.parent-unset {
2 color: blue;
3}
4
5.all-unset {
6 font-weight: bold;
7}
8
9.all-unset {
10 all: unset;
11}all: unset을 사용하면 속성이 상속 가능하면 상속되고, 그렇지 않으면 초기값으로 재설정됩니다.- 이 경우,
color는 상속되고,font-weight는 초기값(보통normal)으로 재설정됩니다.
특이성과의 관계 (우선순위)
1.all-with-important {
2 color: red !important;
3 background-color: lightskyblue;
4}
5
6.all-with-important {
7 all: initial;
8}-
all속성은 강력한 재설정 메커니즘이지만 CSS의 우선순위 특성에 영향을 받습니다. 특정 요소에 강한 스타일 사양이 있으면all속성이 해당 스타일을 무효화하지 못할 수 있습니다. 예를 들어,!important로 지정된 속성은 영향을 받지 않습니다. -
이 예에서
all: initial로 스타일을 재설정하려고 해도,color: red !important사양 때문에color속성은 재설정되지 않습니다.
블록 레벨 요소와 인라인 요소
블록 레벨 요소
- 예제:
<div>,<p>,<h1>〜<h6>,<ul>,<li>,<section> - 특징:
- 항상 새 줄에 나타나며 부모 요소의 전체 너비를 채우도록 확장됩니다.
- 너비(
width)와 높이(height)를 자유롭게 설정할 수 있습니다. - 여백(
margin)과 패딩(padding)은 모든 방향으로 설정할 수 있으며 모든 면에 영향을 줍니다.
1div {
2 width: 80%; /* Set the width to 80% of its parent element's width */
3 padding: 20px; /* Add a padding of 20 pixels on all sides */
4 margin: 10px 0; /* Add a margin of 10 pixels top and bottom, 0 pixels left and right */
5}인라인 요소
- 예제:
<span>,<a>,<strong>,<em>,<img>,<label> - 특징:
- 동일한 줄에 있는 다른 인라인 요소와 나란히 표시됩니다.
- 너비(
width)와 높이(height)는 직접적으로 설정할 수 없습니다 (display: block이 적용되지 않은 경우). - 수직 방향으로 여백(
margin)이나 패딩(padding)을 설정하는 것은 제한적인 효과만 있습니다 (수평 여백과 패딩은 효과적임).
1a {
2 padding: 5px; /* Padding for inline elements */
3 margin-right: 10px; /* Set margin to the right */
4 color: blue;
5}블록 수준 요소와 인라인 요소의 차이점
-
너비와 높이 설정:
- 블록 수준 요소: 너비와 높이를 설정할 수 있습니다.
- 인라인 요소: 일반적으로 너비와 높이를 설정할 수 없습니다.
-
여백과 패딩:
- 블록 수준 요소: 여백과 패딩이 모든 면에 적용됩니다.
- 인라인 요소: 위아래 여백과 패딩은 비효과적이거나 제한적인 효과만 있습니다.
-
레이아웃 방법:
- 블록 수준 요소: 자동으로 새 줄에 배치됩니다.
- 인라인 요소: 다른 인라인 요소와 동일한 줄에 정렬됩니다.
보시다시피, 블록 수준 요소와 인라인 요소에 CSS 스타일이 적용되는 방식에는 차이가 있습니다. 블록 수준 요소에서는 너비, 높이, 여백 및 내부 여백과 같은 레이아웃 관련 CSS 속성이 지정한 대로 적용됩니다. 한편, 인라인 요소의 경우 너비, 높이, 여백 또는 패딩과 같은 레이아웃 관련 CSS 속성을 설정해도 적용되지 않거나 제한적으로 적용될 수 있습니다.
블록 레벨 및 인라인 요소의 CSS 처리
1span {
2 display: block; /* Display the span element as a block-level element */
3 width: 100px;
4 height: 50px;
5}그러나 display 속성을 block 또는 inline-block으로 설정하면, 인라인 요소를 블록 요소처럼 너비와 높이 스타일을 조정할 수 있습니다.
위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.