더북(TheBook)

2.3.2 상품 화면 마크업

이제 HTML에 상품 마크업을 추가하는 데 집중할 수 있습니다. 헤더 요소 밑에 애플리케이션 콘텐츠의 주 컨테이너 역할을 하는 메인 요소를 추가해 보겠습니다. 메인 요소인 <main>은 HTML5의 새로 추가된 요소로 웹 페이지나 애플리케이션의 주 콘텐츠를 담는 데 사용합니다.

Tip

더 많은 메인 요소(혹은 다른 요소) 정보를 원한다면 https://www.quackit.com/html_5/tags/html_main_tag.cfm을 방문하세요.

 

상품 레이아웃은 2열을 사용하여 상품 이미지가 상품 정보 옆에 표시될 수 있도록 합니다(그림 2-13 참고). 스타일시트(chapter-02/assets/css/app.css)에 이미 모든 열의 스타일이 정의되어 있으니 마크업에 적당한 클래스 이름만 부여하면 됩니다.

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