CSS 상속/우선순위 CSS 강좌 09강
※상속
▷상위 엘리먼트의 속성을 하위 엘리먼트가 물려 받는것을 속성이라 합니다.
▷상속이 가능하지 않은 속성도 존재합니다.
▷상속이 가능하지 않은 속성에 inHerited 값을 지정할 경우 강제로 상속이 가능합니다.
예제)
<body>
<ul style="color:red">
<li>
축구동호회
</li>
<li>
농구동호회
<ul>
<li>
농구동호회 주장
</li>
<li>
농구동호회 감독
</li>
<li>
농구동호회 코치진
<ul style="color:blue">
<li>
이농구 코치
</li>
<li>
김농구 코치
</li>
</ul>
</li>
</ul>
</li>
<li>
야구동호회
</li>
<li>
볼링동호회
</li>
<li>
탁구동호회
</li>
<li>
수영동호회
</li>
</ul>
</body>
가장 상위의 엘리먼트에서 선언한 속성이 하위 엘리먼트의 속성값으로 상속이 됩니다.
하지만 중간에 농구동호회 코치진에서 선언한 속성이 농구동호회 자식 엘리먼트에만 영향을 미칩니다.
예제)
<body>
<ul style="border:1px solid red">
<li>
축구동호회
</li>
<li>
농구동호회
<ul>
<li>
농구동호회 주장
</li>
<li>
농구동호회 감독
</li>
<li>
농구동호회 코치진
<ul style="color:blue">
<li>
이농구 코치
</li>
<li>
김농구 코치
</li>
</ul>
</li>
</ul>
</li>
<li>
야구동호회
</li>
<li>
볼링동호회
</li>
<li>
탁구동호회
</li>
<li>
수영동호회
</li>
</ul>
</body>
border 속성은 상속이 되지 않는 속성이므로 하위 엘리먼트에 영향을 미치지 않습니다.
하지만 inherit 속성을 사용하면 상속이 가능합니다.
※우선순위
▷HTML 문서에서 엘리먼트는 다양한 CSS 선언의 영향을 받습니다.
▷충돌을 피하기 위해서 우선순위를 정하는데 '캐스케이딩'이라고 합니다.
▷캐스케이딩으로 우선순위를 정하는데에는 다음과 같이 세가지 규칙이 있음.
(1)중요도 - css의 선언 위치에 따라 우선순위가 달라짐
(2)명시도 - 대상을 명확하게 특정하면 명시도가 높아지고 우선순위도 높아짐
(3)소스순서 - css 선언 위치에 따라 선언을 나중에 할수록 우선순위가 높아짐
※중요도
▷css는 선언하는 위치에 따라 우선순위가 달라집니다.
아래 위치의 종류에서 밑으로 내려갈수록 우선순위가 높아집니다.
(1)브라우저의 CSS
(2)사용자 CSS 일반선언
(3)저작자 CSS 일반선언
(4)저작자 CSS의 !important (우선순위가 가장높음)
예제)
*스타일 요소
<style>
h1{
color:red;
}
h1{
color:blue;
}
</style>
*HTML 요소
<body>
<h1>
Go Learning!
</h1>
<h1>
Go Learning!
</h1>
</body>
CSS 선언 위치에 따라 나중에 선언한 스타일의 값으로 설정됩니다.
하지만 여기서 !important 속성을 사용해 보겠습니다.
※명시도
▷엘리먼트를 상세하게 기술 할수록 우선순위가 높아집니다.
아래 지정방법에서 밑으로 내려갈수록 우선순위가 높아집니다.
(1)태그의 type
(2)엘리먼트의 class
(3)엘리먼트의 id
(4)inline으로 엘리먼트에 직접기술 (style="속성") 우선순위가 가장 높음
예제)
*스타일 요소
<style>
h1{
color:blue;
}
</style>
*HTML 요소
<h1>
Go Learning!
</h1>
<h1 style="color:red">
Go Learning!
</h1>
예제)
*스타일 요소
<style>
div{
width:100px; height:100px;
background-color:blue;
border:4px solid red;
}
</style>
*HTML 요소
<body>
<div id="divOne" class="box">
</div>
<div id="divTwo" class="box">
</div>
</body>
위 소스에서 박스 클래스에 스타일을 추가해 보겠습니다.
다시한번 위 소스에서 박스 아이디에 스타일을 추가해 보겠습니다.
태그 타입 > 태그 클래스 > 태그 아이디 순서로 우선순위가 정해지는 것을 볼 수 있습니다.
'코딩이야기 > CSS' 카테고리의 다른 글
| CSS 포지션 스타일 CSS 강좌 08강 (0) | 2016.03.10 |
|---|---|
| CSS 박스 스타일 CSS 강좌 07강 (0) | 2016.03.08 |
| CSS 강좌 06강 - CSS 링크/표/배경 스타일 (0) | 2016.03.05 |
| CSS 강좌 05강 - CSS font 스타일 (0) | 2016.03.03 |
| CSS 강좌 04강 - CSS 텍스트 스타일 (0) | 2016.03.03 |