[css] 선택자 규칙

22 Dec 2023

CSS는 웹 페이지의 스타일과 레이아웃을 정의하는 데 사용되는 스타일시트 언어입니다. CSS 선택자는 특정 요소에 스타일을 적용하기 위해 사용됩니다. 선택자 규칙에는 다양한 패턴이 있으며, 이를 이해하고 활용하는 것이 웹 디자인과 개발에서 중요합니다.

기본 선택자

p {
  color: blue;
}

위의 예제는 모든 <p> 요소에 파란색 텍스트를 적용합니다.

.my-class {
  font-weight: bold;
}

.my-class 클래스를 가진 요소들에게 굵은 글꼴을 적용합니다.

#my-id {
  background-color: yellow;
}

#my-id 아이디를 가진 요소에게 노란 배경색을 적용합니다.

div p {
  text-decoration: underline;
}

<div> 요소 안의 모든 <p> 요소에 밑줄을 추가합니다.

ul > li {
  list-style-type: none;
}

<ul> 요소의 직계 자식인 <li> 요소들에게 목록 스타일을 제거합니다.

h2 + p {
  margin-top: 20px;
}

<h2> 요소 바로 뒤에 나타나는 <p> 요소에 상단 여백을 추가합니다.

a:hover {
  text-decoration: underline;
}

마우스 오버 시 링크에 밑줄을 추가합니다.

ul li:nth-child(odd) {
  background-color: lightgray;
}

<ul> 안에서 홀수 번째 <li>에 회색 배경을 적용합니다.

CSS 선택자 규칙은 웹 개발에서 중요한 기초 개념이므로, 이를 잘 이해하고 활용하는 것이 중요합니다.

참고 자료: