'프론트엔드/Jquery' 카테고리의 글 목록

1. 개요

기본적인 css문법과 JQuery 문법의 간단한 사용법을 복습하기 위해 li태그 클릭 시 글자색과 배경색이 바뀌도록 하는 예제를 작성해보았다.

2. 예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>?</title>
    <style>
        ul{
            float:left;
            list-style: none;
        }
        .change_back{
            background-color: red;
            color:white;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    <ul class = 'lang_list'>
        <li>HTML</li>
        <li>CSS</li>
        <li>bootstrap</li>
        <li>Javascript</li>
        <li>JQuery</li>
    </ul>
    <script>
        $('ul.lang_list li').click(function(){
            $(this).addClass('change_back');
        });
    </script>
</body>
</html>

css를 적용시키려면 <style>태그를 사용해야 한다.

css를 적용시키려는 대상에 따라 그 문법이 약간 달라진다.

1) 대상이 태그(< >)일 경우

태그명{

속성 : 속성값;

}

2) 대상이 클래스일 경우

.클래스명{

속성 : 속성값;

}

3) 대상이 태그의 클래스일 경우

태그명.클래스명{

속성 : 속성값;

}

4) 태그의 클래스의 태그일 경우

태그명.클래스명 태그명{

속성 : 속성값;

}

클래스는 하나의 객체이기 때문에 .을 붙이는 것이라고 생각하면 편하다.

7번 라인은 ul에 대한 css를, 11번 라인은 change_back 클래스에 대한 css를 정의하였다.

19번 라인에 ul의 class를 lang_list로 정의하였고

27번 라인에 ul 태그 중 lang_list라는 클래스를 찾고 해당클래스의 li 태그를 클릭하면, 클릭한 li 태그에 대한 클래스를 change_back으로 정의하였다.

11번 라인에 change_back은 배경을 빨간색, 색을 흰색으로 만드는 것으로 정의하였기 때문에 그에 맞게 색이 변하게 된다.

그 외 사용한 속성은 아래와 같다

속성	설명
float : left	공백을 제거하고 좌측정렬
list-style : none	<li> 태그의 기호를 제거
background-color	배경색
color	글자색

3. 실행 화면

'프론트엔드 > Jquery' 카테고리의 다른 글

[JQuery] $('document').ready(function(){}) 을 쓰는 이유 (1)	2019.07.22
[JQuery] click 이벤트 사용하기 (0)	2019.07.22
[JQuery] JQuery의 정의, 사용법, CDN, 문법, 예제 (0)	2019.07.19

1. $('document').ready(function){} 란?

결론부터 말씀드리자면 'html문서의 로딩이 다 끝나면' 을 의미합니다.

문장을 해석해보면 'document'라는 객체의 준비가 끝나면 즉, 로드가 완료되면 함수를 실행한다' 입니다.

여기서 document는 하나의 html 파일을 나타내는 트리의 루트 노드 객체라고 생각하시면 편할 것 같습니다.

그렇다면 이 코드는 왜 있는것일까요? 예제를 통해 알아보면 이해가 쉽습니다.

2. 예제 및 실행화면

2.1) 예제 1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>$('document').ready(function(){})</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    <script>
        $('p').click(function(){
            $(this).hide();
        })    
    </script>
    <p>
        $('document').ready(function(){})을 쓰는 이유를 알고싶다면 클릭하세요!
    </p>
</body>
</html>

위의 예제는 p 태그를 클릭할 시 this 즉, 해당 p 태그를 hide 시키는 것입니다.

2.2) 실행화면 1

실행 결과, 클릭을 해도 태그의 내용이 사라지질 않습니다.

이유는 컴파일과 관련이 있습니다.

컴파일은 일반적으로 위에서 아래방향으로 이루어지는데, 태그가 나오기 전에 script문이 호출되었기 때문에 결과적으로 JQuery문법이 p태그를 찾지 못했고, 쿼리에 대한 함수 또한 적용시키지 못했습니다.

그렇다면 script문을 아래로 옮겨보겠습니다.

2.3) 예제 2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>$('document').ready(function(){})</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    
    <p>
        $('document').ready(function(){})을 쓰는 이유를 알고싶다면 클릭하세요!
    </p>
    <script>
        $('p').click(function(){
            $(this).hide();
        })    
    </script>
