HTML for Kids · 강의

선택자 유형

선택자 유형은(는) CoddyKit의 무료 HTML for Kids 강의입니다. 이것은 1개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML for Kids 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML for Kids 강의에는 총 1개의 강의가 포함되어 있습니다.

소개

안녕하세요.

이 수업에서는 더 복잡한 선택자를 사용하여 CSS 지식을 한 단계 더 발전시켜 보겠습니다.

여러 스타일 정의

각 스타일 사이에 세미콜론을 넣어 여러 스타일을 정의할 수 있습니다.

.first{
   color:blue;
   font-size:20px;
   text-align: center;
}

더 복잡해진 HTML 문서가 있습니다

지금까지는 간단한 태그, ID, 클래스 선택자를 사용했습니다. 하지만 사용자 인터페이스가 복잡해지는 경우에는 더 복잡한 선택자를 사용해야 합니다.

아래 예제에는 더 복잡해진 HTML 문서가 있습니다.

<body>
	<div id="my-area">
		<p class="first">lorem</p>
		<div class="second">
				<p class="third">Ipsum</p>
	</div>
  </div>
</body>

예제 분석

이제 코드를 분석해 보겠습니다.

페이지 본문 안에서 컨테이너 역할을 하는 my-area ID를 가진 div가 있습니다. 이 div 아래에 있는 모든 요소의 조상 요소입니다.
first 클래스를 가진 p 요소는 second 클래스를 가진 div 요소의 형제 요소입니다.
세 번째 요소는 두 번째 요소의 자식 요소이며, my-area 요소는 세 번째 요소의 조상 요소로 볼 수 있습니다.

주의

HTML 레이아웃을 말 그대로 가계도처럼 생각해 볼 수 있습니다.

할아버지로부터 유전 형질을 물려받을 수 있습니다.

하지만 이 유전이 아버지에게서 바뀌면 아버지의 유전자가 더 우세해져 할아버지에게서 물려받은 형질이 달라집니다.

선택자 조합

이제 선택자를 조합하는 방법을 알아보겠습니다.

다음 문은 두 번째 클래스가 세 번째 클래스 요소의 하위 요소(자식 또는 손자)임을 나타냅니다.

두 클래스 사이에 공백이 있으면 왼쪽 클래스가 하위 요소를 찾는다는 의미입니다.

.second .third{
	color:red;
}

자식 선택자

아래 예제에서는

두 번째 클래스의 자식인 세 번째 클래스를 선택한다는 의미입니다.

보다 큼 기호는 해당 요소의 자식 요소를 선택한다는 의미입니다.

.second > .third{
	color:red;
}

요소를 선택하기 위해 태그 선택자와 클래스 선택자를 조합할 수 있습니다.

동시에 태그 선택자와 클래스 선택자를 조합하여 요소를 선택할 수 있습니다.

아래 예제에서는 세 번째 클래스를 가진 p 요소를 선택합니다.

<style>

p.third{
	color:red;
}

</style>


<p class="third">Hello CSS</p>

첫 번째 클래스를 가진 div를 선택한다고 가정해 보겠습니다.

첫 번째 클래스를 가진 div를 선택한다고 가정해 보겠습니다.

아래 예제는 my-area ID를 가진 div 요소의 자식인 첫 번째 클래스를 가진 요소를 선택한다는 의미입니다.

이렇게 하면 선택할 요소의 우선순위가 높아집니다.


div#my-area > .first{
color:red;
}

모두 선택하기

별표 기호(*)는 선택자에서 중요하게 사용됩니다.

별표는 모든 요소를 선택한다는 의미입니다.

아래 예제에서 선택자는 my-area ID를 가진 요소의 모든 하위 요소를 선택한다는 의미입니다.

여기서 주의할 점은 자식 요소뿐만 아니라 모든 하위 요소를 선택한다는 것입니다.

자식 요소만 선택하려면 별표 앞에 보다 큼 기호를 넣어야 합니다.

/* It chooses all the descendants of #my-area. */
#my-area *{
	color:red;
}

/* It chooses all the children of #my-area. */
#my-area > *{
	color:red;
}

인접 형제 선택자

하위 요소 선택자와 자식 선택자를 사용해 보았으니, 이제 형제 선택자를 알아보겠습니다.

형제 선택자는 + 기호를 사용하여 다음 형제 요소를 선택합니다.

예제에서는 선택자에 의해 세 번째 문단 요소의 배경색이 노란색으로 지정됩니다.

<!DOCTYPE html>
<html>
<head>
<style>
div + p {
  background-color: yellow;
}
</style>
</head>
<body>

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
</div>

<p>Paragraph 3. Not in a div.</p>
<p>Paragraph 4. Not in a div.</p>

</body>
</html>

일반 형제 선택자

바로 다음 형제 요소뿐만 아니라 그 뒤에 이어지는 모든 형제 요소를 선택하려면 물결표 기호(~)를 사용합니다.

물결표 기호는 이미 후속 형제 결합자라는 이름으로 알려져 있습니다.

<style>

div ~ p {
  background-color: red;
}

</style>

