본문 바로가기

Webstoryboy

Category

Explanation

전체 글

 (864)
classList.contains() classList.contains() classList.contains() 메서드는 선택한 요소한테 클래스가 있는지 확인하고 불린을 반환합니다. classList는 읽기 전용 속성이며, add(), remove(), toggle(), replace() 메서드를 추가하여 사용할 수 있습니다. classList.contains() classList.contains() 메서드는 선택한 요소한테 클래스가 있는지 확인하고 불린을 반환합니다. 특징 설명 버전(version) ES1 결과값(return) 블린(true or false) 사용성 ★★★★☆ 문법(Syntax) "선택자".classList.contains("클래스 이름") //클래스 이름 포함여부 확인 documemt.querySelector("div")..
classList.toggle() classList.toggle() classList.toggle() 메서드는 선택한 요소한테 클래스를 추가/삭제합니다. classList는 읽기 전용 속성이며, add(), remove(), toggle(), replace() 메서드를 추가하여 사용할 수 있습니다. classList.toggle() classList.toggle() 메서드는 선택한 요소한테 클래스를 추가/삭제합니다. 특징 설명 버전(version) ES1 결과값(return) 클래스 추가/삭제 사용성 ★★★★★ 문법(Syntax) "선택자".classList.toggle("클래스 이름") "선택자".classList.toggle("클래스 이름", "클래스 이름",....) //클래스 이름을 추가하는 경우 documemt.querySele..
classList.remove() classList.remove() classList.remove() 메서드는 선택한 요소한테 클래스 이름을 삭제합니다. classList는 읽기 전용 속성이며, add(), remove(), toggle(), replace() 메서드를 추가하여 사용할 수 있습니다. classList.remove() classList.remove() 메서드는 선택한 요소한테 클래스 이름을 삭제합니다. 특징 설명 버전(version) ES1 결과값(return) 클래스 삭제 사용성 ★★★★★ 문법(Syntax) "선택자".classList.remove("클래스 이름") "선택자".classList.remove("클래스 이름", "클래스 이름",....) //클래스 이름을 추가하는 경우 documemt.querySelecto..
classList.add() classList.add() classList.add() 메서드는 선택한 요소한테 클래스 이름을 추가합니다. classList는 읽기 전용 속성이며, add(), remove(), toggle(), replace() 메서드를 추가하여 사용할 수 있습니다. classList.add() classList.add() 메서드는 선택한 요소한테 클래스 이름을 추가합니다. 특징 설명 버전(version) ES1 결과값(return) 클래스 추가 사용성 ★★★★★ 문법(Syntax) "선택자".classList.add("클래스 이름") "선택자".classList.add("클래스 이름", "클래스 이름",....) //클래스 이름을 추가하는 경우 documemt.querySelector("div").classList..
classList.replace() classList.replace() classList.replace() 메서드는 선택한 요소의 클래스 이름을 변경합니다. classList는 읽기 전용 속성이며, add(), remove(), toggle(), replace() 메서드를 추가하여 사용할 수 있습니다. classList.replace() classList.replace() 메서드는 선택한 요소의 클래스 이름을 변경합니다. 특징 설명 버전(version) ES1 결과값(return) 클래스 이름 사용성 ★★★☆☆ 문법(Syntax) "선택자".classList.replace("클래스 이름, 새로운 클래스 이름") //클래스 이름 변경하기 documemt.querySelector("div").classList.replace("className..
setAttribute() setAttribute() setAttribute() 메서드는 선택한 요소의 속성 값을 설정합니다. setAttribute() setAttribute() 메서드는 선택한 요소의 속성 값을 설정합니다. 특징 설명 버전(version) ES1 결과값(return) 속성 변경 및 추가 사용성 ★★★★☆ 문법(Syntax) "선택자".setAttribute("이름, 속성") //속성 값 변경하기 documemt.querySelector("div").setAttribute("class", "attribute"); 선택자(selector) : 속성 값을 설정할 선택자를 설정합니다. 이름(name) : 속성 이름을 설정합니다. 속성(value) : 속성 값을 설정합니다. 정의(Definition) setAttribu..
[SVG] 호환성 샘플 SVG 샘플입니다. 샘플 SVG 샘플입니다. 샘플 속성 설명 gsap.config()
[SVG] 인덱스 SVG 인덱스입니다. 인덱스 SVG 인덱스입니다. 인덱스 속성 설명
[SVG] 튜토리얼 SVG 튜토리얼입니다. 튜토리얼 SVG 튜토리얼입니다. GSAP 속성 설명 gsap.config()
[SVG]
[SVG]
[SVG]
[SVG]
[SVG] Path Animation Path Animation 정의(Definition) Path Animation 1. Rect Animation SVG를 이용한 Rect Animation입니다. Sample1 HTML CSS .svgBox .svg {width: 160px; height: 160px; background: #ffebee;} .aniPath1 { fill: none; stroke: #0d47a1; stroke-width: 2; stroke-linecap: round; animation: path1 2s infinite linear alternate; stroke-dasharray: 189; stroke-dashoffset: 189; } .aniPath2 { fill: none; stroke: #..
[SVG] Rect Animation Rect Animation 정의(Definition) Rect Animation 1. Rect Animation SVG를 이용한 Rect Animation입니다. Sample1 HTML CSS .svgBox .svg {width: 160px; height: 160px; background: #ffebee;} .aniRect1 { width: 120px; height: 120px; x: 20px; y: 20px; fill: none; stroke: #880e4f; stroke-width: 4; animation: rect1 4s infinite linear; } @keyframes rect1 { 0% {stroke: #880e4f;} 35% {stroke: #311b92;} 70..
[SVG] dasharray dasharray dasharray 정의(Definition) dasharray. 1. linecap SVG를 이용한 linecap입니다. Sample1 HTML CSS .svg {width: 160px; height: 160px; background: #ffebee;} TOTAL 2. dasharray SVG를 이용한 dasharray입니다. Sample2 HTML CSS .svg {width: 160px; height: 160px; background: #ffebee;} TOTAL 호환성(Compatibility) 더보기 caniuse.com 6 7 8 9 10 11 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용가능 사용가능 사용가능 사용가능 사용가능 ..
[SVG] SVG 사용하기 SVG 사용하기 특징 설명 Categories - 정의(Definition) 요소는 이미지의 확대/축소를 설정합니다. 호환성(Compatibility) 더보기 caniuse.com 6 7 8 9 10 11 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 참고(Reference) MDN SVG Scalable Vector Graphics (SVG)2
[GSAP] .invalidate() [GSAP] .invalidate() .invalidate()는 기존의 애니메이션을 무효화하고 다시 애니매이션합니다. .invalidate() .invalidate()는 기존의 애니메이션을 무효화하고 다시 애니매이션합니다. 특징 설명 반환값(returns) 자신값(self) 정의(Definition) .invalidate()는 기존의 애니메이션을 무효화하고 다시 애니매이션합니다. .invalidate()는 이전 애니메이션 시작 값으로 돌리지 않고 새로운 애니메이션으로 다시 시작합니다. .invalidate()는 이전 애니메이션을 초기화하고 다시 시작합니다. 애니메이션이 반복 될 때마다 모션을 invalidate() 하려는 경우는 repeatRefresh : true 속성을 사용합니다. 참고(Referen..
[GSAP] .eventCallback() [GSAP] .eventCallback() .eventCallback()는 이벤트에 전달해주는 콜백함수입니다. "onComplete", "onUpdate", "onStart", "onReverseComplete" 또는 "onRepeat"와 같이 애니메이션이 끝난 후 콜백함수를 설정합니다. .eventCallback() .eventCallback()는 이벤트에 전달해주는 콜백함수입니다. 특징 설명 반환값(returns) 함수(Function) 정의(Definition) .eventCallback()는 이벤트에 전달해주는 콜백함수입니다. .eventCallback()의 장점은 애니메이션 인스턴스가 생성 된 후에도 콜백을 설정할 수 있습니다. 애니메이션 인스턴스는 각 이벤트 유형과 연관된 하나의 콜백만 가질 ..
[GSAP] .endTime() [GSAP] .endTime() .endTime()는 애니메이션의 끝나는 시간을 반환합니다. .endTime() .endTime()는 애니메이션의 끝나는 시간을 반환합니다. 특징 설명 반환값(returns) 시간(Number) 정의(Definition) .endTime()는 애니메이션의 끝나는 시간을 반환합니다. 참고(Reference) GSAP
[GSAP] .duration() [GSAP] .duration() .duration()는 애니메이션이 지속 시간을 설정합니다. .duration() .duration()는 애니메이션이 지속 시간을 설정합니다. 특징 설명 반환값(returns) 시간(Number) 정의(Definition) .duration()는 애니메이션이 지속 시간을 설정합니다. .duration()의 지속 시간은 반복되는 시간과 별개입니다. 참고(Reference) GSAP
[GSAP] Repeat [GSAP] .delay() .delay()는 애니메이션이 시작되기 전에 지연 시간을 설정합니다. .delay() .delay()은 애니메이션 지연 시간을 설정합니다. 특징 설명 반환값(returns) 시간(Number) 정의(Definition) .delay()는 애니메이션이 시작되기 전에 지연 시간을 설정합니다. .delay()는 timeScale에 영향을 주지 않습니다. 참고(Reference) GSAP
gsap.timeline() gsap.timeline() gsap.timeline() 메서드는 연속적인 애니메이션을 설정합니다. gsap.to()와 delay 속성을 이용하면, 연속적인 애니메이션이 가능하지만, gsap.timeline()이용하면 연속적인 애니메이션을 간편하게 설정 할 수 있습니다. gsap.timeline() gsap.timeline() 메서드는 연속적인 애니메이션을 설정합니다. 특징 설명 버전 GSAP3 결과값(return) 타임라인(Timeline) 사용성 ★★★★★ 문법(Syntax) gsap.timeline("타겟", {속성: 속성값, ....}); //일반적인 애니메이션 연속 작업 gsap.to("#id", {x: 50, duration: 1}); gsap.to("#id", {x: 150, duration..
gsap.set() gsap.set() gsap.set() 메서드는 요소에 속성 값을 설정합니다. gsap.to() 메서드를 이용하여 애니메이션 주기 위하여, 애니메이션 초기 설정이 필요합니다. 이럴 경우 CSS를 통해 설정 할 수도 있지만, gsap.set()를 통해 설정하면, 조금 더 편합니다. 물론 초기 설정 즉 시작 값이 설정이 불편하면, gsap.from() 또는 gsap.fromTo() 메서드를 활용 할 수 있습니다. gsap.set() gsap.set() 메서드는 요소에 속성 값을 설정합니다. 특징 설명 버전 GSAP3 결과값(return) 움직임(tween) 사용성 ★★★★☆ 문법(Syntax) gsap.set("타겟", {속성: 속성값, ....}); //애니메이션 속성을 설정하고 애니메이션을 주는 경우 g..
gsap.getProperty() gsap.getProperty() gsap.getProperty() 메서드는 요소의 속성 값을 가져옵니다. 단위를 적지 않으면 숫자만 반환되고, 단위를 적으면 단위까지 같이 나옵니다. 값이 없을 경우 null을 반환합니다. gsap.getProperty() gsap.getProperty() 메서드는 요소의 속성 값을 가져옵니다. 특징 설명 버전 GSAP3 결과값(return) 모든 속성 값(*) 사용성 ★★★☆☆ 문법(Syntax) gsap.getProperty("타겟", "속성"); gsap.getProperty("#id", "x"); // #id의 x 속성 값을 반환합니다. 20 gsap.getProperty("#id", "x", "px") // 단위를 적으면 단위 값을 반환합니다. "20px" gs..
gsap.getById() gsap.getById() gsap.getById() 메서드는 애니메이션의 id 값을 설정하거나 id 값을 불러올 때 사용합니다. CSS 선택자 id 값과 별개로 사용합니다. 만약 id 값이 없으면 undefined를 반환합니다. gsap.getById() gsap.getById() 메서드는 요소의 id 값을 설정하거나 가져옵니다. 특징 설명 버전 GSAP3 결과값(return) 움직임(tween) or 타임라인(Timeline) 사용성 ★☆☆☆☆ 문법(Syntax) gsap.to("타겟", {id: "id 이름", 속성: 속성값, ....}); //id를 설정하는 경우 gsap.to("target", {id: "myTween", duration: 1, x: 100}); //id를 불러오는 경우 gsap..
gsap.fromTo() 애니메이션을 줄 때 시작점과 끝점을 지정해주는 메서드입니다. gsap.to() 메서드는 끝나는 애니메이션 지점을 설정하고, gsap.from() 메서드는 시작하는 애니메이션 지점을 설정하고, gsap.fromTo() 메서드는 시작하는 점과 끝나는 점 모두를 설정할 수 있습니다. 이렇게 하면 CSS 속성을 따로 수정하지 않고 스크립트로 애니매이션을 완벽하게 통제할 수 있습니다. gsap.fromTo() gsap.fromTo() 메서드는 시작 점과 끝나는 점을 지정하는 애니메이션입니다. 특징 설명 버전 GSAP3 결과값(return) 움직임(tween) 사용성 ★★★★☆ 문법(Syntax) gsap.fromTo("타겟", {시작 속성: 시작 속성값, ....},{끝나는 속성: 끝나는 속성값, ....}); ..
gsap.from() gsap.from() 애니메이션을 줄 때 시작 지점을 지정해주는 메서드입니다. 즉 gsap.to() 메서드와 반대입니다. gsap.to() 메서드는 시작점을 지정하지 않고, 완료된 점을 지정해주면 현재 지점에서 완료 지점까지 애니메이션 됩니다. gsap.from()은 시작점을 지정해주면, 시작점에서 현재점으로 이동하게 됩니다. 메서드만으로 애니메이션을 쉽게 컨트롤 하기 좋은 메서드입니다. gsap.from() gsap.from() 메서드는 시작 점을 지정하는 애니메이션입니다. 특징 설명 버전 GSAP3 결과값(return) 움직임(tween) 사용성 ★★★★★ 문법(Syntax) gsap.from("타겟", {속성: 속성값, ....}); 타겟(targets) : 애니메이션을 적용할 개체를 선택합니다. ..
[CSS] 트랜지션 트랜지션 트랜지션과 관련된 속성입니다. 트랜지션 트랜지션과 관련된 속성입니다. 트랜지션과 관련된 속성들 속성 설명 transition transition 속성은 요소의 움직임을 정의합니다. transition-delay transition-delay 속성은 요소의 움직임 시간을 지연합니다. transition-duration transition-duration 속성은 요소의 움직임 지속시간을 정의합니다. transition-property transition-property 속성은 transition의 적용 여부를 정의합니다. transition-timing-function transition-timing-function 속성은 요소의 움직임 기능을 정의합니다.
[CSS] 애니메이션 애니메이션 애니메이션과 관련된 속성입니다. 애니메이션 애니메이션과 관련된 속성입니다. 애니메이션과 관련된 속성들 속성 설명 animation animation 속성은 애니메이션을 정의합니다. animation-delay animation-delay 속성은 요소가 로드된 후 애니메이션이 시작될 때 까지의 시간을 나타냅니다. animation-direction animation-direction 속성은 애니메이션 움직임 방향을 설정합니다. animation-duration animation-duration 속성은 애니메이션 움직임 시간을 설정합니다. animation-fill-mode animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정합니다. animation-iteration-c..
1 ··· 4 5 6 7 8 9 10 ··· 29
Alphabet
Topic
Alphabet
Topic
Alphabet
Topics



Topics
Topics
Topics
Topics
Topics
Topics
Topics
Topics

티스토리툴바