전체 글
-
[에스비지] SVG (Scalable Vector Graphics) -(05편)- 직선그리기 (feat. line, polygon, plyline)SVG 2021. 2. 5. 20:57
https://blog.naver.com/nicholasdw/222233110081 [에스비지] SVG (Scalable Vector Graphics) -(05편)- 직선그리기 (feat. line, polygon, plyline) #svg #svg그리기 #에스비지 #에스비지그리기 #에스비지직접그리기 #polygon #polyline #line #폴리곤 #폴리... blog.naver.com 저의 또 다른 블로그 네이버블로그의 포스팅을 링크하였습니다.
-
[자바스크립트, JavaScript, DOM] - getElementbyId, getElementsbyClassName, getElementsbyTagName....javascript 2021. 2. 1. 23:13
https://blog.naver.com/nicholasdw/222228254668 [자바스크립트, JavaScript, DOM] - getElementbyId, getElementsbyClassName, getElementsbyTagName.... #돔메서드 #getElementbyId #getElementsbyClassName #getElementsbyTagName #DOM #methods #메... blog.naver.com 해당 링크에서 확인해 주세요. 제가 직접 작성한 것입니다.
-
[에스비지] SVG (Scalable Vector Graphics) -(04편)- 기본도형 그리기(feat. rect, circle, ellipse, cx, cy, rx, ry, r)SVG 2021. 1. 31. 21:50
https://blog.naver.com/nicholasdw/222226829824 [에스비지] SVG (Scalable Vector Graphics) -(04편)- 기본도형 그리기 #svg #svg그리기 #에스비지 #에스비지그리기 #에스비지직접그리기1. shape 이라는 클래스 명을 가진 sv... blog.naver.com 이 곳을 참고 해 주세요. 저의 또 다른 블로그입니다.
-
[에스비지] SVG (Scalable Vector Graphics) -(03편)- JS적용하기SVG 2021. 1. 31. 20:22
이전시간에 만들어 본 SVG로 얼굴을 만들어 봤다. https://nyjchoi.tistory.com/6 [에스비지] SVG (Scalable Vector Graphics) -(02편)- CSS적용하기 (feat. fill, transform-origin,nth-of-type) https://blog.naver.com/nicholasdw/222225947902 [에스비지] SVG (Scalable Vector Graphics) -(02편)- CSS적용하기 (feat. fill, transform-origin,nth-of-type) #svg #scaralableVectorGraphics #확장가능벡터.. nyjchoi.tistory.com 전편 참고하시라. 지난번 시간에는 CSS로 애니메이션을 줘봤다면, ..
-
[에스비지] SVG (Scalable Vector Graphics) -(02편)- CSS적용하기 (feat. fill, transform-origin,nth-of-type)SVG 2021. 1. 31. 00:48
https://blog.naver.com/nicholasdw/222225947902 [에스비지] SVG (Scalable Vector Graphics) -(02편)- CSS적용하기 (feat. fill, transform-origin,nth-of-type) #svg #scaralableVectorGraphics #확장가능벡터그래픽 #벡터그래픽이번에 할 새로운 것에 앞서, 새로운... blog.naver.com 링크를 통해 확인해 주세요.
-
[CSS] 3D 효과, transfrom 과 관련된 속성html & css 2021. 1. 28. 17:15
transform 의 3d속성들 기본적으로 transfrom을 사용해 봤을테지만, 거의 2d 위주로 사용해 왔다. 그래서 3d 속성들에 대해 알아보고 기록하고자 한다. 익숙해질때까지 연습하자. See the Pen 3d transform and transform-origin by builderous (@nyjchoi) on CodePen. 자세한 설명은 위의 코드펜에 주석으로 설명을 달았다. 정리하자면, transform-origin : x축 y축; 이렇게 써주면 되는데, 기본값은 50% 50%d이다. 즉 대상의 딱 가운데가 중심인 것이다. x축 left,right, center, %, 단위(px 등) y축 : top, bottom, center, %, 단위(px 등) 그리고 3d의 원근값을 적용시키려면..
-
[jQuery] animate({});javascript 2021. 1. 25. 23:52
//기본 문법(Syntax) $(selector).animate({styles},speed,easing,callback); //$('선택자').animate({property: value}, 지속시간, 가속/감속, callback); //지속시간, 가감속, 콜백은 선택사항이다. 기본적으로 click(fucntion(){}); 안에 주로 쓰인다. 자바스크립트에서 click(fucntion(){});와 같은게, document.querySelector('선택자').addEventListener('click', function(){ 여기 }); 여기라고 쓴 곳 안에 animate 매서드가 들어가는 것과 비슷하다고 봐야겠다. 위를 보면 알 수 있듯이, styles: 속성과 속성값이 들어간다. 예를 들면, 속성값..