의견.png

제이쿼리

위키원
shoot008 (토론 | 기여)님의 2019년 7월 22일 (월) 17:13 판 (특징)
이동: 둘러보기, 검색

제이쿼리(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~/> 정보에 대한 정보를 알려줌. 빈태그, self close
title <title>~</title> 문서 제목
body <body>~</body> 본문
P 〈P〉-〈/P〉 Paragraph의 P:단락,문단,절
h1~h6 〈h1〉-〈h6〉 제목,글자 크기,중요도 우선순
hr 〈hr〉 단락 구분, 문서의 구분선
주석 태그 〈!-- --〉 주석
br
줄바꿈을 해줄때
span 〈span>~〈/span> inline요소, 줄바꿈이 안되고, 폭 , 높이 적용도 안됨. 인라인요소들을 그룹화 하는데 사용되며, 브라우저에 레이아웃 변경은 되지 않는다.
table 〈table>~〈/table> 표, border, cellpadding, cellspacing, width, summary의 속성값이 있음. 세로정렬이 자동. 게시판에 많이 이용
caption <caption〉~</caption〉 summary 역할. css에서 안보이게 함. 스크린리더기에 활용
colgroup <colgroup>~</colgroup> 열 그룹. 구조적인 그룹화를 위해 사용됨
col <col...> 빈태그 이지만 유일하게 self colse가 없다. 열의속성값과 스타일을 지정
thead <thead>~</thead> 테이블 헤더 행 그룹
tfoot <tfoot>~</tfoot> 테이블 푸터행 그룹. 계산시 합계 부분에 많이 이용, tbody 위에 올 수 있다. 화면상에서는 아래에 위치
th <th>~</th> 셀 제목으로 지정하여 강조되게 표시하는 태그. table header, inline요소
tr <tr>~</tr> 테이블 내의 한 행을 정의하는 태그. tabel row
td <td>~</td> 각 행에 포함된 셀을 만들때 사용되는 태그. table data, td의 개수는 th의 개수와 일치 해야한다. inline요소
ol 〈ol>~〈/ol〉 ordered list. 순서가 있다. 앞에 넘버링이 붙는다.
ul 〈ul>~〈/ul〉 unordered list. 순서가 없다. 앞에 기호가 붙는다.
li 〈li>~〈/li〉 list. ol과 ul의 세부 항목. ol과 ul의 자식으로 li만 올 수 있다.
dl 〈dl>~〈/dl〉 definition list(정의 목록)
dt 〈dt>~〈/dt〉 항목 definition term
dd 〈dd>~〈/dd〉 설명 definition description
a <a href="" target="">daum</a> anchor. 링크 연결. inline요소
img <img src="" alt="" /> 이미지 가져오기, inline요소
form <form>name="numberJoin" action="aa.html"method="post"</form> 입력을 받음. 게시판, 설문조사, 회원등록 등 폼 속성
fieldset <fieldset>...</fieldset> form 안에 논리적으로 묶인 구성요소를 그룹으로 묶을 때. 사각형 모양으로 표시
legend <legend>~</legend> fieldset에 대한 설명. 여기서의 legend는 설명(caption), 범례의 의미와 가깝다.
label <label>~</label> 리더기가 읽어주는 부분(웹접근성)에서 중요한 요소, 다양한 폼 서식의 설명.
input <input〉~〈/input> 입력 상자.
textarea <textarea="say" cols="10" rows="2">~ </textarea> 긴 글 작성시 사용. 여러 줄의 텍스트를 입력할 수 있는 상자를 만듦.
select / option <select name="email"> <option value="1">~ </option>

<option value="2'">~</option> <option value="3'">~</option> </select>

선택메뉴(드롭다운 리스트), select 요소 내의 태그에 목록에 있는 사용 가능한 옵션을 정의한다.
button <button> </button> 버튼생성, submit, reset, button. 유일하게 css값을 가지고 있는 태그, css초기화필요


장점

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