코밍이의 하루
[CSS3] 스타일 우선순위와 상속 본문
1. 개발 환경
| 구분 | 내용 |
| 사용 언어 | HTML5, CSS3 |
| 개발환경 | Visual Studio Code |
| 참고 도서 | [Do it] HTML5 + CSS3 웹 표준의 정석 |
| 웹브라우저 | Chrome |
2. 스타일 우선순위
- 우선순위 : 어떤 스타일을 먼저 적용할 것인지 결정하는 규칙
1) 얼마나 중요한가?(Importance)
| ① 사용자 스타일 시트의 중요 스타일 ② 제작자 스타일 시트의 중요 스타일 ③ 제작자 스타일 시트의 일반 스타일 ④ 기본적인 브라우저 스타일 시트 |
가장 중요한 것부터 차례로 나열한 것 |
① 사용자 스타일 시트
- 특별한 조건이 필요한 사용자가 그들에게 맞게 구성해 놓은 스타일 시트
- 시스템을 통해 만들어진 것이기 때문에 제작자가 제어할 수 없음
- ex) 윈도우의 '고대비' 설정
② 제작자 스타일 시트의 중요 스타일
- 제작자 스타일 시트: 사이트를 제작하면서 만든 스타일 시트
- 최우선으로 적용해야 할 스타일에는 !important를 붙임
③ 제작자 스타일 시트의 일반 스타일
- 사이트를 제작하면서 만든 스타일
- 가장 많이 사용하는 스타일
- 일반 스타일들 안에서 적용 범위에 따라 우선순위가 다름
④ 기본적인 브라우저 스타일 시트
- 브라우저의 스타일 시트 : 브라우저들마다 기본적으로 지정하고 있는 스타일
ex) 글자 색을 따로 지정하지 않으면 검은색 표시 → 브라우저에서 기본적으로 글자 색을 검정으로 지정
2) 적용 범위가 어디까지 인가?(Specificity)
| ① 인라인 스타일 ② id 스타일 ③ 클래스 스타일 ④ 태그 스타일 |
가장 중요한 것부터 차례로 나열한 것 |
① 인라인 스타일 : 태그 안에 style 속성을 사용해 해당 태그에만 스타일 적용
② id 스타일 : 지정한 부분에만 적용되는 스타일, 한 문서 안에 한 번만 적용할 수 있음
③ 클래스 스타일 : 웹 문서에서 지정한 부분에만 적용되는 스타일, 한 문서 안에 여러 번 적용할 수 있음
④ 태그 스타일: 웹 문서에 사용된 특정 태그에 똑같이 적용되는 스타일
3) 소스에서의 순서
- 소스에서 나중에 온 스타일이 먼저 온 스타일을 덮어씀
3. 스타일 상속
- 태그들의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달
1) 스타일 상속에서 주의할 것
- 스타일의 모든 속성이 부모 요소에서 자식 요소로 상속되는 것은 아님
- 글자 색은 자식 요소로 상속되지만 부모 요소에 배경 이미지나 배경색이 있었다면 자식 요소에 상속되지 않음
4. 소스 코드 및 실행 화면
- priority.html
<!doctype html>
<html lang="ko">
<head>
<title>온라인 프로필</title>
<meta charset="utf-8">
<style>
* {
margin: 20px auto; /* 내용을 화면 중앙에 배치 */
}
body {
color:blue; /* 문서 전체의 글자 색 */
}
#container {
width:600px; /* 너비 */
padding:15px; /* 테두리와 내용 사이의 여백 */
border:1px dotted gray; /* 테두리 스타일 */
}
h2 {
color:brown !important; /* 글자 색. 중요 스타일 */
}
</style>
</head>
<body>
<div id="container">
<h2 style="color:green;">이지스퍼블리싱의 미션</h2>
<p>사람에게 구체적으로 도움을 주는 책,<br>
우리는 열심히 사는 사람들에게 도움이 되고 싶습니다.<br>
<p>우리는 책을 출간하기 전에 질문할 것입니다.</p>
<p style="color:red; font-style:italic;">"이 책이 사람들에게 도움이 됩니까?"</p>
</div>
</body>
</html>
- inherit.html
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>스타일 상속</title>
<style>
body {
color:blue; /* 글자 색 파랑 */
}
h2{
font-size:20px; /* 글자 크기 20픽셀 */
color:brown; /* 글자 색 갈색 */
}
</style>
</head>
<body>
<h1>CSS</h1>
<h2>웹 문서의 디자인과 내용을 분리합니다</h2>
<p>웹 표준에 의한 웹 문서는 디자인과 내용이 분리되어 있습니다.</p>
<p>내용은 HTML을 이용해 구성하고, 디자인은 CSS를 이용해 꾸미는 것입니다.</p>
</body>
</html>
'웹언어 공부 > CSS3' 카테고리의 다른 글
| [CSS3] 브라우저 접두사 (0) | 2021.08.26 |
|---|---|
| [CSS3] 주요 선택자 (0) | 2021.08.26 |
| [CSS3] CSS(Cascading Style Sheets) 기초 (0) | 2021.08.26 |
