CSS 상속과 cascading
CSS 효과들 간의 규칙을 이해하기 위해 상속과 cascading에 대하여 알아보자.
🦥 상속
부모 element의 효과가 자식 element에도 적용되는 것
생산성을 높이기 위한 중요한 역할
문서의 모든 요소에 어떤 효과를 주고 싶다면, 요소 하나하나에 효과를 다 적용할 필요는 없다. 효과를 주고 싶은 요소들을 포함하는 부모 element에 효과를 주게 되면 자식들에도 다 적용된다.
- 가장 조상 태그는 html. html 활용하면 문서 전체의 요소에 효과를 줄 수 있음.
#,.을 이용한 선택자도 자식 element에 효과가 적용된다.- 상속되지 않는 것이 더 효율적인 경우에는, 상속되지 않기도 한다.
실습 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
/*가장 조상 태그, 문서 전체 폰트 컬러가 붉은색으로 출력됨.
li{color:red;}
h1{color:red;}
와 같은 효과. 따라서, 각 요소에 효과를 적용할 필요가 없음 */
html{color: red}
/* y_col 태그의 자식 태그들에 적용*/
#y_col{color: black}
/*상속되지 않는 속성. 상속되지 않는 것이 효율적이기 때문*/
body{border:1px solid red}
</style>
</head>
<body>
<div id="container">
<h1>Color</h1>
<ul>
<li>Red</li>
<li>Blue</li>
<li id="y_col">Yellow</li>
</ul>
<h1>Fruit</h1>
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Lemon</li>
<li>Melon</li>
</ul>
</div>
</body>
</html>
[실행 결과]
🦥 Cascading
CSS는 Cascading Style Sheet
Cascading이란 하나의 태그에 중첩된 명령 간의 우선순위다.
- 웹 브라우저 web browser와 사용자 user와 저자 author가 같은 태그에 대해서 효과를 적용하게 되면, 우선 순위는 web browser < user < author 순이다.
- 선택자 우선순위
- default 우선순위 : body 내부 style attribute > id 선택자 > class 선택자 > tag 선택자
!important를 추가해주면 가장 우선이 됨- 덜 명시적인 것, 즉, 추상적인 것이 우선순위가 낮음
<li id="choiiis" class="devlog" style="color : green">devlog<li>
위 코드에서 우선 순위는 아래와 같다.
- 1순위. style=”color : green”
- 2순위. id = “choiiis”
- 3순위. class = “devlog”
- 4순위.
<li>태그
실습 코드
🌴 실습 1 : 모든 선택자 다 있을 때
- body 내부의 style attribute에 따라서 deeppink로 나타남
- li 태그 효과보다 style attribute가 강력하므로 li 태그에서 적용된 효과가 나타나지 않음.
<!DOCTYPE html>
<html>
<head>
<style>
li{color: deepskyblue;}
#choiiis{color: crimson;}
.devlog{color: green;}
</style>
</head>
<body>
<ul>
<li>html</li>
<li id="choiiis" class="devlog" style="color:deeppink">css</li>
<li>javascript</li>
</ul>
<ol>
<li>style attribute</li>
<li>id selector</li>
<li>class selector</li>
<li>tag selector</li>
</ol>
</body>
</html>
[실행 결과]
🌴 실습 2 : !important를 추가하면 우선순위와 관계없이 그 효과 적용
<style>
li{color: deepskyblue !important;}
#choiiis{color: crimson;}
.devlog{color: green;}
</style>
[실행 결과]
🌴 실습 3 : body 내부의 style attribute를 제거
다음 우선순위인 id 선택자의 효과가 적용 ▷ color: crimson
<ul>
<li>html</li>
<li id="choiiis" class="devlog">css</li>
<li>javascript</li>
</ul>
[실행 결과]
id 선택자도 제거하면 class 선택자에 적용된 효과 적용 ▷ color: green
<ul>
<li>html</li>
<li class="devlog">css</li>
<li>javascript</li>
</ul>
[실행 결과]
class 선택자도 제거하면 li 태그 선택자 효과 적용 ▷ color: deepskyblue
<ul>
<li>html</li>
<li>css</li>
<li>javascript</li>
</ul>
[실행 결과]
Leave a comment