웹 프론트 엔드 강의(5)

JQuery

자바 프레임워크에서 JQuery를 많이 씀. 그래서 JQuery를 배워야 다른 프레임워크를 이해하는 데 편함.

JQuery는 자바스크립트로 이루어진 질의어라고 생각하면 쉬움.

이 질의라는거는 내가 원하는 노드를 찾는 라이브러리라고 생각하면 쉬움.

html은 복잡한 태그들로 이루어져 있기에 그것을 효과적으로 찾는 것이 필요

Jquery를 CDM방식으로 사용하는 방법과 다운로드 받아 사용하는 방법이 있음.

CDM방식은 따로 링크를 달아서 그 링크에 접속하면 바로 설치되는 방식이며, 다운로드 방식은 미리 우리가 다운받고 그 파일만 상대주소로 기입하는 방식이다.

자바 스크립트에서는 $도 사용가능함. C언어에서 gil_hyun 여기서 언더바를 써서 변수지정이 가능하듯이.

여기선 달러도 사용이 가능하다.

쉽게말하면 $=jQuery라고 생각하면됨. JQuery라는 함수 이름으로 생각하셈.

Jquery를 통해 자바 스크립트를 간략화 가능.

시간이 있으면 Jquery코드를 하나하나 분석하는 것도 웹프론트엔드 개발자가 되기 위해 좋은 과정임.

$("p").addCalss("isCool"); 랑 Document.getElemtByTag("p").setAttribute("class","iscool"); 이랑 같은 의미

이렇게 JQuery를 통해 $를 사용하여 자바스크립트를 간략화 가능하다.

<html>
    <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  
    </head>
<style>
     .blue{color:blue}
</style>
   
    <body>
      <p>안녕하세요</p>
    <div class='b'>block1</div>
    <div class="a">block2</div>
    <div>block3</div>
    <p>Hello~~</p>
    </body>
    
    
    <script >
       $("p").addClass("blue");
    $("p").css("color","red");
    $("p").css("font-size","150%");
    $("p").css("background-color", "gray");
    $("div.a").show();

     
</script>
</html>

여기보면

<style>
     .blue{color:blue}
</style>
 <script>
       $("p").addClass("blue");
 </script>

이렇게 style태그에서 따로 class를 지정해 색을 지정해 줄 수도 있지만

<script>
$("p").css("color","red");
</script>

이처럼 그냥 스크립트 태그 안에서 JQuery를 통해 한줄만 써서 색상을 지정해 줄 수 있다.

$("p").css("font-size","150%"); : 글자 폰트 크게하기

 <script >
$("p").addClass("blue");
    $("p").css("color","red");
    $("p").css("font-size","150%");
    $("p").css("background-color", "gray");
 </script >

이 부분을 간략화 시킬 수도 있는데

<script >
       $("p").addClass("blue")
             .css("color","red")
             .css("font-size","150%")
             .css("background-color", "gray");
    </script>

이렇게 간략화 할 수 있다.

p태그에 해당하는 글자를 파란색으로 지정하려했지만 후에 다시 빨간색으로 지정하였기에 빨간색으로 출력되고,

사이즈는 기존크기의 150%한 결과가 출력되며 글자뒤의 백그라운드 컬러를 회색으로 지정한 것이다.

결과는 이렇게 나온다.

block2만 안보이게 하기

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
 <script src="http://code.jquery.com/jquery-1.8.2.js"></script>    
<style>
     .blue{color:blue}
</style>

 <button onclick='$("div.a").show();'>show</button>
 <button onclick='$("div.a").hide();'>hide</button>
</head>


    
<body>
    <p>안녕하세요</p>
    <div class='b'>block1</div>
    <div class="a">block2</div>
    <div>block3</div>
    <p>Hello~~</p>
    
 <script>
    $("p").addClass("blue");
    $("p").css("color","red");
    $("p").css("font-size","150%");
     $("p").css("background-color", "gray");
     $("div.a").hide();
      $("div.a").show();
     $("div.b").css("background-color", "gray");
     
     
 </script>

    
</body>

hide를 누르면 block2가 사라지고, show를 누르면 block2가 다시 나타난다.

block1의 백그라운드 색상을 회색으로 하였다.

이순신을 초록색 글자로 홍길동으로 출력하기

<html>
    <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  
 

</head>


    
<body>
  
    <div id=name>이순신</div>
   
    
 <script>
  
      $("#name").text("홍길동");
      $("#name").html("<font color=green>홍길동</font>");
     
 </script>

    
</body>

div 태그에 id를 name으로 지정해주고 이순신을 써주었고.

JQuery로 id가 name인 문자를 홍길동으로 바꾸었고

JQuery로 id가 name인 html안의 태그에서 글자 색깔을 초록색으로 바꾸어주었다.

사실 $("#name").text("홍길동");을 써주지 않고,

$("#name").html("<font color=green>이순신</font>"); 이것만 써줘도 초록색 글자의 홍길동으로 바뀐다.

table 색상 설정

<html>
    <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  
 

</head>


    
<body>
  
<table border=1>
        <tr><th>이름</th><th>혈액형</th><th>지역</th></tr>
        <tr><td>강민수</td><td>AB형</td><td>서울특별시 송파구</td></tr>
        <tr><td>구지연</td><td>B형</td><td>미국 캘리포니아</td></tr>
        <tr><td>김미화</td><td>AB형</td><td>미국 메사추세츠</td></tr>
        <tr><td>김선화</td><td>O형</td><td>서울 강서구</td></tr>
        <tr><td>남기주</td><td>A형</td><td>서울 노량진구</td></tr>
        <tr><td>윤하린</td><td>B형</td><td>서울 용산구</td></tr>
