[Day8] JS 8 - 모달, DOM, cookie

[Day8] JS 8 [11/29]

모달/모달리스창

 .modal{
    display:none;    
  
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left:0;
    top:0;
	    width:100%;   
	    height:100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color:rgba(0,0,0,0.4);
  }
  
   .modal-content{
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding:0;
    border:1px solid #888;
    width: 80%;
    box-shadow: 0 4px 9px 0  rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    
    animation-name:animatetop;
    animation-duration: 0.4s;
    
    -webkit-animation-name:animatetop;
    -webkit-animation-duration: 0.4s;
  }
  
   
  /* 애니메이션 효과 */
  @keyframes animatetop{
     from{ top:-300px; opacity: 0; }
     to{ top:0; opacity: 1; }
  }
  @-webkit-keyframes animatetop{
     from{ top:-300px; opacity: 0; }
     to{ top:0; opacity: 1; }
  }

  .modal-header, .modal-footer{
    background-color: #5CB85C;
    padding: 2px 16px;
    color:white;
  }
  
  .modal-body{
    padding: 2px 16px;
  }
  
 .close{
    color:white;
    float:right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close:hover, .close:focus{
    color:#000;
    text-decoration: none;
    cursor: pointer;
  }

<button id="myBtn">Open Modal</button>

<div id="myModal" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h2>Modal Header</h2>
    </div>
    <div class="modal-body">
      <p>Lorem ipsum dolor sit.</p>
      <p>Eum libero ipsum aspernatur.</p>
    </div>
    <div class="modal-footer">
      <h3>Modal Footer</h3>
    </div>    
  </div>
</div>

DOM

1. DOM ?

- Document Object Model의 약자

- 웹 페이지 -> 요청(request) -> 웹서버

<- 응답(response)

응답된 웹페이지가 로딩 되면 브라우저는 문서 객체 모델(DOM)을 생성한다.

html 웹페이지 -> [html DOM]

xml 웹페이지 -> xml DOM

1-2. DOM 생성된 트리 구조

[Document] Node(노드)

[html 태그] Root element , Node(노드)

[head 태그] [body태그]

| |

[title 태그] [a 태그 ] []href 속성]

[Text SS17 2022. 11. 29. 오전 5:01:03] Node

Node : element, attribute, text, comment 등등

2. DOM 왜 생성(사용)

- js + html 요소 변경 , 추가, 삭제

- js + html 속성 변경 , 추가, 삭제

- js + css 스타일 변경, 추가, 삭제

- 등등

3. W3C DOM 종류

- Core DOM - 모든 문서 유형에 대한 표준 DOM

- html DOM

- xml DOM

4. DOM 메서드

ㄱ. html 요소 찾는 메서드

document.getElementById()

document.getElementsByTagName( tagname )

document.getElementsByClassName( className)

document.getElementsByName( name )

document.querySelector()

document.querySelectorAll()

ㄴ. html 요소 변경

element.innerHTML

element.innerText

element.속성명

element.style.속성명

element.setAttribute()

element.getAttribute()

ㄷ. html 요소 생성, 추가, 수정, 삭제

document.createElement()

document.appendChild()

document.removeChild()

document.reomve()

document.replace( new, old ) ***

document.write("<font></font>");

ㄹ. 이벤트 처리.

element.on이벤트명 = function (){}

element.onmousemove = function (){}

ㄹ. 1998 html DOM LEVEL 1 ( 11개의 html 객체, 컬렉션 , 속성 정의)

html DOM Level 3 ( 더 많은 객체, 컬렉션, 속성 추가)

html 5 유효..

ㅁ. html 객체

document.links 컬렉션

document.images 컬렉션

document.forms

document.scripts 컬렉션 == 모든 script 요소

document.body == <body>요소

document.documentElement == <html> 요소

document.title == <title>요소

document.doctype = <!DOCTYPE> 요소

*** document.cookie == 쿠키 객체 ***

document.head == <head>요소

등등

DOM 탐색

1. html 문서의 모든 것은 Node(노드)이다.

2. Document 노드 == 전체 문서

<span style="">text</span>

요소 노드 (element node)

속성 노드 ( attribute node)

텍스트 노드( Text node)

주석 노드( comment node)

