의견.png

"제이쿼리"의 두 판 사이의 차이

위키원
이동: 둘러보기, 검색
(특징)
(기본 태그)
14번째 줄: 14번째 줄:
 
제이쿼리는 HTML의 클라이언트 사이드 스크립트 언어를 단순화하도록 설계된 브라우저 호환성이 있는 자바스크립트 라이브러리이다. 또한 빠르고 단순하고 기능이 많으며, 다양한 브라우저에서 작동하는 사용하기 쉬운 API를 사용하면 HTML 문서 탐색 및 조작, 이벤트 처리, 애니메이션 및 [[Ajax]]를 더욱 간단하게 만들 수 있다. 수많은 라이브러리 중에서도 제이쿼리가 특이 많이 사용되는 이유는 다음과 같다.<ref>〈https://jquery.com/]〉 , 《jQuery》</ref>
 
제이쿼리는 HTML의 클라이언트 사이드 스크립트 언어를 단순화하도록 설계된 브라우저 호환성이 있는 자바스크립트 라이브러리이다. 또한 빠르고 단순하고 기능이 많으며, 다양한 브라우저에서 작동하는 사용하기 쉬운 API를 사용하면 HTML 문서 탐색 및 조작, 이벤트 처리, 애니메이션 및 [[Ajax]]를 더욱 간단하게 만들 수 있다. 수많은 라이브러리 중에서도 제이쿼리가 특이 많이 사용되는 이유는 다음과 같다.<ref>〈https://jquery.com/]〉 , 《jQuery》</ref>
  
