SVG 마스터
SVG 마스터
수강정보
(24개의 수강평)
468명의 수강생
스킬태그 #SVG, #HTML/CSS
HIRU 프로필

아이콘이 아닌 것에 SVG를 사용해도 되나요? HIRU 23일 전
안녕하세요,  저는 회사에서 퍼블리셔로 일하고 있습니다. 제가 지금 주로 하는 일이 디자이너님이 기계 설계도면을 일러스트로 작업하시고 SVG로 변환하여 저한테 주시면 저는 그 설계도면 중 어떤 요소들을 애니메이션 주는 기능을 추가하고 있습니다. 예를 들면 팬이 계속 해서 돌아가는 애니메이션을 준다던지 어떤 설비를 클릭하면 모달창이 뜨게 하는데 그 모달창을 퍼블리싱하는 등의 일을 하고 있습니다.제가 여기서 궁금한 것은 제가 하는 업무가 SVG를 활용해도 되는 것인지 해서요. 스튜디오밀님의 강의에서는 SVG를 아이콘이나 이미지 등에 많이 쓰이고 사이즈가 너무 크면 느리다고 하셨는데  제가 지금 작업하고 있는 SVG파일 크기는 지금 상태에서는 157KB 정도 이고 제가 하는 일에 SVG를 사용하는 것이 맞는지 의문이 듭니다. 제가 처음 이 업무를 받았을 때, 아무리 생각해도 설계도면을 CSS로 일일이 그리고 애니메이션을 주는 것은 말도 안된다고 생각해서  SVG로 작업하고 있는데 제가 잘 선택한 것이 맞는지 해서요.. 사수에게 묻고 싶지만 회사에서는 퍼블리셔가 저밖에 없습니다. 저는 퍼블리싱 공부 6개월 하고 취업한 거라 이런 부분에서 가이드를 주실 분이 안계시네요. 혹시 제가 하고 있는 업무가 SVG를 활용하는 것에 대해서 스튜디오밀님의 의견이 궁금해서 이렇게 질문 남깁니다. 좋은 강의 만들어주셔서 감사합니다. 

1
조인태 프로필

Canvas 강의 개설 계획 있으신가요? 조인태 1달 전
궁금해서 질문드립니다! 어디에 올릴지 모르겠어서 SVG에 올렸습니다!! 강의 늘 잘보고있습니다.

2
개발자 프로필

강의와는 관계없는 질문일수는 있지만.. 궁금해서 질문 드립니다 ! 개발자 1달 전
안녕하세요. 1분코딩님 최근에는 youtube로 1분코딩님이 올리신 무료 svg 영상을 보고 확실하게 준비하고 공부하면 좋겠구나 싶어서 유료강의 svg, 애플 웹사이트 따라하기를 결제하였습니다 ~ ( 그때 T스토리에 배운 내용 써도된다고 허락해주셔서 감사합니답. ^_^ ) 본론으로 ! 정말 궁금한 점은 1분코딩님은 혹시 따로 메신져나 메일을 받으시는지 궁금합니다.. ㅠㅠ 

2
고만석 프로필

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

1
고만석 프로필

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

1
jmh90711 프로필

svg path 애니메이션 질문입니다. jmh90711 4달 전
안녕하세요~ 요즘 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 적용이 되는건가요 주영재 5달 전
일반적인 html 안의 script 요소의 경우 돔 파싱 이전에는 요소 접근이 안 되어서 body의 beforeend 부분에 넣어두던가 defer 속성을 명시하잖아요

1
recodinho 프로필

transform 포지션 임의변경 오류 recodinho 5달 전
안녕하세요, 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 6달 전
유효하지않는 변수라고 하면서 다운로드가 안되는데 다른방법으로 파일을 얻을수있는방법이있나요? 

3
gga01075 프로필

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

3
gga01075 프로필

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

1
gga01075 프로필

nth-of-type gga01075 8달 전
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로 움직이는 최광일 8달 전
svg로 움직이는 것도 구현이 가능 한가요? gif처럼요

1
znffjdznffjd 프로필

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

1
한연희 프로필

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

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