레이아웃 제작 노하우카메론 고진화 대표

레이아웃 제작 도구

크롬 브라우저

요소검사

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 주의