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

1. 2014.11.08 Session 2-2 XECon + PHPFest 2014
XpressEngine
레이아웃 제작 실무 노하우
@treasurej 고진화
CAMERON
cameron.co.kr

2. 1. 소스코드 속도향상 노하우
2. 모바일/태블릿 기기 식별 노하우
3. 인터넷 익스플로러 식별 노하우
4. 외부 파일 로딩 노하우
5. 네비게이션 노하우
6. 위젯 노하우
1
소스코드 노하우

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

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

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

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

7. [속도] html 파일 모듈화
settings.html
global_menu.html
side_menu.html
sign.html
search.html
…
<include target="settings.html" />

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

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

10. [속도] 인라인 스타일, 인라인 스크립트를 파일
인라인 스타일 <style> → .css 파일
인라인 스크립트 <script> → .js 파일
CSS, JS 파일은 브라우저 캐싱됨.

11. [속도] 파일 요청수 줄이기
CSS 파일수 줄이기
JS 파일수 줄이기
서버와 주고 받는 요청수를 최소화

12. [속도] JS 파일을 하단에서 불러오기
<load target="js/layout.js" type="body" />

13. [속도] 속도 노하우 정리
• HTML 파일 모듈화 <include>
• 인라인 스타일, 인라인 스크립트 → CSS, JS 파일
– CSS, JS 파일은 브라우저 캐싱이 됨.
• CSS, JS 파일수 줄이기
– 서버와 주고 받는 요청수를 최소화
• JS 파일을 하단에서 로딩하기
– <load target="js/layout.js" type="body" />

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

15. [기기] 모바일과 태블릿 식별
모바일 식별코드
{Mobile::isMobileCheckByAgent()}
태블릿 식별코드
{Mobile::isMobilePadCheckByAgent()}

16. [기기] 태블릿과 모바일 식별 사용 예
모바일에서는 모바일 기기 사이즈로, 태블릿에서는 1024px로 보이기
<!--@if(Mobile::isMobilePadCheckByAgent())-->
<meta name="viewport" content="width=1024">
<!--@else if(Mobile::isMobileCheckByAgent())-->
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1">
<!--@endif-->

17. width=1024 width=device-width

18. [기기] 모바일 식별 사용 예
PC와 모바일에서 bxslider 이미지 전환 효과 다르게 하기
<!--@if(Mobile::isMobileCheckByAgent())-->
{@ $easing = 'easeOutBack'; $speed = 300}
<!--@else-->
{@ $easing = 'swing'; $speed = 200}
<!--@endif-->
jQuery(function($){
$slider.bxSlider({
speed: {$speed},
easing: '{$easing}',
});
});
cameron.co.kr
PC와 모바일 효과 비교

19. 3. Internet Explorer 식별 노하우

20. [IE] 구버전 IE 식별
{@ $browser_type = getenv("HTTP_USER_AGENT")}
<!--@if(preg_match("/MSIE 8.0/",$browser_type))-->
{@ $IE='8'; $oldIE='1'}
<!--@else if(preg_match("/MSIE 7.0/",$browser_type))-->
{@ $IE='7'; $oldIE='1'}
<!--@else if(preg_match("/MSIE 6.0/",$browser_type))-->
{@ $IE='6'; $oldIE='1'}
<!--@endif-->

21. [IE] IE 버전식별 사용 예
<load cond="$oldIE" target="respond.min.js" />

22. [IE] IE 호환성모드 제거
{@ Context::addMetaTag('X-UA-Compatible', 'IE=edge', true); }

23. [IE] IE CSS HACK
Media Hack IE6 IE7 IE8 IE9 IE10
@media screen0 {…} × × ○ ○ ○
@media screen9 {…} ○ ○ × × ×
@media 0screen {…} × × ○ × ×
@media 0screen,screen9 {…} ○ ○ ○ × ×
@media screen and (min-width:00) {…} × × ○ ○ ○

24. [IE] IE CSS HACK 사용 예
CSS파일
#cameron-logo{top:20px}
/*--[ IE 8~11 ]--*/
@media screen0 {
#cameron-logo{top:21px}
}
/*--[ IE 6~7 ]--*/
@media screen9 {
#cameron-logo{top:22px}
}

25. 4. 외부 파일 로딩 노하우

26. [기타] 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>'); }

