왼쪽부터 코드를 작성하겠습니다. 그림 13-16을 보면 알겠지만, 왼쪽도 구조를 하나만 만들어 놓으면 나머지는 그대로 복사해서 텍스트만 바꾸면 되는 디자인입니다. 그리고 표현해야 하는 구성 요소도 복잡하지 않아서 다음처럼 card 클래스를 가지는 div 태그로 그룹화해서 간단하게 작성할 수 있습니다.
13/end/html/contact_with_me.html - Contact With Me 영역 본문 왼쪽
<div class="left">
<div class="card">
<div class="icon">
<!-- class="fa-solid fa-envelope-open-text", class="fa-solid fa-location-crosshairs" -->
<i class="fa-solid fa-phone-volume"></i>
</div>
<div class="info-text">
<!-- email, address -->
<h3>phone</h3>
<!-- sucoding@naver.com, Samseong-ro, Gangnam-gu,<br> Seoul, Republic of Korea -->
<p>010-2222-1111</p>
</div>
</div>
</div>
card 클래스를 가지는 div 태그 그룹을 그대로 복사해서 붙여 넣고 텍스트만 교체하면 본문 왼쪽은 끝입니다.