🚨 서비스 장애 발생 🙇🏻‍♀️ 🙇🏻

2020년 8월 5일 18시11분 부터 약 25분간 장애가 발생했습니다.
불편드려 죄송합니다. (자세히 보기)

SVG 마스터
SVG 마스터
수강정보
(18개의 수강평)
360명의 수강생
스킬태그 #SVG, #HTML/CSS
고만석 프로필

그림판에 도형을 따라 그리기 고만석 8일 전
안녕하세요! 그림판 처럼 보이는 곳에 도형이 이미 그려져 있고, 그것을 잘 따라 그리면 true, 잘 못 따라 그리면 false 라는걸 만들고 싶습니다. 모바일에서 동작하게 만들고 싶은데 도형을 잘 따라 그렸는지를 어떤식으로 확인 할 수 있을까요? 대략적인 방향을 잡아주시면 많은 도움이 될거같습니다 ㅠ 이러한 기능을 구현하려면 svg로 해야하는건지 canvas를 이용해야 하는지도 궁금합니다. 감사합니다!

1
고만석 프로필

선따라 움직이는 도형을 만들고 싶습니다 고만석 28일 전
선따라 움직이는 도형을 만들고 싶습니다. 선이 조금씩 나타나는건 dashoffset 값을 조정하면 되는데 그려진 도형을 참고하여 움직이는 걸 만들고 싶은데 잘 안되네요 ㅠ script로 x,y 좌표를 움직여야하는건지 잘 모르겠습니다.

1
jmh90711 프로필

