CSS 선택기(selector)

CSS 선택기는 스타일을 지정할 HTML 요소를 선택한다.

CSS 선택기(Selector)

CSS 선택기는 스타일을 지정할 HTML 요소를 "찾거나" 선택하는 데 사용된다.

CSS 실렉터는 다음의 5가지 범주로 나눌 수 있다:

단순 선택기(이름, ID, 클래스를 기준으로 요소 선택)
조합 선택기(요소 간의 특정 관계에 따라 요소 선택)
유사 클래스 선택기(특정 상태에 따라 요소 선택)
유사 요소 선택기(요소의 일부를 선택하고 스타일 지정)
속성 선택기(속성 또는 속성 값을 기준으로 요소 선택)

이 페이지에서는 가장 기본적인 CSS 선택기에 대해 설명한다.

CSS 요소 선택기(CSS element selector)

여기서 페이지의 모든 <p> 요소는 빨간색 텍스트 색상으로 가운데 정렬된다:

p {
text-align: center;
color: red;
}

CSS id선택기(CSS id selector)

id 선택기는 HTML 요소의 id 특성을 사용하여 특정 요소를 선택한다.

요소의 ID는 페이지 내에서 고유하므로 ID 선택기를 사용하여 하나의 고유 요소를 선택한다!

특정 ID를 가진 요소를 선택하려면 해시(#) 문자 다음에 요소의 ID를 입력한다.

<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>

<p id="para1">Hello World!</p>
<p>이 단락은 스타일의 영향을 받지 않습니다.</p>

</body>
</html>

이전 예제에는 p 요소의 모든 스타일에 적용이 되었지만, p 요소 중에 특정한 부분에 적용하려면 id 선택기를 활용하여 스타일을 적용한다.

위의 코드를 실행한 결과 화면이 아래 그림이다.

CSS 클랙스 선택기(CSS class selector)

클래스 선택기는 특정 클래스 속성을 가진 HTML 요소를 선택한다.

특정 클래스를 가진 요소를 선택하려면 마침표(.) 문자와 클래스 이름을 입력한다.

<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>

<h1 class="center">빨강색, 가운데 정렬 제목</h1>
<p class="center">빨강색, 가운데 정렬 문단.</p>

</body>
</html>

위의 코드를 실행한 결과 화면이 아래 그림이다.

특정 HTML 요소만 클래스의 영향을 받도록 지정할 수도 있다.

<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>

<h1 class="center">빨강색, 가운데 정렬 제목</h1>
<p class="center">빨강색, 가운데 정렬 문단.</p>

</body>
</html>

위의 코드를 실행하며 p요소에 클래스 center에만 스타일이 적용이 되며, 아래 그림과 같다.

HTML 요소는 둘 이상의 클래스를 참조할 수도 있다.

<!DOCTYPE html>
<html>
<head>
<style>
p.center {
  text-align: center;
  color: red;
}

p.large {
  font-size: 300%;
}
</style>
</head>
<body>

<h1 class="center">이 제목은 영향을 받지 않습니다</h1>
<p class="center">이 단락은 빨간색이고 가운데 정렬됩니다.</p>
<p class="center large">이 단락은 빨간색, 중앙 정렬 및 큰 글꼴 크기로 표시됩니다.</p>

</body>
</html>

위의 코드를 실행하며 h1 요소에는 center 클래스의 스타일이 적용되지 않는다.

p.center 스타일은 p 요소에 적용이 된다.

class="center large"가 스타일이 적용된 p요소에는 모두 적용이 된다. 아래 그림과 같다.

CSS 유니버셜 선택기(CSS universial Selector)

범용 선택기(*)는 페이지의 모든 HTML 요소를 선택한다.

<!DOCTYPE html>
<html>
<head>
<style>
* {
text-align: center;
color: blue;
}
</style>
</head>
<body>

<h1>Hello world!</h1>

<p>페이지의 모든 요소는 스타일의 영향을 받습니다.</p>
<p id="para1">나도!</p>
<p>그리고 나도!</p>

</body>
</html>

위의 CSS 규칙은 페이지의 모든 HTML 요소에 영향을 미친다.

위의 코드를 실행한 결과 화면이 아래 그림이다.

CSS 그룹화 선택기(CSS Grouping Selector)

그룹화 선택기는 동일한 스타일 정의를 가진 모든 HTML 요소를 선택한다.

다음 CSS 코드(h1, h2 및 p 요소의 스타일 정의가 동일함)를 확인한다:

요소 선택기	그룹화 선택기
h1 { text-align: center; color: red; } h2 { text-align: center; color: red; } p { text-align: center; color: red; }	h1, h2, p { text-align: center; color: red; }

CSS 선택기(CSS Selector)

선택기	예제	예제설명
#id	#firstname	ID="firstname"인 요소를 선택합니다
.class	.intro	class="intro"인 모든 요소를 선택합니다
element.class	p.intro	class="intro"인 <p> 요소만 선택합니다
*	*	모든 요소를 선택한다.
element	p	모든 p요소를 선택한다.
element, element,,	div, p	div, p 요소를 선택한다.

지금까지 CSS 선택기(셀렉터, selector)에 대해 간략히 살펴보았다.

꼭 실습해보시기 바랍니다.

모두 화이팅입니다.!!!

출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.

저작자표시 비영리 변경금지

'HTML > CSS문법' 카테고리의 다른 글

CSS 색상(CSS Colors) (0)	2023.07.02
CSS 주석(CSS Comments) (0)	2023.07.01
CSS 추가하는 방법 (0)	2023.06.30
CSS Syntax(CSS 구문) (0)	2023.06.28
CSS 개요 (0)	2023.06.26

enjoyCoding

CSS 선택기(selector)