[go] CSS 선택자를 사용하여 웹 요소 선택하기

08 Dec 2023

CSS 선택자는 웹 페이지의 요소를 선택하고 스타일을 적용하는 데 사용됩니다. 이는 웹 페이지의 레이아웃과 디자인을 제어하는 데 중요합니다. CSS 선택자는 다양한 방법으로 요소를 선택할 수 있으며, 이를 통해 웹 페이지의 특정 부분에 스타일을 적용할 수 있습니다.

기본 선택자

가장 기본적인 선택자로, 특정 HTML 요소를 선택하여 스타일을 적용합니다. 예를 들어, 모든 <p> 요소를 선택하려면 다음과 같이 작성합니다.

p {
  color: red;
}

클래스 선택자는 특정한 클래스를 가진 요소를 선택합니다. HTML 요소에 class 속성을 추가하고 해당 클래스를 지정하여 선택할 수 있습니다.

.myclass {
  font-weight: bold;
}

ID 선택자는 특정한 ID를 가진 요소를 선택합니다. HTML 요소에 id 속성을 추가하고 해당 ID를 지정하여 선택할 수 있습니다.

#myid {
  text-decoration: underline;
}

특정 요소의 자식 요소를 선택합니다. 예를 들어, <div> 요소의 직계 자식인 <p> 요소를 선택하려면 다음과 같이 작성합니다.

div > p {
  margin-top: 10px;
}

특정 요소의 모든 하위 요소를 선택합니다. 예를 들어, <div> 요소 안에 있는 모든 <p> 요소를 선택하려면 다음과 같이 작성합니다.

div p {
  line-height: 1.5;
}

특정 속성을 가진 요소를 선택합니다. 예를 들어, href 속성이 있는 모든 <a> 요소를 선택하려면 다음과 같이 작성합니다.

a[href] {
  color: blue;
}

CSS 선택자의 다양한 종류를 이용하여 웹 요소를 선택하고 스타일을 적용할 수 있습니다. 선택자의 종류와 사용법을 잘 숙지하여 웹 디자인에 유용하게 활용해보세요.