==기본 태그==
+
:{|border=2 width=1200
:{|border=2 width=600
 
 
|+<big></big>
 
|+<big></big>
 
!align=center|특징
 
!align=center|특징
26번째 줄: 25번째 줄:
 
|align=center|head
 
|align=center|head
 
|align=center|<head>~</head>
 
|align=center|<head>~</head>
|align=center|머리말
 
 
|-
 
|-
 
|align=center|meta
 
|align=center|meta
 
|align=center|<meta~/>
 
|align=center|<meta~/>
|align=center|정보에 대한 정보를 알려줌. 빈태그, self close
 
 
|-
 
|-
 
|align=center|title
 
|align=center|title
 
|align=center|<title>~</title>
 
|align=center|<title>~</title>
|align=center|문서 제목
 
 
|-
 
|-
 
|align=center|body
 
|align=center|body
 
|align=center|<body>~</body>
 
|align=center|<body>~</body>
|align=center|본문
 
 
|-
 
|-
 
|align=center|P
 
|align=center|P
 
|align=center|〈P〉-〈/P〉
 
|align=center|〈P〉-〈/P〉
|align=center|Paragraph의 P:단락,문단,절
 
 
|-
 
|-
 
|align=center|h1~h6
 
|align=center|h1~h6
 
|align=center|〈h1〉-〈h6〉
 
|align=center|〈h1〉-〈h6〉
|align=center|제목,글자 크기,중요도 우선순
 
 
|-
 
|-
 
|align=center|hr
 
|align=center|hr
 
|align=center|〈hr〉
 
|align=center|〈hr〉
|align=center|단락 구분, 문서의 구분선
 
|-
 
|align=center|주석 태그
 
|align=center|〈!-- --〉
 
|align=center|주석
 
|-
 
|align=center|br
 
|align=center|<br />
 
|align=center|줄바꿈을 해줄때
 
|-
 
|align=center|span
 
|align=center|〈span>~〈/span>
 
|align=center|inline요소, 줄바꿈이 안되고, 폭 , 높이 적용도 안됨. 인라인요소들을 그룹화 하는데 사용되며, 브라우저에 레이아웃 변경은 되지 않는다.
 
|-
 
|align=center|table
 
|align=center|〈table>~〈/table>
 
|align=center| 표, border, cellpadding, cellspacing, width, summary의 속성값이 있음. 세로정렬이 자동. 게시판에 많이 이용
 
|-
 
|align=center|caption
 
|align=center|<caption〉~</caption〉
 
|align=center|summary 역할. css에서 안보이게 함. 스크린리더기에 활용
 
|-
 
|align=center|colgroup
 
|align=center|<colgroup>~</colgroup>
 
|align=center| 열 그룹. 구조적인 그룹화를 위해 사용됨
 
|-
 
|align=center|col
 
|align=center|<col...>
 
|align=center| 빈태그 이지만 유일하게 self colse가 없다. 열의속성값과 스타일을 지정
 
|-
 
|align=center|thead
 
|align=center|<thead>~</thead>
 
|align=center| 테이블 헤더 행 그룹
 
|-
 
|align=center|tfoot
 
|align=center|<tfoot>~</tfoot>
 
|align=center| 테이블 푸터행 그룹. 계산시 합계 부분에 많이 이용, tbody 위에 올 수 있다. 화면상에서는 아래에 위치
 
|-
 
|align=center|th
 
|align=center|<th>~</th>
 
|align=center|셀 제목으로 지정하여 강조되게 표시하는 태그. table header, inline요소
 
|-
 
|align=center|tr
 
|align=center|<tr>~</tr>
 
|align=center|테이블 내의 한 행을 정의하는 태그. tabel row
 
|-
 
|align=center|td
 
|align=center|<td>~</td>
 
|align=center|각 행에 포함된 셀을 만들때 사용되는 태그. table data, td의 개수는 th의 개수와 일치 해야한다. inline요소
 
|-
 
|align=center|ol
 
|align=center|〈ol>~〈/ol〉
 
|align=center|ordered list. 순서가 있다. 앞에 넘버링이 붙는다.
 
|-
 
|align=center|ul
 
|align=center|〈ul>~〈/ul〉
 
|align=center|unordered list. 순서가 없다. 앞에 기호가 붙는다.
 
|-
 
|align=center|li
 
|align=center|〈li>~〈/li〉
 
|align=center|list. ol과 ul의 세부 항목. ol과 ul의 자식으로 li만 올 수 있다.
 
|-
 
|align=center|dl
 
|align=center|〈dl>~〈/dl〉
 
|align=center|definition list(정의 목록)
 
|-
 
|align=center|dt
 
|align=center|〈dt>~〈/dt〉
 
|align=center|항목 definition term
 
|-
 
|align=center|dd
 
|align=center|〈dd>~〈/dd〉
 
|align=center|설명 definition description
 
|-
 
|align=center|a
 
|align=center|<a href="" target="">daum</a>
 
|align=center|anchor. 링크 연결. inline요소
 
|-
 
|align=center|img
 
|align=center|<img src="" alt="" />
 
|align=center|이미지 가져오기, inline요소
 
|-
 
|align=center|form
 
|align=center|<form>name="numberJoin" action="aa.html"method="post"</form>
 
|align=center|입력을 받음. 게시판, 설문조사, 회원등록 등 폼 속성
 
|-
 
|align=center|fieldset
 
|align=center|<fieldset>...</fieldset>
 
|align=center|form 안에 논리적으로 묶인 구성요소를 그룹으로 묶을 때. 사각형 모양으로 표시
 
|-
 
|align=center|legend
 
|align=center|<legend>~</legend>
 
|align=center|fieldset에 대한 설명. 여기서의 legend는 설명(caption), 범례의 의미와 가깝다.
 
|-
 
|align=center|label
 
|align=center|<label>~</label>
 
|align=center| 리더기가 읽어주는 부분(웹접근성)에서 중요한 요소, 다양한 폼 서식의 설명.
 
|-
 
|align=center|input
 
|align=center|<input〉~〈/input>
 
|align=center|입력 상자.
 
|-
 
|align=center|textarea
 
|align=center|<textarea="say" cols="10" rows="2">~ </textarea>
 
|align=center|긴 글 작성시 사용. 여러 줄의 텍스트를 입력할 수 있는 상자를 만듦.
 
|-
 
|align=center|select / option
 
|align=center|<select name="email"> <option value="1">~ </option>
 
<option value="2'">~</option>
 
<option value="3'">~</option> </select>
 
|align=center|선택메뉴(드롭다운 리스트), select 요소 내의 태그에 목록에 있는 사용 가능한 옵션을 정의한다.
 
|-
 
|align=center|button
 
|align=center|<button> </button>
 
|align=center|버튼생성, submit, reset, button. 유일하게 css값을 가지고 있는 태그, css초기화필요
 
 
|}
 
|}
  