3. 모든 노드들은 관계 맺고 있다.

- 부모 : 자식

parentNode

childNode

- 형제

next[Element]Sibling 다음 형제 요소

[A E NODE] - [B A NODE] - [C E NODE]

(기준) X

nextSibling 다음 형제 노드

previousElementSibling 이전 형제 요소

previousSibling 이전 형제 노드

- 자식 노드

firstChild 첫 번째 자식 노드

lastChild 마지막 자식 노드

4. 노드 트리에서 최상위 노드 ? ( html 노드 == 루트 노드 )

루트 노드를 제외한 모든 노드들은 하나의 부모 노드를 가진다.

하나의 노드는 여러 자식 노드를 가질 수 있다.

형제 노드는 부모 노드가 같은 노드들이다.

5. 노드 들 간의 탐색할 때 자주 사용되는 속성

1) parentNode 속성 : 부모노드

2) childNodes 속성 : 모든 자식 노드 목록 nodeList

3) firstChild 속성

4) lastChild 속성

5) nextSibling 속성

6) previousSibling 속성

[각 노드 속성]

1. nodeValue 속성

1) text node : 문자열 자체

2) element node : null

3) attribute node : 속성값

2. nodeName 속성

1) text node : #text

2)element node : H1

3) attribute node : 속성명

4) comment node : #comment

3. nodeType 속성

1) text node : 3

2) element node : 1

3) attribute node : 2

4) comment node : 4

5) 루트 노드 == html 노드 : 5

6) 선언문 노드 : 6

<p id="demo" style="border:1px solid gray"></p>

document.getElementById("demo").innerHTML = 
// document.body.innerHTML;           // body 요소
document.documentElement.innerHTML;   // html 요소

document.getElementById("id02").innerHTML =
// element node, [text node], attribute node, comment node
// nodeValue 속성 ? 
// document.getElementById("id01").firstChild.nodeValue;
// document.getElementById("id01").firstChild.nodeType;
// document.getElementById("id01").firstChild.nodeName;
	   
// document.getElementById("id01").nodeValue;
// document.getElementById("id01").nodeType;
// document.getElementById("id01").nodeName;
	   
// document.getElementById("id01").childNodes.length;  // 1
	   
document.getElementById("id01").childNodes[0].nodeValue;

ex)

<!-- #div1>p#id$*2>lorem4 -->
<div id="div1">
    <p id="id1">Lorem ipsum dolor sit.</p>
	<p id="id2">Ad necessitatibus perspiciatis deleniti.</p>
</div>

  var parentNode = document.getElementById("div1");
  // alert(  parentNode.nodeName   );  //DIV  element node
  
  //  alert(  parentNode.firstChild.nodeName );  // #text
  //alert(  parentNode.firstChild.nodeValue);  // #text
  
  //  alert(   parentNode.firstElementChild.nodeName );
  
////////////////////////////////////////////////////////////////

   // 1.  DOM method 사용해서  새로운 요소 생성 추가
   // <p id="id3">hong gil dong.</p>
   var p3 = document.createElement("p");
   // p3.id = "id3";
   p3.setAttribute("id", "id3");
   
   // p3.innerHTML = "hong gil dong.";   
   // 1-2. text node 생성
   var content = "hong gil dong.";
   var textNode = document.createTextNode(content);
   p3.appendChild(textNode)
   
   // ㄱ.  appendChild()  부모의 마지막 자식으로 추가.. 메서드  
   var parentNode = document.getElementById("div1");
   //parentNode.appendChild(p3);
   
   // ㄴ. 부모의 첫 번째 자식으로 추가...  insertBefore( newelemt, before)
   // 내가 원하는 요소 앞에 추가 할 때 사용. 
   var p1 = parentNode.firstChild;
   parentNode.insertBefore( p3 , p1);
   
   // ㄹ.  p1 제거
   var p1 = document.getElementById("id1");
   // p1.remove();  // 자기자신노드 제거
   parentNode.removeChild(p1);  // 자식 노드 제거 

   // ㄷ. p1 = p3 교체
   parentNode.replaceChild(p3, p1);

ex2)

