강의명 : HTML
- HTML 레이아웃
레이아웃(layout)이란 특정 공간에 여러 구성 요소를 보기 좋게 효과적으로 배치하는 작업을 의미합니다.
웹 페이지의 레이아웃은 웹 사이트의 외관을 결정짓는 매우 중요한 요소입니다.
HTML에서는 다음과 같은 방법으로 레이아웃을 작성할 수 있습니다.
CSS 강의편에서 응용하여 구성할 수 있습니다.
div 요소를 이용한 레이아웃의 의미는 다음과 같습니다.
<header> HTML 문서나 섹션(section) 부분에 대한 헤더(header)를 정의함.
<nav> HTML 문서의 탐색 링크를 정의함.
<section> HTML 문서에서 섹션(section) 부분을 정의함.
<article> HTML 문서에서 독립적인 하나의 글(article) 부분을 정의함.
<aside> HTML 문서에서 페이지 부분 이외의 콘텐츠(content)를 정의함.
<footer> HTML 문서나 섹션(section) 부분에 대한 푸터(footer)를 정의함.
웹 페이지의 레이아웃은 웹 사이트의 외관을 결정짓는 매우 중요한 요소입니다.
HTML에서는 다음과 같은 방법으로 레이아웃을 작성할 수 있습니다.
CSS 강의편에서 응용하여 구성할 수 있습니다.
div 요소를 이용한 레이아웃의 의미는 다음과 같습니다.
<header> HTML 문서나 섹션(section) 부분에 대한 헤더(header)를 정의함.
<nav> HTML 문서의 탐색 링크를 정의함.
<section> HTML 문서에서 섹션(section) 부분을 정의함.
<article> HTML 문서에서 독립적인 하나의 글(article) 부분을 정의함.
<aside> HTML 문서에서 페이지 부분 이외의 콘텐츠(content)를 정의함.
<footer> HTML 문서나 섹션(section) 부분에 대한 푸터(footer)를 정의함.
예제
div 요소를 이용한 레이아웃
<div id="header"><h2>Header 영역</h2></div>
<div id="nav"><h2>Nav 영역</h2></div>
<div id="section"><p>Section 영역</p></div>
<div id="footer"><h2>Footer 영역</h2></div>
<div id="header"><h2>Header 영역</h2></div>
<div id="nav"><h2>Nav 영역</h2></div>
<div id="section"><p>Section 영역</p></div>
<div id="footer"><h2>Footer 영역</h2></div>
댓글목록
등록된 댓글이 없습니다.