<div>
<h1>Hello</h1>
<h2>Hello</h2>
<p>Hello</p>
</div>
CSS는 정답이 하나가 아니라 여러 가지 방법들이 있어요!
개별로 인라인 스타일 적용하기
<div>
<h1 style="color:red;">Hello</h1>
<h2 style="color:red;">Hello</h2>
<p style="color:red;">Hello</p>
</div>
태그 선택자 적용하기
<div>
<h1>Hello</h1>
<h2>Hello</h2>
<p>Hello</p>
</div>
h1{color:red;}
h2{color:red;}
p {color:red;}
그룹 선택자(,
)로 적용하기
<div>
<h1>Hello</h1>
<h2>Hello</h2>
<p>Hello</p>
</div>
h1,
h2,
p {color:red;}
상속 이용하기
<div>
<h1>Hello</h1>
<h2>Hello</h2>
<p>Hello</p>
</div>
div{
color:red;
}
color
속성은 자식인 h1, h2, p에게 상속이 됩니다!width
, height
, margin
, padding
, border
와 같은 것은 상속되지 않습니다.<div>
<h1>Hello</h1>
<h2>Hello</h2>
<p>Hello</p>
</div>
div {
color: red;
border: 5px solid pink;
}
inherit
: 선택한 요소에 적용된 속성값을 부모와 동일하게, 즉 상속받게 합니다.initial
: 브라우저 기본 스타일 속성을 따르게 합니다.<div>
<h1>Hello</h1>
<h2>Hello</h2>
<p>Hello</p>
</div>
div {
color: red;
border: 5px solid pink;
}
h1 { **border: inherit;** }
button
, input
요소처럼 form 관련 태그들은 상속받지 않기도 합니다.<div>
<h1>Hello</h1>
<h2>Hello</h2>
<p>Hello</p>
<button>Hello</button>
<input type="text" value="hello">
</div>
div {
color: red;
border: 5px solid pink;
}
h1 { **border: inherit;** }