[SCSS] - 06.가상클래스 :is

가상클래스 :is

👊 예제

<div class="container">
        <header>
            <h1 class="heading">Headline Text in header</h1>
        </header>
        <section>
            <h1>Headline Text in header</h1>
        </section>
        <footer>
            <h1>Headline Text in header</h1>
        </footer>
    </div>

• header, section, footer에 모두 h1 태그가 있고 같은 속성을 주고싶을 때에 원래 쓰던 방식은 연결 선택자를 이용해서 나열했다.

header h1,
section h1, 
footer h1 {
    font-size: 30px;
    font-weight: normal;
}

header h1:before,
section h1:before,
footer h1:before {
	content: '';
    width: 10px;
    height: 30px;
    border-radius: 5px;
    display: inline-block;
    background-color: crimson;
    margin-right: 10px;
    transform: translateY(3px);
}

• 그러나 가상클래스:is를 이용해서 훨씬 간단하게 표현이 가능하다.

:is(header, section, footer) h1 {
    font-size: 30px;
    font-weight: normal;

    &::before {
        content: '';
        width: 10px;
        height: 30px;
        border-radius: 5px;
        display: inline-block;
        background-color: crimson;
        margin-right: 10px;
        transform: translateY(3px);
    }
}

🙆 RESULT

➕ 추가

form {
    &:is(input[type=text],input[type=email],input[type=password]) {
        // 디자인 공통으로 만들면됨.
    }
}

• 페이지에나오는 form 요소 안에들어가는 input 요소들에 공통적인 디자인을 하고 싶을 때에는 이런식으로 만들면 된다.