CSS 선택자는 HTML 문서 내에서 스타일을 적용할 대상을 선택하는 역할을 합니다. 다양한 선택자를 사용하여 원하는 HTML 요소에 스타일을 적용할 수 있습니다. 주요한 CSS 선택자에 대해 설명하겠습니다.
1. 1. 요소 선택자(Element Selector)
가장 기본적인 선택자로, HTML 요소의 이름을 사용하여 스타일을 적용합니다. 요소 선택자는 해당 HTML 요소 전체에 스타일을 적용합니다.
<css />
/* 모든 <h1> 태그에 적용되는 스타일 */
h1 {
color: blue;
}
2. 2. 클래스 선택자(Class Selector)
HTML 요소에 class 속성을 추가하고, 그 클래스 이름을 사용하여 스타일을 적용합니다. 클래스 선택자는 여러 개의 HTML 요소에 같은 스타일을 적용하고 싶을 때 유용하게 사용됩니다.
<html />
<!-- HTML -->
<p class="important">이것은 중요한 내용입니다.</p>
<p>이것은 일반적인 내용입니다.</p>
<css />
/* .important 클래스에 적용되는 스타일 */
.important {
font-weight: bold;
}
3. 3. ID 선택자(ID Selector)
HTML 요소에 id 속성을 추가하고, 그 ID 이름을 사용하여 스타일을 적용합니다. ID 선택자는 한 번만 사용 가능하며, 고유한 요소에 특정 스타일을 적용하고자 할 때 사용됩니다.
<html />
<!-- HTML -->
<p id="intro">이것은 소개문입니다.</p>
<css />
/* #intro ID에 적용되는 스타일 */
#intro {
font-size: 18px;
}
4. 4. 그룹화 선택자(Grouping Selector)
여러 선택자를 쉼표로 구분하여 묶어서 스타일을 적용합니다. 여러 개의 선택자에 동일한 스타일을 적용할 때 유용하게 사용됩니다.
<css />
/* <h1>과 <h2> 태그에 적용되는 스타일 */
h1, h2 {
color: purple;
}
5. 5. 후손 선택자(Descendant Selector)
한 요소의 하위에 있는 다른 요소를 선택합니다. 즉, 특정 부모 요소 안에 있는 자식 요소를 선택합니다.
<html />
<!-- HTML -->
<div>
<p>이것은 부모 요소입니다.</p>
<span>이것은 자식 요소입니다.</span>
</div>
<css />
/* <div> 안에 있는 <span> 태그에 적용되는 스타일 */
div span {
color: red;
}
위의 예제에서 div span 선택자는 <div> 태그 안에 있는 <span> 태그에 스타일을 적용합니다.
CSS 선택자는 HTML 요소를 선택하여 스타일을 적용하는 강력한 도구입니다. 요소 선택자, 클래스 선택자, ID 선택자, 그룹화 선택자, 후손 선택자 등을 적절하게 활용하여 웹 페이지의 디자인과 레이아웃을 다양하고 멋지게 꾸밀 수 있습니다. 계속해서 CSS 선택자를 익혀가며 웹 개발을 즐겨보세요!
'Style sheet > CSS' 카테고리의 다른 글
| [CSS] 반응형 디자인과 미디어 쿼리 (0) | 2023.07.19 |
|---|---|
| [CSS] 레이아웃과 포지셔닝 (float, position, display 등) (0) | 2023.07.19 |
| [CSS] 박스 모델 (margin, padding, border) (0) | 2023.07.19 |
| [CSS] 텍스트 스타일링 (글꼴, 색상, 크기 등) (0) | 2023.07.19 |
| [CSS] CSS 소개와 기본 구문 (0) | 2023.07.19 |
