와... 졸립다.
오늘은 하향법칙(cascade)을 정리해보고자 한돠..
하향법칙은 어떤 요소에 어떤 스타일의 속성을
적용할지 결정하는 규칙의 집합을 말한다.
한 태그에 여러 스타일이 적용될 때 어떻게 처리하고,
CSS 속성 충돌이 발생할 때 어떻게 해소할지 결정하는
웹 브라우저를 위한 규칙이다.
1. 계승되는 스타일은 누적된다
계승되는 모든 스타일의 모여
하나의 하이브리드 스타일(hybrid style)을 구성한다.
만약 이런 스타일이 있다면~
body { font-family: Verdana, Arial, Helvetica, sans-serif; }
p { color: #F30; }
strong {font-size: 24px; }
<strong> 태그는 body와 p의 스타일을 모두 물려받는다.
최종적으로 정리해보면 <strong> 태그는
strong {
font-family: verdana, Arial, Helvetiva, sans-serif;
color: #F30;
font-size: 24px;
}
스타일이 이렇게 적용된다.
2. 가장 가까운 선조가 이긴다
적용된 특별한 스타일이 없는 태그의 경우,
상속된 속성에서 충돌이 발생하면 가까운 조상의 속성이 승리한다.
예를 들어서 <table> 태그에 텍스트의
색상을 지정하는 스타일이 적용돼 있고,
그와는 다른 텍스트 색상을 지정하는
스타일이 해당 테이블의 <td> 태그에 적용돼 있다면
<td>의 하위 태는 <td> 스타일로부터 상속된 색상을 사용한다.
3. 직접 적용된 스타일이 이긴다
서체 색상이 <body>, <p>, <strong>에 적용돼 있을 경우,
<strong> 태그가 모든 속성을 압도한다.
<strong>만 색상이 다른 것을 볼 수 있다.
4. 하나의 태그, 많은 스타일
스타일 유형과 생성 순서에 따라,
브라우저는 하나 이상을 동시에 적용하게 될 수 있다.
1) 태그 스타일과 클래스 스타일이 한 태그에 적용되는 경우
예를 들어 <h2>에 대한 스타일이 정의돼 있고
.leadHeadline이라는 클래스 스타일이
같이 적용된 <h2>태그엔 두 스타일이 동시에 적용된다.
2) 스타일시트 안에 같은 스타일 이름이 두 번 이상 등장하는 경우
예를 들어 .leadHeadilne 그룹 선택자 스타일이 있고,
클래스 스타일 .headHeadline이 같은 스타일시트 안에 있다면
leadHeadline 클래스가 지정된 요소는 두 스타일을 동시에 사용한다.
3) 태그에 클래스와 ID 스타일이 전부 적용된 경우
예를 들어 #banner ID 스타일이 있고, .news라는 클래스 스타일이 있다.
<div id="banner" class="news">와 같은 태그가 있다면
당연히 banner와 news 스타일 전부 적용된다.
4) 충돌이 없는 한 브라우저는 모든 스타일의 속성을 하나로 합친다.
이렇게
5. 특이도(specificity): 어떤 스타일이 이기나
CSS는 스타일의 구체성을 결정하는
특이도(specificity)라는 척도를 제공한다.
1) 태그 선택자의 특이도는 1점
2) 클래스 선택자의 특이도는 10점
3) ID 선택자의 특이도는 100점
4) 내장 스타일(inline style)의 특이도는 1000점
웹 페이지에
<img id="logo" class="highlight" src="logo.gif" />
를 넣었을 때 만약 스타일에서 충돌이 생기면
ID 스타일(#logo)에 사용된 속성이 이긴다.
만약, 동점자 처리가 된다면 마지막 스타일이 이긴다.
* 외부 스타일시트 VS 내부 스타일시트
외부 스타일시트와 내부 스타일시트에 충돌하는 스타일이 있으면
스타일시트를 HTML 파일 어디에 놓느냐가 중요하다.
<style> 태그로 내부 스타일시트를 정의한 다음에 <link>를 사용해
외부스타일시트를 연결했다면 외부 스타일시트의 스타일이 이긴다.
*특이도를 무시하는 방법
그냥 !important를 속성 끝에 두면 된다.
.nav a { color: red; }
a { color: teal !important; }
5. 하향법칙 제어 방법
1) 특이도 변경
이럴 땐 .intro 클래스 스타일의 선택자를
#sidebar .intro로 변경해 특이도를 높여 해결한다.
하지만 이렇게 선택자를 추가해 특이도를 높여서
어떤 스타일이 승리하도록 만드는 걸 계속하면
'특이도 전쟁'이 벌어져 스타일시트가 길고
꼬인 이름으로 가득해지는 일이 벌어질 수도 있다.
선택자는 가능한 한 짧게 만들어야 한다.
2) 선택적 재정의(overriding)
예를 들어 <h2>의 외부스타일 시트를 정의했다고 하자.
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
color: #000;
}
홈페이지의 <h2> 태그를 더 큰 빨간색 서체로
표시되도록 만들려면??
내부 스타일시트에 추가하면 된다.
h2 {
font-size: 36px;
color: red;
}
또 다른 방법은 외부 스타일시트를 하나 더 만드는 것이다.
<link rel="stylesheet" href="css/styles.css"/>
<link rel="stylesheet" href="css/home.css/>
'CSS3 정리' 카테고리의 다른 글
| CSS 텍스트 서식, 서체(font) 사용하기 (2) (0) | 2020.08.02 |
|---|---|
| CSS 텍스트 서식, 서체(font) 사용하기 (1) (0) | 2020.07.30 |
| CSS 스타일 계승 (0) | 2020.07.14 |
| CSS 선택자 스타일 정리 (기본) (0) | 2020.07.12 |
| CSS 스타일과 스타일시트 만드는 법 (0) | 2020.07.08 |