[CSS]CSS 상속

https://www.inflearn.com/course/%EA%B0%95%EB%A0%A5-css-%EC%BD%94%EB%93%9C%EC%BA%A0%ED%94%84/dashboard

[코드캠프] 강력한 CSS 강의 - 인프런

---

📖CSS 상속

🔎상속

상속: 부모가 자식에게 무엇을 물려주는 것

<div class="container">
	바깥에 있는 박스입니다.
	<div class="inner box">
		<p>안쪽에 있는 박스입니다.</p>
	</div>
</div>

.container{
	color: red;
}

⇒자식요소에도 color: red;가 적용된다. 이는 부모 요소의 속성이 자식 요소에게도 상속되었기 때문이다.

 

❗모든 속성이 상속되지는 않는다! 이유는?

.container{
	color: red;
	border: 3px dashed blue;
}

⇒border: 3px dashed blue는 상속되지 않는다. 이는 CSS 속성에는 상속되는 속성이 있고, 상속되지 않는 속성이 있기 때문이다.

• 상속되는 속성: color, font-family, font-size 등
• 상속되지 않는 속성: padding: margin, border 등

.container{
    color: blue;
    font-size: 30px;
    border: 4px solid orange;
}

.inner-box{
    color: red;
}

다음과 같이 상속된 속성을 덮어씌울 경우 상속된 속성이 무시되고, 새로 덧붙인 속성이 적용된다.

⇒여러 개의 상속 속성이 겹쳤을 때, Cascading이라는 룰에 의해 우선순위가 정해진다.

 

🔎웹 폰트(Web Font)

font-family: “폰트 이름”

body{
	font-family: "맑은 고딕", "돋움", sans-serif;
}

font-family: arial, “맑은 고딕”, sans-serif;

ABC초콜릿

⇒만약 ABC 초콜릿을 출력하게 된다면, ABC에는 arial이 적용되겠지만 초콜릿의 경우에는 arial 이 적용되지 않는다. 초콜릿에는 다음 우선순위의 맑은 고딕 폰트가 적용된다.

 

웹 폰트

사용자가 로컬(컴퓨터)에 폰트를 직접 설치하지 않아도 특정 서버에 위치한 폰트를 다운받아 웹페이지에 표시해준다.

웹 폰트 적용 방법

1. 폰트 파일을 직접 다운로드 받아서 적용하는 방법
2. @font-face 이용
3. 외부 서비스에서 제공하는 링크를 이용하는 방법
4. @import 혹은 <link>이용

 

🔎단위

1. 절대단위
   • 외부 요인의 영향을 받지 않는다.
   • px
   • pt: 인쇄를 위한 단위(1pt=1/72inch), 아주 특수한 상황이 아니면 웹에서는 사용하지 않는다.
2. 상대단위
   • em: 스타일 지정 요소의 font-size 속성 값에 비례하여 값을 결정한다.
   • rem: 최상위 html요소의 font-size 속성 값에 비례하여 값을 결정한다.
3. 부모 요소의 해당 속성 값에 비례하여 지정한 비율의 값을 적용한다.