13.4.1 HTML 코드 작성하기

먼저, 섹션 영역 중 About Me를 만들어 보겠습니다. 완성 화면은 그림과 같습니다.

그림 13-8 About Me 영역 완성 화면

최종 프로젝트 데모 페이지를 보면, 섹션 영역은 레이아웃이 모두 비슷합니다. 제목과 본문으로 되어 있죠. 그래서 구조와 CSS를 잘 정의하면 중복된 부분은 최소한의 코드로 작성할 수 있습니다.

지금까지와 마찬가지로 먼저 해당 영역을 어떤 태그로 작성할지 생각해야 합니다. 섹션 영역은 논리적으로 관련 있는 내용끼리 구분한 영역이므로 section 태그를 사용합니다. section 태그는 h2 태그부터 h6 태그 중에서 하나를 반드시 사용해야 합니다. 섹션 영역의 구성 요소 대부분은 텍스트인데, 텍스트 말고 이미지와 아이콘 폰트도 사용합니다. 각 구성 요소의 의미를 잘 생각하면서 적절한 태그로 작성하면 됩니다. 여기서는 다음과 같이 작성합니다.