11. CSS 상속(Inheritance)과 그룹(Grouping)

1. CSS 상속(Inheritance)과 그룹(Grouping)

상속(Inheritance)과 그룹(Grouping)에 대해 알아 봅시다.

1. 상속(Inheritance)

상속(Inheritance)은 css가 가진 특성입니다.

 

말 그대로 스타일이 상속되어 자식에게도 같은 스타일이 적용된다는 의미입니다.

body {
  color: red;
  font-size: 15px;
}

body라는 태그에 color는 빨간색으로, 크기는 15px로 스타일했습니다.

 

그리고 body 태그안에 p 태그가 있다고 가정하고 진행을 해보도록 하겠습니다.

<p class="test">나는 자식이다</p>

따로 p 태그에 css 설정을 해주지 않고 body 태그에만 속성 설정을 해주었는데

 

p태그가 글씨는 빨간색 사이즈도 15px 사이즈로 변했습니다.

 

위와 같이 상위 태그에 지정을 해주면 그 밑의 하위 태그들은 다 상위 태그도 함께 적용이 됩니다.

 

근데 여기서 한가지 의문점이 듭니다..

 

그럼 상위 태그를 설정하면 그럼 하위태그는? 따로 설정을 못하나?

 

예제로 한번 보시죠

<p class="test">나는 자식1이다</p>
<p class="test1">나는 자식2이다</p>
<p class="test2">나는 자식3이다</p>

body {
  color: red;
  font-size: 15px;
}

.test2 {
  color: yellow;
  font-size: 20px;
}

.test3 {
  color: pupple;
  font-size: 25px;
}

위 대로 설정을 해주고 결과를 보면 

따로 따로 설정한대로 나오는걸 확인 할수 있습니다.

 

여기서 결론은 부모 태그를 설정한다고 해도 자식 태그를 따로 설정을 하면 자식 태그에 설정된 것으로 출력이 된다!  

2. 그룹(Grouping)

여러 태그를 한꺼번에 같은 스타일로 적용하고 싶을때 사용하는 방법입니다.

.test2, .test3 {
color: green;
}

위 와 같이 사용이 가능합니다.

 

태그를 같이 사용도 가능합니다. 

 

한번 해보시는걸 추천드립니다!