적용버전 : XpressEngine 공통 레이아웃을 돕는 JS와 CSS 파일 불러오기

레이아웃을 돕는 JS와 CSS 파일 불러오기

JS 문서 위치 : /xe/layouts/xeschool_layout/js/site_default.js

CSS 문서 위치 : /xe/layouts/xeschool_layout/css/site_default.css

스타일(CSS)과 스크립트 파일의 이름, 위치 폴더는 자유롭게 설정이 가능합니다. jQuery를 포함하는 경우 스크립트 파일 안에 포함시켜 사용하기도 하고 분리하여 로드할 수도 있습니다. 위와 같은 위치는 XE 코어 레이아웃 스킨 제작 기준입니다.


JS와 CSS 문서의 역할

layout.html 문서는 CSS 문서와 JS 문서의 도움을 절대적으로 받아야 합니다. CSS 문서는 레이아웃에서 작성한 HTML 태그에 세부적인 내용들을 디자인하고 조정하는 역할을 하며, JS 문서는 자바스크립트를 활용하는 스크립트 언어를 모아 놓은 문서입니다. 내부 스타일 정의 형식으로 layout.html 문서 안에서 CSS 와 JS를 직접 사용할 수도 있겠지만 올바른 코딩방법은 아닙니다. HTML과 CSS, JS는 모두 언어이며 각각 다른 방식의 언어법을 사용하기 때문에 한 문서안에 서로 다른 언어들이 모여있다면, 굉장히 복잡하고 무질서한 문서가 될 것이고 나중에 수정과 관리를 해야 하는 과정에서도 오류를 찾아내기가 어렵습니다. 무엇보다도 내부 스타일 정의 형식은 여러 문서에 상속되지 않기 때문에 변경하고자 하는 내용을 페이지마다 수정해 줘야 하는 번거로움을 감수해야 합니다. 그렇다고 절대적으로 사용을 금하는 것은 아닙니다. 현재 페이지에서만 사용되고 가끔 필요한 경우, 내부 스타일을 주어 사용할 수도 있습니다. 강제적인 부분은 아닙니다. 필자도 이 문서들 속에 내무 스타일을 주어 사용하는 경우가 많습니다...^^


JS와 CSS 문서의 저장 디렉터리

JS와 CSS 문서는 각각 레이아웃 디렉터리 안에 js 폴더와 css 폴더를 새로 만들고 그안에 저장하도록 합니다. 문서의 네이밍은 자유롭게 하실 수 있습니다. 필자는 "사이트_기본.JS문서" 라는 뜻으로 site_default.js 또는 site_default.css 라고 작성하여 저장하였습니다. info.xml 문서의 이름은 XE가 알 수 있도록 변경이 불가능하지만, 이들 문서는 레이아웃에서 외부문서 불러오기 방식으로 불러다 쓰기 때문에 myhome.css 라고 해도 상관이 없습니다. 따라서 이들 문서를 담는 폴더의 이름도 얼마든지 변경이 가능합니다. layout.html 문서와 같은 폴더 안에 두고 불러서 사용할 수도 있고 helper 라는 폴더를 만들고 그안에 둘 다 집어넣고 사용해도 아무 문제 없습니다. 자유롭게 사용할 수 있지만, XE 패밀리들은 js와 css 폴더를 사용한답니다...^^


JS 문서 저장하기

먼저 JS 문서를 만들고 저장해 봅시다. JS 문서는 HTML 문서와 같이 문서이름 뒤에 확장자를 .js 라고 해주면 js 문서가 됩니다. 물론 그 안에는 자바스크립트 언어로 작성을 해야겠지요. 자바스크립트 언어가 필요없는 웹사이트를 만든다면 JS 문서는 필요하지 않을 수도 있습니다. 다만, 요즘은 메뉴를 구성하는 방법에서 자바스크립트와 자바스크립트의 친척 jQuery(제이쿼리)를 많이 이용합니다. 실제로 기본 제공되는 레이아웃에도 jQuery를 이용한 펼침메뉴가 활용되고 있습니다. 따라서 우리도 그것을 가져다 쓰려고 합니다. 당장 jQuery를 공부하지 않아도 정말 멋진 펼침메뉴를 이용할 수 있답니다.

image

기본 제공되는 xe_official 레이아웃에서 JS 폴더 안에 있는 xe_official.js 문서 파일을 복사해 옵니다. 그리고 이름은 site_default.js 라고 변경합니다. 스크립트 언어를 지금 배울 수는 없지만 내용을 잠시 들여다 볼까요?


site_default.js

jQuery(function($){ ※ jQuery(함수)가 시작된다는 뜻입니다.
	// Language Select ※ 언어를 선택하는 토글 버튼에 대한 스크립트 부분입니다. //는 주석이라는 뜻이죠.
	$('.language>.toggle').click(function(){
		$('.selectLang').toggle(); ※ 문서안에는 .language라는 이름을 가진 태그가 있을꺼야. 그리고 거기에는 
		.toggle 이라는 이름의 버튼이 있는데 그걸 클릭하면 .selectLang 라는 항목을 토글 toggle() 시켜줘! 
		toggle() 이라는 함수는 jquery.js 를 참고하면 되요!
	});
    // Global Navigation Bar ※ 네비게이션에 대한 스크립트 부분이군요.
    var gMenu = $('.header>div.gnb'); ※ 문서안에서 .header 태그 안에 .gnb를 찾아봐! 그걸 변수 gMenu에 우선 담아!
    var gItem = gMenu.find('>ul>li'); ※ 그리고 그 속에 리스트를 찾아서 또 다른 변수 gItem에 담으세요.
    var ggItem = gMenu.find('>ul>li>ul>li'); ※ 리스트 안에 또 리스트가 있으면 또 다른 변수 ggItem에 담고!
    var lastEvent = null; ※ 아무도 안건드리면 가만히 있는거야!
    gItem.find('>ul').hide(); ※ 가만히 있는다는 건 보여주지 않으면 되.
	gItem.filter(':first').addClass('first');
    function gMenuToggle(){ ※ "만약에 건드리면요?" 메뉴가 있으면 아래로 펼쳐서 보여주면 되지! 없으면 말구.
        var t = $(this);
        if (t.next('ul').is(':hidden') || t.next('ul').length == 0) {
            gItem.find('>ul').slideUp(200);
            gItem.find('a').removeClass('hover');
            t.next('ul').slideDown(200);
            t.addClass('hover');            
        }; 
    };
    function gMenuOut(){ ※ "건드리다 갔어요?" 그러면 다시 올려서 보여주지 마!
        gItem.find('ul').slideUp(200);
        gItem.find('a').removeClass('hover');
    };
    gItem.find('>a').mouseover(gMenuToggle).focus(gMenuToggle); ※ 메뉴에 마우스가 올라오면 토글시켜줘! 위를 참고해!
    gItem.mouseleave(gMenuOut); ※ 메뉴에서 마우스가 떠나면 gMenuOut() 함수부분! 알지?
}); ※ jQuery(함수)가 끝났다는 뜻입니다. 여기도 둥우리 구조네요.

스크립트를 다 이해하지 못해도 괜찮습니다. 참고만 할 수 있기를 바래요. 하지만 조금 유심히 봐야 할 부분은 클래스의 이름을 가리키는 지시자를 확인해 두면 좋습니다. 레이아웃 문서에서 .header 태그 안에 .gnb 를 찾아 보라고 했죠? 이런 부분들을 꼭 확인해야 작동하는 것을 확인할 수 있는 것입니다. 우선은 위의 스크립트를 그대로 사용할 것이기 때문에 문서를 저장하고 js 디렉터리 안에 올려둡니다.


CSS 문서 저장하기

CSS 문서도 마찬가지 방법으로 기본 제공되는 레이아웃에서 복사해와 쓸 수 있지만, 아무것도 없는 상태에서 시작하는 것이 더욱 바랍직합니다. 불필요한 내용이 있는 상태로 코딩 작업을 하게 되면 나도 모르게 같은 이름을 사용한다거나, 작업 중에 혼란만 생길 뿐입니다. 아무것도 없는 문서에서 아래의 내용만 가장 맨 윗 줄에 추가하고 시작하는 것입니다.


site_default.css

@charset "utf-8"; ※ CSS 문서의 언어셋이 UTF-8 이라고 알려주네요.
* {padding:0;margin:0} ※ HTML의 모든 속성값을 0으로 초기화 합니다. * 는 "모든(All)" 이라는 뜻 입니다. 
태그의 속성에는 고유의 마진값과 패딩값이 있는데 이것을 초기화하는 것입니다. 그러면 UL, LI, FORM 등의 모든 마진,패딩값이 
사라지죠. html,body,h1,h2,h3,h4,h5,h6,ul,li,input 등등 유형(type)선택자를 모두 나열하고 초기화하는 방법도 많이 사용됩니다. 
★ XE에서는 전체(공용)선택자 애스터리스크(*)를 이용한 CSS 리셋을 사용하지 않습니다. 
자세한 내용은 아래 "레이아웃 기초 > CSS Reset" 을 참고하세요. (ul, ol, li, table 설정 주의)
참고문서 : CSS Reset

a img {border: none;}
※ 문서 안에 이미지 링크의 테두리를 없애는 설정입니다. 익스플로러만 말을 듣기 때문에 아래...
a { selector-dummy : expression(this.hideFocus=true);}
a:active, a:focus { -moz-outline:none; outline:none; }
※ 파폭 브라우저를 위한 설정도 같이 적어주면 좋겠죠. 모질라 계통에서 아웃라인이 생기지 않토록 한다는 의미.

.clear {clear: both;} ※ div가 자신의 영역을 구분하지 못하고 자꾸 올라오려고 할때 이걸 주면 끝...^^

/*  외부 문서 불러오기가 성공하였는지 확인하기 위해 h1에 색상을 빨간색으로 해 둘까요? */
h1 {color:red;} ※ CSS에서는 주석을 /* 와  */ 사이에 기록합니다.

위와 같이 CSS 문서의 윗 부분에 내용과는 상관 없이 미리 설정을 정리하여 주는 작업을 초기화 또는 초기 셋팅이라고 합니다. 초기화 없이 사용해도 관계는 없습니다. 다만 매번 마진과 패딩을 설정하는 번거로움을 해결하고, 필요한 곳에서만 재설정을 함으로써 편리한 방법으로 통용되고 있지요. 이러한 방법이 가능한 것은 속성의 상속을 이해하시면 됩니다. 상속이란 윗 줄에서 작성된 속성값 보다 아랫줄에 작성된 속성값이 마지막으로 적용된다는 뜻입니다. 분명히 맨 윗줄에서 모든 마진값과 패딩값을 0으로 설정했지만 아랫줄에서 지정자에게 margin-top:10; 을 지정하면 나중에 준 속성값이 그대로 적용 되는 것입니다. 나머지 margin-left, margin-right, margin-bottom 은 그대로 0으로 남겠죠. 이렇게 상속의 효과를 잘 활용하면 번거롭게 반복적으로 속성을 작성하지 않아도 간단히 정리할 수 있는 css 문서를 만들 수 있습니다. 작성이 되었으면 site_default.css 문서로 저장(항상 UTF-8)하고 서버에 업로드 합니다.


레이아웃 문서에서 JS, CSS 문서 불러오기 (XE 구문법과 신문법의 이해)

layout.html 문서의 맨 윗줄에 다음과 같이 작성합니다.

XE 템플릿 구문법 : 유효하며 계속 사용할 수 있는 문법입니다.

<!--// js 파일 import --> ※ 주석을 사용하려면 기존의 <!--  --> 에다가 // 를 추가해 사용합니다.
<!--%import("js/site_default.js")--> ※ %import("경로") 를 이용해 JS 문서를 불러옵니다.
<!--// 레이아웃과 연동될 css 파일 import -->
<!--%import("css/site_default.css")--> ※ 같은 방업으로 %import("경로") 를 이용해 CSS 문서를 불러옵니다.

XE 문법에서는 HTML 태그의 주석을 다는 <!-- --> 에다가 구문을 작성하지요. ! 는 항상 브라우저에게 뭔가를 이야기 할때 쓰는 구문입니다. 참 재미있지요. 주석 구문 <!-- --> 에다가 %import("경로")를 작성하여 외부 문서를 불러오고 있습니다. 이러한 방법은 XE 최신 버전에서 새로운 문법으로 변경 되었지만 여전히 사용할 수 있는 문법으로 자유롭게 사용하실 수 있습니다. 신문법을 확인하기 전에 기본 레이아웃에서는 어떻게 외부 문서를 불러오고 있는지 우선 확인해 보죠


