본문 바로가기

Category

Explanation

jquery

(3)

[jQuery] 기본 선택자 기본 선택자 기본 선택자는 CSS와 동일하게 선택자를 선택하는 방법입니다. 가장 기본적으로 요소를 선택하는 방법입니다. 이 방법은 CSS와 동일합니다. 기본 선택자(Basic Selectors) 기본 선택자 종류 예시 설명 태그 선택자 $("p") 기본 태그를 선택합니다. 클래스 선택자 $(".class") 클래스 태그를 선택합니다. 아이디 선택자 $("#id") 아이디 태그를 선택합니다. 그룹 선택자 $("p, .class, #id") 여러가지 태그를 선택합니다. 전체 선택자 $("*") 전체 태그를 선택합니다. Sample1 기본 선택자 예제입니다. 결과 기본 선택자 태그 선택자 : 기본 태그를 선택합니다. 클래스 선택자 : 클래스 태그를 선택합니다. 아이디 선택자 : 아이디 태그를 선택합니다. 그룹..

[jQuery] Basic 제이쿼리 기초 제이쿼리를 사용하기 위한 기본 사용방법입니다. 제이쿼리 사용방법 제이쿼리를 사용하기 위해서는 자바스크립트 라이브러리 파일이 필요합니다. jQuery 라이브러리는 jQuery 공식사이트에서 다운 받을 수 있습니다. jQuery는 1.x, 2.x, 3.x 버전이 있습니다. 1.x 버젼은 IE6, IE7, IE8 버젼을 지원합니다. 제이쿼리 다운로드 제이쿼리를 사용하기 위해서는 제이쿼리 파일을 다운 받아야 합니다. 다운 받기 Script CDN 사용하기 CDN(Content Distribution Network)는 전 세계적으로 분산되어 있는 서버 네트워크를 사용하는 시스템입니다. 콘텐츠를 효율적으로 사용하기 위한 네트워크 시스템을 의미합니다. 다음은 구글에서 제공하는 CDN입니다. Script..

[jQuery] Intro 제이쿼리 제이쿼리는 자바스크립트 라이브러리를 이용해 만든 언어입니다. 제이쿼리는 HTML에 포함되어 있는 클라이언트 사이드 스크립트 언어를 단순화하도록 설계된, 웹 브라우저 호환성을 가진 자바스크립트 라이브러입니다. 라이브러리는 자주 사용하는 코드를 재사용 및 효율성 있게 사용할 수 있도록 만들어진 다양한 함수의 집합을 의미합니다. 제이쿼리의 장점 제이쿼리는 CSS를 쉽게 적용할 수 있습니다. 제이쿼리는 크로스브라우징을 지원합니다. 제이쿼리는 플러그인이 풍부합니다. 제이쿼리는 코드를 적게, 효율적으로 작성할 수 있습니다. 제이쿼리는 좋은 확장성과 ajax기능을 구현합니다.

1

A
- <a>
- <abbr>
- <acronym>
- <address>
- <applet>
- <area>
- <article>
- <aside>
- <audio>
B
- <b>
- <base>
- <basefont>
- <bdi>
- <bdo>
- <big>
- <blockquote>
- <blink>
- <body>
- <br>
- <button>
C
- <canvas>
- <caption>
- <center>
- <cite>
- <code>
- <col>
- <colgroup>
D
- <data>
- <datalist>
- <dd>
- <del>
- <details>
- <dfn>
- <dialog>
- <dir>
- <div>
- <dl>
- <dt>
E
- <em>
- <embed>
F
- <fieldset>
- <figcaption>
- <figure>
- <font>
- <footer>
- <form>
- <frame>
- <frameset>
H
- <h1>~<h6>
- <head>
- <header>
- <hgroup>
- <hr>
- <html>
I
- <i>
- <iframe>
- <img>
- <input>
- <ins>
K
- <kbd>
- <keygen>
L
- <label>
- <legend>
- <li>
- <link>
M
- <main>
- <map>
- <mark>
- <marquee>
- <menu>
- <menuitem>
- <meta>
- <meter>
N
- <nav>
- <noframes>
- <noscript>
O
- <object>
- <ol>
- <optgroup>
- <option>
- <output>
P
- <p>
- <param>
- <picture>
- <pre>
- <pregress>
Q
- <q>
R
- <rp>
- <rt>
- <rtc>
- <ruby>
S
- <s>
- <samp>
- <script>
- <section>
- <select>
- <small>
- <source>
- <span>
- <strike>
- <strong>
- <style>
- <sub>
- <summary>
- <sup>
- <svg>
T
- <table>
- <tbody>
- <td>
- <template>
- <textarea>
- <tfoot>
- <th>
- <thead>
- <time>
- <title>
- <tr>
- <track>
- <tt>
U
- <u>
- <ul>
V
- <var>
- <video>
W
- <wbr>

A
- 블록/인라인 구조
- 시멘틱 태그

A
- align-content
- align-items
- align-self
- all
- animation
- animation-delay
- animation-direction
- animation-duration
- animation-fill-mode
- animation-iteration-count
- animation-name
- animation-play-state
- animation-timing-function
B
- backdrop-filter
- backface-visibility
- background-attachment
- background-blend-mode
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-repeat
- background-size
- background
- border
- border-bottom
- border-bottom-color
- border-bottom-left-radius
- border-bottom-right-radius
- border-bottom-style
- border-bottom-width
- border-collapse
- border-color
- border-image
- border-image-outset
- border-image-repeat
- border-image-slice
- border-image-source
- border-image-width
- border-left
- border-left-color
- border-left-style
- border-left-width
- border-radius
- border-right
- border-right-color
- border-right-style
- border-right-width
- border-spacing
- border-style
- border-top
- border-top-color
- border-top-left-radius
- border-top-right-radius
- border-top-style
- border-top-width
- border-width
- bottom
- box-decoration-break
- box-shadow
- box-sizing
C
- caption-side
- caret-color
- clear
- clip
- color
- column-count
- column-fill
- column-gap
- column-rule
- column-rule-color
- column-rule-style
- column-rule-width
- column-span
- column-width
- columns
- content
- counter-increment
- counter-reset
- cursor
D
- direction
- display
E
- empty-cells
F
- filter
- flex
- flex-basis
- flex-direction
- flex-flow
- flex-grow
- flex-shrink
- flex-wrap
- float
- font
- font-family
- font-size
- font-size-adjust
- font-stretch
- font-style
- font-variant
- font-weight
G
- grid
- grid-area
- grid-auto-columns
- grid-auto-flow
- grid-auto-rows
- grid-column
- grid-column-end
- grid-column-gap
- grid-column-start
- grid-gap
- grid-row
- grid-row-end
- grid-row-gap
- grid-row-start
- grid-template
- grid-template-area
- grid-template-columns
- grid-template-rows
H
- hanging-punctuation
- height
- hyphens
I
- isolation
J
- justify-content
L
- left
- letter-spacing
- line-height
- list-style
- list-style-image
- list-style-position
- list-style-type
M
- margin
- margin-bottom
- margin-left
- margin-right
- margin-top
- max-height
- max-width
- min-height
- min-width
- mix-blend-mode
O
- object-fit
- object-position
- opacity
- order
- outline
- outline-color
- outline-offset
- outline-style
- outline-width
- overflow
- overflow-x
- overflow-y
P
- padding
- padding-bottom
- padding-left
- padding-right
- padding-top
- page-break-after
- page-break-before
- page-break-inside
- perspective
- perspective-origin
- pointer-events
- position
Q
- quotes
R
- resize
- right
T
- tab-size
- table-layout
- text-align
- text-align-last
- text-decoration
- text-decoration-color
- text-decoration-line
- text-decoration-style
- text-indent
- text-justify
- text-overflow
- text-shadow
- text-transform
- top
- transform
- transform-origin
- transform-style
- transition
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
U
- unicode-bidi
- user-select
V
- vertical-align
- visibility
W
- white-space
- width
- word-break
- word-spacing
- word-wrap
Z
- z-index

