[css] 선택자 위치

22 Dec 2023

CSS 선택자는 웹페이지의 요소를 선택하여 스타일을 지정하는 데 사용됩니다. 선택자의 위치는 선택자가 적용될 범위를 결정하는 데 중요합니다.

전체 선택자

전체 선택자는 모든 요소에 스타일을 적용합니다. 선택자는 * 기호로 표시됩니다.

* {
  margin: 0;
  padding: 0;
}

위의 예제는 모든 요소의 여백을 제거합니다.

요소 선택자는 특정 HTML 요소를 선택하여 스타일을 적용합니다.

h1 {
  font-size: 24px;
  color: #333;
}

위 예제는 모든 <h1> 요소에 스타일을 적용합니다.

클래스 선택자는 클래스 이름으로 요소를 선택하여 스타일을 적용합니다. 클래스 선택자는 .으로 표시됩니다.

.warning {
  color: #ff0000;
}

위의 예제는 class="warning" 속성을 가진 모든 요소에 빨간색 텍스트 색상을 적용합니다.

ID 선택자는 고유한 ID 속성을 가진 요소를 선택하여 스타일을 적용합니다. ID 선택자는 #으로 표시됩니다.

#header {
  background-color: #999;
}

위의 예제는 id="header" 속성을 가진 요소에 회색 배경을 적용합니다.

선택자의 위치뿐만 아니라 선택자의 구체성도 중요합니다. 구체성이 높은 선택자가 적용될 스타일이 더 우선적으로 적용됩니다.

위 내용은 CSS 선택자의 위치에 대해 설명한 것으로, 선택자의 위치를 이해하고 올바르게 활용하여 웹페이지의 스타일을 지정할 수 있습니다.