Erzsamatory Weblog


Xpress Engine, 티스토리, 텍스트큐브 등 관리자가 직접 HTML을 수정할 수 있는 서비스 또는 홈페이지를 운영하고 있는 경우에는 특정 HTML 요소의 존재 여부에 따라 실제로 출력되는 결과물을 달리해야 하는 필요성이 종종 발생합니다. 이때에는 jQuery를 활용함으로써 매우 간단하게 이 문제를 해결할 수 있습니다. jQuery의 length 객체 속성을 이용하면 됩니다.



특정 HTML 요소의 존재 여부에 따라 출력되는 내용을 다르게 출력해야 하는 경우


홈페이지에서 서브메뉴를 사용하고 있는 경우, 서브메뉴가 존재하지 않거나 서브메뉴가 필요없는 경우에는 서브메뉴 영역을 감추어 본문 영역을 넓게 사용해야 하는 필요성이 있습니다. 바로 이때 jQuery를 활용하면 매우 간단하게 이 문제를 해결할 수 있습니다. 물론 PHP나 ASP, JSP와 같은 서버측 웹 프로그래밍 언어를 이용하여 이 문제를 해결할 수도 있겠지만, 서버측에서 클라이언트에게 전달되는 결과물을 과도하게 수정하는 것보다는 자바스크립트를 이용하여 추후에 수정하는 것이 좋습니다. 헌법과 법률, 법률과 대통령령의 관계를 생각해보면 될 것 같습니다.

아래와 같은 레이아웃이 있다고 가정하겠습니다.

<div id="container">
    <!-- 본문이 출력되는 영역 -->
    <div id="content" class="left">
        <article>
            본문
        </article>
    </div>
    
    <!-- 서브메뉴가 출력되는 영역 -->
    <nav class="gnb right">
        <ul>
            <li>메뉴 1</li>
            <li>메뉴 2</li>
            <li>메뉴 3</li>
        </ul>
    </nav>
</div>


위의 예제는 매우 간단하게 구성된 레이아웃으로, <html>과 <head>를 제외한 <body> 내부의 내용만을 포함하고 있습니다. 본문이 출력되는 영역과 서브메뉴가 출력되는 영역으로 구분되어 있으며, <div id="content">에 추가되어 있는 left class는 float:left 속성이 적용된 CSS 클래스입니다. 마찬가지로 <nav>의 right class는 float:right 속성이 적용된 CSS 클래스입니다.

본문 영역은 화면의 왼쪽에 출력되고 서브메뉴는 화면의 오른쪽에 출력되는 레이아웃입니다. left class와 right class가 width 속성을 포함하고 있다고 가정할 때, 서브메뉴가 존재하지 않아 본문의 넓이를 넓히고자 할 때에는 <div id="content" class="left">에서 left class를 제거해야만 합니다. 물론 left class를 제거하면 본문의 넓이는 화면의 100%로 변경될 것입니다.

서브메뉴가 존재하지 않는 경우에는 아래와 같이 <li> 태그가 생성되지 않을 것입니다. 따라서 jQuery를 활용하여 <li> 태그의 갯수를 확인함으로써 서브메뉴의 존재 여부를 알아볼 수 있을 것입니다.

<nav class="gnb right">
    <ul>
        
    </ul>
</nav>


만약 서브메뉴가 존재하지 않을 때, <ul> 태그 자체가 생성되지 않을 때에는 <nav> 태그 내부의 <ul> 태그의 갯수를 확인하면 될 것입니다. jQuery는 CSS의 선택자를 그대로 지원하기 때문에 특정한 HTML 요소 내부의 태그 갯수를 알아보는 것이 가능합니다.

만약 서브메뉴가 존재하지 않더라도 본문 영역을 그대로 왼쪽에 고정하고 싶을 때에는 이 글에서 설명하는 방법을 이용하지 않아도 됩니다. 또한 서브메뉴가 존재하지 않을 때 특정한 메시지를 출력하는 것도 가능하므로, 이 글에서 소개하는 방법을 자신의 상황에 맞게 적당히 응용하여 활용해보시기 바랍니다.

jQuery 활용하기


jQuery의 사용방법은 매우 쉽습니다. CSS의 선택자를 그대로 사용할 수 있기 때문에 자바스크립트 하드코딩을 하는 것보다 훨씬 간단하게 원하는 스크립트를 쉽게 구현할 수 있습니다.

이 글에서는 서브메뉴가 존재하지 않는 경우 본문 영역의 넓이를 넓히는 스크립트를 설명할 것입니다. 위에서 설명하였듯이 위의 에제를 기준으로 서브메뉴가 존재하지 않을 때 <div id="content" class="left">의 left class를 제거하고, <nav> 태그를 화면에서 보이지 않게 함으로써 본문 영역의 넓이를 늘릴 수 있습니다.

