가이드라인

선택자(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를 가지고 있습니다.

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

가이드라인

AI 튜터

배포

디자인

업로드

수업 노트

즐겨찾기

도움말