HTML에서 태그를 그룹화하는 div 태그
이전 단원에서 텍스트 일부를 강조할 수 있는
태그 span을 살펴보았습니다. 여러 태그를
그룹화하여 이후에 동시에 작업을 수행할 수 있게 하는
특별한 태그 div도 있습니다.
예를 들어 div 태그를 사용하여
단락을 그룹화해 보겠습니다:
<div class="block1">
<p>
text
</p>
<p>
text
</p>
</div>
<div class="block2">
<p>
text
</p>
<p>
text
</p>
</div>
첫 번째 그룹의 요소에는 빨간색을, 두 번째 그룹의 요소에는 초록색을 지정해 봅시다:
.block1 {
color: red;
}
.block2 {
color: green;
}
다음 코드가 주어졌습니다:
<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에 고유한 클래스를 지정하세요.
다음 코드가 주어졌습니다:
<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에는 다른 클래스를 지정하세요.
