선택자(Selector)에 대하여 (전체, 태그, 클래스, 아이디)

전체 선택자 (Selector)

전체 선택자는 문서 내의 모든 요소를 선택하는 특수한 선택자입니다. 전체 선택자는 * 기호로 표시됩니다. 이 선택자를 사용하면 페이지의 모든 요소에 스타일을 적용할 수 있습니다.

* {
  color: red;
}

위의 예제는 페이지의 모든 요소의 텍스트 색상을 빨간색으로 지정합니다. 전체 선택자는 페이지 전체에 영향을 미치므로 사용할 때 주의가 필요합니다.

태그 선택자는 HTML 요소를 선택하는 가장 기본적인 선택자입니다. 태그 선택자는 HTML 태그의 이름을 사용하여 요소를 선택합니다. 예를 들어, h1 태그를 선택하기 위해서는 다음과 같이 태그 선택자를 사용할 수 있습니다.

h1 {
  font-size: 24px;
}

위의 예제는 페이지에 있는 모든 h1 태그의 글꼴 크기를 24픽셀로 지정합니다.

클래스 선택자는 HTML 요소 중에서 특정한 클래스 속성을 갖는 요소를 선택합니다. 클래스 선택자는 .클래스이름 형식으로 표시됩니다. 예를 들어, button 클래스를 가진 모든 요소를 선택하기 위해서는 다음과 같이 클래스 선택자를 사용할 수 있습니다.

.button {
  background-color: blue;
  color: white;
}

위의 예제는 button 클래스를 가진 모든 요소의 배경색을 파란색으로, 텍스트 색상을 흰색으로 지정합니다.

아이디 선택자는 HTML 요소 중에서 특정한 아이디 속성을 갖는 요소를 선택합니다. 아이디 선택자는 #아이디이름 형식으로 표시됩니다. 예를 들어, header 아이디를 가진 요소를 선택하기 위해서는 다음과 같이 아이디 선택자를 사용할 수 있습니다.

#header {
  background-color: gray;
  color: black;
}

위의 예제는 header 아이디를 가진 요소의 배경색을 회색으로, 텍스트 색상을 검정색으로 지정합니다.