html 클래스 선언,클래스 뒤에 클래스, 다중 클래스를 알아보자.

html 클래스 선언,클래스 뒤에 클래스, 다중 클래스를 알아보자.

다양하게 그룹화를 하고 싶다.

css를 하다보면 다양하고 세분하게 그리고 강력하게 효과를 주고싶을때가 생긴다.
나는 inline block을 배우고 써먹으면서 불편함을 느꼈다.
클래스 box1,box2,box3를 inline block으로 썼는데, 코드가 길어지고 난잡해졌다.

그러다가 다중클래스를 알게되었다. 그리고 내 인생이 달라졌다.

다중(여러)클래스 선언하기

Multiple Class(다중 클래스)는 세분하게 그룹화 할때 필요한 기능이다.
선언 방법은 간단하다. 클래스+공백+클래스 이다.

example:  <div class="class1 class2">

어떻게 써먹음?

예를 들자면, 블럭레벨을 인라인으로 변환 시킬때 사용하고 싶었다.
box1,box2,box3,라는 클래스에 다중클래스로 inline이라는 클래스를 선언해보자.

    <div class="box1 inline">box1</div>
    <div class="box2 inline">box2</div>
    <div class="box3 inline">box3</div>

그럼 이제 css 기능 inline-block을 사용할때 선택자를 inline만 선택해주면 된다.

    .inline{
        display: inline-block;
    }

출처: https://www.w3schools.com/html/html_classes.asp