Colin's Blog
[css] 선택자 포함

CSS(카스케이딩 스타일 시트)는 웹 페이지의 디자인과 레이아웃을 제어하는 데 사용되는 스타일 시트 언어입니다. CSS 선택자는 특정 요소를 선택하여 스타일을 적용하는 데 사용됩니다. 선택자를 사용하여 특정 요소에 스타일을 적용하거나 그룹화하여 스타일을 적용할 수 있습니다.

기본 선택자

요소 선택자

요소 선택자는 HTML 요소의 이름을 사용하여 스타일을 적용합니다. 예를 들어, 모든 <p> 요소에 스타일을 적용하려면 다음과 같이 요소 선택자를 사용할 수 있습니다.

p {
  color: blue;
}

클래스 선택자

클래스 선택자는 HTML 요소에 클래스 속성을 추가하여 스타일을 적용합니다. 클래스 선택자는 점(.)으로 시작하며, 여러 요소에 동일한 스타일을 적용할 때 유용합니다.

.some-class {
  font-size: 16px;
}

ID 선택자

ID 선택자는 HTML 요소에 고유한 식별자를 제공하여 스타일을 적용합니다. ID 선택자는 해시(#)로 시작합니다.

#unique-id {
  background-color: #f2f2f2;
}

복합 선택자

자식 선택자

자식 선택자는 특정 요소의 자식 요소를 선택하여 스타일을 적용합니다. 부모 요소와 자식 요소 사이에 >를 사용하여 자식 선택자를 정의합니다.

div > p {
  text-align: center;
}

후손 선택자

후손 선택자는 특정 요소의 모든 하위 요소를 선택하여 스타일을 적용합니다. 부모 요소와 하위 요소 사이에 공백을 사용하여 후손 선택자를 정의합니다.

ul li {
  list-style-type: square;
}

그룹화

그룹화는 여러 선택자에 동일한 스타일을 적용하는 데 사용됩니다. 쉼표(,)를 사용하여 여러 선택자를 그룹화할 수 있습니다.

h1, h2, h3 {
  color: red;
}

결론

CSS 선택자를 이용하면 웹 페이지의 여러 요소에 서로 다른 스타일을 적용하는 유연성을 가질 수 있습니다. 요소 선택자, 클래스 선택자, ID 선택자 및 복합 선택자를 적절히 활용하여 웹 페이지의 디자인을 더욱 정교하고 유연하게 제어할 수 있습니다.

이러한 선택자를 활용하면 웹 페이지의 스타일링을 보다 효과적으로 수행할 수 있으며, 사용자 경험과 시각적인 효과를 개선할 수 있습니다.

Reference

© 2018 Colin. All rights reserved.