'홈페이지 관련/jquery'에 해당되는 글 3건

  1. 2012.08.31 스크립트 기술하는 방법
  2. 2012.08.31 jQuery 다운로드
  3. 2012.08.31 jQuery 샘플 파일
홈페이지 관련/jquery2012. 8. 31. 17:41

스크립트 기술하는 방법

방법 1 :

<script type="text/javascript" src="http://kaksihost.cafe24.com/jquery/jquery-1.8.0.min.js"></script>

<script type="text/javascript">

jQuery 내용 적기

</script>


방법 2 :

<script type="text/javascript" src="http://kaksihost.cafe24.com/jquery/jquery-1.8.0.min.js"></script>

<script type="text/javascript" src="./script.js"></script>


script 태그는 src 속성이 있는 경우는 src 속성에 작성되어 있는 외부 파일을 읽어 들이고, src 속성이 없는 경우에는 script 태그안에 작성되어 있는 코드를 JavaScript 로 인식한다.

jQuery를 사용한 프로그램을 작성하는 경우도 마찬가지인데 예를 들어 방법1 과 같이 처리내용을 직접 적을 것인지, 방법 2와 같이 'script.js' 등의 외부 파일을 작성할 것인지 자신의 스타일 대로 하면 된다.

실무에선 방법2를 많이 사용한다.

이유는 보틍 브라우저는 한번 읽어 들인 JavaScript 파일의 내용을 캐시 형태로 저장하므로, 외부 파일로 작성해 두면 그 이후 로딩시 고속화가 가능하다. 재사용성을 생각한다면 외부 파일로 작성하는 것이 좋겠다.

작성할 JavaScript 파일은 HTML 파일과 같은 문자코드로 작성해야 한다. Ajax를 통해 서버와 통신하는 경우라면 UTF-8이 아니라면 문자가 깨질 경우가 있으니 UTF-8로 작성하는 것이 좋겠다.

Posted by 캠퍼스친구
홈페이지 관련/jquery2012. 8. 31. 17:30

jQuery 다운로드

jQuery를 사용하는 방법에는 여러 가지가 있다. 

가장 많이 사용되는 방법으로는 공식 사이트에서 라이브러리 파일ㅇ르 다운로드하고 서버에 올려 이용하는 방법이다.

jQuery의 공식 사이트 http://jquery.com 에 접속하여 메인 페이지에 있는 "Download"를 클릭하여 다운로드한 JavaScript 파일을 텍스트 에디터에서 열어보면 저작권 표시 뒤에 JavaScript 명령이 기술되어 있다.

jQuery의 소스코드는 주석, 공백, 개행을 제거하고 변수명을 짧게 하는 "minified" 라는 방식으로 압축되어 있다.

보통 jQuery로 개발할 때에는 minified 버전을 사용하는 것으로 충분하다.

압축전 버전은 Development 를 체크하면 다운로드 받을 수 있다.

Posted by 캠퍼스친구
홈페이지 관련/jquery2012. 8. 31. 16:31

jQuery 샘플 파일

기본적인 jQuery 파일을 통해 기본 글의 구조를 살펴 본다.


소스

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>아코디언 패널</title>

<script type="text/javascript" src="http://kaksihost.cafe24.com/jquery/jquery-1.8.0.min.js"></script>

<script type="text/javascript">

$(function(){

$("dd:not(:first)").css("display","none");

$("dl dt").click(function(){

if($("+dd",this).css("display")=="none"){

$(this).siblings("dd").slideUp("slow");

$("+dd",this).slideDown("slow");

}

});

});

</script>

<style type="text/css">

* {

margin: 0px;

padding: 0px;

}

dl {

width: 100%;

margin-top: 50px;

margin-right: auto;

margin-bottom: 50px;

margin-left: auto;

}

dl dt {

background-color: #7cadb6;

border-bottom-width: 1px;

border-bottom-style: solid;

border-bottom-color: #FFF;

cursor: pointer;

}

dl dd {

border-right-width: 1px;

border-bottom-width: 1px;

border-left-width: 1px;

border-top-style: none;

border-right-style: solid;

border-bottom-style: solid;

border-left-style: solid;

border-top-color: #7cadb6;

border-right-color: #7cadb6;

border-bottom-color: #7cadb6;

border-left-color: #7cadb6;

height: 300px;

}

</style>

</head>


<body>

<div id="container">

<dl>

    <dt><p>텍스트 1</p></dt>

      <dd><p>텍스트 1 텍스트의 모든 내용을 보여줍니다.</p></dd>

      <dt><p>텍스트2</p></dt>

      <dd><p>텍스트2 두번째 텍스트의 내용을 보여줍니다.</p></dd>

      <dt><p>텍스트3</p></dt>

      <dd><p>텍스트3 세번째 텍스트의 내용을 보여줍니다.</p></dd>

</dl>

</div>

</body>

</html>


해설

<!-- html 5 로 만들었습니다. -->

<!doctype html>

<html>

<head>

<!-- 글자 인코딩 형식은 유니코드로 작업했어요 -->

<meta charset="UTF-8">

<title>아코디언 패널</title>

<!-- jquery 버전은 최신 버전으로 원격으로 불러오기를 합니다. -->

<script type="text/javascript" src="http://kaksihost.cafe24.com/jquery/jquery-1.8.0.min.js"></script>

<!-- 실제 사용할 스크립트 내용을 적습니다. -->

<script type="text/javascript">

$(function(){

$("dd:not(:first)").css("display","none");

$("dl dt").click(function(){

if($("+dd",this).css("display")=="none"){

$(this).siblings("dd").slideUp("slow");

$("+dd",this).slideDown("slow");

}

});

});

</script>


<!-- 스타일 내용을 적습니다. -->

<style type="text/css">

* {

margin: 0px;

padding: 0px;

}

dl {

width: 100%;

margin-top: 50px;

margin-right: auto;

margin-bottom: 50px;

margin-left: auto;

}

dl dt {

background-color: #7cadb6;

border-bottom-width: 1px;

border-bottom-style: solid;

border-bottom-color: #FFF;

cursor: pointer;

}

dl dd {

border-right-width: 1px;

border-bottom-width: 1px;

border-left-width: 1px;

border-top-style: none;

border-right-style: solid;

border-bottom-style: solid;

border-left-style: solid;

border-top-color: #7cadb6;

border-right-color: #7cadb6;

border-bottom-color: #7cadb6;

border-left-color: #7cadb6;

height: 300px;

}

</style>

</head>


<body>

<!-- 내용을 적어줍니다. -->

<div id="container">

<dl>

    <dt><p>텍스트 1</p></dt>

      <dd><p>텍스트 1 텍스트의 모든 내용을 보여줍니다.</p></dd>

      <dt><p>텍스트2</p></dt>

      <dd><p>텍스트2 두번째 텍스트의 내용을 보여줍니다.</p></dd>

      <dt><p>텍스트3</p></dt>

      <dd><p>텍스트3 세번째 텍스트의 내용을 보여줍니다.</p></dd>

</dl>

</div>

</body>

</html>



결과 화면 보기

아코디언 패널

텍스트 1

텍스트 1 텍스트의 모든 내용을 보여줍니다.

텍스트2

텍스트2 두번째 텍스트의 내용을 보여줍니다.

텍스트3

텍스트3 세번째 텍스트의 내용을 보여줍니다.


Posted by 캠퍼스친구

티스토리툴바