CMS 라이믹스(XE) 오픈 자료실 보관 자료실 상품제안 제품매뉴얼 모듈 매뉴얼 버전 관리 관련사이트 워드프레스 그누보드 카페24 고도몰 제로보드4 CGI

HTML5를 이용한 시멘틱 XE 레이아웃 만들기 (레이아웃 파일 만들기)

2013년 08월 04일

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

HTML5를 이용한 시멘틱 XE 레이아웃 만들기

- 1편. 레이아웃 HTML 파일 만들기 -

1. 1단계 layout.html 얼개 짜기

작업 방식이 여기서부터 기존의 강좌들과 갈리는군요. ^^;

기존의 강좌는 전체 구조와 각 파일의 역할부터 친절히 안내합니다.

<레이아웃 스킨의 필수 파일과 그 기능>

./conf/info.xml (레이아웃 관리자 설정 페이지 구성)

./layout.html (레이아웃을 보여주는 파일)

(...기타 등등)

저는 바로 과감하게 layout.html 파일을 info.xml 파일이나 css 파일 등을 만들지 않고 오롯히 레이아웃 파일만 html 로 먼저 작성합니다.

구상해놓은 레이아웃 구조가 있으면 바로 html5의 시멘틱 태그를 이용해 얼개를 작성합니다.

<레이아웃 파일 코드 작성>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</header>

</section>

</div>

</footer>

</div>

</body>

</html>

HTML5에 대해서 잠깐 설명하고 넘어가겠습니다. XE 1.7 최신 버전부터 HTML5를 기본으로 합니다. 그래서 레이아웃도 기존 DIV로 일색이던 레이어를 좀 더 그 구조에 맞는 시멘틱 태그를 활용하여 나타내보았습니다. 구조를 나타내는 HTML5 태그에 대해서는 이 정도만 알아도 됩니다.

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