2019년 7월 22일 (월) 17:15 판

제이쿼리(jQuery)란 HTML 문서에 삽입하여 사용할 수 있는 자바스크립트 라이브러리를 말한다. 제이쿼리는 웹 사이트에 자바스크립트를 더욱 손쉽게 활용할 수 있게 해주며, 짧고 단순한 코드로 웹 페이지에 다양한 효과나 연출을 적용할 수 있다.

제이쿼리(jQuery)

개요

등장배경

제이쿼리는 미국 넷스케이프(Netscape)의 브렌든 아이크(Brendan Eich)가 개발한 스크립트 프로그래밍 언어자바스크립트(JavaScript)를 웹사이트에서 더욱 손쉽게 활용하기 위해 만들어진 오픈 소스 기반의 라이브러리이다. 2006년 1월 16일 웹 디자이너인 존 레식(John Resig)가 뉴욕 시 바캠프(Barcamp NYC)에서 공식적으로 소개했으며, 현재는 jQuery Team이라는 개발자 그룹이 jQuery Foundation을 통해 개발과 유지 보수를 담당하고 있다.[1]

역사

특징

제이쿼리는 HTML의 클라이언트 사이드 스크립트 언어를 단순화하도록 설계된 브라우저 호환성이 있는 자바스크립트 라이브러리이다. 또한 빠르고 단순하고 기능이 많으며, 다양한 브라우저에서 작동하는 사용하기 쉬운 API를 사용하면 HTML 문서 탐색 및 조작, 이벤트 처리, 애니메이션 및 Ajax를 더욱 간단하게 만들 수 있다. 수많은 라이브러리 중에서도 제이쿼리가 특이 많이 사용되는 이유는 다음과 같다.[2]

특징 설명
단순화 * 불필요한 코드를 줄이고 간결한 형식으로 단순화시킴으로써, 코드 가독성과 개발 효율성을 크게 증가 시켰다.
  • 자바스크립트보다 코드가 간결하여 학습이 쉽다.
head <head>~</head>
meta <meta~/>
title <title>~</title>
body <body>~</body>
P 〈P〉-〈/P〉
h1~h6 〈h1〉-〈h6〉
hr 〈hr〉


장점

  1. 제이쿼리는 주요 웹 브라우저의 구버전을 포함한 대부분의 브라우저에서 지원된다.
  2. HTML DOM을 손쉽게 조작할 수 있으며, CSS 스타일도 간단히 적용할 수 있다.
  3. 애니메이션 효과나 대화형 처리를 간단하게 적용해 준다.
  4. 같은 동작을 하는 프로그램을 더욱 짧은 코드로 구현할 수 있다.
  5. 다양한 플러그인과 참고할 수 있는 문서가 많이 존재한다.
  6. 오픈 라이선스를 적용하여 누구나 자유롭게 사용할 수 있다.[1]

활용

종류

문제점

전망

각주

  1. 1.0 1.1 araikuma, 〈[jQuery 개요]〉, 《티스토리 블로그》, 2018-11-09
  2. https://jquery.com/]〉 , 《jQuery》

참고 자료

같이 보기


  의견.png 이 제이쿼리 문서는 프로그래밍에 관한 토막글입니다. 위키 문서는 누구든지 자유롭게 편집할 수 있습니다. [편집]을 눌러 이 문서의 내용을 채워주세요.