더북(TheBook)

메인 영역은 시맨틱 태그인 main 태그로 작성합니다. main 태그 안에는 기준 너비를 유지하기 위한 container 클래스가 포함된 div 태그가 있습니다. div 태그 안에 여러 태그를 적절하게 사용해 코드를 작성하면 됩니다.

최종 프로젝트에서 텍스트는 h4, h2, p 태그로 작성합니다. 물론 다른 태그로 작성해도 상관없습니다. 태그 선택은 오로지 코드를 작성하는 사람의 주관적인 판단에 따릅니다.

버튼은 button 태그로 작성했습니다. input 태그의 type 속성값을 button으로 지정해도 버튼을 만들 수 있지만, 폼에서 사용하는 버튼이 아니므로 button 태그가 더 적절합니다.

여기까지 작성한 코드를 웹 브라우저에서 실행하면 그림처럼 보입니다. 헤더 영역의 position 속성값이 absolute라서 메인 영역과 헤더 영역이 겹쳐 보입니다.

그림 13-5 메인 영역 HTML 코드 작성 결과

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.