상속은 css가 가진 특성입니다.
말 그대로 스타일이 상속되어 자식에게도 같은 스타일이 적용된다는 의미입니다.
//html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>나는 p태그</p>
<blockquote><span class="javascript">자바스크립트(영어: JavaScript)</span>는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 또한 Node.js와 같은 런타임 환경과 같이 서버 사이드 네트워크 프로그래밍에도 사용되고 있다. </blockquote>
<p class="what-is-blockquote">blockquote는 인용문구에 쓰이는 태그이다.</p>
<span>사실 인용문구라고 해서 꼭 blockquote 태그를 써야하는 것은 아니지만..</span>
</body>
</html>//css
body {
color: red;
font-size: 14px;
}
blockquote {
color: black;
}
.javascript {
color: blue;
font-weight: bold;
}
.what-is-blockquote, span {
color: green;
}👨👩👧
body 태그에 color는 빨간색으로, 크기는 14px로 스타일했습니다.
p태그는 아무 스타일도 갖고 있지 않는데 부모인 body태그에 영향을 받아서 빨간색과 14px로 변경되었습니다.
blockquote 태그 또한 14px이 적용되었습니다.
🙋♀️
부모에게 color: red;라는 속성이 있더라도
본인의 요소가 해당 속성을 갖고 있다면 본인의 스타일이 적용됩니다.
그룹(Grouping)
이 태그에, 저 태그, 이 클래스에.. 같은 스타일을 적용하고 싶습니다.
그럴 때 각자의 selector에 모두 똑같은 스타일을 적기보다는 다음과 같이 한꺼번에 스타일을 지정할 수 있습니다.
p, span, .className {
color: green;
}p, span 태그와 javascript 클래스에 폰트 크기가 20px이 되도록 css를 작성해주세요.
CSS selector
//html
<div class="pre">
<span>이건 노란색 배경이고</span>
</div>
<div class="main">
<span>이건 아님!</span>
</div>
<span class="pre">이것도 아님</span>
<div>
<p class="pre">
<span>이건 적용됩니다! 노란색배경!</span>
</p>
</div>
//css
.pre span {
background-color: yellow;
}
// 모든 span이 아니라 "pre" 클래스 내부에 있는 span이라는 뜻.//html
<div class="a">
<div>
<header class="b">
<h1 class="pre">
<span>제목! 노란색 배경 나옴!</span>
<span class="title">이것도 나옴!</span>
</h1>
<span>이건 적용안 됨</span>
</header>
</div>
<span>이건 적용안 됨</span>
</div>
//css
.a div .b .pre span {
background-color: yellow;
}
//span 태그에 적용되는 css입니다.
그런데 a클래스 밑에, div밑에, b클래스 밑에, pre클래스 밑에 span태그에 적용이 됩니다.CSS 우선순위
tag: 1점
class: 10점
id: 100점
inline styling(요소로 직접): 1000점
style.css 파일의 18번 째 줄에 css하나가 있습니다.
.container header p.title {
font-size: 50px;
}
이 css가 적용되어 제목이 나올 수 있도록 html을 추가해주세요.