전체 선택 : <input type="checkbox" />
<table border="1"> 
  <tr>     
     <td><input type="checkbox" />1</td>
     <td>hong</td>
     <td>seoul</td>
  </tr>
  <tr>
     <td><input type="checkbox" />2</td>
     <td>admin</td>
     <td>seoul</td>
  </tr>
  <tr>
     <td><input type="checkbox"  />4</td>
     <td>kenik</td>
     <td>pohang</td>
  </tr>
</table> 
 
<button id="btn">버튼</button>

<p id="demo">
 1 / hong / seoul
</p>

document.getElementById("btn").onclick = function(){
	// 체크된 체크박스 
	var ckbs = document.querySelectorAll("table input[type=checkbox]");
	for (let ckb of ckbs) {
		if( ckb.checked ){
			// DOM 탐색           ckb 요소노드 의 뒤 형제 노드 1 : 텍스트 노드
			//  ckb.nextElementSibling  X
		    // alert( 	ckb.nextSibling.nodeName +" / " + ckb.nextSibling.nodeValue );
		    var no = ckb.nextSibling.nodeValue ;
		    // alert( ckb.parentNode.nextElementSibling.innerHTML ) ;  // TD
		    // alert(  ckb.parentNode.nextElementSibling.firstChild.nodeName );
		    var name = ckb.parentNode.nextElementSibling.firstChild.nodeValue;		    
		    var loc = ckb.parentNode.nextElementSibling.nextElementSibling.firstChild.nodeValue;
		    
		    console.log( no + "/ " + name + " / " + loc  );
		    
		} // if
	} // for
}

