XE 레이아웃 제작 실무 노하우 1 - XECon2014 by 고진화

XpressEngine레이아웃제작실무노하우

@treasurej 고진화

CAMERON

cameron.co.kr

2014.11.08 Sess ion 2 -2 XECon + PHPFest 2014

1. 소스코드속도향상노하우

2. 모바일/태블릿기기식별노하우

3. 인터넷익스플로러식별노하우

4. 외부파일로딩노하우

5. 네비게이션노하우

6. 위젯노하우

소스코드노하우

1

1. 소스코드속도향상노하우

layout.html 기본소스코드예제 1/3



[속도] html 파일모듈화

settings.html

global_menu.html

side_menu.html

sign.html

search.html

…

<include target="settings.html" />

[속도] html 모듈화예 - settings.html

[속도] include 로재정리한 layout.html

[속도]인라인스타일, 인라인스크립트를파일

인라인스타일 <style> → .css파일

인라인스크립트 <script> → .js파일

CSS, JS 파일은브라우저캐싱됨.

[속도]파일요청수줄이기

CSS 파일수줄이기

JS 파일수줄이기

서버와주고받는요청수를최소화

[속도] JS 파일을하단에서불러오기

<load target="js/layout.js" type="body" />

[속도]속도노하우정리

• HTML 파일모듈화 <include>

• 인라인스타일, 인라인스크립트→ CSS, JS 파일– CSS, JS 파일은브라우저캐싱이됨.

• CSS, JS 파일수줄이기

– 서버와주고받는요청수를최소화

• JS 파일을하단에서로딩하기– <load target="js/layout.js" type="body" />

2. Mobile · Tablet 기기식별노하우

[기기]모바일과태블릿식별

모바일식별코드

{Mobile::isMobileCheckByAgent()}

태블릿식별코드

{Mobile::isMobilePadCheckByAgent()}

[기기]태블릿과모바일식별사용예

모바일에서는모바일기기사이즈로, 태블릿에서는 1024px로보이기



<meta name="viewport" content="width=1024">



<meta name="viewport"

content="width=device-width, initial-scale=1, maximum-scale=1">



width=device-widthwidth=1024

[기기]모바일식별사용예

PC와모바일에서 bxslider이미지전환효과다르게하기



{@ $easing = 'easeOutBack'; $speed = 300}



{@ $easing = 'swing'; $speed = 200}



jQuery(function($){

$slider.bxSlider({

speed: {$speed},

easing: '{$easing}',

});

});

cameron.co.kr

PC와모바일효과비교

3. Internet Explorer 식별노하우

[IE]구버전 IE 식별

{@ $browser_type = getenv("HTTP_USER_AGENT")}



{@ $IE='8'; $oldIE='1'}



{@ $IE='7'; $oldIE='1'}



{@ $IE='6'; $oldIE='1'}



[IE] IE 버전식별사용예

<load cond="$oldIE" target="respond.min.js" />

[IE] IE 호환성모드제거

{@ Context::addMetaTag('X-UA-Compatible', 'IE=edge', true); }

[IE] IE CSS HACK

Media Hack IE6 IE7 IE8 IE9 IE10

@media screen\0 {…} × × ○ ○ ○

@media screen\9 {…} ○ ○ × × ×

@media \0screen {…} × × ○ × ×

@media \0screen\,screen\9 {…} ○ ○ ○ × ×

@media screen and (min-width:0\0) {…} × × ○ ○ ○

[IE] IE CSS HACK 사용예

CSS파일

#cameron-logo{top:20px}

/*--[ IE 8~11 ]--*/

@media screen\0 {


}

/*--[ IE 6~7 ]--*/

@media screen\9 {


}

4. 외부파일로딩노하우

[기타] http:// https:// 유동외부링크

<load target="//fonts.googleapis.com/css?family=Open+Sans:400,700" />

{@ Context::addHtmlHeader('<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400,700">'); }

{@ Context::addHtmlFooter('<script type="text/javascript" src="//maxcdn…/bootstrap.js"></script>'); }

[기타] jQuery 가져오기

