CSS

CSS 선택자(Selector)

BBB.OOO 2022. 5. 19. 11:29
반응형

CSS 선택자

HTML 문서에 CSS 로 스타일을 주기 위해 특정 요소들을 선택하여 스타일을 적용시키는 기술

 

선택자 종류

1. 전체 선택자(*)

* { margin: 0 auto; text-align: center; }

전체 선택자는 HTML 페이지 내부의 모든 요소(태그)에 같은 CSS 속성을 적용한다. 그렇기 때문에 위 코드 처럼

margin 이나 padding 값을 초기화하는 기본적인 설정할 때 사용한다. 하지만 전체 선택자는 HTML 페이지 모든 요소를

읽어야 하기 떄문에 로딩 속도가 느려질 수 있다.

 

2. 타입 선택자(Type Selector, 태그 선택자)

/* CSS (타입 선택자 또는 태그 선택자) */
p { background-color: black; color: white; }

<!-- HTML -->
<p> 타입 선택자(태그 선택자) </p>

타입 선택자 또는 태그 선택자는 HTML 태그에 직접 CSS 스타일을 지정한다. 

 

3. 클래스 선택자(Class Selector)

/* CSS */
.p_class { background-color: black; color: white; text-align:center; }
div.d_class { background-color: white; color: black; text-align:center; }

<!-- HTML -->
<p class="p_class">p 태그 클래스 선택자</p>
<p class="d_class">p 태그 클래스 선택자 2</p>
<div class="d_class">div 클래스 선택자</div>

클래스 선택자는 같은 이름의 class 속성값으로 가진 HTML 태그(요소)를 찾아 선택한다.

이때 선택하려는 속성값 이름의 앞쪽에 마침표(.)를 추가해서 작성하면 클래스 선택자가 된다.

위 코드를 보면 p_class 앞에 마침표(.)를 찍었으므로 클래스 선택자가 됐으며, class 속성값 중 "p_class" 가진 태그에

CSS 스타일을 적용한다.

또한 클래스 선택자 앞에 적용시킬 HTML 태그명을 붙이면 해당 태그 안의 class 속성값으로 범위를 지정할 수 있다.

 

두번째 p태그의 class 속성값이 d_class 이지만 "d_class" 클래스 선택자 앞에 태그명인 div를 붙였으므로 div 태그에만

클래스 선택자가 적용된다.

 

4. ID 선택자(ID Selector)

/* CSS */
#id1 { background-color: black; color: white; text-align:center; }
div#d_id { background-color: white; color: black; text-align:center; }

<!-- HTML -->
<p id="id1">p 태그 ID 선택자</p>
<p id="d_id">p 태그 ID 선택자 2</p>
<div id="d_id">div ID 선택자</div>

ID 선택자는 선택자명 앞에 "#" 기호를 사용한다. 기호를 제외하고는 클래스 선택자와 매우 유사하다.

비슷하지만 상황에 맞게 잘 선택해서 사용해야 한다.

 

한 페이지 내에서 여러번 반복될 필요가 있는 스타일은 클래스 선택자를 사용하고 유일하게 적용될 스타일은

ID 선택자를 사용하는게 좋다.

 

5. 복합 선택자(Combinator)

복합 선택자는 두개 이상의 선택자 요소가 모인 선택자입니다.

/* CSS */
/* 하위 선택자 */
section ul { border: 2px solid green; }

/* 자식 선택자 */
section>ul { border: 2px solid green; }

하위 선택자는 부모 요소와 자식 요소 사이에 띄어쓰기로 표현합니다. 또한 하위 선택자는 부모 요소에 포함된 모든

자식 요소에 스타일을 적용합니다. 아래 왼쪽 이미지인 하위 선택자를 보면 section(부모 요소) 아래에 있는

모든 ul(자식 요소)에 CSS 스타일을 적용시킵니다.

 

자식 선택자는 부모 요소와 자식 요소 사이에 ">" 오른쪽 화살표로 표현한다. 또한 자식 선택자는 부모 요소 바로 아래의

자식 요소에만 CSS 스타일을 적용시킵니다. 아래 오른쪽 이미지 자식 선택자를 보면 section(부모 요소)의 바로 아래의

ul(자식 요소)에만 CSS 스타일을 적용시킨다.

 

 하위 선택자                                                                                        자식 선택자 

이미지 출처 : https://www.nextree.co.kr/p8468/

 

6. 인접 형제 선택자, 일반 형제 선택자

/* CSS */
/* 인접 형제 선택자 */
h1+ul { border: 2px solid green; }

/* 일반 형제 선택자 */
h1~ul { border: 2px solid green; }

같은 부모 요소를 가지는 요소들을 형제 관계라고 부른다. 이때 먼저 나오는 요소를 "형 요소", 나중에 나오는 요소를

"동생 요소"라고 한다. 먼저 나오는 요소라고 하면 html 문서에서 먼저 쓰여지는것을 말한다.

 

인접 형제 선택자는 말 그대로 형 요소에 인접한 동생 요소에 스타일을 적용시킨다. 하지만 일반 형제 선택자는

모든 동생 요소에 스타일을 적용시킨다.

 

7. 속성 선택자(Attribute Selectors)

위에서 살펴본 선택자들은 태그, 클래스 이름, ID 이름만 알면 그대로 스타일을 적용할 수 있다. 하지만 속성 선택자는

태그 안의 특정 속성들에 따라 스타일을 지정한다. 속성 값의 조건에 따라 다양한 스타일을 지정할 수 있기 때문에

활용도가 높은 스타일 지정 방식이다.

 

/* CSS */
/* E[attr] 형식 */
a[href] { background-color: black; color: white; text-align:center; }

/* E[attr="val"] */
input[type="text"] { background-color: black; color: white; text-align:center; }

/* E[attr$] */
a[href$=".xls"] { background-color: black; color: white; text-align:center; }

/* HTML */
<a href="a.html">E[attr]</a>
<input type="text">
<a href="one.xls">E[attr$="val"]</a>
패턴 설명
E[attr] 'attr' 속성이 포함된 요소 E를 선택한다.
E[attr="val"] 'attr' 속성의 값이 정확히 'val' 와 일치하는 요소 E를 선택한다.
E[attr~="val"] 'attr' 속성의 값에 'val' 이 포함되는 요소 E를 선택한다.
(공백으로 분리된 값이 정확히 일치)
E[attr^="val"] 'attr' 속성의 값이 'val' 로 시작하는 요소 E를 선택한다.
E[attr$="val"] 'attr' 속성의 값이 'val' 로 끝나는 요소 E를 선택한다.
E[attr*="val"] 'attr' 속성의 값이 'val' 로 포함되는 요소 E를 선택한다.
E[attr|="val"] 'attr' 속성의 값이 정확하게 'val' 이거나 'val-'로 시작되는 요소 E를 선택
반응형