svg path 애니메이션 질문입니다. jmh90711 1달 전
안녕하세요~ 요즘 svg에 관심이많고, 회사에서도 svg문의가 많아 얼마전부터 강의 신청해서 너무 잘 듣고있습니다. 좋은강의 올려주셔서 감사합니다.  강의를 보면서 다른svg파일로 svg path의 storke-dasharray를 이용하여 애니메이션을 테스트를 해보았는데요 안되는 부분들이 많아 질문남깁니다ㅠ 회사에서는 클립아트 아이콘을 많이 이용하는데, 애니메이션이 되는 아이콘이 있고 안되는 아이콘이 있어요. 예를들면 아래작성한 svg에 stroke animation을 주고싶은데 css애니메이션으로는 되질않네요ㅠ 무조건 path라고 다 애니메이션을 줄수있는건 아닌가요? 혹시 다른 방법이 있을까요?  너무궁금하네요. <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 600 600"> <path d="M241.9 43.3c-.9.7-5.3 8.5-9.8 17.5L224 77H16.9l-2.4 2.5C12 81.9 12 82 12 102.5v20.7l2.9 2.9 2.9 2.9h545.4l2.9-2.9 2.9-2.9v-20.7c0-20.5 0-20.6-2.5-23l-2.4-2.5H357l-8.4-16.9c-4.7-9.2-9.2-17.1-10.1-17.5-.9-.3-22.7-.6-48.3-.6-35.6.1-47.1.4-48.3 1.3zm94.9 32.2c6.4 13 8.8 16.8 10.8 17.5 1.6.6 40.6 1 103.5 1H552v17H29V94h101.8c85.5 0 102.1-.2 103.7-1.4 1.1-.8 5.6-8.6 10-17.5l8-16.1h76l8.3 16.5z"/> <path d="M264 85.5V94h53V77h-53v8.5zM47 274.4v128.5l2.4 2.8 2.4 2.8 69.7.3c65.6.2 69.7.3 69 2-.5 1.5-46.9 133.6-48 136.9-.3 1-14.3 1.3-65.5 1.3H12v17h557v-17h-65c-51.2 0-65.1-.3-65.5-1.3-.2-.6-11.2-32-24.3-69.7l-24-68.5 69.5-.5 69.5-.5 2.4-2.8 2.4-2.8V146h-17v245H64V146H47v128.4zM282 479v70h-60.5c-33.3 0-60.5-.3-60.5-.8 0-.4 10.9-31.9 24.2-69.9l24.3-69.3H282v70zm113.3-2.3c13.1 37.3 24 68.8 24.4 70l.5 2.3H299V409h72.5l23.8 67.7z"/> <path d="M82 155v9h17v-18H82v9zM231.4 147c-20.4 3-37.1 17.4-43.5 37.5-.8 2.8-1.4 15.2-1.8 40l-.6 36-2.8 5.7c-3.6 7.3-11.9 15-19.2 17.7-5.2 2-7.7 2.1-35 2.1H99v18h28.3c20.3 0 30-.4 34.8-1.4 18-3.8 33.3-17.8 39.1-35.5 1.9-6.1 2.2-9.5 2.7-42.6l.6-36 2.7-5c3.5-6.8 9.7-12.8 16.6-16.2 5-2.4 6.9-2.8 14.7-2.8 7.9 0 9.7.3 14.5 2.8 7.2 3.7 13.1 9.6 16.6 16.5 2.6 5.2 2.9 6.8 3.2 18.9l.4 13.3h18.1l-.6-13.5c-.5-10.5-1.1-15-3-20.3-4.2-12.1-12.7-22.6-23.2-28.7-9.2-5.4-22.8-8-33.1-6.5zM482 155v9h17v-18h-17v9z"/> <path d="M234.1 182c-7.2 1.7-13.1 9.2-13.1 16.5 0 5.4 3.1 11.7 7 14.5 3.4 2.4 11 3.7 15.4 2.6 4-1 9.3-6.3 11.2-11.1 4.8-12.6-7.1-25.7-20.5-22.5zM447.2 190.3l-6.2 6.2 9.5 9.5 9.5 9.5-28.2.6c-30.8.6-33.6 1.1-45 7.1-10.5 5.5-20.8 18.6-24.8 31.3-.9 2.8-1.5 15.2-1.9 40l-.6 36-2.8 5.7c-3.6 7.4-11.9 15-19.5 17.8-8 3.1-19.5 2.5-27-1.4-6.7-3.4-12.4-9.1-15.9-15.8-2.5-4.9-2.8-6.4-3.1-19.1l-.4-13.7H273v10.7c0 20.2 4.9 33 16.5 44.2 27.9 26.8 73.6 15.1 85.7-21.8 2-6.1 2.2-9.4 2.7-42.6l.6-36 2.7-5c3.5-6.8 9.7-12.8 16.6-16.2l5.7-2.8 28.5-.3 28.5-.3-9.8 9.8-9.7 9.8 6.3 6.3 6.2 6.2 18.2-18.3c11-11 18.4-19.2 18.8-20.8.4-1.6.1-3.8-.9-5.5-.8-1.6-9.3-10.7-18.8-20.2L453.5 184l-6.3 6.3zM273 242.5v8.5h18v-17h-18v8.5zM273 277.5v8.5h18v-17h-18v8.5z"/> <path d="M316.3 306.5c-4.9 3-8.3 9.2-8.3 15.1 0 4.9 3.5 11.1 7.9 14.1 15.4 10.4 34.3-8.4 23.8-23.7-3.6-5.4-7-7.3-13.4-7.7-4.9-.3-6.5 0-10 2.2zM82 365v9h17v-18H82v9zM482 365v9h17v-18h-17v9z"/> </svg>

1
주영재 프로필

svg안의 script 요소는 자동으로 defer 적용이 되는건가요 주영재 2달 전
일반적인 html 안의 script 요소의 경우 돔 파싱 이전에는 요소 접근이 안 되어서 body의 beforeend 부분에 넣어두던가 defer 속성을 명시하잖아요

1
recodinho 프로필