</body>
</html>

script문이 </body> 바로 위에 위치합니다.

2.4) 실행화면 2

태그에 해당하는 부분을 클릭하니 오른쪽 사진과 같이 텍스트가 사라진 것을 볼 수 있습니다.

예제 1과 다르게 script문이 태그 아래 있기때문에 JQuery 문법이 p라는 태그를 찾을 수 있고 함수를 적용시킬 수 있습니다.

HTML은 기본적으로 위에서 아래로 컴파일이 됩니다.

컴파일러가 script문을 만날 경우 로드되던 HTML 작업이 중단되고 script문을 처리합니다.

만약 script문이 길다면 페이지 로드가 중단되는 시간이 길어지고, 사용자가 웹페이지를 기다리는 시간이 길어집니다.

예를들어 눈에보이는 정보가 HTML이고 기능을 입히는 것이 script라고 한다면

1) 사용자에게 보이는 HTML 로드 -> script문 로드

2) 사용자에게 안보이는 script문 로드 -> 사용자에게 보이는 HTML 로드

이 둘 중 1번 상황이 웹 정보를 사용자가 먼저 파악할 수 있기 때문에 효율적이라는 것을 알 수 있습니다.

이 외에도 여러가지 이유때문에 script문을 </body>태그 바로 위에 위치시키는 것을 선호한다고 합니다.

하지만 예제 1처럼 script문이 위에 위치하더라고 페이지 로드가 끝난 후 script문을 실행시키도록 하는 코드가 있습니다. 그게 바로 오늘의 주제인 $('document').ready(function){}입니다.

2.5) 예제 3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>$('document').ready(function(){})</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    <script>
        $('document').ready(function(){
            $('p').click(function(){
                $(this).hide();
            })
        })    
    </script>
    <p>
        $('document').ready(function(){})을 쓰는 이유를 알고싶다면 클릭하세요!
    </p>
</body>
</html>

작성했었던 script문을 $('document').ready(function){} 코드 안에 넣어줬습니다.

이로써 위의 script문은 HTML 코드에 대한 페이지 로드가 끝난 후 실행이 되고, 태그를 찾아 함수를 적용시킬 수 있습니다.

2.6) 실행화면 3

실행화면_2와 동일한 결과를 출력합니다.

'프론트엔드 > Jquery' 카테고리의 다른 글

[JQuery] <li> 클릭 이벤트 - css와 JQuery 기본 문법 사용 (0)	2019.07.24
[JQuery] click 이벤트 사용하기 (0)	2019.07.22
[JQuery] JQuery의 정의, 사용법, CDN, 문법, 예제 (0)	2019.07.19

1. 개요

jQuery의 click 이벤트를 사용하여 어떤 태그를 클릭시 클릭했다는 것을 알 수 있게 색을 입히는 기능을 구현해보았다.

2. 사전 정보

2.1) css 문법

- id에 css 적용하기

#id{ 속성 : 속성값; }

- id의 태그에 css 적용하기

#id tag{ 속성 : 속성값; }

- id의 클래스에 css 적용하기

#id .class{ 속성 : 속성값; }

2.2) cursor 속성

- css 속성 중 하나인 cursor은 지점에 커서를 이동시켰을 경우 나타나는 커서의 모양을 지정하는 속성이다.

속성값	설명
default	기본
crosshair	십자가 표시
pointer	손가락 표시
help	물음표
wait	초시계

2.3) float 속성

- css 속성 중 하나인 '뜨다' 라는 의미를 가진 float는 '머리만 떠있는 것 같다' 처럼 어떤 내용의 content만 떠있고 나머지 여백은 없애는 속성이다.(약 뇌피셜)

속성값	설명
left	왼쪽 정렬
right	오른쪽 정렬

3. 예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>click event</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        
        <style>
            #navigation li{
                list-style: none;
                float:left;
                padding:10px;
                border: 3px bisque inset;
            }
            #navigation{
                cursor:pointer;
            }
            #navigation .selected{
                background-color:red;
                color:white;
            }
            #id
 
            #id .class{
                background-color: red;
            }
        </style>
    </head>
    <body>
            
        <ul id="navigation">
            <li>1번 list</li>
            <li>2번 list</li>
            <li>3번 list</li>
            <li>4번 list</li>
        </ul>
        <script>
                $('#navigation li').click(function(){
                    $('#navigation li').removeClass('selected');
                    $(this).addClass('selected')
                })
        </script>
    </body>
