자유잡담 +127

이 파일을 열면 다음과 같다. 아래의 주석을 풀면 다음과 같다.

<?xml version="1.0" encoding="UTF-8"?>

<skin version="0.2">

    <title xml:lang="ko">user_board</title> //스킨의 제목

    <title xml:lang="en">user_board</title>

    <description xml:lang="ko">게시판 스킨 제작 실습을 위한 user_board 입니다.</description> //스킨 설명

    <description xml:lang="en">This is user_board for creating a board skin.</description>

    <version>1.0</version> //버전

    <date>2010-12-24</date> //스킨 제작 날짜

    <author email_address="user@user.com" link="http://user-define.com/"> //제작자 이메일과 사이트

        <name xml:lang="ko">제작자 이름</name>

        <name xml:lang="en">Author Name</name>

    </author>

    <license>LGPL v2</license> //라이센스

    <extra_vars> //게시판 스킨 확장변수

        <var name="title" type="text"> //텍스트 타입의 응답을 받음

            <title xml:lang="ko">게시판 제목</title>

            <title xml:lang="en">Board Title</title>

<description xml:lang="ko">작성하면 화면에 표시 됨</description>

<description xml:lang="en">This will be displayed on the screen as you write.</description>

        </var>

        <var name="comment" type="textarea"> //글상자 타입의 응답을 받음

            <title xml:lang="ko">게시판 설명</title>

            <title xml:lang="en">Board Details</title>

<description xml:lang="ko">작성하면 화면에 표시 됨</description>

<description xml:lang="en">This will be displayed on the screen as you write.</description>

        </var>

    </extra_vars>

</skin>

이 정보를 원하는 대로 수정한 다음 board/skins 폴더에 업로드한다. 모습은 다음과 같다.

들어가며

  이제 드디어 게시판 스킨 강좌를 시작하게 되었다. 게시판 스킨 역시 레이아웃과 마찬가지로 약간의 html과 css 지식만 있으면 되지만 함수나 접근 방법, 구조가 다르기에 4장으로 분리하여 다루기로 한다. 여기서는 본인과 같이 게시판 스킨을 만들어보면서 게시판 스킨을 직접 만드는 법을 익힐 것이다. 우선 기본 스킨의 구조를 살펴보기로 하자.

base_board.zip

  먼저 이 스킨을 받고 시작하자. 게시판의 필수 뼈대만 모아놓은 게시판이다. 주석을 많이 써놔서 복잡해보이긴 하지만...

스킨 파일의 구조

  압축을 풀면 다음과 같은 구조로 되어있다.

_comment : 게시글의 댓글과 댓글 쓰기 폼

_footer : 게시판의 div 태그를 닫는 역할

_header : 스킨의 각종 설정이나 파일, 카테고리, 관리자 화면 등의 상단 영역을 불러오는 역할을 한다.

_read : 게시글 읽기 화면

css 파일 : 디자인 적용을 위한 파일

js 파일 : 자바스크립트 적용을 위한 파일

_comment_form : 별도 화면 댓글 쓰기 폼

delete_comment_form : 댓글 삭제 화면

delete_form : 글 삭제 화면

list : 게시판 목록

message : 게시판 오류 메시지 화면

xml 파일 : 스킨의 기본 정보

write_form : 글쓰기 화면

기존 리뉴얼에서 색만 greenery 투톤으로 바꿨다.

이제 작년의 색은 그만

반응형 레이아웃이란?

  반응형 레이아웃은 화면의 넓이에 따라 컨텐츠의 배치를 유연하게 바꾸어 각 기기에 최적화된 화면을 보여주는 것이다. em과 %로 코딩해서 실시간으로 비율을 다르게 조정할 수도 있고, 특정 해상도에서 보일 모습을 지정할 수도 있다. 반응형 레이아웃은 일반 모바일 최적화 레이아웃보다는 용량이 더 많이 들긴 하지만 별도의 모바일 페이지를 만드는 수고를 줄일 수 있다는 점에서 좋다.

메타태그 추가

  반응형 레이아웃을 코딩하기 전에 html에서 뷰포트를 인식할 수 있도록 메타태그를 추가해주자. 해당 레이아웃의 설정에서 헤더 스크립트에 다음을 붙여넣으면 된다.

<meta name="viewport" content="width=device-width, initial-scale=1">

반응형 코딩

  이제 css 파일을 열고 코딩을 시작하자. 기본형태는 다음과 같다.

@media screen and (넓이){

해당 넓이에서 보여질 css

}

  본인은 지난 장에서 500px짜리 레이아웃을 만들었으므로 다음과 같이 만들 것이다.

/* 반응형 레이아웃 */

@media screen and (max-width:500px){}

  이제 어떻게 해야 모바일에서 보기가 편할지를 생각해보며 css를 추가해보자. 1단은 반응형을 적응하기가 쉬운 편이다.

