두 번째 강좌 바로 시작만 합니다....( '')
HTML5를 이용한 시멘틱 XE 레이아웃 만들기
- 1편. 레이아웃 HTML 파일 만들기 -
1. 1단계 layout.html 얼개 짜기
작업 방식이 여기서부터 기존의 강좌들과 갈리는군요. ^^;
기존의 강좌는 전체 구조와 각 파일의 역할부터 친절히 안내합니다.
<레이아웃 스킨의 필수 파일과 그 기능>
./conf/info.xml (레이아웃 관리자 설정 페이지 구성)
./layout.html (레이아웃을 보여주는 파일)
(...기타 등등)
저는 바로 과감하게 layout.html 파일을 info.xml 파일이나 css 파일 등을 만들지 않고 오롯히 레이아웃 파일만 html 로 먼저 작성합니다.
구상해놓은 레이아웃 구조가 있으면 바로 html5의 시멘틱 태그를 이용해 얼개를 작성합니다.
<레이아웃 파일 코드 작성>
<!DOCTYPE html>
<html>
<head>
<title>이온디 XE 레이아웃</title>
<link href="html5reset.css" rel="stylesheet">
</head>
<body>
<div id="xe">
<header>
<nav id="snb"></nav>
<h1 id="logo"></h1>
<nav id="gnb"></nav>
</header>
<div id="content">
<aside></aside>
<section>
<article></article>
</section>
</div>
<footer>
<nav id="fnb"></nav>
<address class="copyright">ⓒ 2013 eond.com</address>
</footer>
</div>
</body>
</html>
HTML5에 대해서 잠깐 설명하고 넘어가겠습니다. XE 1.7 최신 버전부터 HTML5를 기본으로 합니다. 그래서 레이아웃도 기존 DIV로 일색이던 레이어를 좀 더 그 구조에 맞는 시멘틱 태그를 활용하여 나타내보았습니다. 구조를 나타내는 HTML5 태그에 대해서는 이 정도만 알아도 됩니다.
이 코드에서부터 우리는 차차 이야기를 시작해보도록 하죠. 여기서 잠깐 끊고 가겠습니다.