공지사항

  *{
      box-sizing: border-box;
   }
    .alert{
      padding: 20px;
      background-color: #f44336;
      color:white;
      opacity: 1; 
      transition:opacity 0.6s, height 0.6s;
      margin-bottom: 15px;
   }
   
    .closebtn{
     margin-left: 15px;
     color:white;
     font-weight: bold;
     float:right;
     font-size: 22px;
     line-height: 20px;
     cursor:pointer;
     transition:0.3s;
   }
   .closebtn:hover{
      color:black;
   }
   
   .alert.success{     background-color: #4caf50;   }
   .alert.info{      background-color: #2196f3;   }
   .alert.warning{     background-color: #ff9800;   }

<h2>알림(공지사항)</h2>
공지사항 타입 : 
<select name="type" id="type">
   <option>type 없음</option>
   <option>success</option>
   <option>warning</option>
   <option>info</option>
</select>
<br>
내용  : <input type="text" />
<button>공지사항 추가</button>
<hr>

    window.onload = function (){
    	// [] 배열
    	//  {} 객체
    	var data =
    		     [
    		             {type:"success", message:"Lorem ipsum dolor sit amet, consectetur adipisicing."},
    		             {type:"warning", message:"Lorem ipsum dolor sit amet, consectetur adipisicing."},
    		             {type:"info", message:"Lorem ipsum dolor sit amet, consectetur adipisicing."},
    		             {type:"success", message:"Lorem ipsum dolor sit amet, consectetur adipisicing."}
    	         ];
    	/* DOM 사용해서 요소 생성 추가. 
    	<div class="alert info">
    	  <span class="closebtn">&times;</span>
    	  <strong>Info!</strong>
    	  Lorem ipsum dolor sit amet, consectetur adipisicing.
    	</div> 
    	 */
    	 for (var i = 0; i < data.length; i++) {
    		 
    		 var type =  data[i].type;
    		 var message = data[i].message;
    		 
    		 // <div class="alert info"></div>
    		 var alertDiv = document.createElement("div");
    		 alertDiv.classList.add( "alert"  );
    		 alertDiv.classList.add( type  );
    		 
    		 // <span class="closebtn">&times;</span>
    		 var spanbtn = document.createElement("span");
    		 spanbtn.className = "closebtn";
    		 //  document.createTextNode(content)
    		 spanbtn.innerHTML = "&times;";
    		 spanbtn.onclick = function (){
    			 // x  해당 알림창 닫기.
    			 // this.parentNode;
    			 // DOM 탐색~
    			 var div =  this.parentElement;
    			 // div.remove();
    			 div.style.opacity = "0";
    			 setTimeout( function (){
    				 div.style.display = "none";
    			 }, 600);
    		 } // onclick
    		 alertDiv.appendChild(spanbtn);
    		 
    		 
    		// <strong>Info!</strong>
    		 var strong = document.createElement("strong");  
    		 strong.innerHTML =  type.toUpperCase();
    		 alertDiv.appendChild(strong);
    		 
    		 // alertDiv.innerHTML = message;
    		 var content =  document.createTextNode( message );
    		 alertDiv.appendChild(content);
    		 
    		 // hr 뒤에 추가
    		 var hr =  document.querySelector("hr");
    		 // insertBefor();
    		 document.body.insertBefore(alertDiv,   hr.nextElementSibling  )
		} // for  
    } // onload
  
    
    document.querySelector("button").onclick = function(){
    	  var type = document.querySelector("#type").value;
    	  var message = document.querySelector("input[type=text]").value;
    	  
    	  
    	// <div class="alert info"></div>
 		 var alertDiv = document.createElement("div");
 		 alertDiv.classList.add( "alert"  );
 		 alertDiv.classList.add( type  );
 		 
 		 // <span class="closebtn">&times;</span>
 		 var spanbtn = document.createElement("span");
 		 spanbtn.className = "closebtn";
 		 //  document.createTextNode(content)
 		 spanbtn.innerHTML = "&times;";
 		 spanbtn.onclick = function (){
 			// this.parentNode;
			 var div =  this.parentElement;
 			// div.remove();
			 div.style.opacity = "0";
			 setTimeout( function (){
				 
				 div.style.display = "none";
			 }, 600);
 		 } // onclick
 		 alertDiv.appendChild(spanbtn);
 		 
 		 
 		// <strong>Info!</strong>
 		 var strong = document.createElement("strong");  
 		 strong.innerHTML =  type.toUpperCase();
 		 alertDiv.appendChild(strong);
 		 
 		 // alertDiv.innerHTML = message;
 		 var content =  document.createTextNode( message );
 		 alertDiv.appendChild(content);
 		 
 		 // hr 뒤에 추가
 		 var hr =  document.querySelector("hr");
 		 // insertBefor();
 		 document.body.insertBefore(alertDiv,   hr.nextElementSibling  )
    }

[ js 쿠키( Cookie ) ]

1. 본인 컴퓨터(클라이언트)에 작은 텍스트파일로 저장되는 데이터를 쿠키라고 한다.

2. 한라인의 문자열

"쿠키명=쿠키값;쿠키명=쿠키값;name=admin;쿠키명=쿠키값;"" (20개 까지 저장)

2-2. 문자열 파싱...

3. 브라우저 쿠키 사용 허용 여부 결정

4. js 쿠키 사용 방법

"document.cookie 속성"을사용해서 쿠키값을 저장/ 읽기.

5. 쿠키 형식

name="nameValue"; expires="expireDate"; path="pathHolders"; domain="domainName"; secure

쿠키명=쿠키값;_만료시점=날짜;_path=/;_도메인=localhost; 보안처리

상태관리 - [ 웹 페이지 바뀔 때 마다 상태 (인증, 권한) 어떻게 관리. ]

아이디

비밀번호

[로그인 ] -> 서버 인증

main.html <-

서버 상태 관리 : 오라클, 세션(Session)

클라이언트 상태 관리 : 쿠키 , hidden 태그

1) 게시판

2) 보안처리 ( 인증, 권한 ) 쿠키/세션

-------------------

1. 쿠키 생성

2. 쿠키 삭제

3. 쿠키 확인

4. 쿠키 수정( 다시 같은 쿠키명으로 생성 )

쿠키 생성 2가지 - 클라이언트 ( 컴퓨터 -텍스트 파일 저장)

1) 클라이언트 js 쿠키 생성, 사용 방법

2) 서버 jsp 쿠키 생성, 사용 방법 => 응답 + 쿠키생성

document.cookie 속성 : 저장, 읽기.

cookie.js

