캐스캐이딩(Cascading)의 의미
CSS에서 'C'는 캐스캐이딩의 약자로 '위에서 아래로 흐르는 스타일 시트'라는 뜻이빈다.
- 위에서 아래로 흐른다는 '캐스캐이딩'은 선택자에 적용된 많은 스타일 중에 어떤 스타일을 나타낼지를 결정함을 뜻합니다.
-1.스타일 우선순위 - 스타일 규칙의 중요도, 적용 범위에 따라 우선순위가 결정되고 그 우선순위에 따라 위에서 아래로 스타일이 적용됩니다.
-2.스타일 상속- 태그들의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달합니다.
1. 스타일 우선순위
첫 번째 원칙인 '스타일 우선순위'는 캐스케이딩에서 가장중요합니다.
이떄 우선순위란 어떤 스타일을 먼저 적용할 것인지 결정하는 규칙을 말합니다.
-CSS 선언의 중요성은 스타일이 어디서 선언되었는가에 따라 달라집니다.아래 순서는 가장 중요한것부터 차례로 나열한 것입니다.
- 1.사용자 스타일 시트의 중요 스타일
- 2.제작자 스타일 시트의 중요 스타일
- 3.제작자 스타일 시트의 일반 스타일
- 4.기본적인 브라우저 스타일 시트
적용 범위(Specificity)
하나의 요소에 여러 스타일이 적용 될경우 스타일이 충돌하면서 스타일 적용범위에 따라 우선순위를 정할 수도 있습니다.
- 스타일 적용 범위가 좁을수록, 즉 정확히 필요한 요소에만 적용할 스타일일수록 우선순위가 높아집니다.
👉1.인라인 스타일
👉2.id 스타일
👉3.클래스 스타일
👉4.태그 스타일
<!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{
color:blue;
}
h2{
color:brown !important;
}
#container {
width:600px; /* 너비 */
padding:15px; /* 테두리와 내용 사이의 여백 */
border:1px dotted gray; /* 테두리 스타일 */
}
</style>
</head>
<body>
<div id="container">
<h2 style="color:green">이지스퍼블리싱의 미션</h2>
<p>사람에게 구체적으로 도움을 주는 책,<br>
우리는 열심히 사는 사람들에게 도움이 되고 싶습니다.<br>
</p>
<p>우리는 책을 출간하기 전에 질문할 것입니다.</p>
<p style="color:red; font-style:italic;">이 책이 사람들에게 도움이 됩니까?</p>
</div>
</body>
</html>
- 1.이 예제를 보면 문 서전체의 글자 색을 blue로 지정했지만 마지막
<p>요소에는 인라인 스타일(글자색을 빨강으로 ,글자스타일을 이텔릭채로)을 사용하고 있어서 인라인 스타일에서 정의한 빨간색의 이텔릭체로 표시됩니다.왜냐하면 인라인 스타일의 우선순위가 높기 때문입니다. - 2.
<h2>의 요소인 '이지퍼블리싱의 미션'이란 글자를 보면 이경우에도 인라인 스타일(글자색을 녹색으로)을 사용했지만 브라우저에서 확인해보면 갈색으로 나타내고 있습니다.
왜냐하면<h2>태그 스타일을 지정할 때 !important를 사용해 중요스타일로 지정하여 인라인 스타일보다 우선순위가 높아졌기 때문입니다.
2.스타일 상속
웹 문서에서 사용하는 여러 태그들은 서로 포함 관계가 있는데 포함하는 태그를 부모 요소, 포함된 태그를 자식 요소라고 하빈다. 스타일 시트에서는 자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소에 있는 스타일 속성들이 자식 요소로 전달되는데 이것을 '스타일 상속'이라고 합니다.
- 예를 들어
<body>태그는<h1>태그와<h2>태그,<p>태그의 부모 요소입니다.
그래서<body>태그 스타일(글자 색이파랑)이 그대로<h1>,<h2>,<p>태그에도 적용됩니다.
하지만<h2>태그의 경우에는 스타일 시트 안에 h2태그 스타일(글자색이 갈색)이 정의 되어 있기때문에 우선순위에 따라 h2태그에는 갈색이 적용됩니다.
<!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>
- 이렇게 상속을 이용하면 스타일 시트를 효과적으로 만들 수 있습니다.
- 웹 문서의 모든 텍스트에 같은 글꼴을 사용하려고 할 때 각 요소마다 글꼴을 지정하지 않고,
<body>태그에 글꼴 스타일을 작성하면<body>이하의 자식 요소에 같은 글꼴이 적용되기 때문입니다. - 스타일 상속에서 주의할 것은 스타일의 모든 속성이 부모 요소에서 자식 요소로 상속된다는 것은 아닙니다.
(위의 소스에서 보듯이 글자 색은 자식 요소로 상속되지만 부모 요소에 배경 이미지나 배경색이 있었다면 자식 요소에 상속 되지 않습니다.) - 배경색과 이미지는 스타일이 상속되지 않습니다.
-만약 <body>태그에 배경이미지가 사용되었을 떄 자식 요소에도 배경 이미지가 상속된다면 배경이미지가 수없이 반복해 표시될 것입니다.
-즉 자식 요소의 배경 색이나 배경이미지는 상속되지 않고 기본값인 '투명'으로 지정됩니다.
블로그 이전합니다! https://jyyoun1022.tistory.com/