@media screen and (max-width:500px){

body{width:auto;left:0;right:0;margin:0;padding:0;} /* 모바일에서는 폭이 좁으므로 꽉 채우는 것이 좋다. 그러므로 body의 쓸데없는 여백은 모조리 지워주었다. */

.layout_container{width:auto;left:0;right:0;margin:0px auto;border:none;} /* 컨테이너의 마진 역시 필요가 없다. 화면을 꽉 채워야 하니까. 외곽선도 필요없다. */

  .layout_container .header .menu{overflow:auto;} /* 실제 폰에서 메뉴가 짤려서 추가 */

}

  강좌에서 짠 레이아웃에서는 이 정도만 해주니 완성되었다.

  이제 레이아웃 강좌는 정말로 끝이 났다. 다음엔 게시판 스킨 제작으로 찾아뵙겠다. 아쉽지만 다음 연재는 지금 만들고 있는 스킨을 완성한 후에 가능할 것 같다.

검색창

  이제 상단에 검색창을 만들어보자. 여기서는 로그인과 같은 줄에 검색창을 만들어보도록 하겠다. 우선 html 파일을 열고 다음과 같은 코드를 삽입한다.

<div class="search_area">

<form action="{getUrl()}" method="get" class="search">

<input type="hidden" name="vid" value="{$vid}" />

<input type="hidden" name="mid" value="{$mid}" />

<input type="hidden" name="act" value="IS" />

<input type="text" name="is_keyword" value="{$is_keyword}" class="keyword" title="{$lang->cmd_search}" /> <!-- 검색창 -->

<input type="submit" class="search_btn" value="search" /> <!-- 검색 버튼 -->

</form>

</div>

  짠하고 검색창이 나타났다. 역시 디자인을 수정할 필요가 있겠다.

.layout_container .header .menu .search_area{

font-family:'Calibri';

font-size:10px;

color:#777;

  margin-top:10px; /* 로그인폼과의 높이를 동일하게 맞추기 위해 여백을 로그인폼과 같게 조정 */

}

.layout_container .header .menu .search_area input[type="submit"]{

font-size:10px;

background:transparent;

border:none;

font-family:inherit;

cursor:pointer;

color:#777;

}

.layout_container .header .menu .search_area input[type="submit"]:hover, .layout_container .header .menu .search_area input[type="submit"]:active{

color:#aaa;

}

.layout_container .header .menu .search_area input[type="text"]{

border:none;

background:rgba(0,0,0,0.05);

padding:3px;

width:70px;

font-family:inherit;

}

  이제 검색창의 위치를 조정할 시간이다. 로그인창과 검색창을 인라인으로 바꿔 한 줄에 같이 나타날 수 있게 하는 원리다.

.layout_container .header .menu .login_area{

display:inline-block; /* 로그인창을 인라인블록으로 전환 */

}

.layout_container .header .menu .search_area{

font-family:'Calibri';

font-size:10px;

color:#777;

margin-top:10px;

display:inline-block;

float:right; /* 검색창으로 오른쪽으로 */

}

  그리하여 상단 디자인이 완료되었다.

컨텐츠 영역

  컨텐츠 영역은 매우 간단하다. {$content} 변수 자리에 컨텐츠가 로딩되는데, 컨텐츠 영역은 본문을 그저 잘 담으면 되기 때문에 div 역시 간단하다.

<div class="content">{$content}</div>

  그런데 위에서 보는 것과 같이 디자인이 조금 어색하다. 디자인을 맞춰주자. 여기서 >를 쓰는 이유는 .content 중에서 컨테이너 바로 밑에 존재하는 .content만 적용시키기 위해서이다.

/* 콘텐츠 영역 */

.layout_container>.content{

padding:20px;

}

하단 영역

  우선 디자인을 먼저 다듬자.

/* 하단 영역 */

.layout_container .footer{

padding:20px;

border-top:1px dashed #eee;

font-family:'Calibri';

font-size:10px;

color:#777;

}

  그런 다음 html에 들어가서 하이라이트한 부분을 수정한다. (처음부터 이렇게 할걸 그랬다...)

<div class="footer">

        <a href="#" id="top">Top</a>

        <p class="copyright">(C){$copyrightYear = date("Y");$copyrightYear} Enable</p>

</div>

  CSS : 

.layout_container .footer a, .layout_container .footer a:link, .layout_container .footer a:visited{

color:#777;

}

.layout_container .footer a:hover, .layout_container .footer a:active{

color:#aaa;

}

  제이쿼리를 이용해서 부드럽게 올라가게 하고 싶다면 js파일을 열고 다음을 추가한다.

// <![CDATA[

jQuery(function($){

//slide toggle

$('#top').click(function() { //#top이 클릭될 때

                $("body").animate({ scrollTop: 0 }, 400); //body가 맨 위로 애니메이트된다

return false; //href 무력화

});

});

function completeLogin(ret_obj, response_tags, params, fo_obj) {

    var url =  current_url.setQuery('act','');

    location.href = url;

}