</table>
   
    
 <script>
   $('tr:odd').css('background', 'white');
    $('tr:even').css('background', 'gray');
    $('tr:first').css('background', '#000000').css('color', '#FFFFFF');
 </script>

    
</body>

table 태그를 통해 테이블을 만들어주었고

JQuery를 통해 색상을 지정해 주었다.

홀수는 흰색, 짝수는 회색, 이때 0,1,2,3,4순이기 때문에 first는 FFFFF로 검은색.

색이름을 지정할 때 저렇게 색깔의 명칭을 영어로 표시해도 되지만 #000000처럼 16진수로 표기도 가능하다.

참고로 html-color-codes.info/Korean/ 사이트에서 자신이 원하는 색상의 16진수 값을 확인할 수 있다.

아무튼 실행시키면

다음과 같이 나온다.

<html>
    <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  
 

</head>


    
<body>
  
<table border=1>
        <tr><th>이름</th><th>혈액형</th><th>지역</th></tr>
        <tr><td>강민수</td><td>AB형</td><td>서울특별시 송파구</td></tr>
        <tr><td>구지연</td><td>B형</td><td>미국 캘리포니아</td></tr>
        <tr><td>김미화</td><td>AB형</td><td>미국 메사추세츠</td></tr>
        <tr><td>김선화</td><td>O형</td><td>서울 강서구</td></tr>
        <tr><td>남기주</td><td>A형</td><td>서울 노량진구</td></tr>
        <tr><td>윤하린</td><td>B형</td><td>서울 용산구</td></tr>
</table>

  <table border=1>
        <tr><th>이름</th><th>혈액형</th><th>지역</th></tr>
        <tr><td>강민수</td><td>AB형</td><td>서울특별시 송파구</td></tr>
        <tr><td>구지연</td><td>B형</td><td>미국 캘리포니아</td></tr>
        <tr><td>김미화</td><td>AB형</td><td>미국 메사추세츠</td></tr>
        <tr><td>김선화</td><td>O형</td><td>서울 강서구</td></tr>
        <tr><td>남기주</td><td>A형</td><td>서울 노량진구</td></tr>
        <tr><td>윤하린</td><td>B형</td><td>서울 용산구</td></tr>
</table>
   
    
 <script>
   $('tr:odd').css('background', 'white');
    $('tr:even').css('background', 'gray');
    $('tr:first').css('background', '#000000').css('color', '#FFFFFF');
 </script>

    
</body>

만약 이렇게 해주면 어떻게 될까?

이렇게 나온다 . 먼가 어색하다. table의 이름을 지정해주지 않으면 table을 또 썼을 때 우리가 보기에는 구분되어있지만

html은 합쳐서 인식하게 된다.

<html>
    <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  
 

</head>


    
<body>
  
  <table id="table1" border=1>
        <tr><th>이름</th><th>혈액형</th><th>지역</th></tr>
        <tr><td>강민수</td><td>AB형</td><td>서울특별시 송파구</td></tr>
        <tr><td>구지연</td><td>B형</td><td>미국 캘리포니아</td></tr>
        <tr><td>김미화</td><td>AB형</td><td>미국 메사추세츠</td></tr>
        <tr><td>김선화</td><td>O형</td><td>서울 강서구</td></tr>
        <tr><td>남기주</td><td>A형</td><td>서울 노량진구</td></tr>
        <tr><td>윤하린</td><td>B형</td><td>서울 용산구</td></tr>
</table>
   
     <table id="table2" border=1>
        <tr><th>이름</th><th>혈액형</th><th>지역</th></tr>
        <tr><td>강민수</td><td>AB형</td><td>서울특별시 송파구</td></tr>
        <tr><td>구지연</td><td>B형</td><td>미국 캘리포니아</td></tr>
        <tr><td>김미화</td><td>AB형</td><td>미국 메사추세츠</td></tr>
        <tr><td>김선화</td><td>O형</td><td>서울 강서구</td></tr>
        <tr><td>남기주</td><td>A형</td><td>서울 노량진구</td></tr>
        <tr><td>윤하린</td><td>B형</td><td>서울 용산구</td></tr>
    </table>
    
 <script>
     $('#table1 tr:odd').css('background', 'white');
    $('#table1 tr:even').css('background', 'gray');
    $('#table1 tr:first').css('background', '#000000').css('color', '#FFFFFF');
     
      $('#table2 tr:odd').css('background', 'white');
    $('#table2 tr:even').css('background', 'gray');
    $('#table2 tr:first').css('background', '#000000').css('color', '#FFFFFF');
 </script>

    
</body>

따라서 이렇게 바꾸어 주어야한다. table의 id를 따로 지정해주고 따로 언급하여 지정해주어야 정상적으로 나온다.

'기술노트 > 웹프론트엔드' 카테고리의 다른 글

웹 프론트 엔드 강의(7) (0)	2020.12.29
웹 프론트 엔드 강의(6) (0)	2020.12.28
웹 프론트엔드 강의(4) (0)	2020.12.25
웹 프론트엔드 강의(3) (0)	2020.12.25
파일질라 설치 (0)	2020.12.25

JQuery

block2만 안보이게 하기

이순신을 초록색 글자로 홍길동으로 출력하기

table 색상 설정

'기술노트 > 웹프론트엔드' 카테고리의 다른 글

티스토리툴바