function setCookie( cname, cvalue,  expiresdays) {
    	var now = new Date();   
    	now.setDate(  now.getDate() + expiresdays );
		 document.cookie =  cname +  "=" + escape(cvalue) + "; expires=" + now.toUTCString() ;
	}
	
	function getAllCookies() { 
		var cookies =  document.cookie; 
		return  cookies;
	}
	 
	function getCookie( cname ) {
		var cvalue = null;		
		var cookies =  document.cookie; 
		
		var cookieArray = cookies.split( /;\s/ );   // string or regexp
		for (var i = 0; i < cookieArray.length; i++) {
			 var cnv = cookieArray[i].split("="); 
			  if(  cname == cnv[0] ){
				  var cvalue =  cnv[1];
				  return   unescape( cvalue );
			  }
		}
		
		return cvalue;
		
	}
	function delCookie( cname ) { 	      
    	var now = new Date();   
    	now.setDate(  now.getDate() - 10 ); 
		 document.cookie =  cname +  "=; expires=" + now.toUTCString() ;  
	}

쿠키이름 :  <input type="text" id="cookieName"><br> 
쿠키값 :  <input type="text" id="cookieValue"><br>   <!-- 홍길동  => escape( ASCII 인코딩 저장  ) -->
<br>

<button onclick="setCookie();">쿠키 생성(수정)</button>
<button onclick="getAllCookies();">모든 쿠키 확인</button>
<button onclick="getCookie();">쿠키 확인</button>
<button onclick="delCookie();">쿠키 삭제</button>

<p id="demo"></p>

    function setCookie() {
    	var cname = document.getElementById("cookieName").value;
    	var cvalue = document.getElementById("cookieValue").value;
    	
    	var now = new Date();  // 오늘날짜 + 10 일 추가
    	now.setDate(  now.getDate() + 10 );
    	// console.log( now.toLocaleString() );
    	
    	// 쿠키이름="쿠키값"; 만료시점="날짜"; 경로="/"; 도메인="도메인명"; 보안(true/false)
		 document.cookie =  cname +  "=" + escape(cvalue) + "; expires=" + now.toUTCString() ;  //  문자열 형식
		 
		 document.getElementById("cookieName").value = "";
		 document.getElementById("cookieValue").value = "";
		 
		 // ( 기억 ) : 쿠키가 만들어질때 도메인(path)경로에있는 어떤 파일 요청일어날때 해당 쿠키를 서버에 전달
		 // 브라우저  [localhost/webPro/javascript/days09] URL 경로  요청파일     -> 요청 ->   서버
		 //                        쿠키값 서버 전송 X                           자동  전달
		 //                        name, age                                          전달된 쿠키값을 사용해서 서버 처리.( JSP/Servlet )
	}
	function getAllCookies() {
		// name=admin; age=20
		var cookies =  document.cookie;
		
		document.getElementById("demo").innerHTML = cookies;
	}
	
	function getCookie() {
		var cname = document.getElementById("cookieName").value;
		// "name=admin; age=20"
		var cookies =  document.cookie;
		//  cookies  문자열 파싱
		var cookieArray = cookies.split(";");   // string or regexp
		for (var i = 0; i < cookieArray.length; i++) {
			 var cnv = cookieArray[i].split("=");
			  // var cname =  cnv[0]; 
			  if(  cname == cnv[0].trim() ){
				  var cvalue =  cnv[1];
				  document.getElementById("cookieValue").value =  unescape( cvalue );
				  break;
			  }
		}
		
	}
	function delCookie() {
	     // 만료시점을 지정하지 않으면 브라우저 닫으면 쿠키 자동 삭제.
	     // 같은 쿠키이름으로 쿠키 생성 +  만료시점을 과거로 설정
	     
	     var cname = document.getElementById("cookieName").value;
    	
    	var now = new Date();  // 오늘날짜 + 10 일 추가
    	now.setDate(  now.getDate() - 10 );
    	// console.log( now.toLocaleString() );
    	
    	// 쿠키이름="쿠키값"; 만료시점="날짜"; 경로="/"; 도메인="도메인명"; 보안(true/false)
		 document.cookie =  cname +  "=; expires=" + now.toUTCString() ;  //  문자열 형식
		 
	}

escape 함수

str 1  :  <input type="text" id="str1"  value="홍길동"><br> 
str 2 :  <input type="text" id="str2"><br> 
<br>

<button onclick="escape_test();"> escape()</button>
<button onclick="unescape_test();"> unescape()</button>

  function escape_test(){
	   var result =  escape( document.getElementById("str1").value ); // 한글 ->  ASCII
	   document.getElementById("str2").value= result;
	   // %uD64D%uAE38%uB3D9
  }
  
  function unescape_test(){
	   var result =  unescape( document.getElementById("str2").value ); // 한글 ->  ASCII
	   document.getElementById("str1").value= result;    
 }

