1. 캐스캐이딩(Cascading)의 의미
① 캐스캐이딩(Cascading)은 위에서 아래로 흐른다는 의미
② ‘캐스캐이딩’은 선택자에 적용된 많은 스타일 중에 어떤 스타일을 나타낼지를 결정하는 것을 뜻함
③ 스타일이 동시에 적용될 때 스타일 간 충돌을 막기 위한 방법이 위에서 아래로 흐르며 적용되는 방법
④ 위 방법에는 두 가지 원칙이 존재
- 스타일 우선순위 : 스타일 규칙의 중요도, 적용 범위에 따라 우선순위가 결정되고 그 우선순위에 따라 위에서 아래로 스타일이 적용됨
- 스타일 상속 : 태그들의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달
2. 스타일 우선순위
① 스타일 우선순위는 캐스캐이딩에서 가장 중요한 개념
② 우선순위는 다음의 세 가지 개념에 따라 지정됨. 중요도, 명시도, 소스에서의 순서
3. 중요도(Importance) – 얼마나 중요한가
① CSS 선언의 중요도는 스타일이 어디서 선언되었는가에 따라 달라짐.
② 아래 순서는 가장 중요한 것부터 차례로 나열한 것
③ 사용자 스타일 시트 - 저시력자나 색약자 등과 같이 특별한 조건이 필요한 사용자에 맞게 구성해 놓은 스타일 시트
ex) 저시력자를 위한 윈도우의 고대비 설정
- 사용자 스타일 시트는 제작자가 제어 불가능하고 최우선순위로 적용됨
- 고대비 모드 : Alt + Shift + Prt Sc (css가 아예 먹히지 않음)
④ 제작자 스타일 시트
- 사이트를 제작하면서 만든 스타일 시트를 의미함.
- CSS를 학습하면서 만들어 나갈 스타일 시트가 바로 제작자 스타일 시트
- 제작자 스타일 시트는 ‘일반 스타일＇과 ‘중요 스타일＇로 나뉨.
- 일반 스타일 : 스타일 시트에서 작성하는 일반적인 스타일 규칙
- 중요 스타일 : 어떤 제작자 스타일보다 최우선 적용해야 할 스타일, 스타일 설정 값 뒤에 !important를 붙임
- !import;로 설정하면 개발자나 디자이너가 수정할 수 없음
⑤ 기본적인 브라우저 스타일 시트
- 브라우저들마다 기본적으로 지정하고 있는 스타일 시트
- 브라우저마다 텍스트 링크에 밑줄을 긋거나 파란색 글자로 표시하는 등 기본 스타일이 존재
- 별도의 스타일을 지정하지 않으면 브라우저 스타일로 지정
<예제 – cascading-001.html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>중요도</title>
<style>
p {
font-style: italic; /* 글자 스타일 */
color: blue; /* 글자 색 */
}
p {
color: red !important; /* 중요 스타일 우선 적용 */
}
</style>
</head>
<body>
<!--img+h1+ul>li*3-->
<img src="images/sydney.png" alt="시드니 오페라 하우스">
<h1>세계 3대 미항</h1>
<p>시드니(Syeney), 호주</p>
<p>리우데자네이루(Rio de Janeiro), 브라질</p>
<p>나폴리(Naples), 이탈리아</p>
</body>
</html>
4. 명시도(Specificity) – 얼마나 한정지을 수 있는가
<예제 – cascading-002.html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>명시도</title>
<style>
/*태그 선택자가 마지막으로 적용*/
h1 {
color: blue;
}
/*아이디 선택자 제일 우선 적용*/
#habor {
border: 1px solid gray;
padding: 10px;
color: green;
}
/*클래스 선택자가 두번째로 적용*/
.heading {
color: red;
}
</style>
</head>
<body>
<!--img+h1+ul>li*3-->
<img src="images/sydney.png" alt="시드니 오페라 하우스">
<h1 id="habor" class="heading">세계 3대 미항</h1>
<p>시드니(Syeney), 호주</p>
<p>리우데자네이루(Rio de Janeiro), 브라질</p>
<p>나폴리(Naples), 이탈리아</p>
</body>
</html>
5. 소스에서의 순서(Source Order)
① 스타일 시트에서 중요도와 명시도가 같다면 스타일 우선순위를 정하는 것은 '소스의 순서'이다.
② 소스에서 나중에 정의된 스타일이 먼저 정의된 스타일을 덮어씀
<예제 – cascading-003.html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>소스에서의 순서</title>
<style>
p {
color: green;
}
p {
color: blue;
}
p {
color: red;
}
</style>
</head>
<body>
<!--img+h1+ul>li*3-->
<img src="images/sydney.png" alt="시드니 오페라 하우스">
<h1 id="habor" class="heading">세계 3대 미항</h1>
<p>시드니(Syeney), 호주</p>
<p>리우데자네이루(Rio de Janeiro), 브라질</p>
<p>나폴리(Naples), 이탈리아</p>
</body>
</html>
6. 스타일 상속
① 스타일 상속은 위에서 아래로 흐르면서 적용되는 방법의 두 번째 원칙
② 웹 문서에서 사용되는 태그들은 서로 포함 관계가 존재하는 데 포함하는 태그를 부모 요소, 포함된 태그를 자식 요소라고 함.
③ 자식 요소에 별도의 스타일을 지정하지 않으면 부모 요소에 있는 스타일 속성들이 자식 요소로 전달되는데 이것을 스타일 상속이라고 함.
<예제 – inherit-001.html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스타일 상속</title>
<style>
/*body안에서 선언된 모든 자식 태그에 동일한 스타일이 적용됨*/
body {
font-family: "돋움"; /* 글꼴 */
color: darkgreen; /* 글자색 */
}
</style>
</head>
<body>
<!--h1+ul>li*10-->
<h1>뉴욕 타임즈에서 발표한 세계 10대 슈퍼푸드</h1>
<ul>
<li>블루베리</li>
<li>귀리</li>
<li>토마토</li>
<li>시금치</li>
<li>적포도주</li>
<li>견과류</li>
<li>브로콜리</li>
<li>연어</li>
<li>마늘</li>
<li>녹차</li>
</ul>
</body>
</html>
'💻 1. 웹개발_Front end > 1-3 CSS' 카테고리의 다른 글
| [CSS] 02-1 글꼴 관련 스타일 (0) | 2021.09.05 |
|---|---|
| [CSS] 01-5 CSS3와 CSS 모듈 (0) | 2021.09.05 |
| [CSS] 01-3 주요 선택자 (0) | 2021.09.05 |
| [CSS] 01-2. 스타일과 스타일 시트 (0) | 2021.09.05 |
| [CSS] 01-1 CSS 기초 (0) | 2021.09.05 |
댓글