[CSS3] 스타일 우선순위, 스타일 상속 [CSS : Cascading Style Sheets]

---

- 스타일 우선순위, 스타일 상속

1. CSS란?

CSS: Cascading Style Sheets의 약자
'위에서 아래로 흐른다'는 의미로, 선택자에 적용된 많은 스타일 중 어떤 스타일을 나타낼지 결정한다.

---

2. 스타일 우선순위

스타일 규칙의 중요도, 적용 범위에 따라 우선순위가 결정된다.

1. 사용자 스타일 시트의 중요 스타일 : 저시력자나 색약자를 위한 스타일. 제작자 제어 불가
2. 제작자 스타일 시트의 중요 스타일 : !important가 붙은 스타일
3. 제작자 스타일 시트의 일반 스타일
4. 기본적인 브라우저 스타일 시트

---

- 하나의 요소에 여러 스타일이 적용된 경우

⑴ 인라인 스타일 > ⑵ id 스타일 > ⑶ 클래스 스타일 > ⑷ 태그 스타일

<head>
    <style>
        body h2#id.cls {color: gold;}
        html body #id {color: green;}
        .cls {color: red;}
        * {color: blue;}
        h2 {color: orange; font-family: koverwatch, 궁서;}
    </style>
</head>
<body>
    <h2 class="cls">문단 텍스트</h2>
    <h2 class="cls" id="id">문단 텍스트</h2>
    <h2 class="cls">문단 텍스트</h2>
    <h2 id="id">문단 텍스트</h2>
</body>

스타일 우선순위 예시

---

- 소스에서의 순서

나중에 온 스타일이 먼저 온 스타일을 덮어쓴다.

---

3. 스타일 상속

태그들의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로 전달한다.

<head>
    <style>
        body {
            color:blue; /* 글자 색 파랑 */
        }
        h2 {
            font-size:20px; /* 글자 크기 20px */
            color:brown; /* 글자 색 갈색 */
        }
    </style>
</head>
<body>
    <h1>CSS</h1>
    <h2>웹 문서의 디자인과 내용을 분리합니다</h2>
    <p>웹 표준에 의한 웹 문서는 디자인과 내용이 분리되어 있습니다.</p>
    <p>내용은 HTML을 이용해 구성하고, 디자인은 CSS를 이용해 꾸미는 것입니다.</p>
</body>

스타일 상속 예시

 

참고문헌 : 고경희(2019), HTML5+CSS3 웹 표준의 정석, 이지스 퍼블리싱

---