클래스 선택자
클래스 선택자
클래스 선택자은(는) CoddyKit의 무료 HTML for Kids 강의입니다. 이것은 1개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML for Kids 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML for Kids 강의에는 총 1개의 강의가 포함되어 있습니다.
클래스 선택자를 사용하는 이유
안녕하세요.
CSS에서 가장 중요한 주제 중 하나인 클래스 선택자까지 살펴보았습니다.
지금까지 클래스 선택자를 자주 사용했기 때문에 클래스 선택자가 무엇인지 알고 있습니다.
이 수업에서는 지금까지 배운 내용을 정리하고 다른 선택자에 비해 어떤 장점이 있는지 알아보겠습니다.
클래스 선택자 문법
그럼 시작해 보겠습니다.
점(.) 선택자를 사용하여 클래스 유형 선택자를 정의합니다. 아래에는 my-class라는 이름의 클래스 선택자가 있으며, font-size 스타일에 10px이 지정되어 있습니다.
.my-class {
font-size: 10px;
}
클래스 선택자에 두 개 이상의 스타일을 정의할 수도 있습니다.
.my-class {
font-size: 10px;
}
다중 선택자
하나의 요소에 둘 이상의 클래스를 지정할 수 있습니다.
아래 예제에서는 el1과 el2라는 두 클래스 선택자를 정의했습니다.
p 태그로 만든 요소의 class 속성에 둘 이상의 클래스를 공백으로 구분하여 추가할 수 있습니다.
미리 보기 영역에서 두 클래스의 스타일이 동시에 요소에 반영되는 것을 확인할 수 있습니다.
<style>
.el1{
color:red;
}
.el2{
font-size:30px;
}
</style>
<p class="el1 el2">
Hello Class Selector
</p>태그 선택자와 ID 선택자보다 클래스 선택자를 선택해야 하는 이유는 무엇일까요?
태그 선택자와 ID 선택자보다 클래스 선택자를 선택해야 하는 이유는 무엇일까요?
태그 선택자를 사용하면 해당 태그로 만든 모든 요소에 영향을 주기 때문에 원하지 않는 결과가 발생할 수 있습니다. 따라서 일반적으로 모든 요소에 공통적으로 적용해야 하는 특징이 있을 때 이러한 태그를 사용합니다.
예를 들어 요소마다 글꼴을 'Lato' 로 지정하려면 다음과 같이 정의합니다.
a{
font-family: Lato,sans-serif
}태그 선택자와 ID 선택자보다 클래스 선택자를 선택해야 하는 이유는 무엇일까요? 2
ID 선택자를 사용하면 요소별 정의를 만들 수 있습니다.
하지만 모든 스타일 정의가 하나의 요소에만 적용되므로, 동일한 속성을 표시하려는 다른 요소에 대해 코드를 다시 작성해야 합니다.
HTML 문서에는 동일한 ID를 가진 요소가 하나만 있을 수 있기 때문입니다.
CSS 우선순위
이제 CSS 우선순위의 개념을 알아보겠습니다.
주제를 더 잘 이해할 수 있도록 다시 문제를 만들어 보겠습니다. 이 문제를 해결하면서 이 개념을 익혀 보겠습니다.
CSS 우선순위 2
아래 예제에서는
p 태그에 스타일 정의가 적용되어 있습니다.
.first라는 클래스 선택자로 스타일 정의가 적용되어 있습니다.
두 선택자가 HTML 문서에서 동일한 요소를 선택했습니다.
두 선택자 모두 동일한 color 속성을 서로 다른 값으로 정의했습니다. 이 경우 충돌이 발생합니다.
<style>
.first{
color:blue;
}
p{
color:red;
}
</style>
<p class="first">
Enroll Now And Start Learn Codding?
</p>
CSS 우선순위 3
예제를 보면 이전에 배운 내용을 바탕으로 색상이 빨간색이 될 것이라고 생각할 수 있습니다.
캐스케이드 개념에 따르면 코드 순서상 마지막에 있는 규칙이 우선 적용되기 때문입니다.
하지만 여기에는 작은 차이가 있습니다. 우선순위가 같다면 나중에 작성된 코드가 우선 적용됩니다.
이는 해당 요소 또는 요소들에 대한 선택자의 우선순위가 얼마나 중요한지 보여 주는 평가입니다.
코드에서의 순위와 관계없이 우선순위가 높은 규칙은 브라우저에서 적용됩니다.
주의
클래스 선택자는 요소 선택자보다 더 구체적인 정의입니다. 따라서 우선순위가 더 높습니다.
선택자 우선순위
어떤 선택자가 더 구체적인지 알아내는 방법은 매우 간단합니다.
요소에 할당되는 ID는 하나뿐이고 웹 페이지에도 하나만 존재하므로, ID 선택자가 가장 높은 우선순위를 가진다고 예상할 수 있습니다.
클래스 선택자는 태그보다 더 구체적인 그룹을 선택하므로 태그 선택자보다 더 구체적으로 적용될 수 있습니다.
아래 예제에서는 서로 다른 3개의 선택자로 동일한 요소를 선택하여 ID 선택자가 우선 적용되는 것을 확인합니다.
<style>
#first{
color:green;
}
.first{
color:blue;
}
p{
color:red;
}
</style>
<p class="first" id="first">
Enroll Now And Start Learn Codding?
</p>우선순위 계산 도구
이 링크에서 온라인 우선순위 계산기에 접속할 수 있습니다.
우선순위가 중요한 경우
그렇다면 항상 이 계산을 사용해야 할까요?
물론 그렇지 않습니다. 표준에 따라 코드를 작성하면 충돌이 발생하지 않습니다.
따라서 항상 수학적 계산을 할 필요는 없지만, 문제가 발생했을 때 문제를 해결하려면 이 정보가 필요할 수 있습니다.
축하합니다
축하합니다. 🥳🥳🥳
클래스 선택자와 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 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.