Web Design (웹디자인) [HTML] HTML5 공간 분할 : 레이아웃(Layout)

2021.09.06 22:30

졸리운_곰 조회 수:552

[HTML] HTML5 공간 분할 : 레이아웃(Layout)

기능

HTML 공간 분할 : 레이아웃(Layout)

HTML

레이아웃 : 특정 공간에 여러 구성 요소를 보기 좋게 효과적으로 배치하는 작업을 의미한다.

=> 웹 사이트의 외관을 결정짓는 매우 중요한 요소다.

HTML5 레이아웃

HTML5에서는 웹 페이지의 레이아웃만을 위한 별도 새 요소를 제공한다. 이 요소 태그를 의미 요소라고 한다.

div 요소를 이용한 레이아웃

div 태그가 CSS 스타일을 쉽게 적용할 수 있어 레이아웃 작성에 자주 사용한다. 다음 HTML 코드에 간단히 HTML5 레이아웃을 확인할 수 있는 간단한 코드를 작성했다.

<!-- name.html --> <div id="header"> <h2 style="background-color:lightgrey; color:white; text-align:center">Header 영역</h2> </div> <div id="nav"> <h2 style="background-color:lightgrey; color:white; text-align:center">Nav 영역</h2> </div> <div id="section" style="text-align: center;"> <span style="background-color:lightgrey; color:white; text-align:center">Section 영역</span> <span style="background-color:lightgrey; color:white; text-align:center">Section 영역</span> <span style="background-color:lightgrey; color:white; text-align:center">Section 영역</span> <span style="background-color:lightgrey; color:white; text-align:center">Section 영역</span> <span style="background-color:lightgrey; color:white; text-align:center">Section 영역</span> <span style="background-color:lightgrey; color:white; text-align:center">Section 영역</span> <span style="background-color:lightgrey; color:white; text-align:center">Section 영역</span> <span style="background-color:lightgrey; color:white; text-align:center">Section 영역</span> <span style="background-color:lightgrey; color:white; text-align:center">Section 영역</span> </div><br> <iframe src="user.html" style="width:100%; height:600px; border: 3px dashed maroon"></iframe> <div id="footer"> <h2>Footer 영역 : Banner</h2> </div>

<!--user.html--> <p>제가 소개하는 글에서 중요한 부분은 <span style="border: 3px solid red">이 부분</span> 입니다.</p>

위 코드를 실행하면 다음과 같다. 각 영역이 분리되어 여느 웹 사이트에서 볼 법한 웹 사이트의 구조가 보인다.

div의 id로도 적용할 수 있고 다음처럼 바로 의미 요소 태그로 적용시킬 수도 있다.

<header><h2>Header 영역</h2></header> <nav><h2>Nav 영역</h2></nav> <section><p>Section 영역</p></section> <footer><h2>Footer 영역</h2></footer>

의미 요소	설명
<header>	HTML 문서나 섹션(section) 부분에 대한 헤더(header)를 정의함.
<nav>	HTML 문서의 탐색 링크를 정의함.
<section>	HTML 문서에서 섹션(section) 부분을 정의함.
<article>	HTML 문서에서 독립적인 하나의 글(article) 부분을 정의함.
<aside>	HTML 문서에서 페이지 부분 이외의 콘텐츠(content)를 정의함.
<footer>	HTML 문서나 섹션(section) 부분에 대한 푸터(footer)를 정의함.

+ table 요소 이용 레이아웃

table 요소를 이용하여 레이아웃을 작성하는 방법은 오래전에 사용하던 방식이고 지금은 거의 사용하지 않는다. table 태그 자체가 레이아웃을 만들기 위해 설계된 요소가 아니니 가급적 이 태그로 레이아웃은 삼가하자. 이렇게도 레이아웃을 구성할 수 있구나 정도만 보면 되겠다.

<table width="100%" style="text-align:center; border:none"> <tr> <td colspan="2" style="background-color:lightgrey"><h2>Header 영역</h2></td> </tr> <tr> <td style="background-color:#329998; color:white; width:20%"><h2>Nav 영역</h2></td> <td style="height:200px; text-align:left"><p>Section 영역</p></td> </tr> <tr> <td colspan="2" style="background-color:#FFCC00"><h2>Footer 영역</h2></td> </tr> </table>

[출처] https://m.blog.naver.com/dsz08082/221903006189

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com