[컴][웹] HTML css 에서 inherit 관련 정보

css 에서 inherit 은 아래와 같이 쓰인다.

.top {

  background-color: white;

  font-style: italic;

}

 

.sub-top {

  background-color: inherit;

  font-style: normal;

}

 

<div class="top">

  <p class="sub-top">

    Hello, world. This is a very short

    paragraph!

  </p>

</div>

이경우에, html 상위에 있는 같은 값을 상속받게 된다. 근데 이건 구조적으로 별로 좋아보이지 않는다. CSS 자체만으로는 bar 가 어떠한 값을 갖게 될 지 알 수 없다. 나중에 찾아가기도 힘들다. 이러한 점들을 해결하는 방법을 아래의 link 에서 제공하고 있다.

 

link : http://dorward.me.uk/www/css/inheritance/

 

link 에서는 아래 2가지 방법을 제시한다.

1. multiple classes
2. grouping selectors

 

Multiple Classes

Multiple classes 는 공통되는 부분을 하나로 묶어서 하나의 class 를 더 만드는 것이다. 위의 예제를 가지고 얘기하자면, top 과 sub-top 의 공통적인 class 를 하나 만드는 것이다. 예를 들면 아래와 같다.

.top-common {

  background-color: white; 

}

.top {

  font-style: italic;

}

.sub-top {

  font-style: normal;

}

 

<div class="top-common top">

  <p class="top-common sub-top">

 Hello, world. This is a very short

    paragraph

  </p>

</div>

Grouping Selectors

grouping selectors 는 공통되는 부분에 여러개의 selector 를 두는 것이다. ',' (comma) 를 사용하면, 여러가지 이름을 가진 style 을 정의할 수 있다.

.top,

.sub-top{

  background-color: white; 

}

.top {

  font-style: italic;

}

.sub-top {

  font-style: normal;

}

자세한 설명은 link 를 참조하자.