[CSS] Multiple Selectors

안녕하세요 동기 여러분! 오늘은 여러 선택자를 한 옵션에 박아 넣은 방법에 대해 알아봅시다.

 

Multiple Selectors

<h1>동기의 일기</h1>
<p>오늘 아침에 일어나 닭가슴살과 밥을 먹고 딥스를 하였다.</p>

위의 HTML 코드의 글씨체를 한 번에 바꾸기 위해서는 다양한 방법이 있지만 오늘 배울 방법은 아래의 코드입니다.

h1,
p {
  font-family: '궁서체';
}

바로 , (comma)를 사용하여 구분하면 글씨체 한 번에 적용이 됩니다.

 

---

 

클래스가 섞인 경우

<h1>동기의 일기</h1>
<p class="근엄">오늘 아침에 일어나 닭가슴살과 밥을 먹고 딥스를 하였다.</p>

h1,
.근엄 {
  font-family: "궁서체";
  color: crimson;
}

crimson 색을 추가하였습니다.

 

 

---

 

클래스와 아이디가 섞인 경우

<h1>동기의 일기</h1>
<p class="근엄">오늘 아침에 일어나 닭가슴살과 밥을 먹고 딥스를 하였다.</p>
<h2>라면의 유혹</h2>
<p id="위기">서랍장을 열었다가 라면과 눈이 마주쳐 결국 참을 수 없는 식욕이 폭발해 먹고 말았다.</p>

h1,
.근엄,
#위기 {
  font-family: "궁서체";
  color: blue;
}

색을 파란색으로 변경하였습니다.

 

ㅋㅋㅋㅋ

 

---

 

오늘의 느낌

라면은 함부로 쳐다보면 안돼...