[XE 1.x 강좌] 3.5. 레이아웃 상단 코딩 3(검색창), 컨텐츠 영역, 하단 코딩

검색창

  이제 상단에 검색창을 만들어보자. 여기서는 로그인과 같은 줄에 검색창을 만들어보도록 하겠다. 우선 html 파일을 열고 다음과 같은 코드를 삽입한다.

<div class="search_area">

<form action="{getUrl()}" method="get" class="search">

<input type="hidden" name="vid" value="{$vid}" />

<input type="hidden" name="mid" value="{$mid}" />

<input type="hidden" name="act" value="IS" />

<input type="text" name="is_keyword" value="{$is_keyword}" class="keyword" title="{$lang->cmd_search}" /> <!-- 검색창 -->

<input type="submit" class="search_btn" value="search" /> <!-- 검색 버튼 -->

</form>

</div>

  짠하고 검색창이 나타났다. 역시 디자인을 수정할 필요가 있겠다.

.layout_container .header .menu .search_area{

font-family:'Calibri';

font-size:10px;

color:#777;

  margin-top:10px; /* 로그인폼과의 높이를 동일하게 맞추기 위해 여백을 로그인폼과 같게 조정 */

}

.layout_container .header .menu .search_area input[type="submit"]{

font-size:10px;

background:transparent;

border:none;

font-family:inherit;

cursor:pointer;

color:#777;

}

.layout_container .header .menu .search_area input[type="submit"]:hover, .layout_container .header .menu .search_area input[type="submit"]:active{

color:#aaa;

}

.layout_container .header .menu .search_area input[type="text"]{

border:none;

background:rgba(0,0,0,0.05);

padding:3px;

width:70px;

font-family:inherit;

}

  이제 검색창의 위치를 조정할 시간이다. 로그인창과 검색창을 인라인으로 바꿔 한 줄에 같이 나타날 수 있게 하는 원리다.

.layout_container .header .menu .login_area{

display:inline-block; /* 로그인창을 인라인블록으로 전환 */

}

.layout_container .header .menu .search_area{

font-family:'Calibri';

font-size:10px;

color:#777;

margin-top:10px;

display:inline-block;

float:right; /* 검색창으로 오른쪽으로 */

}

  그리하여 상단 디자인이 완료되었다.

컨텐츠 영역

  컨텐츠 영역은 매우 간단하다. {$content} 변수 자리에 컨텐츠가 로딩되는데, 컨텐츠 영역은 본문을 그저 잘 담으면 되기 때문에 div 역시 간단하다.

<div class="content">{$content}</div>

  그런데 위에서 보는 것과 같이 디자인이 조금 어색하다. 디자인을 맞춰주자. 여기서 >를 쓰는 이유는 .content 중에서 컨테이너 바로 밑에 존재하는 .content만 적용시키기 위해서이다.

/* 콘텐츠 영역 */

.layout_container>.content{

padding:20px;

}

하단 영역

  우선 디자인을 먼저 다듬자.

/* 하단 영역 */

.layout_container .footer{

padding:20px;

border-top:1px dashed #eee;

font-family:'Calibri';

font-size:10px;

color:#777;

}

  그런 다음 html에 들어가서 하이라이트한 부분을 수정한다. (처음부터 이렇게 할걸 그랬다...)

<div class="footer">

        <a href="#" id="top">Top</a>

        <p class="copyright">(C){$copyrightYear = date("Y");$copyrightYear} Enable</p>

</div>

  CSS : 

.layout_container .footer a, .layout_container .footer a:link, .layout_container .footer a:visited{

color:#777;

}

.layout_container .footer a:hover, .layout_container .footer a:active{

color:#aaa;

}

  제이쿼리를 이용해서 부드럽게 올라가게 하고 싶다면 js파일을 열고 다음을 추가한다.

// <![CDATA[

jQuery(function($){

//slide toggle

$('#top').click(function() { //#top이 클릭될 때

                $("html, body").animate({ scrollTop: 0 }, 400); //body가 맨 위로 애니메이트된다

return false; //href 무력화

});

});

function completeLogin(ret_obj, response_tags, params, fo_obj) {

    var url =  current_url.setQuery('act','');

    location.href = url;

}

// ]]>

  이로써 레이아웃의 기본적인 설명은 끝났다. 여기서 배운 것들을 응용해서 여러 디자인을 시도해볼 수 있을 것이다.