[CSS]상속,그룹

Dongmin Lee·2022년 12월 7일
0

HTML&CSS

목록 보기
7/20

💾상속(Inheritance)

자식에게도 같은 스타일이 상속!

//css
body{
	color: red;
    font-size: 14px;
}

body 태그에 red,14px를 적용시켰다면, 하위의 p,blockquote 태그 등에도 부모 태그가 동일하게 적용됨.

//css
blockquote{
	color: black;
}

하지만 자식 태그에게 따로 적용한 프로퍼티가 있다면 본인의 스타일이 적용됨.

//html
<blockquote><span class="javascript">자바스크립트(영어: JavaScript)</span>는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 브라우저 내에서 주로 사용하며,
    다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 또한 Node.js와 같은 런타임 환경과 같이 서버 사이드 네트워크 프로그래밍에도 사용되고 있다. </blockquote>
    
//css
blockquote{
	color: black;
}
span{
	color: yellow;
}
.javascript{
	color: blue;
}

해당 코드에서 부모 태그에 해당하는 blockquote 태그와 span 태그에 color 프로퍼티로 각각 black과 yellow 를 적용했지만 javascript 클래스에 따로 적용한 color가 있으므로 색깔은 파란색으로 출력된다.

💾그룹(Group)

여러 구분자를 그룹화하여 동일한 스타일을 적용할 수 있음!

//css
.group-exam, span{
	color: green;
}
profile
어제보다 성장하기

0개의 댓글

관련 채용 정보