'홈페이지제작'에 해당되는 글 148건

 포토샵 강좌 / Design TIP

인쇄 전 필름 출력 시 체크사항

인쇄 전 필름 출력 시 체크사항

1. 하리꼬미 출력 시

 
   ☞ 편집배열표, 책 사이즈, 중철/무선철, 돈땡, 접지방향, 재단(접지)여백, 인쇄할 종이 사이즈, 인쇄 종류, 배열순서

 
2. QuarkExpress 주의사항

   ☞ 도큐멘트 사이즈 지정
       : 돔보선을 따로 그릴 필요없이 도큐멘트를 재단될 사이즈로 작업을 하고, 그림이나 베다가 책의 끝까지 인쇄될 경우
         3㎜정도씩 도큐멘트 바깥으로 더 크게 그린다.
 

   ☞ 서체 확인
       : 도큐멘트에서 사용한 서체가 출력소에서 있는지 알아봐야 한다.
         만약 해당 서체가 출력소에 없다면 서체를 출력소에 가져가야 한다. 영문서체는 PS폰트든 True type폰트든
         시스템 속의 자형폰트에 넣으면 프린트 할 수 있다. 한글의 경우는 탈과 가방으로 이루어져 있고,
         영문 PS폰트는 화면용과 출력용이 있기 때문에 둘 다 자형폴더에 넣어야만 사용이 가능하다.

  
   ☞ 그림상자의 투명지정
       : 그림상자의 여백을 투명으로 지정을 해주어야 한다.
         만약 그렇지 않을 경우 백그라운드가 그림상자에 가려져 출력이 된다.
 

   ☞ 이미지 크기
       : 그림의 크기는 포토샵에서 조정한 후 100%로 사용하는 것이 원칙이나 확대할 경우 120%까지는 양호하다.

 
   ☞ 수동 여백 금물
       : 그림의 둘러싸기를 지정할 때 바깥여백을 수동으로 둘러싸기를 지정하면 원하는 데로 여백지정이 되지 않고
         보다 넓은 범위로 지정되곤 한다. 따라서 포토샵에서 패스를 사용하는 것이 안전하게 출력할 수 있다.
 

   ☞ 별색 지정
       : 별색 사용을 했을 경우 출력소에 알려주지 않으면 4색분해로 한다.

 
   ☞ 출력파일 모으기
       : 출력물을 출력소로 가져가기 전에 출력용 파일 모으기를 하면 그림 유실이 안된다.

 
3. Illustrator에서의 주의사항

  
   ☞ 서체 사용시
       : 출력을 맡기기 전 Type에서 Create Outliner한다.

 
   ☞ 에러방지
       : Lock, Group을 푼다.

 
4. Photoshop에서의 주의사항
 

   ☞ 4도 분판 출력시
       : RGB를 출력하면 단색으로 출력되니 CMYK로 바꿔서 출력한다.
         최신 출력기들은 싱글파일을 지원하기 때문에 분판을 하지 않아도 된다.
         싱글로 분판 출력을 의뢰할 경우 Photoshop eps에서 single-binary로 해도 되지만
         Photoshop eps에서 single-jepg maximum quality로 저장하면 용량이 1/5 이하로 줄어든다.
         RGB파일도 지원을 하나 black이 없는 CMY로 표현된다.

   ☞ 파일명
       : 파일명 앞에 스페이스를 제거하고, 파일명에 (.)을 넣지 말아야 한다.

 
5. 2도(별색) 인쇄물인 경우

 
   ☞ 2도로 편집했을 때 먹과 별색으로 편집을 했든, 먹과 마젠타로 했든 소부한 인쇄판에 묻히는 잉크의 색에 따라

      인쇄물의 색이 달라진다. Quark에서는 별색에 따른 각도가 없어서 먹과 별색의 2도 분판을 하면 동각이 되기

      때문에 모아레 현상이 나타난다. 이러한 방법을 해결하기 위해 포토샵에서 그림파일을 그레이 TIFF로 저장하여

      Quark으로 불러 들이고 그림에 마젠타나 싸이안 또는 엘로우로 색을 주면 된다.

 
6. 인쇄물에 따른 이미지 해상도

 
 인쇄물의 종류
 
 이미지 해상도
 

 고급 미술책이나 사진집
 
 300~350dpi
 

 일반잡지나 전단지
 
 250~300dpi
 

 신문이나 저급용지
 
 200~250dpi
 

 실크스크린
 
 150~200dpi

웹퍼블리셔가도 되기위한 포토샵 프로그램 소개

80%~100% 국비지원 컴퓨터 학원   

디자인 분야에서는 필히 필요한 포토샵 프로그램 입니다^^
편집디자인,웹디자인,건축인테리어,영상편집 분야에서는 기본적으로

포토샵 프로그램을 기본적으로 다루실 줄 아셔야 합니다^^ 

포토샵 프로그램은

입력된 화상에 대하여 다양한 편집과 수정을 할 수 있는 프로그램으로,

사진 이미지의 색상보정,

오래된 사진 복원,이미지 합성, 문자 디자인, 인쇄물 디자인,웹디자인

등의 작업을 할 수 있습니다.
 

포토샵은 2차원 그래픽 프로그램으로, 2차원 그래픽 프로그램에서 사용되는 그래픽 벡터와 비트맵으로 구분합니다. 포토샵 코렐페인터와 같이 그래픽 편집 작업을 하는 프로그램에서는 비트맵 그래픽 개념을 사용합니다.
 

포토샵은 혁신적인 신기능을 탑재하고,

아도브의 이미지레디 등과 같은 다른프로그램과의

연계도 강화 하는 등 그래픽디자이너와 포토그래퍼,웹디자이너,비디오와

필름 제작자 등이 최고

품질의 화상을 효율적으로 제작, 관리할 수 있도록 기능을 강화하고 있습니다.

 
포토샵의 경우 모든 디자인분야에서 많이 활용하는 프로그램이기에

취미로,특기로,취업으로...

좀 더 활용하기 위해 실무로 배우시면 좋습니다!!

최신 버전 포토샵CS에서는, 미디어를 넘어서 디지털 화상 편집을 하는 전문가용

프로그램으로 더욱 진보하였습니다. 대표적 최신 기능으로는,

동영상 이미지의 편집과 수정, 3D

컴퓨터 그래픽과 게임 디자인 작업편집,

다양한 패널 이미지 표적 최신 시능으로는, 동영상 이미지의

편집과 수정, 3D 컴퓨터 그래픽과 게임 디자인 작업 편집,

다양한 패널 이미지와 새로운

질감의 제작, 파일 브라우저의 강화로 복수 화상에서 패치 처리 가능,

광범위한 16BIT 편집 등이 있습니다.

포토샵은 독학으로도 공부할수 있는 프로그램 입니다!

포토샵에 대해 기본이 좀 되어 있으시고, 툴을 다룰 줄 안다면

혼자 공부하셔도 괜찮겠지만...

포토샵 프로그램의 경우 기능이 많기 때문에

전혀 프로그램에 대한 개념이 없으시다면

학원에서 공부를 하시는게 쉽게 배우실 수 있습니다.

혼자 독학을 하시면 배우시는 시간이 좀 더 오래 걸릴 수 있는 과정이며

학원에서는 시간 맞춰서 수업을 하여 진행하고 있기 때문에

계획하신대로 끝내실 수 있기에 학원을 추천드립니다!

포토샵의 경우, 학원에서 2달과정으로 진행되고 있기 때문에

2달로 계획을 잡으시면 되시구요!!

포토샵은 기본반 활용반으로 나누어져 있기 때문에

기본적으로 다루실 줄 아신다면 활용반 수업을 들으셔도 무관합니다!!

HTML/DreamWeaver CS5 (드림위버)

홈페이지 전달기능, 미적기능, 인터렉티브한 기능을 충족할 수 있는 홈페이지를 작성하는 시간입니다.

홈페이지 제작의 기본을 이루는 HTML을 기초로 웹 페이지를 만들고 웹에 게시할 수 있도록 합니다. 또한 홈페이지 제작 도구인 드림위버로 서버와 클라이언트간의 상호작용으로 멀티미디어, 스타일시트,템플릿,라이브러리,자바스크립트를 효과적으로 다룰 수 있도록 합니다. HTML과 드림위버의 핵심 기능을 체계적으로 심도 있게 다루는 시간이 될 것입니다.

체계적 수업 지도로 디자인을 전공/비전공 하신 분 모두가 쉽게 홈페이지를 완성 하도록 합니다. 스타일시트와 자바스크립트로 역동적인 홈페이지를 만듭니다. 웹디자이너의 포트폴리오,웹마스터의 사이트구축에 필요한 실무 예제로 수업이 이루어집니다. 드림위버를 이용한 개인포트폴리오,회사의 사이트 관리, 쇼핑몰 구축에 사용하는 고급 시능을 재밌게 수업합니다^^

드림위버란?

어도비 드림위버(Adobe DreamWeaver)는 매크로미디어가 개발한 웹 개발 응용프로그램이며, 현재 2005년에 매크로미디어를 인수하였던 어도비 시스템즈 소유 드림위버는 맥과 윈도 운영 체제를 둘다 지원 최근에 나온 버전들은 CSS, 자바스크립트, 다양한 서버 사이드 스크립팅, 그리고 ASP,NET,콜드 퓨전,자바 서버 페이지,PHP 등의 프로그래밍 언어 및 프레임 워크과 같은 웹 기술에 대한 지원을 포함. 현재는 어도비 크리에이티브 클라우드에서 무료로 다운로드하여 사용

드림위버는 툴을 다루는 것과 스킬습득, 연습이 중효합니다!

배우는 방법은 독학을 통해 배우거나 관련학교 학과,학원을 통해서 배울수 있습니다. 컴퓨터 능력이 어느정도 있고 시간이 여유로우시고,그림이 손으로 된다면 독학을 통해서 가능하답니다

 
웹디자이너 웹퍼블리셔란? 자바스트립트,제이쿼리에 관하여

요즘은 웹디자인이 인기있는 직업으로 뽑히고 있습니다!

웹디자인,웹퍼블리셔 쪽으로 취업을 하시면 매우 전망이 좋기 때문이죠!!

그래서 오늘은 웹퍼블리셔에 대해 알아볼까합니다!

★Jabascript,JQruey 웹퍼블리셔★알아보기!

 
다양한 디바이스의 웹표준 호환성에 이해!

웹퍼블리셔는 2008년 4월 11일부터 시행된[장애인차별금지 및 권리 구제 등에 관한 법률] 및 동법 시행령들 관련 규정을 준수 할 수있게 되면서 웹 접근성에 대한 인식이 높아졌습니다.누구나 어디에서나 동일한 정보를 얻을 수 있는 신체적,환경적 영향을 받지 않고 정보를 얻을 수 있어야 한다는 규정이 만들어졌습니다. 기존 웹페이지를 만들던 방식이 3개의 구조로 나누어지면서 웹디자이너나 웹 프로그래머가 작업이 불가능해지며 전문웹퍼블리셔가 등장했고, 현재 웹퍼블리셔는 전문적인 지식을 가지고 있으면서 디자인에 대한 기본적인 이해도를 가지고 있어야 가능합니다. 전문적인 웹 퍼블리셔 인력이 매우 부족한 상태입니다.

웹퍼블셔를 배울려면 기본적으로 웹을 디자인을 할수 있어야 합니다!

포토샵과 일러스트로 툴을 익힌후에 HTML/드림위버 프로그램을 배워야 웹디자인을 할 수가 있습니다.

포토샵과 일러스트 툴은 많이들 알고 계시니까! 오늘은 생략하도록 하겠습니다!!

★HTML/드림위버

홈페이지의 전달 기능, 미적 기능, 인터렉티브한 기능을 충족할 수 있는 홈페이지를 작성하는 프로그램으로서 홈페이지 제작의 기본을 이루는 HTML을 기초로 웹 페이지를 만들고 웹에 게시할 수 있도록 합니다.

또한, 홈페이지 저작 도구인 드림위버로 서버와 클라이언트 간의 상호작용으로 멀티미디어,스타일시트,템플릿, 라이브러리, 자바스크립트를 효과적으로 다룰 수 있도록 합니다.HTML 과 드림위버의 핵심기능을 체계적으로 심도있게 다루는 부분입니다.

최근에 나온 버전들은 CSS,자바스크립트, 다양한서버 사이드 스크립팅, 그리고 ,ASP.NET, 콜드퓨전,자바 서버 페이지,PHP 등의 프로그래밍 언어 및 프레임워크와 같은 웹 기술에 대한 지원을 포함하고 있습니다.

드림위버는 위지웍 프레스토 기반의 편집기이며 사용자에 의해 HTML 코드의 상세한 정보를 숨길 수 있으며,이로써 코드를 잘 모르는 사람들이 웹 페이지와 사이트를 만들 수 있게 도와줍니다!

★웹표준&접근성

 
공공및 민간 웹 사이트의 웹 접근성 준수화가 의무화 되었으며, 웹 표준을 준수했을 때 어떤 브라우저에서든 똑같은 웹 페이지를 보여 줄 수 있게됩니다(크로스 브라우징) 웹 사이트나 웹 페이지가 웹 표준을 준수한다는 것은 일반적으로 올바른 HTML,CSS, 자바스크립트를 사이트나 페이지가 가지고 있다는 것을 뜻합니다. 웹 접근성과 표준화 코드를 구현하기 위해 HTML,CSS 자바스크립트의 기본 원리와 활용 방법을 체계적으로 진행하며 실무 예시로 페이지를 제작, 구현하는 과목입니다. 웹 접근성과 웹 2.0의 표준화 코드 구현, 다양한 방식의 레이아웃구현, 자바스크립트를 사용한 동적 페이지 설꼐 등을 통해 웹 사이트 구축에 필요한 실무 예제로 배울 수 있습니다.

 
★JQUERY( 제이쿼리)

자바스크립트의 기능을 함축시킨 일종의 프레임워크(라이브라리)입니다.

제이쿼리는 코딩의 양을 대폭 줄일 수 있으며, 다음과 같은 시능을 포함하고 있습니다. HTML 엘리먼트를 선택/HTML 엘리먼트를 조작/

CSS핸들링- 이벤트/자바스크립트 애니메이션/DOM 탐색과 수정/AJAM/ 유틸 제이쿼리는 문법이 간결하고 사용하기가 쉬우며, 습득속도가 빠릅니다. 다양한 운영체제와 디바이스에서 작동하는 이식성이 뛰어난 언어로써 별다른 셋팅없이 HTML과 동시에 사용하여 일반 사용자가 손쉽게 인터랙티브한 웹페이지를 제작할 수 있도록 해줍니다.이러한 자바스크림브를 기반으로 라이브러리를 구축한것이 바로 JQuery 이며 HTML과 javascript 사이의 상호작용을 강조하는 웹 어플리케이션 프레임워크입니다.Ajax와 HTML을 제어함으로써 동적이고 화려한 효과를 낼 수 있다는 장점이 있습니다.!

★Javascript(자바스크립트)

미국의 넷스케이프 커뮤니테이션스사가 개발한 스크립트언어

스크립트 언어란? 컴파일(compile)을 하지 않고 작성해서 바로 실행 시킬수 있는 언어

컴파일이란?원시언어로된 프로그램으로 부터 그와 동등한 일을 하는 목적언어로 된 프로그램을 생성하는 작업!프리르포세싱.메크로처리 등등의 언어처리작업을 통칭
 

JSON(제이슨, JavaScript Object Notation)이란 ?(제이슨, JavaScript Object Notation)이란 ?

SON이란? JSON 규칙JSON이란 자바스크립트 언어에서 객체를 표현하는 표기법입니다.

그러나 JSON은 자바스크립트에서만 사용하는것은 아닙니다. JSON은 자바스크립트 구문을 따르기는 하지만 자바스크립트에서 파생되었기 때문에 JSON으로 불리울 뿐 XML이나 CSV처럼 어디서나 사용 가능한 개방형 표준 데이터 포맷(형식) 입니다.

앞서 말했듯 JSON은 개방형 표준 포맷으로 RFC 7159와 ECMA-404라는 두 개의 표준에 의해 기술되고 있으며, 공식 MIME 타입으로는 application/json을, 파일로 저장하게 되는경우 .json의 확장자를 가지게 됩니다.

기존 서버나 클라이언트간의 통신에는 XML 포맷을 사용하는것이 대세를 이루었지만 최근에는 여러가지 장점으로 인하여 JSON 포맷을 이용하는것이 대세가 되었습니다.

JSON은 key와 value를 가진 객체 표기법 이므로 자바, 파이썬, C#등의 객체지향 패러다임 언어에서 이용하는데 용이합니다.

JSON의 장점

•단순 텍스트이며 표기가 직관적이므로 사람이 이해하기 쉽습니다.
•속성과 값 쌍으로 이루어지므로 CSV와 다르게 특정 값이 어떤 의미를 지니는지 이해하기 쉽습니다.
•XML의 요소는 <name>Kim</name> 과 같이 여는 태그가 있으면 닫는 태그가 있기 때문에 데이터 자원 소모가 상대적으로 크지만 JSON은 key : value 방식이므로 상대적으로 데이터 자원 소모가 적습니다.
•거의 대부분이 HTTP를 이용한 웹 환경에서 데이터 교환이 이루어 지므로 데이터의 크기가 적다는 것은 매우 큰 의미를 지닙니다.
•특정한 언어나 플랫폼에 독릭접이므로, 규칙만 지켜주면 어떤 시스템간이든 교환이 가능합니다.
•대부분의 언어 및 플랫폼에서 JSON을 더욱 정교하게 다루기 위한 api를 제공하며, 브라우저에서도 json 파서를 내장하고 있습니다.

JSON 문법

자바 스크립트 언어에 익숙한 사람이라면 다음의 규칙은 매우 익숙할 것 입니다.

•JSON 객체는 중괄호 블록 "{", "}" 으로 표기합니다.
•JSON 배열은 대괄호 블록 "[", "]" 으로 표기합니다.
•속성(Key)과 값(Value) 쌍으로 이룹니다.
•속성과 값이 쌍을 이룰 때 콜론으로 구분하며 속성 : 값 형태로 표기합니다.
•속성은 쌍따옴표(")로 묶어 표기하며, 값은 자료형에 따라 표기 방법이 달라집니다. ex) "age" : 3
•속성이 여러개인 경우 ,(콤마)로 구분합니다.

 
[
    {
         "name" : "kim",
         "age"  : 19,
         "isAgree" : true,
         "hobby" : null
    },
    {
         "name" : "lee",
         "age"  : 18,
         "isAgree" : false,
         "hobby" : "cycle"
    }
]

자료형

정수 표기법

정수는 단순히 숫자로 표기하며, 언어에서 지원하는 2진수, 8진수, 16진수 등의 표현은 지원하지 않습니다.

만약 다른 진법 표기가 필요한 경우 문자열 표기를 이용하도록 합니다.

13
1224
-223
0
-21

실수(고정 소수점)

1.556
-33.5

실수(부동 소수점)

1e4
2.5e12
6.78E-5

Boolean 표기법

true
false

문자열

문자열은 쌍따옴표(") 로 묶여야 하며, 0개 이상의 유니코드 문자로 이루어집니다.

만약 줄바꿈(개행)이나 쌍따옴표, 슬래시 등의 표기가 필요한 경우 이스케이프 문법을 지원합니다.

"1234"
"Kim"
"김철수"
"\"안녕\""
"hello \n world"
 

문자열 데이터에 사용되는 이스케이프 문법

문자열 데이터는 쌍따옴표로 묶여야 하며 쌍따옴표 안에 사용되는 따옴표 역슬래시 등은 이스케이프 문법으로 처리해 주어야 합니다.

•\" 따옴표
•\t 탭
•\n 개행
•\f 폼 피드
•\r 캐리지 리턴
•\b 백스페이스
•\/ 슬래시
•\\ 역슬래시
•\uHHHH 16진수 네자리로되어 있는 유니코드 문자

배열

배열은 대괄호 "[", "]" 로 나타내며, 하나의 배열에는 C나 자바 언어와 같이 한 가지 자료형만을 가지는것이 아닌 여러가지 자료형을 요소로 가질 수 있습니다. 또한 배열의 각 요소는 콤마(,) 로 구분됩니다.

[10, "AA", {"a" : 3, "b" : "bb"}, true]
{"a" : 33, "b" : [30, 20, "사십"]}
 cs

자바스크립트 - 타이머함수

 
타이머 함수
타이머 함수는 일정시간마다 혹은 지정한 시간에 특정 함수를 실행할 수 있도록 하는 함수입니다.

타이머 함수의 경우 setTimeout()과 setInterval() 두 가지가 있고 각 함수에 맞는 타이머 취소 함수가 있습니다.
사실 타이머 함수는 Window객체의 메서드이므로 어디서나 사용 가능한 전역 함수입니다.

setTimeout(Function, millisecond)

Function - 특정 시간이 되면 실행시킬 함수

millisecond - 실행시킬 시간

지금 시점으로 몇 밀리초 후에 실행할 것인지를 지정하며 밀리초(1/1000) 단위입니다.

일정 시간 후 지정한 함수를 한 번 실행합니다.

serInterval(Function, millisecond)

Function - 특정 시간이 되면 실행시킬 함수

millisecond - 실행 주기

몇 밀리초 마다 특정 함수를 실행할 것인지를 지정하며 밀리초(1/1000) 단위입니다.

넘긴 시간을 주기로 매번 함수를 실행합니다.

clearTimeout(참조값)

참조값 - 중지시킬 타이머의 참조값

(setTimeout()을 실행시키고 return 받은 값)

setTimeout()으로 지정한 타이머를 중지시킵니다.

clearInterval(참조값)

참조값 - 중시시킬 타이머의 참조값

setInterval()을 실행시키고 return 받은 값)

setInterval()로 지정한 타이머를 중지시킵니다.

setTimeout(Function, millisecond)

일정한 시간이 지나면 특정 함수를 한 번 실행할 수 있습니다.

다음은 1초 후 hello() 함수를 실행하는 코드입니다.
 

<!DOCTYPE html>
 
<html lang="kr">
<head>
    <meta charset="utf-8" />
    <title>타이머</title>
 
    <script>
 
        var hello = function() {
            alert("반가워요");
        }
 
        setTimeout(hello, 1000);
 
    </script>
 
</head>
<body>
    타이머 테스트 1초 후 실행
</body>
</html>

결과 - 페이지가 로딩되고 1초 후 알림창이 나타납니다.
 

clearTimeout(참조값)

    <script>
 
        var hello = function() {
            alert("반가워요");
        }
 
        //타이머를 걸고 해당 타이머에 대한 참조값을 timeout 변수에 저장
        var timeout = setTimeout(hello, 1000);
 
        //timeout 타이머를 취소시킴
        clearTimeout(timeout);
 
    </script>

Colored by Color Scripter

결과 - 페이지가 로딩되고 1초가 지나도 아무 반응도 일어나지 않습니다. 타이머가 취소 되었기 때문입니다.

serInterval(Function, millisecond)

일정 시간마다 특정 함수를 실행 시킵니다.

<head>
    <meta charset="utf-8" />
    <title>타이머</title>
 
    <script>
 
        var hello = function() {
            alert("반가워요");
        }
 
        setInterval(hello, 1000);
 
    </script>
 
</head>
<body>
    타이머 테스트 1초마다 실행
</body>
</html>

결과 - 1초마다 알림창이 뜹니다.(확인 버튼을 계속 눌러야 합니다)

clearInterval(참조값)

실행한 setInterval() 함수를 중지시킵니다.

    <script>
 
        var hello = function() {
            alert("반가워요");
        }
 
        var interval = setInterval(hello, 1000);
 
        //setTimeout을 통해 3초 후 setInterval()을 중지
        setTimeout(function () {
            clearInterval(interval);
        }, 3000);
 
    </script>

Colored by Color Scripter
 

결과 - 알림창이 1초마다 한번씩 3번까지 뜨다가 더이상 나타나지 않게 됩니다

[jQuery 기초] jQuery 선택자 (Selector) 목록 정리

jQuery 선택자(Selector) 목록 정리

jQuery는 DOM 요소를 탐색할때 CSS 선택자 표현식을 지원합니다. 이번글에서는 여러가지 선택자를 간단하게 정리합니다.

기본 선택자

가장 많이 사용하는 기본 선택자들입니다.

전체 선택자

document객체가 관리하는 문서내의 모든 요소를 선택합니다. * (Asterisk)를 사용합니다.

$('*') //모든 요소를 선택합니다.                                                               
$('body > *') //body 하위에 모든 요소를 선택합니다.

id 선택자

HTML 태그의 ID속성값을 기준으로 하는 선택자입니다. ID값 앞에 #을 붙여 사용합니다. ID값을 중복되지 않는게 원칙이므로 가장 처음에 선택된 요소만 리턴됩니다.

$('#userinput') //id속성값이 userinput인 요소를 선택합니다.                                   

태그 선택자

HTML 태그의 태그명을 기준으로 하는 선택자입니다. 태그명을 그대로 사용하며, 동일한 태그가 여러개인 경우 배열 형태로 리턴됩니다.

$('table') //문서 내에 table 요소들을 선택합니다.                                               

클래스 선택자

HTML 태그의 class 속성값을 기준으로 하는 선택자입니다. class 속성값 앞에 .(점)을 붙여 사용합니다. 해당 클래스를 가진 모든 요소들을 반환합니다.

$('.account') //class 속성의 값이 account인 요소들을 선택합니다.
$('.account.money') //class 속성의 값이 account와 money 둘 다 포함되는 요소들을 선택합니다.(class="account money")

계층 구조에 따른 선택자

DOM 구조에서 자식이나 후손 요소에 대해 선택할 수 있습니다.

자식(Child) 선택자

parent 요소의 자식 요소 child 를 구하려면 > 를 사이에 넣어 표현합니다. 단 바로 하위의 자식들 중에서만 요소를 선택하며, 그 하위 자손 요소들은 선택하지 않습니다.

$('.parent > .child') //class 속성값이 parent 인 요소의 자식중에 class 속성값이 .child인 요소들을 선택합니다.

자식(Child) 및 후손 선택자

만약 바로 하위 자손뿐만 아니라 모든 후손들을 대상으로 선택하고 싶은 경우에는 공백을 넣어 표현합니다.

$('.parent .child') //class 속성값이 parent 인 요소의 하위에 있는 class 속성값이 .child인 모든 요소들을 선택합니다.

다음에 오는 요소 선택

특정 요소 바로 다음에 오는 요소 하나만을 선택하는 경우에는 + 를 사용합니다. 주의할점으로는 바로 다음요소 하나만을 선택한다는 점입니다.

$('#prev + *') //id속성값이 prev인 요소의 바로 다음으로 요소 하나만 선택                       

다음에 오는 모든 형제 요소

특정 요소 다음으로 오는 모든 형제(siblings) 요소들을 선택할 때에는 ~ 를 사용합니다. 단 형제들만을 선택하며 형제들의 하위 요소까지는 선택하지 않습니다.

$('#first ~ *') //id 값이 first인 요소의 다음으로 존재하는 모든 형제 요소들을 선택