jQuery(function($){

$(…)

}

5. Navigation 노하우

[메뉴]메뉴기본코드

<ul id="global_menu" cond="$global_menu->list">

<li loop="$global_menu->list=>$key,$val" class="selected"|cond="$val['selected']">

<a href="{$val['href']}" target="_blank"|cond="$val['open_window']=='Y'">{$val['link']}</a>

</li>

</ul>

[메뉴]메뉴코드분석 - cond




</li>

</ul>

– cond="조건" : 조건이참이면출력

– cond="$global_menu->list" : 메뉴가연결되어있으면 ul출력

– |cond="조건" : 조건이참이면 attribute(속성) 추가

– target="_blank"|cond="$val['open_window']=='Y'" : 메뉴설정에서새창으로가기를체크했으면새창으로링크열기

[메뉴]메뉴코드분석 - loop




</li>

</ul>

– loop="" : 반복실행

– loop="$global_menu->list=>$key,$val" : 메뉴개수($key)만큼반복(loop)하여출력(li)하고

$key에해당하는메뉴정보는 $val에저장한다.

[메뉴]메뉴코드분석 - $val




</li>

</ul>

– $val['link'] : 메뉴이미지출력, 이미지가없을경우텍스트출력

– $val['text'] : 메뉴텍스트출력

– $val['href'] : 메뉴링크주소

– $val['selected'] : 현재선택된메뉴

– $val['open_window']=='Y' : 메뉴설정에서새창으로열기설정을했을때

[메뉴]메뉴기본코드 - 3차메뉴


<li loop="$global_menu->list=>$key1,$val1" class="selected"|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="selected"|cond="$val2['selected']">





</li>

</ul>

</li>

</ul>

</li>

</ul>

[메뉴]메뉴의확장

사이드메뉴 페이지타이틀

빵조각(BREADCRUMB)

[메뉴]메뉴확장코드


<li loop="$global_menu->list=>$key1,$val1" class="selected"|cond="$val1['selected']">


<block cond="$val1['selected']">{@ $nav1st=$val1; $page_title=$val1; }</block>




<block cond="$val2['selected']">{@ $nav2nd=$val2; $page_title=$val2; }</block>




<block cond="$val3['selected']">{@ $nav3rd=$val3; $page_title=$val3; }</block>

</li>

</ul>

</li>

</ul>

</li>

</ul>

[메뉴]페이지타이틀

<div class="page-title">

<h1>



{$mi->title}



{$page_title}



</h1>

<h2 cond="$mi->sub_title">{$mi->sub_title}</h2>

</div>

[메뉴]빵조각 (Breadcrumb)

<ul class="breadcrumb">

<li><a href="{getFullurl()}">HOME</a></li>

<li cond="$nav1st"><a href="{$nav1st['href']}">{$nav1st['text']}</a></li>

<li cond="$nav2nd"><a href="{$nav2nd['href']}">{$nav2nd['text']}</a></li>

<li cond="$nav3rd"><a href="{$nav3rd['href']}">{$nav3rd['text']}</a></li>

</ul>

[메뉴]사이드메뉴

<ul id="side_menu">

<li loop="$global_menu->list=>$key1,$val1" cond="$val1['selected'] && $val1['list']">

<a href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'">{$val1['text']}</a>


<li loop="$val1['list']=>$key2,$val2" cond="$val2['list']">



<li loop="$val2['list']=>$key3,$val3" cond="$val3['list']">


</li>

</ul>

</li>

</ul>

</li>

</ul>

6. 위젯노하우

[위젯]위젯소스코드

[위젯]레이아웃과위젯의 JS 중복로딩방지

전역변수를사용하여레이아웃과위젯등 JS, CSS 파일의중복로딩을방지할수있습니다.

레이아웃

<load target="js/jquery.bxslider.min.js" type="body" />

{@ $__Context->global['bxslider'] = 1; }

위젯

<load cond="!$global['bxslider']" target="js/jquery.bxslider.min.js" type="body" />

{@ $__Context->global['bxslider'] = 1; }

같은 jQuery 위젯여러개사용하기

[위젯]같은 jQuery 위젯여러개사용하기

전역변수를사용하여위젯 ID명변경

{@ $__Context->global['csi'] = 1}

{@ $__Context->global['csi']++}

<div id="bxslider{$global['csi']}" class="slider newclearfix">

…

</div>

<script>

jQuery('#bxslider{$global["csi"]}'). bxSlider();

</script>

1. 세계웹디자인트렌드

2. 한국의웹이슈들

3. 디자인 –공간과간격

4. 디자인 -선

5. 디자인 -폰트

6. 효과

디자인이야기

2

Presentations & Public Speaking

XE 레이아웃 제작 실무 노하우 1 - XECon2014 by 고진화