[css] 선택자 적합

22 Dec 2023

CSS 선택자는 HTML 문서의 요소들을 스타일링하기 위해 사용됩니다. 선택자의 적절한 사용은 웹페이지의 디자인을 구성하고 관리하는 데 매우 중요합니다.

기본 선택자

요소 선택자는 HTML 요소의 이름으로 스타일을 적용할 수 있습니다.

p {
  color: blue;
}

클래스 선택자는 HTML 요소의 클래스 속성으로 스타일을 적용할 수 있습니다.

.button {
  background-color: green;
}

ID 선택자는 HTML 요소의 ID 속성으로 스타일을 적용할 수 있습니다.

#header {
  font-size: 24px;
}

자식 선택자는 부모 요소의 직계 자식 요소에 스타일을 적용할 수 있습니다.

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

인접 형제 선택자는 같은 부모를 가지고 있는 형제 요소 중 첫 번째 요소에 스타일을 적용할 수 있습니다.

h2 + p {
  font-weight: bold;
}

속성 선택자는 특정 HTML 요소에 특정 속성이 존재하는 경우에 스타일을 적용할 수 있습니다.

input[type="text"] {
  width: 200px;
}

CSS 선택자를 적합하게 사용하여 웹페이지를 구성하고 업데이트하는 것은 중요합니다. 선택자를 올바르게 사용하면 스타일을 효율적으로 관리할 수 있고, 유지보수가 쉬워집니다.