27. [기타] jQuery 가져오기
jQuery(function($){
$(…)
}

28. 5. Navigation 노하우

29. [메뉴] 메뉴 기본코드
<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>

30. [메뉴] 메뉴 코드분석 - cond
<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="조건" : 조건이 참이면 출력
– cond="$global_menu->list" : 메뉴가 연결되어 있으면 ul 출력
– |cond="조건" : 조건이 참이면 attribute(속성) 추가
– target="_blank"|cond="$val['open_window']=='Y'" : 메뉴설정에서 새창으로 가기를 체크했으면 새창으로 링크 열기

31. [메뉴] 메뉴 코드분석 - loop
<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>
– loop="" : 반복 실행
– loop="$global_menu->list=>$key,$val" : 메뉴 개수($key)만큼 반복(loop)하여 출력(li)하고
$key에 해당하는 메뉴 정보는 $val에 저장한다.

32. [메뉴] 메뉴 코드분석 - $val
<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>
– $val['link'] : 메뉴 이미지 출력, 이미지가 없을 경우 텍스트 출력
– $val['text'] : 메뉴 텍스트 출력
– $val['href'] : 메뉴 링크주소
– $val['selected'] : 현재 선택된 메뉴
– $val['open_window']=='Y' : 메뉴 설정에서 새창으로 열기 설정을 했을 때

33. [메뉴] 메뉴 기본코드 - 3차 메뉴
<ul id="global_menu" cond="$global_menu->list">
<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']">
<a href="{$val2['href']}" target="_blank"|cond="$val2['open_window']=='Y'">{$val2['link']}</a>
<ul cond="$val2['list']">
<li loop="$val2['list']=>$key3,$val3" class="selected"|cond="$val3['selected']">
<a href="{$val3['href']}" target="_blank"|cond="$val3['open_window']=='Y'">{$val3['link']}</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>

34. [메뉴] 메뉴의 확장
사이드메뉴 페이지 타이틀
빵조각(BREADCRUMB)

35. [메뉴] 메뉴 확장코드
<ul id="global_menu" cond="$global_menu->list">
<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>
<block cond="$val1['selected']">{@ $nav1st=$val1; $page_title=$val1; }</block>
<ul cond="$val1['list']">
<li loop="$val1['list']=>$key2,$val2" class="selected"|cond="$val2['selected']">
<a href="{$val2['href']}" target="_blank"|cond="$val2['open_window']=='Y'">{$val2['link']}</a>
<block cond="$val2['selected']">{@ $nav2nd=$val2; $page_title=$val2; }</block>
<ul cond="$val2['list']">
<li loop="$val2['list']=>$key3,$val3" class="selected"|cond="$val3['selected']">
<a href="{$val3['href']}" target="_blank"|cond="$val3['open_window']=='Y'">{$val3['link']}</a>
<block cond="$val3['selected']">{@ $nav3rd=$val3; $page_title=$val3; }</block>
</li>
</ul>
</li>
</ul>
</li>
</ul>

36. [메뉴] 페이지 타이틀
<div class="page-title">
<h1>
<!--@if($mi->title)-->
{$mi->title}
<!--@elseif($page_title)-->
{$page_title}
<!--@endif-->
</h1>
<h2 cond="$mi->sub_title">{$mi->sub_title}</h2>
</div>

37. [메뉴] 빵조각 (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>

38. [메뉴] 사이드메뉴
<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>
<ul cond="$val1['list']">
<li loop="$val1['list']=>$key2,$val2" cond="$val2['list']">
<a href="{$val2['href']}" target="_blank"|cond="$val2['open_window']=='Y'">{$val2['text']}</a>
<ul cond="$val2['list']">
<li loop="$val2['list']=>$key3,$val3" cond="$val3['list']">
<a href="{$val3['href']}" target="_blank"|cond="$val3['open_window']=='Y'">{$val3['text']}</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>

39. 6. 위젯 노하우

40. [위젯] 위젯 소스코드

41. [위젯] 레이아웃과 위젯의 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; }

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

43. [위젯] 같은 jQuery 위젯 여러 개 사용하기
전역변수를 사용하여 위젯 ID명 변경
<!--@if(!$global['csi'])-->{@ $__Context->global['csi'] = 1}<!--@endif-->
{@ $__Context->global['csi']++}
<div id="bxslider{$global['csi']}" class="slider newclearfix">
…
</div>
<script>
jQuery('#bxslider{$global["csi"]}'). bxSlider();
</script>

44. 1. 세계 웹디자인 트렌드
2. 한국의 웹 이슈들
3. 디자인 – 공간과 간격
4. 디자인 - 선
5. 디자인 - 폰트
6. 효과
2
디자인 이야기