transform 포지션 임의변경 오류 recodinho 3달 전
안녕하세요, 1분코딩 선생님 강좌 너무 잘 듣고있습니다. 어제오늘 강좌 클리어 하면서 주말 순삭됐네요~!ㅎㅎ 제가 따라하다가 질문이 생겼는데 이렇게 여쭤봐도 될지 모르겠습니다. 일단 문제는 arm이라는 클래스 이름에 mining이라는 키프레임으로 애니메이션을 걸면 곡괭이질 하는 팔 위치가 오른쪽으로 변경됩니다. 억지로 translateX 활용해서 원래 위치 잡았는데 왜 그런지 한 번 봐주실 수 있을까요?  아래 html코드 그대로 붙여넣습니다. 감사합니다.  <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <meta http-equiv="X-UA-Compatible" content="ie=edge">   <title>DataMining</title>   </head> <body>   <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 378.5 159.87">     <defs>       <style>         .cls-1, .cls-2, .cls-6 {           fill: #2e75b6;         }         .cls-2 {           font-size: 93.8px;           font-family: UbuntuCondensed-Regular, Ubuntu Condensed;         }         .cls-3, .cls-4, .cls-5 {           letter-spacing: 0em;         }         .cls-6, .cls-7, .cls-8 {           fill-rule: evenodd;         }         .cls-6, .cls-9 {           animation: bar-move 0.7s 0.3s infinite alternate cubic-bezier(0.42, 0, 0.3, 1.01);           transform-origin: bottom;           transform-box: fill-box;         }         .cls-7 {           fill: #9dc3e6;           animation: bar-move 0.7s 0.5s infinite alternate cubic-bezier(0.42, 0, 0.3, 1.01);           transform-origin: bottom;           transform-box: fill-box;         }         .cls-8 {           fill: #adb9ca;           animation: bar-move 0.7s 0.7s infinite alternate cubic-bezier(0.42, 0, 0.3, 1.01);           transform-origin: bottom;           transform-box: fill-box;         }         @keyframes bar-move {             0% { transform: scale(1); }            30% { transform: scale(0.9); }           100% { transform: scale(1); }         }         .cls-9 {           fill: none;           stroke: #2e75b6;           stroke-miterlimit: 8;           stroke-width: 5.26px;         }         .body, .head {           fill: #727272;         }         .arm {           display: flex;           fill: #727272;           animation: mining 0.3s infinite alternate;           transform-origin: left;           transform-box: fill-box;         }         @keyframes mining {           from{ transform: translateX(-45px) rotatez(0deg); }           to  { transform: translateX(-45px) rotatez(10deg); }         }       </style>     </defs>     <path class="cls-1" d="M241,113h3c.85,2,1.18,4.67,2.27,7.45s2.18,5.7,3.29,8.73,2.19,6.08,3.23,9.12,1.93,5.82,2.69,8.35q1.13-3.79,2.61-8.35t3.1-9.12q1.63-4.55,3.22-8.73c1-2.78,2-5.17,2.85-7.18h6.31q.49,5.25.89,11.15c.25,3.92.49,8,.7,12.09s.39,8.35.53,12.63.29,8.52.43,12.73H270q-.15-4.63-.25-9.75t-.28-10.28q-.18-5.15-.39-10c-.14-3.25-.31-6.24-.5-8.95-.42,1.17-.95,2.63-1.59,4.39s-1.29,3.66-2,5.71-1.39,4.17-2.12,6.35-1.41,4.27-2.05,6.28-1.2,3.84-1.69,5.5-.89,3-1.17,4l-5-.13c-.94-3.37,0-6.91-1-10s-3.08-5.27-4-8-2.15-5.76-3-8-1.29-4.32-2-6" transform="translate(-53.2 -4.89)"/>     <path class="cls-1" d="M286.93,113.27h6.36v48.6h-6.36Z" transform="translate(-53.2 -4.89)"/>     <path class="cls-1" d="M329.49,161.87q-1.69-4.14-3.86-9t-4.52-9.67q-2.37-4.87-4.84-9.68t-4.88-8.94v37.24h-5.94v-48.6h5.3q2.69,4.35,5.2,8.9t4.77,9Q323,135.64,325,140t3.71,8.17V113.27h5.94v48.6Z" transform="translate(-53.2 -4.89)"/>     <path class="cls-1" d="M346.17,113.27h6.36v48.6h-6.36Z" transform="translate(-53.2 -4.89)"/>     <path class="cls-1" d="M388.72,161.87q-1.7-4.14-3.85-9t-4.52-9.67q-2.37-4.87-4.85-9.68t-4.87-8.94v37.24h-5.94v-48.6H370q2.68,4.35,5.19,8.9t4.78,9q2.25,4.45,4.27,8.77t3.72,8.17V113.27h5.93v48.6Z" transform="translate(-53.2 -4.89)"/>     <path class="cls-1" d="M403.36,137.53a46.52,46.52,0,0,1,1.27-11.71,21.71,21.71,0,0,1,3.64-7.89,13.81,13.81,0,0,1,5.72-4.42,19.84,19.84,0,0,1,7.53-1.37,18.29,18.29,0,0,1,5.8.88,16.79,16.79,0,0,1,4.24,2l-2,5.26a16.72,16.72,0,0,0-3.53-1.86,12.2,12.2,0,0,0-4.39-.74q-6.15,0-8.83,4.95t-2.69,14.9a43.58,43.58,0,0,0,.82,9.12,19.38,19.38,0,0,0,2.29,6.17,9.52,9.52,0,0,0,3.61,3.51,10,10,0,0,0,4.73,1.12,12.5,12.5,0,0,0,3.75-.49V138h6.36v22.86a22.22,22.22,0,0,1-4.73,1.55A27.31,27.31,0,0,1,421,163a16.52,16.52,0,0,1-7.07-1.51,14.84,14.84,0,0,1-5.62-4.63,23.09,23.09,0,0,1-3.68-7.92A43.89,43.89,0,0,1,403.36,137.53Z" transform="translate(-53.2 -4.89)"/>     <text class="cls-2" transform="translate(148.73 79.4) scale(1.01 1)"><tspan class="cls-3">D</tspan><tspan class="cls-4" x="54.31" y="0">A</tspan><tspan class="cls-5" x="101.58" y="0">T</tspan><tspan x="141.82" y="0">A</tspan></text>     <polygon class="cls-6" points="157.16 84.48 184.56 84.48 184.56 159.87 157.16 159.87 157.16 84.48 157.16 84.48"/>     <polygon class="cls-7" points="120.94 104.64 148.33 104.64 148.33 159.87 120.94 159.87 120.94 104.64 120.94 104.64"/>     <polygon class="cls-8" points="86.48 119.54 113.87 119.54 113.87 159.87 86.48 159.87 86.48 119.54 86.48 119.54"/>     <line class="cls-9" x1="182.02" y1="85.32" x2="202.33" y2="148.91"/>     <path class="body" d="M89.38,63.1C86.63,73,84,83,81.87,93c-.36,1.69,1.52,4.43,3.12,5.84,4.12,3.65,8.28,7.55,13.11,10,10.23,5.28,15.46,13.51,17.28,24.53,1.26,7.57,3,15.07,4.32,22.63.89,4.9-.73,7.76-4.46,8.49-4.79.94-8.52-1.31-9.51-6A136.49,136.49,0,0,1,103.17,144c-1-9.56-5.83-16.48-13.7-21.53-4.07-2.6-8.27-5-12.41-7.5l-1.43,1.15c.84,3.11,1.14,6.51,2.62,9.27,5.63,10.48,3,19.55-4,28.12-1.75,2.13-3.2,4.55-5.12,6.5-1.59,1.62-3.53,3.57-5.56,3.91-2.74.46-5.71-.49-8.58-.83.43-2.4.35-5,1.4-7.13A116,116,0,0,1,63.64,144c3.41-5.12,3.54-10.26.68-15.61-1.44-2.69-2.51-5.6-4.15-8.14-6.58-10.19-8.3-21.17-6-32.95,2.22-11.44,5-22.68,10.59-33C71.31,42.09,76.85,39.66,90,44.11,94.84,45.76,99.19,54.3,98,55" transform="translate(-53.2 -4.89)"/>     <path class="arm" d="M83.52,54.56c-5.41-6.34-6.67-14.9,6.45-10.45a70.58,70.58,0,0,1,13.93,7c8.55,5.24,16.87,10.84,25.26,16.33,1.75,1.15,3.17,1.63,4.94-.17,11-11.22,22.06-22.35,33.09-33.53a13.61,13.61,0,0,0,1.34-2.26c-5.89-3.33-11.66-6.53-17.37-9.86-1.29-.76-3.07-1.78-3.34-3-.39-1.8.34-3.85.59-5.8,1.63.32,3.48.24,4.84,1,6.05,3.44,11.92,7.21,18,10.66a7.36,7.36,0,0,0,4.53.83c3.08-.52,7,2.38,6.08,5.31s.79,4.16,1.86,6.12q4.65,8.54,8.86,17.31c.5,1,.07,2.54-.64,4.16-4.4-7.34-8.4-14.79-16.36-20.43-1.45,1.81-2.8,3.7-4.35,5.39-9.32,10.2-18.73,20.31-28,30.57a8.85,8.85,0,0,0-2.1,4.88c-.27,3.77-2.3,5.42-5.67,4.89a19.89,19.89,0,0,1-7.62-2.85C120.78,76.06,114,71,107,66.31a98.13,98.13,0,0,0-10.64-5.87" transform="translate(-53.2 -4.89)"/>     <path class="head" d="M83.52,26.35c-.09-6.4,2.24-11.67,7.59-15.28,7.65-5.16,16.73-1.72,19.35,7.17,2.45,8.3-2,18.52-9.34,21.22C91.52,43,83.56,37.09,83.52,26.35Z" transform="translate(-53.2 -4.89)"/>   </svg> </body> </html>