</html>

6번 라인.

CDN 방식으로 jquery를 로드한다.

7번 라인.

navigation의 li 태그

- list-style:none - 기본값인 ' · ' 을 없애기 위한 속성

- float:left - 아래로 정렬되어야 할 li 속성이지만 공백을 제거하여 li속성 옆에 바로 li속성이 붙도록 하고 왼쪽정렬 시킴

- padding:10px - 태그와 텍스트 사이의 여백

- border - 테두리 설정

15번 라인.

- cursor:pointer 커서를 댈 시 손가락 모양

38번 라인.

$('#navigation li').click(function(){내용} - 아이디가 navigation인 태그의 li 태그를 클릭 시 함수를 실행한다.

$('#navigation li').removeClass('selected') - 아이디가 navigation인 태그의 li에서 'selected' 클래스를 제거한다.

$(this).addClass('selected') - 클릭한 태그에 selected라는 클래스를 넣어준다.

4. 실행화면

'프론트엔드 > Jquery' 카테고리의 다른 글

[JQuery] <li> 클릭 이벤트 - css와 JQuery 기본 문법 사용 (0)	2019.07.24
[JQuery] $('document').ready(function(){}) 을 쓰는 이유 (1)	2019.07.22
[JQuery] JQuery의 정의, 사용법, CDN, 문법, 예제 (0)	2019.07.19

1. 정의

실무에서 자주 사용하는 자바스크립트 코드들을 쉽게 사용할 수 있도록 정의된 일종의 라이브러리이다.

자바스크립트 코드를 이용한 기능들을 쉽게 구현할수 있다. (생산성 향상)

chain 기법을 사용한다. - 명령을 '.(온점)'을 기준으로 줄줄이 나열하여 사용하는 것.

2. 사용법

JQuery를 사용하려면 JQuery를 import 해야한다.

import 하는 방법은 기본적으로 두가지이다.

- 직접 파일을 다운받는 방식

- CDN(Content Delivery Network) 방식

1) 직접 파일 다운 방식

1.1) https://jquery.com/ 접속한다.

1.2) Download JQuery 를 클릭한다.

1.3) compressed 버전을 다운받는다.

- compressed 버전 : jQuery를 압축한 형태로 크기가 적고 속도가 빠르다.

- uncompressed 버전 : JQuery의 원본파일. JQuery를 직접 수정할만큼의 복잡한 작업을 수행할 때 사용. 크기가 큼.

우리는 입문 단계이기때문에 compressed를 클릭한다.

1.4) 작업 위치에 저장

1.5) 코드 입력

1

<script src="jquery-3.4.1.min.js"></script>

2) CDN 방식

CDN이란 Content Delivery Network의 약자로 전세계의 분산된 네트워크 서버에 파일에 대한 캐시를 저장시켜 사용자와 가장 가까운 서버의 캐시를 이용해 데이터를 전달받는 것.

2.1) 코드입력

1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

3. 문법

$('.클래스명').method1().method2();

css selector 문법과 동일하며 제어하고싶은 클래스명을 '.classname' 형태로 입력해준다.

classname 이라는 클래스를 가진 모든 엘리먼트들을 제어할 수 있다.

4. 예제

1
2
3
4
5

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <div class='ssk'></div>
    <script>
        $('.ssk').html('my name is ssk'); //css select 문법 - welcome 의 클래스를 참조한다
    </script>

$('.ssk') - ssk라는 클래스의 제어권을 가져옴

.html('my name is ssk') - 해당 클래스의 html 태그에 문자열을 입력함

5. 실행화면

'프론트엔드 > Jquery' 카테고리의 다른 글

[JQuery] <li> 클릭 이벤트 - css와 JQuery 기본 문법 사용 (0)	2019.07.24
[JQuery] $('document').ready(function(){}) 을 쓰는 이유 (1)	2019.07.22
[JQuery] click 이벤트 사용하기 (0)	2019.07.22

영암사는 승경이네