section 태그로 섹션 영역을 모두 표시하지만, 세부 디자인은 조금씩 다르므로 각 영역을 구분할 수 있어야 합니다. 그래서 About Me 영역은 section 태그의 클래스 속성값을 about으로 지정해 구분합니다.

기준 너비는 지금까지와 마찬가지로 container 클래스를 가지고 있는 div 태그를 이용해 지정합니다. div 태그는 다시 title 클래스를 가지고 있는 div 태그(제목)와 about-self 클래스를 가지고 있는 div 태그(본문)로 구분합니다. CSS를 적용하기 쉽도록 각 영역을 div 태그로 그룹 짓습니다.

본문 영역에 사용하는 이미지는 예제 파일의 13/ing/images 폴더에 들어 있습니다. 그리고 아이콘 폰트도 사용합니다. CDN 방식으로 추가한 Font Awesome 라이브러리는 right 클래스 하위에 있는 social 클래스에서 i 태그로 사용합니다.

여기까지 작성한 코드를 웹 브라우저로 실행하면 화면이 다음과 같이 보입니다.

그림 13-9 About Me 영역 HTML 코드 작성 결과