// ]]>

  이로써 레이아웃의 기본적인 설명은 끝났다. 여기서 배운 것들을 응용해서 여러 디자인을 시도해볼 수 있을 것이다.

CSS 기본 설정

  우선 css 파일을 열고 @charset "utf-8";을 쓴다. 다음 줄에 원하는 웹폰트의 @import문을 작성한다. 해당 웹폰트 설정에 구문이 나와있으니 복붙하면 된다. 그 다음에는 div, a, img 등 기본 태그에 적용될 스타일을 선언한다. 다음은 그 예시이다. 다른 건 안 해도 인코딩 선언과 링크, 이미지, input 정도는 해두는 게 좋다.

@charset "utf-8"; /* 인코딩 선언 */

@import url(https://fonts.googleapis.com/earlyaccess/nanumgothic.css); /* 구글 나눔고딕 웹폰트 선언 */

body{font-family:'Nanum Gothic';} /* 레이아웃 전체 폰트 지정 */

a, a:link, a:visited{color:#000;text-decoration:none;} /* 링크 색상을 검은색으로 지정, 밑줄 없앰 */

a:hover, a:active{color:#000;} /* 활성화된 링크 색상을 검은색으로 지정 */

img{border:0;} /* 이미지의 외곽선 제거 */

input{outline:none;} /* 입력폼의 외곽선 제거(무지 지저분하다...) */

컨테이너

  컨테이너는 레이아웃 전체를 감싸는 부분이다. 컨테이너가 필요한 이유는 레이아웃 전체의 넓이, 외곽선 설정 등의 편의 도모를 위함이다. 예를 들어, 레이아웃에 3개의 div가 세로방향으로 나열되어 있고, 레이아웃의 넓이를 500px로 설정한다고 해보자. 컨테이너가 없다면 body>div로 설정하면 될 것이다. 그런데 이 세 개의 div 말고도 bgm 플레이어 등 다른 div가 있다면 어떻게 해야 할까? 일일이 body>div:not(ㅇㅇㅇ)를 써야 하나? 아니면 body>div:nth-of-type(n)을 쓸까? 그러나 컨테이너가 있다면 컨테이너에 필요한 내용을 선언하면 되기 때문에 상대적으로 편리하다.

  그럼 일단 폭부터 설정해보자. 관리의 편의를 위해 /* 컨테이너 */라는 주석을 달고 다음과 같이 쓴다.

.layout_container{width:원하는넓이;}

  레이아웃의 중앙정렬은 다음과 같다. 이 코드는 위의 중괄호 안에 집어넣으면 된다. margin은 요소의 바깥 여백을 의미한다.

margin:원하는수치 auto;

    만일 외곽선을 주고 싶다면 border:두께 타입(solid-직선, dotted-점선, dashed-납작한점선) 색상(rgb 혹은 #색상코드);를 사용하면 레이아웃 전체에 선이 생긴다.

상단 타이틀

  본인은 중앙정렬에 구글 웹폰트를 적용시켜보기로 하겠다. 우선 html 파일로 가서 title div의 내용을 수정한다. (수정 중에 외곽선을 추가해보았다.)

/* 상단 */

.layout_container .header .title{font-family:'Raleway', sans-serif;font-size:35px;font-style:italic;font-weight:300;} /* 서체 설정, 글자 크기 설정, 스타일 설정, 굵기 설정 */

 그런 다음 타이틀을 의도대로 배치해보자. 여기서는 정중앙에 배치해보겠다. 코드의 붉은색 부분은 새로 추가된 부분이다.

.layout_container .header .title{

padding:50px; /* 안쪽 여백을 설정. 컨테이너 자체에 설정하지 않는 이유는 div 사이에 꽉찬 선을 집어넣을 것이기 때문이다. */

text-align:center; /* 글자를 중앙에 오도록 설정

font-family:'Raleway', sans-serif;

font-size:35px;

font-style:italic;

font-weight:300;

}

메뉴

  여기서는 가로 나열형태로 해보겠다. 우선 기초 작업을 해둔다. 태그 자체에 쓸데없는 스타일이 덕지덕지 있어서 해제해주는 게 편하다.

.layout_container .header .menu ul{

margin:0; /* 상하 여백 제거 */

padding:0; /* 왼쪽 여백 제거 */

list-style:none; /* 왼쪽 동그라미 제거 */

}

 이제 이들을 눕혀보자. 이게 어떤 원리냐면 원래 li는 블록요소와 유사하여 블록처럼 한 줄에 하나만 차지하지만 inline-block은 이들을 줄 안에 여러 개가 들어갈 수 있게끔 바꾸고 내부는 블록태그처럼 작동하게 한다. 때문에 메뉴들이 주르륵 눕는 것이다.

.layout_container .header .menu li{

display:inline;

}

  이제 이들을 구체적으로 꾸며볼 시간이다. 우선 메뉴가 들어가는 공간을 꾸며보았다.

.layout_container .header .menu{

padding:20px;

border-top:1px dashed #eee; /* 상단 선 설정 */

border-bottom:1px dashed #eee; /*하단 선 설정 */

}

.layout_container .header .menu li{

font-size:10px; /* 폰트 크기 작게 설정 */

font-family:'Calibri'; /* 폰트 설정 */

margin-right:10px; /* 오른쪽 여백을 주어서 요소 사이를 띄우기 */

}

.layout_container .header .menu li a, .layout_container .header .menu li a:link, .layout_container .header .menu li a:visited{

color:#777; /* 일반 링크 색상 수정 */

}

.layout_container .header .menu li a:hover, .layout_container .header .menu li a:active{

color:#aaa; /* 활성화 링크 색상 수정 */

}

XE 레이아웃의 파일 구조

  XE 레이아웃은 conf 폴더와 layout.html, thumbnail과 css와 js 파일로 이루어져 있다. conf 폴더에는 info.xml이 있는데, 이 파일은 레이아웃의 정보를 저장한다. layout.html은 레이아웃의 뼈대가 되는 파일이며, css는 레이아웃을 꾸며주는 역할, js는 레이아웃에 사용되는 자바스크립트 코드를 불러온다. thumbnail은 레이아웃 선택 과정에서 보여주는 미리보기 이미지이다. 사용자의 필요에 따라 사진 등 다양한 요소를 더 추가할 수 있다.

info.xml

  이 파일의 기본 구조는 다음과 같다.

<?xml version="1.0" encoding="UTF-8"?>

<layout version="0.2">

    <title xml:lang="ko">테스트 레이아웃</title>

    <description xml:lang="ko">디자인이 없는 테스트 레이아웃입니다. 새 스킨을 만들 때 이 레이아웃 사본을 사용하면 좋습니다.</description>

    <version>1.0</version>

    <date>2010-12-24</date>

    <author email_address="user@user.com" link="http://user-define.com/">

        <name xml:lang="ko">제작자 이름</name>

    </author>

    <menus>

        <menu name="global_menu" maxdepth="3" default="true">

            <title xml:lang="ko">전역 메뉴</title>

        </menu>

    </menus>

</layout>

  첫 번째 줄은 xml의 버전과 인코딩을 지정한다. 건드릴 필요는 없다. 두 번째 줄은 레이아웃 정보를 선언하는 것이다. title은 이 레이아웃의 이름을 지정한다. 이때 xml:lang:="ko"는 XE 언어가 한국어일 때 출력할 문자열을 선언한다. description은 레이아웃의 설명을 의미한다. version은 레이아웃의 버전, date는 레이아웃을 제작한 날짜이다. author은 제작자의 정보를 입력하는 곳이다. menu는 XE 설정에서 만든 메뉴와 연결시키는 부분이다. 여러 개의 메뉴를 만들 게 아니라면 수정하지 않아도 된다. 이제 레이아웃 폴더를 하나 만들고 conf 폴더를 만든 후 위의 양식을 복사하여 info.xml를 만들어라.

info.xml의 확장변수

  XE는 레이아웃에도 사용자 변수를 지원한다. 이 기능을 통해 직접 파일을 수정하지 않고도 레이아웃을 조정하게 할 수 있다. 다음은 간단한 예시이다. 설명은 //표시를 하고 달아놓겠다. 여기서는 간단히 참고만 하고 넘어가겠다.

 <extra_vars> //확장변수 시작

        <var name="colorset" type="select"> //변수의 이름은 colorset으로 지정, 변수 입력은 select 태그로 받음

            <title xml:lang="ko">컬러셋</title> //변수 이름

            <description xml:lang="ko">원하는 컬러셋을 선택해주세요.</description> //설명

            <options value="black"> //변수의 실제 값 지정

                <title xml:lang="ko">Black (기본)</title> //값의 이름

            </options>

            <options value="white">

                <title xml:lang="ko">White</title>

            </options>

        </var>

        <var name="logo_image" type="image"> //변수는 이미지 타입

            <title xml:lang="ko">로고 이미지</title>

            <description xml:lang="ko">페이지 상단에 출력할 로고이미지를 입력하세요.</description>

        </var>

        <var name="logo_url" type="text"> //변수는 한 줄 텍스트 타입

            <title xml:lang="ko">로고 이미지 링크</title>

            <description xml:lang="ko">로고 이미지를 클릭할 때 이동할 URL을 입력해 주세요.</description>

        </var>

        <var name="title_description" type="textarea"> //변수는 여러 줄 텍스트 타입

            <title xml:lang="ko">본문 상단 내용</title>

            <description xml:lang="ko">본문 상단에 표시되는 영역의 내용을 입력해주세요.(HTML 사용 가능)</description>

        </var>

    </extra_vars> //확장변수 끝

layout.html의 뼈대 만들기

  layout의 기본 구조는 다음과 같다. 역시 설명은 //로 달아두겠다.

<load target="layout.css" /> //layout.css를 불러옴

<load target="layout.js" type="body" /> //layout.js를 body에 불러옴

<div class="layout_container"> //레이아웃 전체를 감싸는 div 선언

    <div class="header">//header 시작

        <div class="title">Site name</div> //사이트 이름

<div class="menu"> //메뉴 시작

            <ul> //메뉴 목록 시작

                <li loop="$global_menu->list=>$key1,$val1" class="active"|cond="$val1['selected']"><a href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'">{$val1['link']}</a>

<ul cond="$val1['list']">

<li loop="$val1['list']=>$key2,$val2" class="active"|cond="$val2['selected']"><a href="{$val2['href']}" target="_blank"|cond="$val2['open_window']=='Y'">{$val2['link']}</a></li>

</ul> //2차 메뉴

</li> //1차 메뉴

            </ul> //메뉴 목록 끝

        </div> //메뉴 끝

    </div> //header 끝

    <div class="content">{$content}</div> //내용 부분 시작

    <div class="footer"> //footer 시작

        Top //top 버튼

        <p class="copyright">(C){$copyrightYear = date("Y");$copyrightYear} Site</p> //카피라이트

    </div> //footer 끝

</div> //컨테이너 끝

  이 내용을 //를 지우고 저장해보자. 그리고 css와 js는 빈 파일로 저장하고 설치폴더/layouts에 업로드하자. 이 레이아웃을 적용하면 이렇게 뜰 것이다.

척 봐도 막막하다. 이제 다음 장에서 본격적으로 꾸며보자.

참고문헌

https://github.com/xpressengine/xe-tutorial/tree/master/Make_Layout/03_write_layout_info

들어가며

  여기서 레이아웃이란 사이트의 전반적인 구성과 배치를 말한다. ZB4에서 넘어온 사람 중에 레이아웃 개념을 이해하지 못하는 경우가 있다. XE는 ZB4에서 넘어오면서 CMS 즉, 한 사이트 내의 컨텐츠를 통합 관리하는 툴이 되었고 이는 다시 말하자면 사이트 빌더의 기능도 겸하게 된 것이다. 간단히 말하자면 사이트를 어떻게 디자인(미적 디자인+설계)할 것인가...를 다루는 것이 레이아웃 파트라 하겠다.

사이트 컨셉 잡기

  레이아웃을 구상하기 앞서 가장 먼저 생각해야 할 것은 사이트의 컨셉이다. 누가, 어떤 내용을, 어떻게, 누구에게 보여줄 것인지를 결정하는 것이 중요하다. 사이트의 컨셉이 명확하면 좀 더 편리하고 아름다운 레이아웃을 구성할 수 있지만, 그렇지 않다면 운영자는 불편하고 방문자도 이게 뭐하는 곳인지 모르는 상황에 처할 수 있다. 개인 홈페이지, 팬페이지, 커뮤니티, 포트폴리오 등 다양한 유형을 생각해볼 수 있다. 당연히 저 정도에서 끝내란 뜻은 아니다. 사이트의 컨셉을 정하는 것은 레이아웃 구성뿐만 아니라 사이트 운영의 동기를 확고히 하고 사이트를 보다 효율적으로 운영하는 데에 도움을 준다. 이 글에선 간단한 개인 홈페이지를 구축해보는 것을 전제로 하고 진행하도록 하겠다.

요소와 구조 정하기

  컨셉을 정했으면 구체적으로 사이트에 어떤 걸 넣고 싶은지를 생각해보자. 사이트의 뼈대도 생각해보자. 개인 홈페이지에 고려해볼 만한 요소는 다음과 같다.

1. 대문 화면(사이트에 접속하자마자 뜨는 화면)을 별도로 설정할 것인가?

2. 메뉴 구성을 어떻게 할 것인가?

3. 네비게이션(위/아래 혹은 이전글/다음글) 버튼을 만들 것인가?

4. 소개 텍스트를 넣을 것인가?

5. 모바일 화면을 별도로 제공할 것인가? 혹은 반응형으로 제공할 것인가?

6. 회원제/레벨제를 확대할 것인가?

7. 화면을 몇 단으로 구성할 것인가?

8. 화면 구성을 메뉴마다 다르게 할 것인가?

본격적인 디자인

  여기서는 본격적으로 사이트의 요소를 어떤 위치에 어떻게 배치할 것인지 구체적인 디자인 컨셉을 잡는다. 어떤 도구든 상관없다. 단순히 떠오르는 것을 메모해도 좋고 그래픽 프로그램을 꺼내도 좋다. 여기서는 간단한 1단 홈페이지를 구상해보겠다. 이 단계에서는 다음을 생각해보라.

1. 어떤 부분에 어떤 서체를 적용할 것인가?

2. 전체적인 미적 컨셉은?

3. 색상 배치는 어떻게 할 것인가?

4. 어떤 사진을 사용할 것인가?

템플릿 문법이란?

  템플릿 문법이란 XE에서 개발의 편의를 위해 고안한, XE에서만 쓰이는 일종의 언어이다. 템플릿 문법을 통해 레이아웃, 스킨 개발을 수월하게 할 수 있으며, XE 내부 변수에 쉽게 접근할 수 있다. 여기서는 자주 쓰이는 개념을 중심으로 설명하겠다.

1. 중괄호({})

  중괄호는 XE에서 php 코드나 변수를 사용할 때 바깥에 씌우는 문자이다. 어떠한 작업을 수행할 때는 { 뒤에 @을 붙여 {@ (코드) }의 형태로 나타내며, 변수를 출력할 때는 {$변수명}으로 작성한다. 변수 속의 변수는 {$변수명->변수명2}, 변수 속의 함수는 {$변수명->함수명()}로 출력한다.

2. 변수

  변수는 어떤 값을 저장하고 있으며 상황에 따라 달라질 수 있다. 언어 출력을 위한 문자열이 들어가기도 하고, 컨텐츠의 정보를 담고 있기도 하는 등 그 종류는 다양하다. 또한 변수 속에는 값뿐만 아니라 함수, 값 속의 값 등을 포함하기도 한다. XE에서 제공하는 변수를 사용할 수도 있지만 직접 선언할 수도 있다. {@ $변수명 = 값 }으로 선언하면 된다.

3. 배열

  배열은 여러 요소가 일정한 규칙에 따라 나열되어 있는 집합을 말한다. 배열은 {$배열명[번호]}로 출력할 수 있다.

4. 연산자

  연산자는 여러 값들을 계산, 비교, 참조하기 위해 사용하는 문자이다. 연산자는 if문에서 유용하게 사용된다.

비교 연산자

A == B : A와 B가 같다

A != B : A와 B가 같지 않다

A > B : A가 B보다 크다

A >= B : A가 B보다 크거나 같다

A < B : A가 B보다 작다

A <= B : A가 B보다 작거나 같다

논리 연산자

!A : A가 참이 아니다

A && B : A와 B가 모두 참이다

A || B : A와 B 둘 중 적어도 하나는 참이다

계산 연산자

-A : A의 반대

A + B : A에 B를 더한다

A - B : A에 B를 뺀다

A * B : A에 B를 곱한다

A / B : A를 B로 나눈 몫

A % B : A를 B로 나눈 나머지

5. include문

  include문은 다른 파일을 문서 안으로 포함시킬 때 사용한다. 기본 문법은 다음과 같다.

<!--#include("header.html")-->

<include target="header.html" />

  위는 구문법, 아래는 신문법으로 작성된 것이다. 뜻은 같은 폴더에 있는 header.html을 불러오라는 의미이다. 불러오려는 파일이 불러오는 파일과 같은 위치에 있다면 경로를 생략한다. 그런데 경우에 따라 상대주소가 달라져 레이아웃이나 스킨이 깨지기도 한다. 그럴 때는 스킨 경로를 출력하는 변수인 {$tpl_path}를 사용해야 한다.

6. import문

  import문 역시 다른 파일을 포함시킬 때 사용한다. 이때 css, js, xml 등을 불러올 수 있다.

<!--%import(“default.css")-->

<!--%import(“default.js")-->

<!--%import(“xe.xml")-->

7.  load문

  load문 역시 파일들을 불러올 때 사용한다.

<load target="default.css" />

<load target="default.js" />

<load target=“xe.xml" />

8. <!--@코드-->

  XE에서는 php 코드를 실행할 때 중괄호에 넣어서 표현한다. 그런데 이것은 php 자체적으로 쓰는 중괄호와 겹치기 때문에 오류가 발생하기 쉽다. 따라서 별도의 형식을 지정하는데, foreach, for, switch, break, case, default, if, elseif, else, end를 사용할 수 있다.

9. if문

  if문은 특정 조건이 만족되거나 그렇지 않았을 때 어떻게 할 것인지를 지정한다. 가장 간단한 형태는 다음과 같다.

<!--@if(조건)-->

실행될 내용

<!--@end-->

  괄호 안의 조건이 만족되면 if와 end 사이의 내용이 실행된다. end는 해당 구문을 종결시키는 역할을 한다.

  그렇다면 그 조건이 만족되지 않을 때는 어떨까? else문을 사용하면 된다.

<!--@if(조건)-->

조건이 만족될 때 실행될 내용

<!--@else-->

조건이 만족되지 않을 때 실행될 내용

<!--@end-->

  조금 더 복잡한 형태도 있다.

<!--@if(조건1)-->

조건1이 만족될 때 실행될 내용

<!--@elseif(조건2)-->

조건1이 만족되지 않고 조건2가 만족될 때 실행될 내용

...<!--@elseif(조건n)-->

앞의 조건이 만족되지 않고 조건n이 만족될 때 실행될 내용

<!--@else-->

앞의 모든 조건이 만족되지 않을 때 실행될 내용

<!--@end-->

  이런 식으로 여러 조건을 사용할 수 있다.

  연산자는 if문에서 아주 유용하게 쓰인다. 다음을 보자.

<!--@if(조건1 || 조건2)-->

조건1과 조건2 중 하나라도 만족될 때 실행될 내용

<!--@end-->

<!--@if($string=='A')-->

실행될 내용

<!--@end-->

  위의 구문은 조건 두 개 중 하나라도 만족될 때, 아래의 구문은 변수가 특정 값을 가지고 있을 때 작업이 실행되도록 한 것이다. if문은 회원/비회원 구분, 관리자 확인, 권한 확인, 게시글 정보 확인 등의 상황에서 응용할 수 있다.

10. cond문

  cond문 역시 조건에 따라 특정 코드를 실행시키는 구문이다.

<div cond="조건"></div>

  if문이 '이 조건이 만족될 때 아래 내용을 실행하시오'라면, cond문은 '이 태그를 이 조건이 만족될 때 실행하시오'라고 할 수 있다. cond문은 태그에 가상의 속성을 부여하여 해당 태그가 실행되는 조건을 제어할 수 있다.

<div style="backgroud:blue;"|cond="$color='blue'"></div>

  위의 코드는 앞의 cond문과 조금 다르다. 위의 코드는 변수 color의 값이 blue일 때 div의 배경을 파란색으로 변경하라는 의미이다. cond는 다른 속성의 뒤에 |를 선행하여 특정 조건이 만족될 때 앞의 속성이 적용되도록 할 수 있다.

  이제 다음 코드를 살펴보자.

<!--@if($is_logged)-->

<p>로그인하셨습니다.</p>

<!--@else-->

<p>로그인하지 않으셨습니다.</p>

<!--@end-->

<p cond="$is_logged">로그인하셨습니다.</p>

<p cond="!$is_logged">로그인하지 않으셨습니다.</p>

  두 코드 다 로그인 상태를 체크해서 메시지를 다르게 보여주는 기능을 한다. 그러나 if문으로 구성한 전자는 146byte나 차지하는 반면 후자의 코드는 117byte에 불과하다. 같은 기능을 하는 구문이라도 코드의 가독성, 용량 등을 고려해 적합한 것으로 선택해서 작성해야 한다.

11. for문

  for문은 특정 내용을 일정 회수만큼 반복하는 것이다.

<!--@foreach($i=0;$i<100;$i++)-->

반복할 내용

<!--@end--> 

 괄호 안의 구문을 설명하자면, 반복하기 앞서 반복회수를 저장하는 변수 i를 선언하고 초기값으로 0을 지정한다. 그리고 i가 100보다 작을 때마다 반복문을 실행하며, i는 한 번에 1씩 올라간다. 따라서 위의 반복문은 특정 내용을 100회 실행하는 것이다.

12. foreach문

  foreach문은 특정 배열 안의 내용들을 반복할 때 사용하는 구문이다.

<!--@foreach(변수명 as $val)-->

{$val}

<!--@end-->

<!--@foreach(변수명 as $key => $val)-->

{$key} - {$val}

<!--@end--> 

  전자는 key값 없이, 후자는 key값과 함께 반복하는 것이다. foreach문은 게시판 목록 등에서 사용되는데 특히 본문 나열형 스킨에서 쓰인다.

13. loop문

  loop문 역시 특정 내용을 반복할 때 사용한다. cond문처럼 다른 태그의 가상 속성으로 사용된다.

<div loop="조건(배열, 회수 등)"></div>

14. <block></block>

  block 태그는 html에 존재하지 않는 가상의 태그로, 필요에 따라 요소들을 묶어서 처리할 때 사용한다. 그 자체로는 아무런 기능을 하지 않는다.

15. 주석

  주석이란 파일에 존재하지만 기능하지 않는 코드를 의미한다. 주석의 형태는 다음과 같다.

<!-- html 주석 -->

/* css 주석 */

// 자바스크립트 주석

  XE에서는 한 가지를 더 쓴다. 

<!--// 주석 --> 

  이 주석은 코드 상에는 존재하지만 처리 과정에서 사라져 결과물에서는 나타나지 않는다. 주석은 주로 메모에 이용되는데, 작업의 효율을 높이고 유지, 보수에 도움을 준다.

참고문헌

연산자 : 

http://php.net/manual/kr/language.operators.arithmetic.php

http://php.net/manual/kr/language.operators.comparison.php

http://php.net/manual/kr/language.operators.logical.php

템플릿 문법 : 

https://www.conory.com/note_develop_web/15777

http://www.xeschool.com/xe/xenote_template_syntax_expressions (예제 일부 변형 및 인용)

들어가며

  XE 디자인에 입문하면서 여러 자작 스킨들을 들고 온 적은 있지만 이렇게 강좌 글을 올리는 것은 처음이다. 떨리기도 하고, 실력이 부족한 내가 잘할 수 있을지 모르겠다. 그렇지만 지금껏 스킨을 제작하면서 느끼고 배웠던 것들을 서툴더라도 한번쯤 정리해보는 게 다른 이들과 나 자신에게 도움이 될 것 같아 이 글을 써본다. 이 강좌는 XE 디자인의 난이도가 실질적으로는 그렇게 어렵지 않음에도 불구하고 초보자 눈높이에 맞는 강좌의 부재로 인해 XE에 입문할 생각을 하지 못하고 있는 사람들을 위해 기획되었다. 그러므로 여기서 소개되는 코딩과 디자인의 수준은 매우 초보적이고, 설명 또한 초보자에 적합하게(물론 실제로는 어렵게 느껴질 수도...) 진행될 것이다. 구성은 기초 파트, 레이아웃 파트, 게시판 스킨 파트로 나눠서 설명할 것이다. 자세한 내용은 사정에 따라 바뀔 수 있어 미리 소개하지 못하는 점을 이해하기 바란다. 연재는 비정기적으로 이루어지며 역시 사정에 따라 연재 텀은 달라질 수 있다.

준비

  이 강좌를 시작하고 따라가기 전에 준비해야 할 것은 다음과 같다.

1. 텍스트 편집기

2. FTP 프로그램

3. 웹 서버(웹 호스팅, 개인서버 등 XE를 설치하고 실행할 수 있는 환경)

  텍스트 편집기는 각종 텍스트 파일, 여기서는 html, js, css 등을 열람하고 수정하기 위한 도구이다. 이 종류의 프로그램을 아마 가장 많이 쓸 것이다. 나모 웹 에디터를 사용하지 않는 이유는 코드를 직접 쳐보며 코드를 보고 해석하는 능력을 키우고 실력을 향상시키기 위함이다. 또한 프로그램 특성상 편집이 계속되면 코드가 지저분해질 수 있는데, 이러한 현상을 예방하고자 하는 목적 또한 있다. 필자는 Notepad++를 사용하는데, 코딩에 최적화된 텍스트 편집기라면 그 어떤 것이든 사용할 수 있다. 메모장은 안 된다. 메모장은 지원하는 인코딩의 종류가 적고, 가독성이 떨어지고 기능도 제한적이라 불편하기 때문이다.

  FTP 프로그램은 우리가 작업한 파일들을 서버에 올릴 때 사용할 것이다. 필자는 파일질라를 사용하고, 그것을 가장 추천하지만 역시 FTP 프로그램이라면 아무거나 사용해도 좋다. 단, 알FTP는 안 된다. 오류가 너무 많고 불안정하기에 다들 추천하지 않는다.

  웹 서버는 흔히 계정, 호스팅으로 불리는 것이다. XE를 설치하고 실행할 수 있는 서버라면 아무거나 해도 좋다. 유료 호스팅을 신청해도 좋지만 연습용으로 사용할 것이라면 무료 호스팅을 쓰는 것이 좋다. 호스팅은 카페24, 닷홈, 나야나 등이 유명한데 호스팅 정보는 개별적으로 찾아보기 바란다. 상술한 프로그램의 사용법 역시 따로 설명하지 않을 것이다. 하여튼 서버가 준비되면 XE 1.x 버전을 설치하면 된다. 디자인 강좌이므로 설치법은 설명하지 않겠다. 설치 방법은 쉬우니 잘하리라 생각한다. 강좌를 위해 굳이 쓰지도 않을 호스팅을 신청하는 것은 낭비이기도 하고.

선수지식

  사실 내가 잘 설명할 것이나 알아두면 편한 것은 분명 있다. 기초적인 html, css 지식을 익혀두고 오면 강좌를 따라가기 훨씬 수월하다. 결국 강좌에서 설명하는 것도 html, css, js니까. js는 자바스크립트 자체를 익히기보다는 jQuery를 배우는 것이 좋다. XE에서 제이쿼리를 내장하고 있고 디자인 면에서는 제이쿼리가 더 수월하다. 디자인 지식이 있으면 더 나은 디자인을 구상할 수 있다. 다만 아마추어 수준이니까 여기까지는 공부 안 해도 된다.

관련 사이트

  알아두면 좋을 사이트를 몇 군데 소개한다.

1. XpressEngine 공식 사이트 ( https://www.xpressengine.com/ ) : 말이 필요없을 정도로 필수 사이트이다. 묻고 답하기, 웹마스터 팁에서 유용한 정보를 얻을 수 있따.

2. W3CSchool ( http://www.w3schools.com/ ) : 자세한 설명과 레퍼런스가 수록되어 있다.

3. 오픈튜토리얼스 ( https://opentutorials.org/ ) : 우리말 동영상으로 코딩 기초를 쉽게 가르쳐주는 곳이다.

4. Codecademy ( http://www.codecademy.com/ ) : 역시 코딩 기초를 차근차근 가르쳐주는 곳인데, 실습, 도전과제 등이 있어 공부하기 좋다.

5. Stackoverflow ( http://stackoverflow.com/ ) : 영문 개발자 문답사이트. 역시 꿀정보가 많다.