xe 오픈 세미나(2014-06-28) - (2/3) 레이아웃 제작 노하우
Post on 22-Jan-2015
5.748 Views
Preview:
DESCRIPTION
TRANSCRIPT
레이아웃 제작 노하우카메론 고진화 대표
레이아웃 제작 도구
크롬 브라우저
요소검사
CSS 적용해 보기
드림위버
수정 저장시 자동 업로드 기능
레이아웃 제작 노하우
소스코드 속도향상 노하우
html 파일 모듈화
layout.htmlsettings.html
navigation.htmlaside.html
속도 , 관리 , 반복사용
JS 파일을 뒤에 불러오기
<load target=“script.js” type=“body” />
파일 요청수를 줄여라
CSS 파일 개수를 줄여라 .
JS 파일 개수를 줄여라 .
인라인 스타일 , 스크립트
인라인 스타일을 css 파일로
인라인 스크립트를 js 파일로
css 와 js 파일은 캐싱이 된다 .
메뉴 노하우
메뉴의 확장
페이지 타이틀 사이드메뉴
빵조각
메뉴확장 소스코드<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>
페이지 타이틀
<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>
빵조각 (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']">
<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>
1 차 메뉴 설명
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>
브라우저 식별 노하우
구버전 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-->
IE6~8 반응형 지원
<load cond="$oldIE" target="js/respond.min.js" />
크로스 브라우징 노하우
반응형 노하우
테블릿과 모바일 식별
<!--@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-->
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) {…} × × ○ ○ ○
기타 노하우
jQuery 플러그인 가져오기
jQuery(function($){$(…)
}
레이아웃과 위젯의 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; }
IE 브라우저 호환성모드 제거
{@ Context::addMetaTag('X-UA-Compatible', 'IE=edge', true); }
관리자바 없애기
{@ Context::set('admin_bar', 'false'); }
XE CSS 클래스명 피하기• CSS RESET 사용 금지
• header, footer, btn 등의 대표 클래스명 사용 금지
• Bootstrap 중복 CSS 주의
top related