수다닷컴

안녕하세요 코딩공부 1개월차 왕초보입니다 (__)

웹페이지 제작을 연습하고 있습니다.

첨부이미지처럼

html5 시맨틱태그 이용해서 html 구조를 잡으려고 하는데요

처음 만들때는only div안에 div로 만들어서 아무생각 없이 만들었는데

시맨틱마크업 방식으로 section article 등 이용하려니 너무 헷갈려서 도움을 청해봅니다. 위에 이미지대로 레이아웃을 짜려고 하는데
현재html 타이핑은
!DOCTYPE HTML
html

head
title New Document /title
/head

body
div id=container
header
h1img src=/h1
nav
ul
liimg src=/li
liimg src=/li
liimg src=/li
liimg src=/li
liimg src=/li
liimg src=/li
/ul
/nav
/header

article

section id=content_img
h2img src=content_img //h2
/section!--main_img section--

section id=content_sub

section id=content_sub1img src= //section
section id=content_sub2img src= ///section
section id=content_sub3img src= ///section

/section

/article
footer
p/p
/footer
/div!--wrap--
/body
/html

이렇게 구조를 만들어보았습니다.

궁금한것이 section엘리먼트를 div처럼선택자 지정하여서
section 안에 section으로 div 사용할때처럼
여러 section으로 지정을 해도 되는지
아니면 section안에 div를 3개 넣는게 맞는건지
div만 쓰다가 시맨틱태그들 쓰려니 너무 헷갈립니다.html5 시맨틱마크업이 이런식으로 구조를 잡는게 맞는지 article,등궁금합니다.

신청하기