다음으로 사각형 모양으로 3단 분리된 본문을 작성해 봅시다. 복잡해 보이지만, 하나의 레이아웃이 반복되는 형태라서 어렵지 않습니다. HTML5 사각형 하나만 작성하면 나머지는 텍스트만 바꾸는 형태로 단순히 구조를 복사해서 사용하면 됩니다.
제목을 작성한 코드 아래에 다음과 같이 do-me 클래스가 있는 div 태그를 작성합니다. 그리고 그 안에 하나의 사각형을 나타내는 do-inner 클래스가 있는 형태로 HTML 코드를 작성합니다.
13/end/html/what_i_do.html - What I Do 영역 본문
<h2>What I Do</h2>
</div>
<div class="do-me">
<div class="do-inner">
<div class="icon">
<!-- class="fa-brands fa-css3-alt", class="fa-brands fa-bootstrap" -->
<i class="fa-brands fa-html5"></i>
</div>
<div class="content">
<!-- CSS3, BootStrap v5.0 -->
<h3>HTML5</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo culpa magni laboriosam sit excepturi quibusdam adipisci, vero debitis?</p>
</div>
</div>
</div>
</div>
</section>