이번에는 class 선택자를 배워보는 시간을 가져보도록 하겠습니다. class 선택자는 id 선택자와는 다르게 같은 클래스를 가지고 있는 모든 코드에게 효과를 줄 수 있습니다. 그럼 코드를 따라해봅시다.
CSS 모듈 불러오기에 있는 코드를 그대로 따라 쓰신 후, <body></body> 부분에 이 코드를 따라 작성해주시면 됩니다.
<HTML> [<body></body>부분 코드]
<h1 class="a"> 1 </h1> <h1 class="a"> 2 </h1> <h1 class="b"> 3 </h1> <h1 class="b"> 4 </h1> <h1 class="c"> 5 </h1> <h1 id="d"> 6 </h1>
<CSS> 코드
.a{
color:blue
}
.b{
color:red
}
.c{
color:green
}
#d{
color:yellow
}
자, 이코드를 실행시켜 보세요. 1과 2는 파란색, 3과 4는 빨간색, 5는 초록색, 6은 노란색이 되어있는 것을 알 수 있습니다. [1,2], [3,4],[5], 6 이런 식으로 나누어졌습니다. 이처럼 class 선택자는 두 개 이상의 코드에 효과를 줄 때 사용되는 것입니다. 5와 같이 클래스에 해당되는 것이 하나만 있어도 실행이 됩니다. CSS 코드에는 class 선택자 앞에 .을 붙여줍니다. 그리고 6은 저번 시간에 배운 id선택자입니다. 이것을 집합이라고 생각하면 쉽습니다. 전체집합 U{1,2,3,4,5,6} 중 부분집합 A{1,2}, B{3,4}, C{5}가 해당되어 있고, 6은 부분집합 A,B,C에는 들어가있지 않지만 전체집합에 들어가있는 원소(A∪B∪C)C 라고 생각하시면 되겠습니다. 따라서 id는 원소(∈), 그리고 class는 부분집합(⊂) 라고 생각하시면 되겠습니다.
잘 이해가 되셨나요? 다음 시간에도 더 재밌고 알찬 강의로 찾아뵙겠습니다. 감사합니다!
