CSS3 :is() 선택자로 간편한 코드 구현하기
CSS3의 선택자를 사용하는 방법 중 다중 선택이라는게 있습니다. 쉼표(,)를 사용하여 여러개를 동시 다발적으로 스타일이나 애니메이션 효과를 적용하는 방법이지요. 아래에 간단한 예시문이 있습니다.
<body>
<div class="is01">텍스트 문장 입니다.</div>
<p class="is02">텍스트 문장 이에요.</p>
<h3 class="is03">텍스트 문장 이랑께.</h3>
<div class="is04">
<ul>
<li>리스트1</li>
<li>리스트2</li>
<li>리스트3</li>
</ul>
</div>
<div class="is05">
<ol>
<li>리스트1</li>
<li>리스트2</li>
<li>리스트3</li>
</ol>
</div>
</body>이렇게 간단하게 HTML 구조를 구성해 보았습니다. 여기에서 is01부터 03까지의 클래스명을 가진 태그의 백그라운드 색상을 동시에 지정하는 CSS를 마크업 해보겠습니다. 그 결과는 아래와 같습니다.
.is01,
.is02,
.is03 {
margin: 5px;
padding: 5px;
background-color: #FF5544;
}이렇게하면 백그라운드의 색상이 FF5544인 16진수 컬러가 적용됩니다. 예시에서는 다소 간단한 클래스명을 사용했기 때문에 그리 복잡해 보이지는 않지만, 만약 5개 이상의 선택자를 동시에 적용해야 하는 경우라면 뭔가 코드가 복잡해 보일 것입니다. 따라서 :is() 선택자를 사용하여 한 줄로 만들어 줄 수 있습니다. 그 결과는 아래와 같습니다.
:is(.is01, .is02, .is03) {
margin: 5px;
padding: 5px;
background-color: #FF5544;
}이렇게 선택자를 변경해도 결과는 똑같게 출력됩니다. 괄호 안에 태그명, 클래스명, 아이디명 등등을 사용하고 쉼표로 구분짓는다는 부분만 인지하시면 됩니다.
:is() 선택자 사용 목적에 있어서는 선택자를 더욱 간결하게 표현하는 것인데 위의 예시에서는 클래스명이 다소 짧고 다중 선택 목록이 몇 개 없어서 큰 차이는 느낄 수 없다고 한다면 다음의 예시는 :is() 선택자가 꽤 사용 가치가 높다고 평가될 수 있습니다. 위의 HTML 예시를 보시면 클래스명이 is04, is05를 가진 div 태그가 있습니다. 그리고 자식 요소로는 ul과 ol 태그가 있으며 또 그 자식 요소로는 li 태그가 있습니다. 이 li 태그의 첫번째 요소의 글씨 색상을 빨간색으로 변경하려고 합니다. 일반적으로는 첫번째 li에 클래스명을 부여하는 방법이 있겠으나 예시에서는 다른 방법을 적용시켜 보겠습니다.
.is04 li:first-child,
.is05 li:first-child {
color: red;
}이렇게 CSS를 마크업 할 수 있을 것입니다. 보시면 아시겠지만 li:first-child라는 선택자가 두 번 중복 적용되었습니다. 지금 예시는 선택자가 두 개 뿐이니까 이렇게 표현해도 다소 복잡해 보이지는 않습니다. 하지만 5개, 혹은 그 이상으로 다중 선택을 한다면 불필요한 선택자가 계속 중복되어 코드가 복잡해 보일수 있습니다. 이런 경우 :is() 선택자를 사용하면 중복되는 선택자를 하나로 표현할 수 있습니다.
:is(.is04, .is05) li:first-child {
color: red;
}이렇게 말입니다. 중복되는 선택자를 하나로 만들고 괄호 안의 선택자는 일종의 경로를 마크업하면 되는 원리입니다. 이렇게하면 한 줄로 여러 선택자를 중복 선택하는 효과를 가지고와서 코드가 한층 간결해집니다. 이렇게해도 결과는 똑같습니다. 아래는 본문에서 소개한 예시의 미리보기입니다.
See the Pen CSS3 Selector :is() by rgy0409 (@rgy0409) on CodePen.
현재 익스플로러 빼고 대부분의 브라우저에서 지원합니다. 어차피 익스플로러는 곧 사라질 브라우저이기에 크게 고려하지 않아도 될 것 같습니다. 물론 홈페이지를 만드는 업체라고 한다면 조금은 신경써야 할지도 모르겠군요. CSS3가 발전함에 따라 점점 편리한 기능들이 새롭게 추가되고 있습니다. 이 방법을 잘 알아두시고 훗날 퍼블리싱 작업 시 요긴하게 사용해 보시기 바랍니다. 끝.
