포럼
HTML5 기본 레이아웃 소스
2013.12.05 16:43
첨부파일 받아서 소스 보시면 됩니다. 시맨틱웹을 위한 HTML5 기초 소스인것 같습니다.
아래 소스를 응용해서 테마 한번 제작해서 올리도록 하겠습니다. 언제가 될지는 미정 ㅋㅋㅋㅋ
댓글 6
-
KANTSOFT
2013.12.05 17:26
-
jiom
2013.12.05 17:44
<header> : 사이트에 대한 소개 정보나 메인 메뉴, 사이트 로고 등이 포함<hgroup> : 제목과 그와 관련된 부제목을 묶어줍니다. 이렇게 함으로써 문서의 중요한 뼈대를 쉽게 구성할 수 있음.<nav> : 사이트의 메뉴나 링크 같은 내비게이션 요소들이 포함<article> : 문서 내용이 많을 경우 여러개의 <article>요소로 나눌 수 있음 - 웹상의 다른 곳으로 배포되거나 재사용될 수 있음. 보통 블로그의 포스트나 웹사이트의 내용, 사용자 등록 코멘트 등이 여기에 해당<section> : 실제 문서 내용 - 제목을 붙여서 콘텐츠 그룹을 묶을 때 사용하는 article 태그와 달리 section태그를 사용한 콘텐츠는 웹 상에서 배포할 수 없음.실제 문서의 내용<aside> : 문서의 주요 내용 외의 내용들을 넣어 문서의 주영역 주변에 배치 - 사이드바 구성<footer> : 작성자 정보나 저작권 정보 등의 부가정보를 문서 하단에 배치 - footer태그 안에 다른 여러 요소 포함 가능<figcaption> 와 <figure> : 그림이나 도표, 소스 코드 등에 설명글을 붙일 수 있음<mark> : 텍스트에 강조 표시를 할 수 있음<time> : 날짜와 시간 정보를 기록할 수 있음<address> 주소를 표시하기 위한 요소가 아니라 제작자 이름이나 웹 페이지 주소, 메일 주소 등의 연락처 정보를 표시하기 위한 것<i> : HTML4 에서의 용도와 달라져서 외국어나 분류학적인 용어, 대본에서의 무대 지문, 머릿속 생각 등 다른 텍스트와 구별되는 텍스트를 표시 할 때 사용<b> : HTML4에서의 용도와 달라져서 제품 소개 페이지에서의 제품명처럼 특별히 중효하진 않지만 진하게 표시해야 할 텍스트를 표시 할 때 사용<small> : HTML4에서의 용도와 달라져 주변의 다른 텍스트보다 포커스를 받지 못하는 텍스트를 표시 할 때 사용<hr>: HTML4에서의 용도와 달라져 주제가 완전히 달라지는 단락과 단락 사이에 사용
이상 입니다.
-
Canto
2013.12.05 17:46
article 안에 표현되는 하나하나가 section 으로 생각하시면 될듯 싶네요.
<article> <h1> 문서나 중요타이틀은 h1으로 표시합니다</h1> <section> <h2>서브타이틀은 h2로 표시합니다</h2> <p>하나의 아티클 안에 부분적인 내용.. 섹션이 들어갑니다.</p> </section> <section> <p>이 것은 body 부분의 텍스트를 표현하는 문서입니다.</p> </section> </article> 물론 전체적인 문서 부분도 하나의 섹션이 될 수 있습니다. <section id='body'> <article id='header'> <header> <h1> 문서나 중요타이틀은 h1으로 표시합니다</h1> </header> </article> <article id="main-content"> <section id="center-content"> <h2>서브타이틀은 h2로 표시합니다</h2> <p>하나의 아티클 안에 부분적인 내용.. 섹션이 들어갑니다.</p> </section> <section id="right-content"> <p>이 것은 body 부분의 텍스트를 표현하는 문서입니다.</p> </section> </article> <article id="footer"> <footer> <h1> 문서의 머릿말과 꼬릿말은 header 와 footer로 표현할 수 있습니다.</h1> </footer> </article> </section>
-
KANTSOFT
2013.12.05 18:09
위 코드대로라면 이젠 div class="" 태그를 사용하지 않고도 화면구성을 하고 대체되는 건가요?
-
Canto
2013.12.05 18:41
의미적인 부분입니다. 인간 이외의 컴퓨터적인 부분에서 분석을 쉽게하기 위한 분류입니다.
보통 article 이나 section 부분은 의미를 가진 div 라고 생각하시면 되겠습니다.
위에 jiom 님의 댓글 내용에 나와있듯이.. 메인부분, 서브부분, 위젯등 을 묶기위한 div가 article, section 로 대체되고..
의미없이 레이아웃의 모양.. 기능을 잡아주기 위한 부분은 div를 계속 쓰는것이 맞다고 봅니다.
다만 위에는 article 안에 section 으로 구역을 지정해 줬는데..
사실 article 안에 내용은 인터넷 상으로 재배포 될 수 있는 부분들을 묶는 것으로 쓰는게 바람직하고
section 안의 내용은 재배포를 금지하는 내용들을 넣는 것이 가장 바람직합니다.
실상 article 과 section 은 article 이 section 에 상속되어있다던가 하는 상속 개념이 아니라 동등한 위치라는 것이죠..
-
html5도 이제 슬슬 익숙해져야 겠네요..
article 태그와 section 태그가 모호하네요.