[css] 선택자 기반
CSS(Cascading Style Sheets)는 웹 페이지의 디자인과 레이아웃을 정의하기 위한 스타일 시트 언어입니다. CSS를 사용하면 HTML 요소에 스타일을 적용하여 웹 사이트의 미적인 요소를 개선할 수 있습니다. CSS 선택자는 스타일을 적용하는데 있어 어떤 HTML 요소에 적용할지를 정의하는 역할을 합니다.
선택자란 무엇인가요?
선택자는 CSS에서 스타일을 적용할 HTML 요소를 선택하는 패턴이나 식별자입니다. 선택자를 사용하여 특정 HTML 요소나 요소 그룹에 스타일을 적용할 수 있습니다.
예를 들어, 아래와 같은 CSS 코드에서 h1은 선택자이며, 이는 <h1> 태그에 적용된 스타일을 정의합니다.
h1 {
color: blue;
}
선택자 종류
기본 선택자
- Universal Selector (별표(*))
- Type Selector (요소 선택자)
- Class Selector (클래스 선택자)
- ID Selector (아이디 선택자)
조합 선택자
- Descendant Selector (하위 선택자)
- Child Selector (자식 선택자)
- Adjacent Sibling Selector (바로 옆 형제 선택자)
- General Sibling Selector (일반 형제 선택자)
가상 클래스 선택자
- :hover
- :active
- :focus
- :first-child
- :nth-child
선택자 기반 스타일 적용 예시
요소 선택자
p {
font-size: 16px;
}
위 코드는 모든 <p> 요소에 16px 크기의 글꼴을 적용합니다.
클래스 선택자
.my-class {
color: red;
}
이 코드는 class="my-class"로 지정된 모든 요소에 빨간색 텍스트 색상을 적용합니다.
ID 선택자
#unique-id {
background-color: yellow;
}
이 코드는 id="unique-id"로 지정된 요소의 배경색을 노란색으로 설정합니다.
결론
CSS 선택자는 웹 페이지의 스타일을 정의하는 핵심적인 요소입니다. 적절한 선택자를 활용하여 웹 요소에 스타일을 적용함으로써 웹 페이지의 디자인을 향상시킬 수 있습니다. 선택자를 올바르게 활용하여 웹 페이지의 사용자 경험을 향상시키는 데 기여할 수 있습니다.
참고 문헌: