의견.png

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

위키원
이동: 둘러보기, 검색
(→‎특징)
(→‎특징)
13번째 줄: 13번째 줄:
 
== 특징 ==
 
== 특징 ==
 
제이쿼리는 HTML의 클라이언트 사이드 스크립트 언어를 단순화하도록 설계된 브라우저 호환성이 있는 자바스크립트 라이브러리이다. 또한 빠르고 단순하고 기능이 많으며, 다양한 브라우저에서 작동하는 사용하기 쉬운 API를 사용하면 HTML 문서 탐색 및 조작, 이벤트 처리, 애니메이션 및 [[Ajax]]를 더욱 간단하게 만들 수 있다. 수많은 라이브러리 중에서도 제이쿼리가 특이 많이 사용되는 이유는 다음과 같다.<ref>〈https://jquery.com/]〉 , 《jQuery》</ref>
 
제이쿼리는 HTML의 클라이언트 사이드 스크립트 언어를 단순화하도록 설계된 브라우저 호환성이 있는 자바스크립트 라이브러리이다. 또한 빠르고 단순하고 기능이 많으며, 다양한 브라우저에서 작동하는 사용하기 쉬운 API를 사용하면 HTML 문서 탐색 및 조작, 이벤트 처리, 애니메이션 및 [[Ajax]]를 더욱 간단하게 만들 수 있다. 수많은 라이브러리 중에서도 제이쿼리가 특이 많이 사용되는 이유는 다음과 같다.<ref>〈https://jquery.com/]〉 , 《jQuery》</ref>
 +
 +
==기본 태그==
 +
:{|border=2 width=600
 +
|+<big></big>
 +
!align=center|특징
 +
!align=center|설명
 +
|-
 +
|align=center|단순화
 +
|align=center|* 불필요한 코드를 줄이고 간결한 형식으로 단순화시킴으로써, 코드 가독성과 개발 효율성을 크게 증가 시켰다.
 +
* 자바스크립트보다 코드가 간결하여 학습이 쉽다.
 +
|-
 +
|align=center|head
 +
|align=center|<head>~</head>
 +
|align=center|머리말
 +
|-
 +
|align=center|meta
 +
|align=center|<meta~/>
 +
|align=center|정보에 대한 정보를 알려줌. 빈태그, self close
 +
|-
 +
|align=center|title
 +
|align=center|<title>~</title>
 +
|align=center|문서 제목
 +
|-
 +
|align=center|body
 +
|align=center|<body>~</body>
 +
|align=center|본문
 +
|-
 +
|align=center|P
 +
|align=center|〈P〉-〈/P〉
 +
|align=center|Paragraph의 P:단락,문단,절
 +
|-
 +
|align=center|h1~h6
 +
|align=center|〈h1〉-〈h6〉
 +
|align=center|제목,글자 크기,중요도 우선순
 +
|-
 +
|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: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 이 제이쿼리 문서는 프로그래밍에 관한 토막글입니다. 위키 문서는 누구든지 자유롭게 편집할 수 있습니다. [편집]을 눌러 이 문서의 내용을 채워주세요.  

개발 : 프로그래밍 □■⊕, 소프트웨어, 데이터, 솔루션, 보안, 하드웨어, 컴퓨터, 사무자동화, 인터넷, 모바일, 사물인터넷, 게임, 메타버스, 디자인
프로그래밍 언어 ASP • C 언어 • C++ • C# • CSS • D 언어 • HTML • HTML5 • JSP • PHP • R • XHTML • XML • XSLT • 고(Go) • 고급언어 • 기계어 • 델파이 • 러스트 • 루비 • 루아 • 리액트 • 리퀴디티 • 무브 • 미켈슨 • 베이직 • 브이비스크립트 • 비주얼 C++ • 비주얼베이직(VB) • 비주얼베이직닷넷(VB.NET) • 솔리디티 • 스몰토크 • 스위프트 언어 • 스칼라 • 스크립트 언어 • 알골 • 어셈블리 • 언리얼스크립트 • 얼랭 • 에이잭스(Ajax) • 엠에프씨(MFC) • 오브젝티브-C • 오브젝트 파스칼 • 오카멜 • 웹어셈블리(WASM) • 이와즘(eWASM) • 자바 • 자바스크립트 • 저급언어 • 제이슨(JSON) • 제이쿼리(jQuery) • 카멜 • 코볼 • 코틀린 • 콜드퓨전 • 타입스크립트 • 파스칼 • 파워스크립트 • 파이썬 • 펄(Perl) • 포트란 • 프로씨(Pro-C) • 피엘에스큐엘(PL/SQL) • 피엘원(PL/I) • 하스켈
개발방법론 CBD 개발방법론 • EA • 구조적 개발방법론 • 객체지향 개발방법론 • 라이브러리 • 람다 아키텍처 • 모듈 • 모듈화 • 벤치마킹 • 소프트웨어 개발방법론 • 스크럼 • 스프린트 • 아키텍처 • 아키텍트 • 애자일 • 웹개발방법론 • 정보공학 개발방법론 • 컴포넌트 • 테일러링 • 템플릿 • 폭포수 모델 • 프로젝트 • 프로토타입 • 피드백
코딩 EUC-KR • UTF-8 • 값 • 글루웨어 • 디버깅 • 디코딩 • 마크업 • 버그 • 부트스트랩 • 세이브포인트 • 소스코드 • 시큐어코딩 • 아스키 • 액티브엑스 • 오픈소스 • 유니코드 • 인코딩 • 재컴파일 • 주석 • 컴파일 • 컴퓨터 프로그램 • 코드 • 코딩 • 태그 • 테스트 • 테이블 • 텍스트 • 파싱 • 퍼블리싱 • 퓨니코드 • 하드코딩 • 하이퍼링크 • 하이퍼텍스트
프로그래밍 C 명령어 • 객체 • 객체지향 • 객체지향 프로그래밍 • 거짓 • 관계연산자 • 기본형 변수 • 널 • 논리 • 논리연산 • 논리연산자 • 다중상속 • 다형성 • 대입 • 대입문 • 대입연산자 • 더블 • 도스 명령어 • 디폴트 • 레지스터변수 • 루프 • 리눅스 명령어 • 리턴 • 메모리 주소 • 메소드 • 멤버 • 명령문 • 명령어 • 무한루프 • 문자 • 문자열 • 바이트 • 반복문 • 배열 • 변수 • 분기 • 분기문 • 불린 • 브레이크 • 비교연산자 • 비트연산자 • 산술연산자 • 상속 • 상수 • 생성자 • 선언 • 선언문 • 설정자 • 속성 • 스위치 • 스태틱 • 시프트연산자 • 실행 • 실행문 • 어노테이션 • 에코 • 역참조 • 연산 • 연산문 • 연산자 • 오버로딩 • 오버라이딩 • 외부변수 • 윈도우 명령어 • 유닉스 명령어 • 인스턴스 • 인스트럭션 • 인클루드 • 인터페이스 • 임포트 • 입력 • 입력문 • 입출력 • 입출력문 • 자료형(데이터 타입) • 자바 명령어 • 자바 예약어 • 자바 컬렉션 • 전역변수 • 접근자 • 접근제어자 • 정보은닉 • 정수형 • 정적변수 • 제어 • 제어문 • 제어자 • 조건 • 조건문 • 조건연산자 • 주소 • 증감연산자 • 지역변수 • 참 • 참조 • 참조변수 • 초기화 • 추상메소드 • 추상클래스 • 추상화 • 출력 • 출력문 • 캡슐화 • 케이스 • 클래스 • 파라미터(매개변수) • 파이널 • 패키지 • 퍼블릭 • 포인터 • 프라이빗 • 프로텍티드 • 필드(멤버변수) • 함수 • 환경변수
명령어 abstract • array • boolean • break • byte • case • char • continue • default • double • do while • echo • elif • else • else if • false • final • float • for • gosub • goto • if • if else • import • include • int • join • long • long long • null • print • printf • println • private • protected • public • return • scanf • short • stdio.h • static • string • switch • temp • then • true • unsigned • void • while
디자인패턴 구조패턴 • 동시성패턴 • 동시실행패턴 • 모델-뷰-컨트롤러 패턴 • 상태패턴 • 생성패턴 • 싱글톤패턴 • 아키텍처패턴 • 전략패턴 • 커맨드패턴 • 행동패턴
프로그래밍 인물 귀도 반 로썸 • 그레이스 머레이 호퍼 • 니클라우스 비르트 • 댄 브릭클린 • 더그 커팅 • 데니스 리치 • 리누스 토르발스 • 리처드 그린블라트 • 마거릿 해밀턴 • 마크 앤드리슨 • 빈트 서프 • 빌 게이츠 • 빌 조이 • 스티브 잡스 • 에이다 러브레이스 • 제임스 고슬링 • 척 벤턴 • 켄 톰슨 • 팀 패터슨
위키 : 자동차, 교통, 지역, 지도, 산업, 기업, 단체, 업무, 생활, 쇼핑, 블록체인, 암호화폐, 인공지능, 개발, 인물, 행사, 일반
원본 주소 "http://wiki1.kr/index.php?title=제이쿼리&oldid=107047"