xe_official.html의 외부문서 불러오기 탐구 : 구문법 (xe.1.4.4.4 참고)

<!--// js 파일 import -->
<!--%import("js/xe_official.js")-->

<!--// 레이아웃과 연동될 css 파일 import -->
<!--@if($layout_info->colorset == "white")-->
    <!--%import("css/white.css")-->
<!--@elseif($layout_info->colorset == "black")-->
    <!--%import("css/black.css")-->
<!--@else-->
    <!--%import("css/default.css")-->
<!--@end-->

위의 조건 구문이 이제는 어렵지 않으시죠? 한가지 못 보았던 구문은 <!--@else--> 입니다. 이것은 위의 조건식이 모두 거짓(FALSE) 일때 할 수 없이 마지막으로 남은 것은 이것 뿐이라는 뜻입니다. 그래서 "찾는 것이 없소! 그 밖에는 이것 뿐이오! 더이상 묻지도 따지지도 말고 이것을 쓰시오!" 어차피 조건은 세가지였습니다. 기본/흰색/검정 이었죠. 하지만 else를 쓴것은 흰색과 검정이 아니라면 무엇이든 이것을 쓰라는 의미입니다. 위와 같이 조건식을 만드는 것은 PHP의 문법과 동일합니다.

위와 같은 조건 구문이 신문법에서는 어떻게 변경이 되었을까요? 확인해 보도록 합니다.


xe_official.html의 외부문서 불러오기 탐구 : 신문법 (xe.1.4.5.7 참고)

<load target="js/xe_official.js" />
<load target="css/default.css" cond="$layout_info->colorset=='default'" />
<load target="css/white.css" cond="$layout_info->colorset=='white'" />
<load target="css/black.css" cond="$layout_info->colorset=='black'" />

XE 신문법에서는 무척 간소해 졌습니다. <load target="외부 문서의 경로" /> 형태로 사용하고 조건 구문도 인라인 형식으로 확인합니다. cond는 condition(조건)의 약자입니다. cond 조건식이 참(TRUE) 이면 인라인 구문이 실행되지만 거짓(FALSE) 이면 인라인 구문 한줄 모두가 없는 것과 마찬가지가 되죠. 이것은 참 재미있는 조건 구문입니다. 나중에 한번더 자세히 공부해 보겠지만, div, p 등에도 이러한 조건 구문을 적용할 수 있습니다. 마치 태그는 있는데 조건이 만족되지 않으면 스스로가 투명인간이 되는 것과 같죠...^^ PHP에서는 구버전과 같은 IF 구문을 IF 조건문이라고 부릅니다. 신문법은 마땅한 이름이 없습니다. 그래서 필자는 앞으로 이러한 조건 구문을
인라인 템플릿이라고 부르겠습니다. 인라인 스타일 형식으로 사용하면서 condition(조건)을 확인하고 XE만 사용하는 구문이기 때문에 인라인 템플릿이 적당할 것 같습니다. 만약 조건이 필요하지 않으면 맨 윗줄처럼 con="" 구문을 삭제하면 됩니다. 인라인 템플릿에는 위와 같은 load문과 include문, loop 반복문과 cond 조건문이 있습니다.

아래에 멋진 그림이 보이시나요? 로그인 하신 분들은 멋진 그림과 함께 h3와 div,p 태그를 이용해 로그인한 회원에게 인라인 템플릿 구문이 어떻게 사용되었는지 확인해 보실 수 있습니다...^^

로그인 하신 분들만 보입니다...^^


레이아웃에서 외부문서 불러오기 확인하기

layout.html 문서에 <h1>외부문서 불러오기</h1>라고 작성한 후에 업로드 해 보세요. h1 텍스트가 빨간색으로 출력된다면 CSS 문서를 정상적으로 불러온 것입니다. 메인과 서브 형태 보기도 확인하세요.

image