가장 먼저 jQuery를 홈페이지에서 사용할 수 있어야 하는데, 자신의 홈페이지 또는 블로그에서 jQuery를 사용하는 방법은 다음의 글을 참고하시기 바랍니다. → 외부 링크 방식으로 jQuery를 블로그에서 사용하는 방법

Xpress Engine, 티스토리, 텍스트큐브 등 대부분의 CMS에서는 기본적으로 jQuery를 지원하고 있음에도 불구하고, jQuery 소스코드를 추가하였을 때 오류가 발생하는 경우가 종종 있습니다. 이 문제는 다른 자바스크립트 프레임워크와의 충돌이 발생하기 때문에 생깁니다. 또는 jQuery 식별자가 지정되지 않았기 때문에 발생할 수도 있습니다. 이때에는 다음과 같은 방법으로 이 문제를 해결할 수 있습니다.

jQuery.noConflict();
(function ($) {
    // 소스코드
})(jQuery);


jQuery 소스코드를 추가하였을 때 발생하는 문제는 $ 식별자를 사용하지 않음으로써 대부분 해결됩니다. 위의 소스코드는 익명의 함수를 생성하여 jQuery 식별자로서 $를 사용할 수 있게 해줍니다. 반드시 function 내부에 jQuery 소스코드가 들어가야 합니다.

이제 본론으로 들어가겠습니다. 아래의 소스코드는 위의 레이아웃에서 서브메뉴가 존재하지 않는 경우, 서브메뉴 영역을 보이지 않게 하고, 본문 영역의 넓이를 늘리는 jQuery 스크립트입니다. 만약 서브메뉴를 보이지 않게 하는 것이 불가능한 경우[1]에는 서브메뉴 영역을 삭제하면 됩니다. jQuery에서 HTML 요소의 삭제는 remove() 메소드를 이용합니다.

(function ($) {
    if (!($('nav.gnb ul li').length > 0)) {
        $('nav.gnb').hide();
        $('#content').removeClass('left');
    }
})(jQuery);


jQuery에서 선택된 HTML 객체가 존재하는지의 여부를 확인하기 위해서는 length 속성을 활용합니다. jQuery에서는 개발자가 존재하지 않는 HTML 요소를 지정하였다고 오류가 발생하지는 않고 반환되는 객체의 수가 0이 됩니다. 따라서 지정한 HTML 요소가 존재하면 1개 이상의 객체가 반환되고, 존재하지 않으면 0개의 객체가 반환됩니다.

jQuery에서 HTML 태그에 클래스를 적용하거나 해제할 때에는 addClass() 메소드와 removeClass()를 사용합니다. 또는 두 개의 함수가 하나로 통합된 toggleClass() 메소드가 사용할 수도 있습니다. 하지만 위의 예제에서는 클래스 삭제만 필요하므로 removeClass() 메소드를 사용하였습니다.

jQuery의 hide() 메소드는 HTML 객체의 display 스타일 속성을 none으로 변경하는 메소드입니다. 따라서 css('display', 'none') 메소드를 사용한 것과 동일한 결과를 가져옵니다. 반대로 show() 메소드는 display 스타일 속성을 해당 HTML 객체의 기본 값으로 설정[2]합니다. 위의 예제에서는 show() 메소드는 사용되지 않았습니다. 참고로 show() 메소드는 css('display', 'block') 또는 css('display', 'inline-block') 메소드와 같은 결과를 가져옵니다.


마무리


지금까지 특정한 HTML 요소가 존재하지 않을 때 출력되는 내용을 다르게 하는 방법에 대하여 알아보았습니다. 이 글에서는 서브메뉴의 영역을 보이지 않게 하고 본문의 영역을 넓히는 스크립트만 알아보았으나, 이 방법을 응용하면 실제로 더 동적인 페이지를 만들 수 있을 것입니다. 예를 들어, 서브메뉴가 존재하지 않는 경우에는 레이아웃의 모든 부분을 뜯어 고칠 수도 있습니다. 모든 것은 개발자와 디자이너에게 달려있는 것입니다.

jQuery를 활용하지 않고도 위와 같은 기능을 구현할 수는 있습니다. 하지만 순수 자바스크립트를 이용하면 소스코드가 조금 길어질 수 있기 때문에 대부분의 개발자는 jQuery의 활용을 선호합니다. 다만, jQuery를 활용하면 페이지의 속도가 느려질 수 있기 때문에 간단한 기능은 순수 자바스크립트로 구현하고, 복잡한 기능만 jQuery를 활용하는 것이 가장 좋은 방법입니다.
  1. CSS에서 서브메뉴 영역에 !important가 적용되었을 경우 [→]
  2. 블록 태그인 경우에는 display: block, 인라인 태그인 경우에는 display: inline-block [→]
http://www.erzsamatory.net/trackback/212

건전한 댓글 문화를 만들어주시기 바랍니다 ^^
불건전한 댓글이 등록되는 경우 관리자의 임의적 판단으로 삭제될 수 있음을 미리 공지드립니다.

비밀글로 작성하기