본문으로 건너뛰기
실습하기

선택자(Selector): 스타일 적용 대상 지정

CSS 선택자(Selector)는 아래와 같이 다양한 방식으로 HTML 요소를 선택합니다.


전체 선택자(Universal Selector): * 기호를 사용하여 모든 HTML 요소 선택

CSS
* {
  color: blue; /* 모든 HTML 요소의 글자색을 파란색으로 지정 */
}

요소 선택자(Element Selector): HTML 태그 이름을 사용해 해당 태그를 가진 HTML 요소 선택

CSS
p {
  font-size: 16px; /* 모든 p 태그의 글자 크기를 16px로 지정 */
}

클래스 선택자(Class Selector): .class 형식으로 클래스 이름을 사용해 특정 클래스를 가진 HTML 요소 선택

CSS
.highlight {
  background-color: yellow; /* highlight 클래스를 가진 HTML 요소의 배경색을 노란색으로 지정 */
}

ID 선택자(ID Selector): #id 형식으로 특정 ID를 가진 HTML 요소 선택

CSS
#header {
  font-weight: bold; /* header ID를 가진 HTML 요소의 글자를 굵게 지정 */
}

하위 선택자(Descendant Selector): 요소 안에 중첩된 하위 요소 선택

CSS
ul li {
  list-style: circle; /* ul 태그 안에 있는 li 태그를 선택해 목록 스타일을 원형으로 지정 */
}

HTML & CSS 활용 예시​

다음은 HTML과 CSS를 함께 사용한 예시입니다.

HTML
<body>
  <p class="my-class">이 HTML 요소는 `p` 태그를 사용하고 `my-class` 클래스를 가지고 있습니다.</p>
  <h1 id="my-id">이 HTML 요소는 `h1` 태그를 사용하고 `my-id` ID를 가지고 있습니다.</p>
</body>
CSS
p {
  color: red;
}

.my-class {
  background-color: blue;
}

#my-id {
  font-size: 20px;
}

이 CSS는 다음과 같이 출력됩니다.

(빨간색 글자) 이 HTML 요소는 p 태그를 사용하고 my-class 클래스를 가지고 있습니다. (파란색 배경) 이 HTML 요소는 h1 태그를 사용하고 my-id ID를 가지고 있습니다.

다음 수업에서 고급 선택자 구성 방법을 알아보겠습니다.