1
- CSS란?

문자열 검색
- indexOf()
- lastIndexOf()
- search()
- match()
- charAt()
- charCodeAt()
- includes()
- startsWidth()
- endWidth()
문자열 변경
- slice()
- substring()
- substr()
- split()
- replace()
- replaceAll()
- concat()
- repeat()
- padStart()
- padEnd()
- trim()
- trimStart()
- trimEnd()
- toLowerCase()
- toUpperCase()
- toString()
클래스 변경
속성 변경
배열 변경
- join()
- shift()
- unshift()
- pop()
- push()
크기 설정
위치 및 크기
스크롤
- pageXOffset
- pageYOffset
- scrollX
- scrollY
- scroll()
- scrollTo()
- scrollBy()
- scrollLeft
- scrollTop
- scrollIntoView()

자바스크립트
- 소개
- 기초
- 변수
- 연산자
데이터 저장하기
- 소개
- 변수
- 배열
- 객체
데이터 불러오기
- 변수
- 배열
- 객체
데이터 실행하기
데이터 제어하기
- if문
- if문 생략
- 다중 if문
- 중첩 if문
- 삼항 연산자
- switch문
- while문
- do while문
- for문
- 중첩 for문
- break문
- continue문

자바스크립트
변수
배열
- 배열
연산자
조건문
반복문
함수
객체
내장 객체
브라우저 객체
문서 객체
- 선택자
이벤트
- 이벤트
- 애니메이션 이벤트
- 마우스 이벤트
  - + clientX
  - + clientY
  - + offsetX
  - + offsetY
  - + pageX
  - + pageY
  - + screenX
  - + screenY
- 클립보드 이벤트
- 드래그 이벤트
- 포커스 이벤트
- URL 이벤트
- 인풋 이벤트
- 키보드 이벤트
- 페이지 전환 이벤트
- 터치 이벤트
- 트랜지션 이벤트
- UI 이벤트
- 휠 이벤트
튜토리얼
인덱스
샘플

클래스
속성
- attr()
- removeAttr()
- prop()
- removeProp()
- val()
크기
위치

제이쿼리
기본
선택자
탐색
- 트리구조
  - .children()
  - .closest()
  - .find()
  - .next()
  - .nextAll()
  - .nextUntil()
  - .parent()
  - .parents()
  - .parentUntil()
  - .prev()
  - .prevAll()
  - .prevUntil()
  - .siblings()
- 필터링
  - .eq()
  - .filter()
  - .first()
  - .has()
  - .is()
  - .last()
  - .map()
  - .not()
  - .slice()
- 기타
  - .add()
  - .addBack()
  - .contents()
  - .each()
  - .end()
속성
- Attributes
- CSS
- Dimensions
- Offset
- Data
  - .data()
  - .removeData()
변경
- DOM Insertion
  - .wrap()
  - .wrapAll()
  - .wrapInner()
  - .append()
  - .appendTo()
  - .html()
  - .prepend()
  - .prependTo()
  - .text()
  - .after()
  - .brfore()
  - .insertAfter()
  - .insertbrfore()
- DOM Removal
- DOM Replacement
애니메이션
- Basic
- Fading
- Sliding
- Animtion
  - .animate()
  - .clearQueue()
  - .delay()
  - .dequeue()
  - .finish()
  - .queue()
  - .stop()
이벤트
- Browser Events
- Event handler
  - .bind()
  - .delegate()
  - .off()
  - .on()
  - .one()
  - .trigger()
  - .triggerHandler()
  - .unbind()
  - .undelegate()
- Form Events
  - .blur()
  - .change()
  - .focus()
  - .focusin()
  - .focusout()
  - .select()
  - .submit()
- Keyboard Events
- Mouse Events

gsap

mGsapTopic

mSvg

mSvgTopic

mCanvas

mCanvasTopic

티스토리툴바