CMS솔루션마켓, 이온디 - 워드프레스, 라이믹스, 카페24, 그누보드, 엑셀

홈페이지 제작팁

두 번째 강좌 바로 시작만 합니다....( '')


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 태그에 대해서는 이 정도만 알아도 됩니다.

이 코드에서부터 우리는 차차 이야기를 시작해보도록 하죠. 여기서 잠깐 끊고 가겠습니다.

 
댓글은 로그인 사용자만 작성 가능합니다. 로그인하기