쿠키 예제

js 클래스 상속 X

js 그래픽 X

js 웹 API X

js Ajax + jquery Ajax O

js JSON O

웹페이지 + 설정( 글크기, 폰트 등등 ) + 상태 유지( 저장 ) 서버(DB X, 세션 X ), 클라이언트 상태관린( 쿠키 ) O

배경 이미지 : 3가지 중 에 하나를 선택 -> 쿠키 배경이미지 저장 + 만료시점

웹페이지 요청 - 마지막 설정한 배경이미지로 설정...

쿠키이름 : bgimg

쿠키값 : 이미지이름

   <table border="1" style="background-color: white;width:400px;margin:0 auto">
   <tr>
     <td><img src="../images/item01.gif" alt="" /></td>
     <td><img src="../images/item02.gif" alt="" /></td>
     <td><img src="../images/item03.gif" alt="" /></td>
  </tr>
  <tr>
     <td><input type="radio" checked="checked"  name="bgImages" id="item01" value="item01" />item01</td>
     <td><input type="radio" name="bgImages"  id="item02" value="item02" />item02</td>
     <td><input type="radio" name="bgImages" id="item03" value="item03" />item03</td>
  </tr>
  </table>

   var cname = "bgimg";
   var cvalue = "item01";
   var expiresdays = 10;
   
   window.onload = function (){
	   
	   // 1. 쿠키이름 : bgimg에 저장된 쿠키값(item03)을 읽어와서
	   
	   cvalue =  getCookie(cname);
       // null              item01
       if( cvalue ){   // 쿠키가 존재 O 
            //         ㄱ. 배경이미지 쿠키값의 이미지로 설정
            document.body.style.backgroundImage = "url(../images/"+ cvalue+".gif)";
    	   //         ㄴ. 라디오버튼  == 쿠키값     체크...설정
    	   document.getElementById(cvalue).checked = "checked";
       }else{  // null -> false  쿠키가 존재 X
    	   document.body.style.backgroundImage = "url(../images/item01.gif)";
    	   document.getElementById("item01").checked = "checked";
       }
	   
	   
	   // 2. 라디오 버튼을 클릭할 때.
	   //     ㄱ. 체크된 라디오 버튼 == value="item02" 값을 쿠키로 저장	   
	   //      ㄴ. 배경이미지 == value="item02" 값으로 설정
	   var rdbs = document.getElementsByName("bgImages");
	   for (let rdb of rdbs) {
		  rdb.onclick = function (){
			    // ㄱ. 
			    cvalue =  event.srcElement.value;
			    setCookie(cname, cvalue, expiresdays);
			    // ㄴ.
			    document.body.style.backgroundImage = "url(../images/"+ cvalue+".gif)";
		  }
	  } // 
	   
   } // onload

저작자표시

'👨‍💻 Web Development > HTML | CSS | JS | jQuery' 카테고리의 다른 글

[Day2] jQuery 2 - 효과, 콜백함수, selector(선택자) (0)	2022.12.04
[Day1] jQuery 1 - 개요, 클릭이벤트 등록 (0)	2022.11.30
[Day7] JS 7 - 클로저, dragdrop, 컬렉션, BOM, 팝업창, 모달창 (0)	2022.11.29
[Day6] JS 6 - set, map, 자료형, 예외처리, this, 클래스, 모듈, 객체, 함수, 스크롤, 이벤트버블링 (0)	2022.11.25
[Day5] JS 5 - 주민번호, 달력, 슬라이드쇼, 수학객체, 부울, 제어문, scrollheight (0)	2022.11.24

[Day8] JS 8 - 모달, DOM, cookie

[Day8] JS 8 [11/29]

'👨‍💻 Web Development > HTML | CSS | JS | jQuery' 카테고리의 다른 글

전체 카테고리

블로그 인기글

티스토리툴바

[Day8] JS 8 [11/29]

'👨‍💻 Web Development > HTML | CSS | JS | jQuery' 카테고리의 다른 글

전체 카테고리

최근 글

최근댓글

블로그 인기글

티스토리툴바