웹 문서에서는 스타일이 여러 곳에서 사용되기 때문에 우선순위가 중요!!
특히 상속의 개념과 캐스캐이딩의 개념이 중요!!
ex)
<!doctype html>
<html>
<head>
<metadata charset = "utf-8">
<title> 요안도라 </title>
<style>
body{
background-color:#333; /*배경색은 짙은 회색*/
color:#fff; /*글자색은 흰색*/
}
</style>
</head>
<body>
<h2>예약 방법 및 요금</h2>
<p>요안도라 예약의 가장 빠른 방법은?</p>
</body>
</html>
예제를 작성하여 보면 <body>안에 <h2>와 <p>가 같이 영향을 받는다.
이것을 스타일 상속이라고 하며, 부모로부터 자식에게 단계별로 스타일이 적용되기 때문에
계단식 이라는 의미를 가진 "캐스케이딩"이라는 단어가 스타일시트를 수식하는 말이 되었음.
단 주의점은 모든 속성이 상속이 되진 않는다.
만약 배경이 상속이 된 다면 모든 자식 요소들에게 전부 상속이 될 것이고
이는 자식의 수만큼 배경이 반복이 되면서 우리가 원하지 않는 결과를 가져 올 것이다.
ex)
<style>
ul{
color:blue;
list-style:squre;
} /* <ul>의 스타일 시트 */
</style>
<body>
<section>
<h2>예약 방법 및 요금</h2>
<p>요안도라 예약의 가장 빠른 방법은?</p>
<ul>
<li>예약 방법
<ul>
<li>직접 통화</li>
<li>문자 남기기</li>
</ul>
</li>
<li> 요금
<ul>
<li>1인 : 40,000원</li>
<li>2인 : 60,000원</li>
<li>3인 : 80,000원</li>
<li>4인 : 100,000원</li>
<li>4인 이상일 경우 상의해 주세요.</li>
</ul>
</li>
</ul> /*<ul> 태그의 스타일이 <li>태그에도 상속됨*/
</section>
</body>
스타일은 단계적으로 적용.
ex)
<style>
.accent { color:red; }
.accent { color:blue }
</style>
<p class="accent">테스트</p>
-> 이 경우 마지막으로 적용 된 blue 속성을 따른다.
ex 2)
<style>
.accent { color:red !important; }
.accent { color:blue }
</style>
<p class="accent">테스트</p>
'FrontEnd > CSS' 카테고리의 다른 글
| 01. CSS 기초 (0) | 2015.08.24 |
|---|