220506 CSS 4

달거북씨 2022. 6. 17. 04:06

2022. 6. 17. 04:06

1. 상속

부모 엘리먼트의 속성을 자식 엘리먼트가 물려받는 것을 의미한다.

CSS에서 생산성을 높이기 위한 중요한 기능

[ 예제 코드 ]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/* 	li{color: red;} 
 	h1{color: red;} 
    	li태그와 h1 태그에 각각 컬러를 줄 수도 있지만, 
    	html 전체에 한 번에 컬러를 지정하여 상속시킬 수 있다. */
	html{color: red; }
	#select{color: black;}
    
/* 	모든 속성이 상속을 지원하는 것은 아니다. 상속을 하면 오히려 비효율적인 속성들이 있기 때문이다. */
	body{border: 1px solid blue;}
</style>
</head>
<body>
	<div id = "container">
		<h1>수업준비</h1>
		<ul>
			<li id="select">java</li>
			<li>css</li>
			<li>js</li>
		</ul>
		
		<h1>수업참가자</h1>
		<ul>
			<li>홍길동</li>
			<li>한이람</li>
			<li>한이은</li>
		</ul>
	</div>
</body>
</html>

[출력 결과]

▶상속되지 않는 요소들을 확인할 수 있다.

https://w3.org/TR/CSS21/propidx.html

Full property table

www.w3.org

2. cascading

HTML 속성은 하나 이상의 스타일에 영향을 받을 수 있기 때문에, 어떤 스타일을 적용 받을지에 대한 우선순위가 결정되어야 한다. 이를 캐스캐이딩이라고 한다. CSS의 정식명칭이 Cascading Style Sheets인 만큼 캐스캐이딩은 중요!다음 세 가지에 따라 우선순위가 결정된다.

중요도에 따른 우선순위
- <head>의 <style>
- <head>의 <style> 내의 @import
- <link>로 연결된 CSS 파일
- <link>로 연결된 CSS 파일 내의 @import
- 브라우저의 기본 CSS
명시도에 따른 우선순위
- !important
- inline 스타일
- 아이디 selector
- 클래스 / 가상 선택자
- 태그 선택자
- 상속된 스타일
*** !important는 가장 높은 우선순위를 갖지만, 남용하는 것은 좋지 않다.
*** inline은 높은 우선순위를 갖지만, <style>이나 외부 CSS 파일로 빼는 것이 좋다.
코드순서
- 늦게 선언된 스타일 우선 적용

[예제 코드1]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	li{color: red;}
	#idsel{color: green;}
</style>
</head>
<body>
	<!-- 
		'구체적인 것'을 기준으로 우선순위가 정해진다.
	 -->
	<h1>순서</h1>
	<ol>
		<li>style attribute</li>
		<li id="idsel">id selector</li>
		<li>class selector</li>
		<li>tag selector</li>
		
	</ol>
</body>
</html>

[출력 결과1]

[예제 코드2 - !impotant 적용]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	/*
		!important : 우선순위가 가장 먼저 적용된다. 쉬운 방법이긴 하나 좋은 방법은 아니다.
	*/
	li{color: red !important;}
	#idsel{color: green;}
</style>
</head>
<body>
	<h1>순서</h1>
	<ol>
		<li>style attribute</li>
		<li id="idsel">id selector</li>
		<li>class selector</li>
		<li>tag selector</li>
		
	</ol>
</body>
</html>

[출력 결과2]