1Q74

1. Description jQuery(":only-child") :부모의 하위 Element들 중에서 오직 하나의 자식 Element를 가지고 있는 Element에 매칭된다. 즉, 다른 형제 Element가 있다면 매칭되지 않는다. 2. Example #1버튼을 클릭하면 태그가 하나인 Element를 찾아서 배경색을 변경한다. 버튼을 클릭할 때마다 스타일이 토글된다.

1. Description jQuery(":odd") : (0부터 시작하는 인덱스 기준)홀수번째 Element를 찾는다. 3.4버전부터 Deprecated되었고, .odd()는 3.5.0이상의 버전부터 사용할 수 있다. $(":odd")처럼 사용하면 querySelectorAll()에서 제공하는 속도향상의 이점을 기대할 수 없으므로, 우선 CSS Selector를 사용한 후 .filter(":odd")을 사용하는 것이 좋다고 한다. ※ 자세한 내용은 「6. Reference」를 참고하세요. 2. Example #1버튼 클릭하면 태그들 중 홀수번째 Element를 찾아서 배경색을 변경한다. 버튼을 클릭할 때마다 스타일이 토글된다.

1. Description jQuery(":nth-of-type(index/even/odd/equation)") : 각 부모의 태그명이 같은 자식 Element들 중에서 n번째 Element들을 모두 찾는다. 첫 번째 인덱스부터 1이 된다. index : 1번부터 시작하는 index를 나타낸다. even : 짝수 인덱스를 나타낸다. odd : 홀수 인덱스를 나타낸다. equation : even, odd, 3n+1과 같은 표현식을 나타낸다. 2. Example #1버튼을 클릭하면 태그들 중 첫 번째 Element를 찾아서 배경색을 변경한다. #2버튼을 클릭하면 태그들 중 두 번째 Element를 찾아서 배경색을 변경한다. #3버튼을 클릭하면 태그들 중 세 번째 Element를 찾아서 배경색을 변경한다. ..

1. Description jQuery(":nth-last-of-type(index/even/odd/equation)") : 부모의 자식 Element들 중에서 태그명이 같은 n번째 자식 Element들을 뒤에서부터 찾는다. 마지막 인덱스부터 1이 된다. index : 1번부터 시작하는 index를 나타낸다. even : 짝수 인덱스를 나타낸다. odd : 홀수 인덱스를 나타낸다. equation : even, odd, 3n+1과 같은 표현식을 나타낸다. 2. Example #1버튼을 클릭하면 태그들 중 뒤에서부터 두 번째 Element를 찾아서 배경색을 변경한다. #2버튼을 클릭하면 태그들 중 뒤에서부터 두 번째, 네 번째 Element를 찾아서 배경색을 변경한다. #3버튼을 클릭하면 태그들 중 뒤에서..

1. Description jQuery(":nth-last-child(index/even/odd/equation) : 부모의 자식 Element들 중에서 n번째 자식 Element들을 뒤에서부터 찾는다. :nth-child와 동일하나, 마지막 인덱스부터 1이 된다는 점만 다르다. index : 1번부터 시작하는 index를 나타낸다. even : 짝수 인덱스를 나타낸다. odd : 홀수 인덱스를 나타낸다. equation : even, odd, 3n+1과 같은 표현식을 나타낸다. 2. Example #1버튼을 클릭하면 의 뒤에서부터 2번째 Element를 찾아서 배경색을 변경한다. #2버튼을 클릭하면 의 뒤에서부터 두 번째(2번 인덱스), 네 번째(4번 인덱스)의 배경색을 변경한다. #3버튼을 클릭하면 ..

1. Description jQuery(":nth-child(index/even/odd/equation) : 부모의 자식 Element들 중에서 n번째 자식 Element들을 찾는다. 첫 번째 인덱스는 1번부터 시작한다. index : 1번부터 시작하는 index를 나타낸다. even : 짝수 인덱스를 나타낸다. odd : 홀수 인덱스를 나타낸다. equation : even, odd, 3n+1과 같은 표현식 나타낸다. 2. Example #1버튼을 클릭하면 의 2번째 Element를 찾아서 배경색을 변경한다. #2버튼을 클릭하면 의 두 번째(2번 인덱스), 네 번째(4번 인덱스)의 배경색을 변경한다. #3버튼을 클릭하면 의 첫 번째(1번 인덱스), 세 번째(3번 인덱스)의 배경색을 변경한다. #4버튼을..

1. Descritpion React에서 PDF 템플릿을 편집하고 다운로드하는 과정입니다. 2. Prerequisite 다음과 같은 Library가 임포트되어야 합니다. import React from 'react'; import { PDFDocument, rgb } from 'pdf-lib'; import fontkit from '@pdf-lib/fontkit'; import download from "downloadjs"; 3. Example 다음과 같은 과정으로 PDF파일에 텍스트를 입력한 후 다운로드 합니다. // PDF와 한글 폰트파일을 서버에서 읽어옵니다. fetch(templateUrl).then(response => { response.blob().then(blob => { const te..

1. Description jQuery(":not(selector)") : selector와 매치되지 않는 Element를 찾는다. .not()메소드를 사용하는 것이 :not()필터에 selector를 나열하는 것보다 읽기 쉽고, 대부분의 경우 좋은 선택이 된다고 합니다. 2. Example #1버튼을 클릭하면 태그의 1번 인덱스와 매칭되지 않는 태그를 찾아서 배경색을 변경한다. 버튼을 클릭할 때마다 스타일이 토글된다.

1. Description 부모 Element 하위의 자식 Element중에서 prev다음에 오는 같은 태그들을 모두 찾는다. 2. Example ※ 예제에서는 prev == 이고, siblings == 이 된다. #1버튼을 클릭하면 태크 다음에 오는 모든 태그를 찾아서 배경색을 변경한다. 버튼을 클릭할 때마다 스타일이 토글된다.

1. Description 같은 (상위)부모 Element 하위의 자식 Element중에서 prev다음에 오는 next Element를 찾는다. 2. Example ※ 예제에서는 prev == , next == 이 된다. #1버튼을 클릭하면 [name='_1q74-example-1'] Selector 하위에서 태그 다음에 오는 태그를 찾아서 배경색을 변경한다. 버트을 클릭할 때마다 스타일이 토글된다.