HTML에서 태그를 그룹화하는 div 태그

이전 단원에서 텍스트 일부를 강조할 수 있는 태그 span을 살펴보았습니다. 여러 태그를 그룹화하여 이후에 동시에 작업을 수행할 수 있게 하는 특별한 태그 div도 있습니다.

예를 들어 div 태그를 사용하여 단락을 그룹화해 보겠습니다:

html<div class="block1">
  <p>
    text
  </p>
  <p>
    text
  </p>
</div>
<div class="block2">
  <p>
    text
  </p>
  <p>
    text
  </p>
</div>

첫 번째 그룹의 요소에는 빨간색을, 두 번째 그룹의 요소에는 초록색을 지정해 봅시다:

css.block1 {
  color: red;
}
.block2 {
  color: green;
}

Задание 1

다음 코드가 주어졌습니다:

html<div>
  <h2>Title</h2>
  <p>
    text
  </p>
  <p>
    text
  </p>
</div>
<div>
  <h2>Title</h2>
  <p>
    text
  </p>
  <p>
    text
  </p>
  <p>
    text
  </p>
</div>
<div>
  <h2>Title</h2>
  <p>
    text
  </p>
  <p>
    text
  </p>
  <p>
    text
  </p>
  <p>
    text
  </p>
</div>

첫 번째 div의 내용을 빨간색으로, 두 번째 div의 내용을 초록색으로, 세 번째 div의 내용을 파란색으로 칠하세요. 이를 위해 각 div에 고유한 클래스를 지정하세요.

Задание 2

다음 코드가 주어졌습니다:

html<div>
  <h2>Title</h2>
  <p>
    text
  </p>
  <p>
    text
  </p>
</div>
<div>
  <h2>Title</h2>
  <p>
    text
  </p>
  <p>
    text
  </p>
</div>
<div>
  <h2>Title</h2>
  <p>
    text
  </p>
  <p>
    text
  </p>
</div>
<div>
  <h2>Title</h2>
  <p>
    text
  </p>
  <p>
    text
  </p>
</div>

첫 번째와 세 번째 div의 내용을 빨간색으로, 두 번째와 네 번째 div의 내용을 초록색으로 칠하세요. 이를 위해 첫 번째와 세 번째 div에는 하나의 클래스를, 두 번째와 네 번째 div에는 다른 클래스를 지정하세요.