CSS 선택자 고급 - 부분 선택자(Partial Selector)로 요소 선택하기
CSS 속성을 적용할 때, CSS의 적용 범위를 한정하는 것은 많은 경험을 필요로 합니다.
CSS를 작성할 때는 기본적으로 하위 요소(Element)에 속성을 상속하는 구조로 작성하기 때문에, 하위 요소들에 영향을 미치는 범위를 이해하기가 쉽습니다.
보통은 클래스(Class)를 먼저 작성한 후 HTML 요소들에 클래스를 적용해서 반복되는 속성들을 HTML 요소에 일괄로 적용합니다. 그리고, 이렇게 적용한 클래스의 속성을 변경하면 같은 클래스를 사용한 요소들에 같은 속성이 반영됨으로써 반복적인 속성 적용을 최대한 줄일 수 있습니다.
반대의 경우, 그러니까 이미 클래스를 적용한 요소들에서 클래스, 또는 아이디를 기준으로 여러 개의 요소를 선택할 때, CSS는 일종의 문자열 검색처럼 클래스, 또는 아이디 이름 일부를 기준으로 요소들을 선택할 수 있는 방법을 제공합니다.
미리 말해두자면 클래스, 또는 아이디 이름의 일부를 기준으로 CSS 속성을 적용하는 대상 엘리먼트를 선택하는 방법은 다른 CSS 선택자보다 부하가 많이 걸립니다. 사용할 때는 신중하게 사용해야 하며, CSS 파일 안에 너무 많이 남발하게 되면, 웹페이지 렌더링 속도가 느려지는 원인이 됩니다.
부분 선택자로 요소(들)를 선택하는 방법은 4가지가 있습니다.
기본적으로는 클래스, 아이디 전체 이름으로 선택하는 방법을 사용하며, 범위를 다양하게 넓혀서 검색어 검색처럼 클래스(들), 또는 아이디(들)를 선택할 수도 있습니다.
다음과 같은 기본적인 시멘틱 구조로 된 HTML 페이지에서 클래스와 아이디로 요소를 선택하면 어떤 요소들이 선택되는지 알아보겠습니다. 선택된 요소들에 속성으로 텍스트 색상을 빨강으로 지정하며, 텍스트 색상이 적용되는 요소들을 다이어그램으로 표시합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Selector</title>
<link rel="stylesheet" href="./style.css"/>
</head>
<body>
<header>
</header>
<nav class="section">
<ul class="menu inline" id="main-menu">
<li>메뉴1</li>
<li class="active">메뉴2</li>
<li>메뉴3</li>
<li>메뉴4</li>
</ul>
</nav>
<section id="content" class="section">
<article class="content">
<p>본문 내용</p>
</article>
</section>
<aside>
<ul class="menu category" id="side-menu">
<li>카테고리1</li>
<li class="active">카테고리2</li>
<li>카테고리3</li>
</ul>
<div class="banner" id="side-banner">
사이드배너
</div>
</aside>
<footer id="footer" class="section">
<div class="banner inline" id="footer-banner">
<div>배너1</div>
<div>배너2</div>
<div class="active">배너3</div>
</div>
</footer>
</body>
</html>앞의 HTML 페이지를 다이어그램으로 그리면 다음과 같은 구조가 됩니다.
클래스, 아이디 이름으로 선택
div[class="클래스이름"]
div[id="아이디"]
클래스 이름, 또는 아이디와 정확하게 일치하는 요소(들)을 선택합니다.
아이디는 HTML 페이지 안에 유일하기 때문에 요소 1개가 선택되며, 클래스는 1개 이상의 요소를 선택합니다.
등호를 사용해 클래스 전체 이름으로 선택할 때는 요소에 여러 개의 클래스가 지정된 경우, 선택되지 않는 점에 주의해야 합니다.
예를 들어
ul[class="menu"] li{
color: red;
}이렇게 선택하면 다음의 요소들이 선택됩니다.
시작하는 이름으로 선택
클래스 이름의 일부, 또는 아이디의 일부로 요소들을 선택할 수 있습니다. 아이디로 요소를 선택할 때는 기본적으로 1개의 요소만 선택되지만, 다음과 같이 캐럿(^) 문자를 등호(=) 앞에 붙이면 이름 일부로 시작하는 요소들을 모두 선택해 속성을 적용하게 됩니다.
div[class^="클래스이름일부"]
[id^="아이디일부"]
예를 들어
[id^="side-"]{
color: red;
}이렇게 선택하면 아이디가 "footer-"로 시작하는 요소를 선택하고, 컬러를 빨강색으로 지정하는 속성이 선택된 요소와 그 하위 요소들에 상속되어 적용되게 됩니다.
끝나는 이름으로 선택
클래스, 또는 아이디 이름으로 선택할 때 달러($) 문자를 등호(=) 앞에 붙이면 이름 일부로 끝나는 요소들을 모두 선택해 속성을 적용하게 됩니다.
div[class$="클래스이름일부"]
[id$="아이디일부"]
예를 들어
div[id$="-banner"]{
color: red;
}이렇게 선택하면 아이디가 "-banner"로 끝나는 요소를 선택하게 되고, 선택한 요소와 그 하위 요소들에 빨강색 글자 색상을 적용합니다.
이름이 포함된 경우 선택
클래스, 또는 아이디 이름으로 선택할 때 별표(*) 문자를 등호(=) 앞에 붙이면 이름 일부가 포함된 요소들을 모두 선택해 속성을 적용하게 됩니다.
div[class*="클래스이름일부"]
ul[id*="아이디일부"]
예를 들어
ul[id*="-menu"]{
color: red;
}이렇게 선택하면 "-menu" 가 아이디에 포함된 모든 요소를 선택하며, 선택된 요소와 그 하위 요소들에 빨강색 글자 색상을 적용합니다.
부분 선택자와 BEM(Block Element Modifier)
부분 선택자를 사용해 CSS 를 적용할 경우 클래스와 아이디 이름을 사용하는 규칙을 적용해서 사용하는 것을 추천합니다.
예를 들어 클래스나 아이디 이름을 정할 때 단어 2개 이상을 조합할 경우 "-", "--" 를 사용해 구분해 연결하고, 수식어(Modifier) 를 사용할 경우에는 "_", "__" 를 사용해 연결하는 것이 암묵적인 규칙입니다.
이런 아이디, 또는 클래스 이름 작성 규칙을 확장해 클래스 작성 방식으로 사용할 수 있도록 확장한 최신 CSS 작성 기술이 BEM(Block Element Modifier - 블록 요소 수식어) 입니다.
LESS나 SCSS처럼 CSS를 작성하는 새로운 문법 구문을 사용해 최적화된 별도의 전용 코드를 작성하고, 최종적으로는 컴파일된 CSS를 생성해 배포하는 방식과 달리, 수식어(Modifier) 규칙에 따라 아이디, 또는 클래스를 CSS에 작성하고, CSS파일을 그대로 배포하는 단순한 작성 방식을 가지기 때문에 추가의 CSS 컴파일이 필요가 없습니다.
예를 들어
<div class="block block--alt"></div>
<div class="block block--size-big block--shadow-yes">
<div class="block block--title--size-big">타이틀</div>
<div class="block block-item-quad">아이템1</div>
<div class="block block-item-quad">아이템2</div>
<div class="block block-item-quad">아이템3</div>
<div class="block block-item-quad">아이템4</div>
</div> 이렇게 작성한 HTML 코드는
.block{}
.block--alt{}
.block--title--size-big{}
.block--size-big{}
.block--shadow-yes{}
.block--item-quad{}
.block--item-trio{}이렇게 BEM CSS로 작성할 수 있습니다.
[class^="block-item-"]
이렇게 선택하면 블록 아이템들만 전체를 선택할 수 있게 됩니다.