블로그 이미지
내게 능력 주시는 자 안에서 내가 모든것을 할수 있느니라 - 빌립보서 4 : 13 - happydong

카테고리

Happydong (1363)
프로그래밍 (156)
MUSIC (16)
인물 (3)
Utility (10)
세미나 소식&내용 (22)
IT뉴스 (18)
운동 (830)
CAFE (10)
Life (282)
Total
Today
Yesterday






 제이쿼리(JQuery)에서는 간단하게 HTML객체의 스타일(Style)속성을 추가, 삭제가 손쉽게 가능해 정말 편한 것 같다. 이는 제이쿼리에서 제공하는 addClass함수와 removeClass함수를 이용하면 되는데, 이를 간단하게 아래예제를 통해서 알아 보도록 하자!

먼저, 실행되는 결과 모습을 보자면, 아래 그림과 같다.

사용자 삽입 이미지

 [그림1-1 스타일 추가]


사용자 삽입 이미지

[그림1-2 스타일 삭제]
(예제 소스 참고: jQuery 1.3 (위키북스) 책 참고)

 위 그림과 같이 기본 스타일에 스타일 적용 버튼 클릭(또는 페이지로드) 이벤트시 주요 내용에 하이라이트(highlight) 영역으로 변경되도록 한것이다. 이는 CSS 스타일을 변경한 것인데... CSS는 아래와 같다.

alice.css

body

{

    font: 62.5% Arial, Verdana, sans-serif;

} 

 ... 중간 생략 ...

/* 하이라이트 스타일 */

.highlight

{

    font-style: italic;

    border: 1px solid #888;

    padding: 0.5em;

    margin: 0.5em 0;

    background-color: #ffc;

}


 위 코드는 하이라이트 스타일을 정의한 부분이다. 차후에 버튼을 클릭하거나, 페이지로드 이벤트시 바로 이 스타일을 적용할것이다. (기본은 적용이 안되있음.)


alice.js

/* 페이지 로드시...*/

$(document).ready(function() {

    AddStyle();

});

 

/* 스타일 삭제*/

function RemoveStyle() {

    $('.poem-stanza').removeClass('highlight');

}

 

/* 스타일 추가*/

function AddStyle() {

    $('.poem-stanza').addClass('highlight');

}


 위 코드는 스크립트를 정의한 내용이다. 주석을 통해서 간단하게 설명을 달아 놨으니, 이해하는데 도움이 될것이라 생각이 든다. ".poem-stanza"는 스타일을 지정한 class명이다. 즉, ".poem-stanza"을 찾아서 addClass함수, 또는 removeClass함수를 통해 해당 "highlight"스타일로  추가/삭제하는 내용인것이다. 아래 HTML 페이지를 참고하면 이해가 쉽지 않을까 생각이 든다.


HTML

<div>

 중간 생략

 

<div class="poem">

            <h3 class="poem-title">

                JABBERWOCKY</h3>

            <div class="poem-stanza">

                <div>

                    'Twas brillig, and the slithy toves</div>

                <div>

                    Did gyre and gimble in the wabe;</div>

                <div>

                    All mimsy were the borogoves,</div>

                <div>

                    And the mome raths outgrabe.</div>

            </div>

        </div>

    </div>

    <div style="margin:10px 0 0 0;">

    <input type="button" value="스타일 적용" onclick="AddStyle();" />

    <input type="button" value="스타일 삭제" onclick="RemoveStyle();" />


위 코드를 보면 버튼이 두개가 있고, 버튼을 클릭했을 때 해당 스크립트를 호출할수 있도록 되어있다. 그리고 하이라이트가 되어저야 할부분에 DIV태그로 감싸져있고, class명으로 "poem-stanza"로 선업되어 있다. 위에서도 설명했듯 버튼을 클릭하는 순간 해당 "poem-stanza"를 찾아 스타일을 추가/삭제하는 것이다.

기존에는 스타일을 적용하려면 여러가지로 귀찮게 스크립트를 짜주어야 했는데, 제이쿼리를 이용하니 간단하게 해결되어 편한것 같다.
Posted by happydong
, |