<p>Paragraph 1.</p>
<div>
  <p>Paragraph 2.</p>
</div>
<span>span element.</span>
<p>Paragraph 3.</p>
<p>Paragraph 4</p>

의사 클래스와 CSS 클래스

클래스는 아니지만 클래스처럼 동작하는 표현식을 의사 클래스라고 합니다.

HTML의 어떤 요소에도 의사 클래스를 직접 정의하지 않습니다.

브라우저가 코드를 해석할 때 의사 클래스가 존재한다고 간주합니다. 따라서 CSS 선택자에서 의사 클래스를 사용할 수 있습니다.

:hover 의사 클래스

의사 클래스 중에서 :hover는 가장 잘 알려진 의사 클래스입니다.

Hover(:hover)는 마우스가 요소 위에 올라갔을 때 브라우저가 해당 요소에 자동으로 적용하는 의사 클래스입니다.

선택자 문에서 콜론(:) 기호 뒤에 의사 클래스를 사용합니다.

의사 클래스를 사용하는 문법은 아래 예제와 같습니다.

selector:pseudo-class {
   property: value;
}

:hover로 링크 스타일 지정

이제 링크를 만들고 링크 위에 마우스를 올렸을 때 어떻게 표시되는지 확인해 보겠습니다.

주의: 모바일 기기에는 웹과 같은 마우스 오버 이벤트가 없으므로 이 효과는 CoddyKit 모바일 애플리케이션에서 표시되지 않습니다.

아래 예제에서 링크 위에 마우스를 올리면 링크 색상이 녹색으로 바뀌는 것을 확인해 보겠습니다.

<!DOCTYPE html>
<html>
<head>
<style>

.my-link{
	color:red;
	}

.my-link:hover{
	color:green;
}

</style>
</head>
<body>

<a class="my-link" href="https://www.coddykit.com">
CoddyKit Homepage Link
</a>

</body>
</html>

:first-child 의사 클래스

가장 혼동하기 쉬운 의사 클래스 중 하나는 :first-child입니다.

이름만 보면 일반적으로 요소의 첫 번째 자식 요소를 선택한다는 의미로 생각할 수 있습니다.

하지만 이러한 추론은 올바르지 않습니다.

요소의 형제 요소 중 첫 번째 요소를 선택하는 데 사용됩니다.

<!DOCTYPE html>
<html>
<head>
<style>

/* Chooses the first p element 
among children of the my-box class. */

.my-box p:first-child {
  font-size: 24px;
} 
</style>
</head>
<body>

<div class="my-box">
  <p>This is first text.</p>
  <p>This is second text.</p>
  <p>This is third text.</p>
</div>
</body>
</html>

:last-child 의사 클래스

last-child는 first-child 의사 클래스의 반대입니다. 요소의 형제 요소 중 마지막 요소를 선택하는 데 사용됩니다.

<!DOCTYPE html>
<html>
<head>
<style>

/* Chooses the last p element 
among children of the my-box class. */

.my-box p:last-child {
  font-size: 24px;
} 
</style>
</head>
<body>

<div class="my-box">
  <p>This is first text.</p>
  <p>This is second text.</p>
  <p>This is third text.</p>
</div>
</body>
</html>

::before 의사 요소

요소 앞에 무언가를 추가하려면 ::before 의사 선택자를 사용합니다.

아래 예제에서는 헤더 요소 앞에 'Hello' 콘텐츠를 추가했습니다.

<!DOCTYPE html>
<html>
<head>
<style>
	h1::before {
			content: "Hello ";
	}
</style>
</head>
<body>

<h1>Coddykit</h1>
<h1>Coddykit</h1>
<h1>Coddykit</h1>

</body>
</html>

::after 의사 요소

::before 의사 요소의 반대인 ::after 의사 요소는 요소 뒤에 새로운 콘텐츠를 추가하는 데 사용됩니다.

<!DOCTYPE html>
<html>
<head>
<style>
	h1::after {
			content: " Coddykit";
	}
</style>
</head>
<body>

<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>

</body>
</html>

목록 의사 클래스

가장 많이 사용하는 의사 클래스를 학습했습니다. 하지만 의사 클래스는 수십 가지가 더 있습니다.

아래 링크에서 모든 의사 클래스 목록을 확인할 수 있습니다. 필요할 때 원하는 의사 클래스를 사용하시면 됩니다.

축하합니다

축하합니다 🎉

이 섹션에서는 선택자 유형을 학습했습니다.

다음 섹션에서는 가장 많이 사용하는 CSS 속성을 학습합니다.

자주 묻는 질문

“선택자 유형” 강의는 무료인가요?

네 — “선택자 유형” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML for Kids 강의 전체를 잠금 해제할 수 있습니다. HTML for Kids 강의에는 총 1개의 강의가 포함되어 있습니다.

“선택자 유형”에서 뭘 배우나요?

선택자 유형 브라우저에서 직접 실행하는 실습 코드로 HTML for Kids을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

HTML for Kids을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 HTML for Kids은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 1개 중 1번째 강의입니다.

“선택자 유형” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 HTML for Kids 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 HTML for Kids 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

← HTML for Kids(으)로 돌아가기