xe 오픈 세미나(2014-06-28) - (2/3) 레이아웃 제작 노하우
DESCRIPTION
XE 오픈 세미나 - 2014-06-28 XE 레이아웃 제작 노하우 - 고진화 이 발표자료 내용은 오프라인 강의 때 구체적인 설명을 위한 키포인트 정도로 작성된 것이니 자세한 설명이나 궁금하신 사항은 고진화 강사님에게(http://cameron.co.kr) 문의하시기 바랍니다.TRANSCRIPT
![Page 1: XE 오픈 세미나(2014-06-28) - (2/3) 레이아웃 제작 노하우](https://reader033.vdocuments.mx/reader033/viewer/2022061222/54c102564a795987568b4638/html5/thumbnails/1.jpg)
레이아웃 제작 노하우카메론 고진화 대표
![Page 2: XE 오픈 세미나(2014-06-28) - (2/3) 레이아웃 제작 노하우](https://reader033.vdocuments.mx/reader033/viewer/2022061222/54c102564a795987568b4638/html5/thumbnails/2.jpg)
레이아웃 제작 도구
![Page 3: XE 오픈 세미나(2014-06-28) - (2/3) 레이아웃 제작 노하우](https://reader033.vdocuments.mx/reader033/viewer/2022061222/54c102564a795987568b4638/html5/thumbnails/3.jpg)
크롬 브라우저
![Page 4: XE 오픈 세미나(2014-06-28) - (2/3) 레이아웃 제작 노하우](https://reader033.vdocuments.mx/reader033/viewer/2022061222/54c102564a795987568b4638/html5/thumbnails/4.jpg)
요소검사
![Page 5: XE 오픈 세미나(2014-06-28) - (2/3) 레이아웃 제작 노하우](https://reader033.vdocuments.mx/reader033/viewer/2022061222/54c102564a795987568b4638/html5/thumbnails/5.jpg)
CSS 적용해 보기
![Page 6: XE 오픈 세미나(2014-06-28) - (2/3) 레이아웃 제작 노하우](https://reader033.vdocuments.mx/reader033/viewer/2022061222/54c102564a795987568b4638/html5/thumbnails/6.jpg)
드림위버
![Page 7: XE 오픈 세미나(2014-06-28) - (2/3) 레이아웃 제작 노하우](https://reader033.vdocuments.mx/reader033/viewer/2022061222/54c102564a795987568b4638/html5/thumbnails/7.jpg)
수정 저장시 자동 업로드 기능
![Page 8: XE 오픈 세미나(2014-06-28) - (2/3) 레이아웃 제작 노하우](https://reader033.vdocuments.mx/reader033/viewer/2022061222/54c102564a795987568b4638/html5/thumbnails/8.jpg)
레이아웃 제작 노하우
![Page 9: XE 오픈 세미나(2014-06-28) - (2/3) 레이아웃 제작 노하우](https://reader033.vdocuments.mx/reader033/viewer/2022061222/54c102564a795987568b4638/html5/thumbnails/9.jpg)
소스코드 속도향상 노하우
![Page 10: XE 오픈 세미나(2014-06-28) - (2/3) 레이아웃 제작 노하우](https://reader033.vdocuments.mx/reader033/viewer/2022061222/54c102564a795987568b4638/html5/thumbnails/10.jpg)
html 파일 모듈화
layout.htmlsettings.html
navigation.htmlaside.html
속도 , 관리 , 반복사용
![Page 11: XE 오픈 세미나(2014-06-28) - (2/3) 레이아웃 제작 노하우](https://reader033.vdocuments.mx/reader033/viewer/2022061222/54c102564a795987568b4638/html5/thumbnails/11.jpg)
JS 파일을 뒤에 불러오기
<load target=“script.js” type=“body” />
![Page 12: XE 오픈 세미나(2014-06-28) - (2/3) 레이아웃 제작 노하우](https://reader033.vdocuments.mx/reader033/viewer/2022061222/54c102564a795987568b4638/html5/thumbnails/12.jpg)
파일 요청수를 줄여라
CSS 파일 개수를 줄여라 .
JS 파일 개수를 줄여라 .
![Page 13: XE 오픈 세미나(2014-06-28) - (2/3) 레이아웃 제작 노하우](https://reader033.vdocuments.mx/reader033/viewer/2022061222/54c102564a795987568b4638/html5/thumbnails/13.jpg)
인라인 스타일 , 스크립트
인라인 스타일을 css 파일로
인라인 스크립트를 js 파일로
css 와 js 파일은 캐싱이 된다 .
![Page 14: XE 오픈 세미나(2014-06-28) - (2/3) 레이아웃 제작 노하우](https://reader033.vdocuments.mx/reader033/viewer/2022061222/54c102564a795987568b4638/html5/thumbnails/14.jpg)
메뉴 노하우
![Page 15: XE 오픈 세미나(2014-06-28) - (2/3) 레이아웃 제작 노하우](https://reader033.vdocuments.mx/reader033/viewer/2022061222/54c102564a795987568b4638/html5/thumbnails/15.jpg)
메뉴의 확장
페이지 타이틀 사이드메뉴
빵조각
![Page 16: XE 오픈 세미나(2014-06-28) - (2/3) 레이아웃 제작 노하우](https://reader033.vdocuments.mx/reader033/viewer/2022061222/54c102564a795987568b4638/html5/thumbnails/16.jpg)
메뉴확장 소스코드<nav id="main-nav">
<ul>
<li loop="$global_menu->list=>$key1,$val1" cond="$val1['link']">
<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" cond="$val2['link']">
<a class="nav2nd" 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" cond="$val3['link']">
<a class="nav3rd" 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>
</nav>
![Page 17: XE 오픈 세미나(2014-06-28) - (2/3) 레이아웃 제작 노하우](https://reader033.vdocuments.mx/reader033/viewer/2022061222/54c102564a795987568b4638/html5/thumbnails/17.jpg)
페이지 타이틀
<div class="page-title">
<h1>
<!--@if($mi->title)-->
{$mi->title}
<!--@elseif($module_info->browser_title)-->
{$module_info->browser_title}
<!--@elseif($page_title)-->
{$page_title}
<!--@endif-->
</h1>
<h2 cond="$mi->sub_title">{$mi->sub_title}</h2>
</div>
![Page 18: XE 오픈 세미나(2014-06-28) - (2/3) 레이아웃 제작 노하우](https://reader033.vdocuments.mx/reader033/viewer/2022061222/54c102564a795987568b4638/html5/thumbnails/18.jpg)
빵조각 (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>
![Page 19: XE 오픈 세미나(2014-06-28) - (2/3) 레이아웃 제작 노하우](https://reader033.vdocuments.mx/reader033/viewer/2022061222/54c102564a795987568b4638/html5/thumbnails/19.jpg)
사이드메뉴<ul id="side_menu">
<li loop="$global_menu->list=>$key1,$val1" cond="$val1['selected'] && $val1['list']">
<span>{$val1['text']}</span>
<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>
![Page 20: XE 오픈 세미나(2014-06-28) - (2/3) 레이아웃 제작 노하우](https://reader033.vdocuments.mx/reader033/viewer/2022061222/54c102564a795987568b4638/html5/thumbnails/20.jpg)
1 차 메뉴 설명
![Page 21: XE 오픈 세미나(2014-06-28) - (2/3) 레이아웃 제작 노하우](https://reader033.vdocuments.mx/reader033/viewer/2022061222/54c102564a795987568b4638/html5/thumbnails/21.jpg)
1 차 메뉴 설명 코드
<nav id=“main-nav”>
<ul class="nav1st-ul newclearfix">
<li loop="$global_menu->list=>$key1,$val1" cond="$val1['link']">
<a href="{$val1['href']}" target="_blank"|
cond="$val1['open_window']=='Y'">
{@ $nav1st_ex = explode('|',$val1['text']); }
<span class="nav1st-ko">{$nav1st_ex[0]}</span>
<span class="nav1st-en">{$nav1st_ex[1]}</span>
</a>
</li>
</ul>
</nav>
![Page 22: XE 오픈 세미나(2014-06-28) - (2/3) 레이아웃 제작 노하우](https://reader033.vdocuments.mx/reader033/viewer/2022061222/54c102564a795987568b4638/html5/thumbnails/22.jpg)
브라우저 식별 노하우
![Page 23: XE 오픈 세미나(2014-06-28) - (2/3) 레이아웃 제작 노하우](https://reader033.vdocuments.mx/reader033/viewer/2022061222/54c102564a795987568b4638/html5/thumbnails/23.jpg)
구버전 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-->
![Page 24: XE 오픈 세미나(2014-06-28) - (2/3) 레이아웃 제작 노하우](https://reader033.vdocuments.mx/reader033/viewer/2022061222/54c102564a795987568b4638/html5/thumbnails/24.jpg)
IE6~8 반응형 지원
<load cond="$oldIE" target="js/respond.min.js" />
![Page 25: XE 오픈 세미나(2014-06-28) - (2/3) 레이아웃 제작 노하우](https://reader033.vdocuments.mx/reader033/viewer/2022061222/54c102564a795987568b4638/html5/thumbnails/25.jpg)
크로스 브라우징 노하우
![Page 26: XE 오픈 세미나(2014-06-28) - (2/3) 레이아웃 제작 노하우](https://reader033.vdocuments.mx/reader033/viewer/2022061222/54c102564a795987568b4638/html5/thumbnails/26.jpg)
반응형 노하우
![Page 27: XE 오픈 세미나(2014-06-28) - (2/3) 레이아웃 제작 노하우](https://reader033.vdocuments.mx/reader033/viewer/2022061222/54c102564a795987568b4638/html5/thumbnails/27.jpg)
테블릿과 모바일 식별
<!--@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-->
![Page 28: XE 오픈 세미나(2014-06-28) - (2/3) 레이아웃 제작 노하우](https://reader033.vdocuments.mx/reader033/viewer/2022061222/54c102564a795987568b4638/html5/thumbnails/28.jpg)
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) {…} × × ○ ○ ○
![Page 29: XE 오픈 세미나(2014-06-28) - (2/3) 레이아웃 제작 노하우](https://reader033.vdocuments.mx/reader033/viewer/2022061222/54c102564a795987568b4638/html5/thumbnails/29.jpg)
기타 노하우
![Page 30: XE 오픈 세미나(2014-06-28) - (2/3) 레이아웃 제작 노하우](https://reader033.vdocuments.mx/reader033/viewer/2022061222/54c102564a795987568b4638/html5/thumbnails/30.jpg)
jQuery 플러그인 가져오기
jQuery(function($){$(…)
}
![Page 31: XE 오픈 세미나(2014-06-28) - (2/3) 레이아웃 제작 노하우](https://reader033.vdocuments.mx/reader033/viewer/2022061222/54c102564a795987568b4638/html5/thumbnails/31.jpg)
레이아웃과 위젯의 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; }
![Page 32: XE 오픈 세미나(2014-06-28) - (2/3) 레이아웃 제작 노하우](https://reader033.vdocuments.mx/reader033/viewer/2022061222/54c102564a795987568b4638/html5/thumbnails/32.jpg)
IE 브라우저 호환성모드 제거
{@ Context::addMetaTag('X-UA-Compatible', 'IE=edge', true); }
![Page 33: XE 오픈 세미나(2014-06-28) - (2/3) 레이아웃 제작 노하우](https://reader033.vdocuments.mx/reader033/viewer/2022061222/54c102564a795987568b4638/html5/thumbnails/33.jpg)
관리자바 없애기
{@ Context::set('admin_bar', 'false'); }
![Page 34: XE 오픈 세미나(2014-06-28) - (2/3) 레이아웃 제작 노하우](https://reader033.vdocuments.mx/reader033/viewer/2022061222/54c102564a795987568b4638/html5/thumbnails/34.jpg)
XE CSS 클래스명 피하기• CSS RESET 사용 금지
• header, footer, btn 등의 대표 클래스명 사용 금지
• Bootstrap 중복 CSS 주의