Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

3,913 views

Published on

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

  • Be the first to comment

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

  1. 1. 2014.11.08 Session 2-2 XECon + PHPFest 2014 XpressEngine 레이아웃 제작 실무 노하우 @treasurej 고진화 CAMERON cameron.co.kr
  2. 2. 1. 소스코드 속도향상 노하우 2. 모바일/태블릿 기기 식별 노하우 3. 인터넷 익스플로러 식별 노하우 4. 외부 파일 로딩 노하우 5. 네비게이션 노하우 6. 위젯 노하우 1 소스코드 노하우
  3. 3. 1. 소스코드 속도향상 노하우
  4. 4. layout.html 기본 소스코드 예제 1/3
  5. 5. layout.html 기본 소스코드 예제 2/3
  6. 6. layout.html 기본 소스코드 예제 3/3
  7. 7. [속도] html 파일 모듈화 settings.html global_menu.html side_menu.html sign.html search.html … <include target="settings.html" />
  8. 8. [속도] html 모듈화 예 - settings.html
  9. 9. [속도] include 로 재정리한 layout.html
  10. 10. [속도] 인라인 스타일, 인라인 스크립트를 파일 인라인 스타일 <style> → .css 파일 인라인 스크립트 <script> → .js 파일 CSS, JS 파일은 브라우저 캐싱됨.
  11. 11. [속도] 파일 요청수 줄이기 CSS 파일수 줄이기 JS 파일수 줄이기 서버와 주고 받는 요청수를 최소화
  12. 12. [속도] JS 파일을 하단에서 불러오기 <load target="js/layout.js" type="body" />
  13. 13. [속도] 속도 노하우 정리 • HTML 파일 모듈화 <include> • 인라인 스타일, 인라인 스크립트 → CSS, JS 파일 – CSS, JS 파일은 브라우저 캐싱이 됨. • CSS, JS 파일수 줄이기 – 서버와 주고 받는 요청수를 최소화 • JS 파일을 하단에서 로딩하기 – <load target="js/layout.js" type="body" />
  14. 14. 2. Mobile · Tablet 기기 식별 노하우
  15. 15. [기기] 모바일과 태블릿 식별 모바일 식별코드 {Mobile::isMobileCheckByAgent()} 태블릿 식별코드 {Mobile::isMobilePadCheckByAgent()}
  16. 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. 17. width=1024 width=device-width
  18. 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. 19. 3. Internet Explorer 식별 노하우
  20. 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. 21. [IE] IE 버전식별 사용 예 <load cond="$oldIE" target="respond.min.js" />
  22. 22. [IE] IE 호환성모드 제거 {@ Context::addMetaTag('X-UA-Compatible', 'IE=edge', true); }
  23. 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. 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. 25. 4. 외부 파일 로딩 노하우
  26. 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. 27. [기타] jQuery 가져오기 jQuery(function($){ $(…) }
  28. 28. 5. Navigation 노하우
  29. 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. 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. 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. 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. 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. 34. [메뉴] 메뉴의 확장 사이드메뉴 페이지 타이틀 빵조각(BREADCRUMB)
  35. 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. 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. 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. 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. 39. 6. 위젯 노하우
  40. 40. [위젯] 위젯 소스코드
  41. 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. 42. 같은 jQuery 위젯 여러 개 사용하기
  43. 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. 44. 1. 세계 웹디자인 트렌드 2. 한국의 웹 이슈들 3. 디자인 – 공간과 간격 4. 디자인 - 선 5. 디자인 - 폰트 6. 효과 2 디자인 이야기

×