3
Kimmy K 프로필

파일을 다운로드할수가 없어요ㅠㅠ Kimmy K 4달 전
유효하지않는 변수라고 하면서 다운로드가 안되는데 다른방법으로 파일을 얻을수있는방법이있나요? 

3
gga01075 프로필

마스크 연습 gga01075 5달 전
https://www.interword.hu/ 이 사이트에 있는 위의 글자처럼 뒤에 video태그를 배경으로 깔아두고 글자에 마스크 처리를 해서 보여줄순없나요? 밑의 사진 2장은 제가 연습해본 html,css파일인데 잘 안됩니당ㅠㅠㅠ

3
gga01075 프로필

script위치 gga01075 5달 전
보통 script위치를 head태그안에 쓰고  DOMContentLoaded나 제이쿼리같은경우 $(document).ready(function(){ });이런식으로 쓰는데 svg안에 들어가는 script는 그런걸 쓰지않아도 되는건가요?

1
gga01075 프로필

nth-of-type gga01075 5달 전
svg랑은 관계없이 nth-of-type에 대한 질문인데용..  각각의 눈을 선택자로 선택하실때 .face_eye:nth-of-type(2)와 .face_eye:nth-of-type(3)으로 선택하셨는데 제가 알고있던 것으로 생각했다면  부모를 기준으로 .face_eye라는 클래스를 가진 자식요소에서 첫번째요소,두번쨰요소를 선택하려고 .face_eye:nth-of-type(1)과 .face_eye:nth-of-type(2)를 썼을것입니다. 왜 2와 3인지 잘모르겠어용ㅠㅠ

2
최광일 프로필

svg로 움직이는 최광일 5달 전
svg로 움직이는 것도 구현이 가능 한가요? gif처럼요

1
znffjdznffjd 프로필

강의중 오류 문의 znffjdznffjd 6달 전
안녕하세요 강사님, 강의 재밌게 잘 보고 있습니다.  03:09 분 영상에서 transform-origin: 19px 42px; 이 없는데도 불구하고 캐릭터가 윙크를 정상적으로 하고 있네용 영상 오류가 아닌가 싶어서 문의 드립니다. 

1
한연희 프로필

익스플로러에서 height auto가 적용이 안되는데 어떻게 해야할까요? 한연희 8달 전
크롬이나 파이어폭스에서는 위 처럼 잘 보이는데 익스에서만 이렇게 보입니다 ㅠㅠ 여기저기 찾아봤지만 해결이 안돼서 질문 드립니다! 그냥 png파일로 넣어야할까요,,,,?ㅜㅜ

3
moonjulu 프로필

안녕하세요 질문이 있습니다. moonjulu 9달 전
x축으로 이동후에 이어서 y축으로 이동하려면 어떻게 해야하나요?

1
ORCA 프로필

질문있습니다 ORCA 10달 전
우선 인프런 강의들과 유튜브 채널을 통해서 강의 잘 듣고 있습니다. canvas 태그 영상을 보고 독학을 하던 도중에 canvas태그가 로우레벨이라 라이브러리를 찾게되었다는 글을 몇개 보게 되어서 질문드리게 되었습니다. 선생님은 canvas태그 라이브러리에 대해서 어떻게 생각하는지와 사용하시는지 궁금합니다.

2
Mingyu Jeon 프로필

svg 내부 요소들 center 정렬하기 Mingyu Jeon 2019.08.06
안녕하세요! 강의 잘보고 있습니다. 예제를 조금 수정해서 이것저것 바꿔보고 있는데 혹시 svg 안의 요소들을 center 정렬하는 방법이 따로 있을까요?   제가 시도해본 방법은  1. svg안에 class를 주고,display: flex; justify-content: center; align-items: center;   2. svg안쪽에서 가장 최상위 요소에, top: 0; left:0; bottom: 0; right: 0; margin: auto;   그런데 위의 두 방식은 전혀 동작하지 않더라구요. 그래서 지금 preserveAspectRatio 속성을 이용해서 적용해볼까 하는데 혹시 간단한 방법이 있을까요?   감사합니다 :)

1
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스