안녕하세요? 오늘은 선택자의 주요 종류를 소개합니다. 각 선택자에 대한 설명과 예시를 제공하겠습니다. 사실 선택자가 이렇게 다양한 이유는, 웹 페이지에 특정 스타일을 적용하기 위한 다양한 방법이 필요하기 때문입니다. CSS의 주요 목적은 HTML 요소들의 스타일을 지정하는 것이므로, 사람마다 원하는 꾸미기 스타일이 다를 수 있겠죠? 우리는 모든 선택자를 다 알 필요는 없지만, 그때 그때 필요에 따라 다양한 선택자를 사용할 수 있어야 합니다.
선택자를 잘 활용하면 웹 페이지를 보다 효율적으로 제작할 수 있기 때문에, 선택자의 종류와 사용법을 잘 파악하는 것이 좋습니다. 일단 알아보도록 할게요.
선택자의 종류 (총 16개)와 간단한 문법들
1. 전체 선택자 (Universal Selector)
전체 선택자는 문서 내의 모든 요소를 선택하는 선택자입니다. 아스터리스크(*) 기호를 사용하여 표시됩니다. 아래는 코드 예시입니다.
/* 모든 요소에 대한 스타일 적용 */
* {
margin: 0;
padding: 0;
}2. 태그 선택자 (Tag Selector)
태그 선택자는 HTML 요소의 태그 이름을 사용하여 해당 태그를 선택하는 선택자입니다. 아래는 코드 예시입니다.
/* 모든 <h1> 태그에 대한 스타일 적용 */
h1 {
color: blue;
}3. 클래스 선택자 (Class Selector)
클래스 선택자는 HTML 요소의 class 속성을 사용하여 해당 클래스를 선택하는 선택자입니다. 클래스 이름은 점(.)으로 시작하며, 여러 요소에 동일한 클래스를 적용할 수 있습니다. 아래는 코드 예시입니다.
/* .highlight 클래스를 가진 요소에 대한 스타일 적용 */
.highlight {
background-color: yellow;
}4. ID 선택자 (ID Selector)
ID 선택자는 HTML 요소의 id 속성을 사용하여 해당 ID를 선택하는 선택자입니다. ID는 고유한 식별자이므로 한 페이지 내에서 하나의 요소에만 적용해야 합니다. ID 이름은 해시(#) 기호로 시작합니다. 아래는 코드 예시입니다.
/* #logo ID를 가진 요소에 대한 스타일 적용 */
#logo {
width: 200px;
}5. 속성 선택자 (Attribute Selector)
속성 선택자는 HTML 요소의 특정 속성을 선택하는 선택자입니다. 대괄호([]) 안에 속성 이름과 선택 조건을 지정하여 사용합니다. 아래는 코드 예시입니다.
/* href 속성 값이 "https://example.com"인 <a> 태그에 대한 스타일 적용 */
a[href="https://example.com"] {
color: red;
}6. 가상 클래스 선택자 (Pseudo-Class Selector)
가상 클래스 선택자는 요소의 특정 상태나 위치를 선택하는 선택자입니다. 콜론(:)으로 시작하며, 특정 동작에 응답하는 요소를 선택할 수 있습니다. 아래는 코드 예시입니다.
/* 마우스로 호버되는 <button> 태그에 대한 스타일 적용 */
button:hover {
background-color: lightgray;
}7. 가상 요소 선택자 (Pseudo-Element Selector)
가상 요소 선택자는 요소의 특정 부분을 선택하는 선택자입니다. 더블 콜론(::)으로 시작하며, 요소의 특정 부분에 스타일을 적용할 수 있습니다. 아래는 코드 예시입니다.
/* <p> 태그의 첫 번째 줄에 스타일 적용 */
p::first-line {
font-weight: bold;
}8. 자손 선택자 (Descendant Selector)
자손 선택자는 하위 요소를 선택하는 선택자입니다. 공백으로 구분하여 사용하며, 부모 요소 안에 있는 모든 하위 요소를 선택합니다. 아래는 코드 예시입니다.
/* <div> 요소 안의 모든 <p> 태그에 대한 스타일 적용 */
div p {
margin-bottom: 10px;
}9. 자식 선택자 (Child Selector)
자식 선택자는 직접적인 자식 요소를 선택하는 선택자입니다. 부모 요소와 자식 요소 사이에 > 기호를 사용하여 표현합니다. 아래는 코드 예시입니다.
/* <ul> 요소의 직접적인 자식인 <li> 태그에 대한 스타일 적용 */
ul > li {
list-style-type: circle;
}10. 인접 형제 선택자 (Adjacent Sibling Selector)
인접 형제 선택자는 같은 부모를 가지고 있는 인접한 형제 요소를 선택하는 선택자입니다. + 기호로 표현합니다. 아래는 코드 예시입니다.
/* <h2> 태그 다음에 바로 오는 <p> 태그에 대한 스타일 적용 */
h2 + p {
margin-top: 0;
}11. 일반 형제 선택자 (General Sibling Selector)
일반 형제 선택자는 같은 부모를 가지고 있는 모든 형제 요소를 선택하는 선택자입니다. ~ 기호로 표현합니다. 아래는 코드 예시입니다.
/* <h2> 태그 다음에 오는 모든 <p> 태그에 대한 스타일 적용 */
h2 ~ p {
font-style: italic;
}12. 속성 값 시작 선택자 (Attribute Value Begins With Selector)
속성 값 시작 선택자는 특정 값으로 시작하는 속성을 가진 요소를 선택하는 선택자입니다. [속성^="값"] 형식으로 사용됩니다. 아래는 코드 예시입니다.
/* href 속성 값이 "https://"로 시작하는 <a> 태그에 대한 스타일 적용 */
a[href^="https://"] {
color: blue;
}13. 속성 값 종료 선택자 (Attribute Value Ends With Selector)
속성 값 종료 선택자는 특정 값으로 끝나는 속성을 가진 요소를 선택하는 선택자입니다. [속성$="값"] 형식으로 사용됩니다. 아래는 코드 예시입니다.
/* src 속성 값이 ".png"로 끝나는 <img> 태그에 대한 스타일 적용 */
img[src$=".png"] {
border: 1px solid black;
}14. 속성 값 포함 선택자 (Attribute Value Contains Selector)
속성 값 포함 선택자는 특정 값이 속성 값에 포함되는 요소를 선택하는 선택자입니다. [속성*="값"] 형식으로 사용됩니다. 아래는 코드 예시입니다.
/* class 속성 값에 "active"가 포함된 요소에 대한 스타일 적용 */
[class*="active"] {
background-color: yellow;
}15. 첫 번째 자식 선택자 (First Child Selector)
첫 번째 자식 선택자는 부모 요소의 첫 번째 자식 요소를 선택하는 선택자입니다. :first-child로 표현됩니다. 아래는 코드 예시입니다.
/* <ul> 태그의 첫 번째 <li> 태그에 대한 스타일 적용 */
ul li:first-child {
font-weight: bold;
}16. 마지막 자식 선택자 (Last Child Selector)
마지막 자식 선택자는 부모 요소의 마지막 자식 요소를 선택하는 선택자입니다. :last-child로 표현됩니다. 아래는 코드 예시입니다.
/* <ul> 태그의 마지막 <li> 태그에 대한 스타일 적용 */
ul li:last-child {
color: red;
}마무리
CSS 선택자의 다양성과 이를 이해하는 이유에는 몇 가지 이유가 있습니다.
- 유연한 스타일링: 웹 페이지의 다양한 요소를 정확하게 선택하고 스타일을 적용할 수 있습니다.
- 특정 요소 선택: 특정 클래스나 ID를 가진 요소, 특정 속성을 가진 요소, 특정 위치에 있는 요소 등을 세부적으로 선택할 수 있습니다. 즉, 원하는 요소에 대해서만 스타일을 지정할 수 있습니다.
- 상속 및 우선순위: 선택자는 CSS 규칙의 우선순위에 영향을 줍니다. 다양한 선택자를 이해하면 스타일 규칙의 상속과 우선순위를 조절할 수 있습니다. 예를 들어, 클래스 선택자를 사용하여 특정 요소에 스타일을 지정하면 해당 스타일이 상속되는 요소에도 적용됩니다.
- 유지보수와 재사용성: 특정 요소에 대한 스타일을 선택자로 지정하면 해당 요소의 모든 인스턴스에 일관된 스타일을 적용할 수 있습니다.
- 프레임워크 및 라이브러리 호환성: 다양한 CSS 프레임워크 및 라이브러리를 호환해서 사용하기 편리합니다.
이와 같이 선택자의 종류에는 다양한 옵션이 있으며, 이를 조합하여 원하는 요소를 선택하고 스타일을 적용하면 원하는 스타일이 웹사이트나 블로그를 직접 제작할 수 있습니다. 블로그를 간단히 꾸미려고 하는데 필요 이상으로 공부를 한 것 같네요. 이상으로 선택자 종류에 대한 설명을 마치겠습니다.
그럼 안녕~