Thumbnail
BEST 개발 ・ 프로그래밍 웹 개발
SVG 마스터
(4.9)
31개의 수강평 ∙ 594명의 수강생

27,500원

지식공유자 : 1분코딩
총 37개 수업˙총 4시간 21분
평생 무제한 수강
수료증 발급 강의
초급 대상
내 목록 추가 475 공유
leemj2897 프로필

svg 파일 불러오기 leemj2897 14일 전
안녕하세요! 섹션5 그라이언트 부분 수업을 듣고 있습니다! 수업 자료를 다운 받아보니 확장자가 ai로 뜨는데 포토샵이나 변환 프로그램을 이용해 svg파일로 변환시키면 불러오기는 되지만 path 태그가 안떠서요ㅠㅠ 이럴 땐 어떻게 해야 하나요??

1
정태웅 프로필

svg 태그 질문! 정태웅 25일 전
안녕하세요 강사님  복습중에 일러스트로 svg를 직접 만들어서 해보는데  타원을 그려도 svg 코드에서는 path로 되있는경우가 있더라구요 그런데 css로 width로 svg를 줄이면 이미지가 부분부분 안보이더라구요  제 예상에는 path의 좌표들이 svg크기를 바꿔주면 꼬여서 그런거같은데  path로 등록되있는걸 도형 태그로 바꿔주는 기능이 따로잇을까요?

1
boyjeong 프로필

질문드립니다. boyjeong 26일 전
안녕하세요 강사님 강의재밌게 잘 듣고 있습니다. 질문이 있는데요, 자바스크립트(애니매이션)를 html head부분에 넣을때 오류가 나는데 다음과 같습니다. 답변주시면 감사하겠습니다. 좋은 하루 되세요.

1
정태웅 프로필

svg 텍스트 질문 정태웅 28일 전
안녕하세요 강사님 좋은 강의 많이 만들어주셔서 감사합니다 svg text를 사용해서 svg파일을 만들수는 없는걸까요? 예를들어 제가 text에 글귀를 넣고 style 태그에 구글폰트 임포트문도 추가하고 하여 글귀를 완성했습니다 html에서  이 svg 태그를 .svg확장자로 파일을만들고 안에 복사하니 오류가 떠서 문의드립니다!  svg파일은 단순히 선이나 도형 그리기 외에는 html 태그 내에서 꾸며주어야 하는 부분으로 나눠서 생각해야 하는 건가요?  인터렉티브웹 강의에서 canvas를 활용이 무궁무진하더라구요  svg로는 단순한 아이콘 꾸미는것만 생각이 나는데 어떤 효과를 줄수 있을까요?

1
지니재기 프로필

text 단락 띄어쓰기 지니재기 1달 전
강의와 관련있는 질문을 남겨주세요.• 강의와 관련이 없는 질문은 지식공유자가 답변하지 않을 수 있습니다. (사적 상담, 컨설팅, 과제 풀이 등)• 질문을 남기기 전, 비슷한 내용을 질문한 수강생이 있는지 먼저 검색을 해주세요. (중복 질문을 자제해주세요.)• 서비스 운영 관련 질문은 인프런 우측 하단 ‘문의하기’를 이용해주세요. (영상 재생 문제, 사이트 버그, 강의 환불 등) 질문 전달에도 요령이 필요합니다.• 지식공유자가 질문을 좀 더 쉽게 확인할 수 있게 도와주세요.• 강의실 페이지(/lecture) 에서 '질문하기'를 이용해주시면 질문과 연관된 수업 영상 제목이 함께 등록됩니다.• 강의 대시보드에서 질문을 남길 경우, 관련 섹션 및 수업 제목을 기재해주세요. • 수업 특정 구간에 대한 질문은 꼭 영상 타임코드를 남겨주세요! 구체적인 질문일수록 명확한 답을 받을 수 있어요.• 질문 제목은 핵심 키워드를 포함해 간결하게 적어주세요.• 질문 내용은 자세하게 적어주시되, 지식공유자가 답변할 수 있도록 구체적으로 남겨주세요.• 정확한 질문 내용과 함께 코드를 적어주시거나, 캡쳐 이미지를 첨부하면 더욱 좋습니다. 기본적인 예의를 지켜주세요.• 정중한 의견 및 문의 제시, 감사 인사 등의 커뮤니케이션은 더 나은 강의를 위한 기틀이 됩니다. • 질문이 있을 때에는 강의를 만든 지식공유자에 대한 기본적인 예의를 꼭 지켜주세요. • 반말, 욕설, 과격한 표현 등 지식공유자를 불쾌하게 할 수 있는 내용은 스팸 처리 등 제재를 가할 수 있습니다.  안녕하세요 선생님 마스크 기본과 돋보기 연습을 합쳐 텍스트 태그로 하다가 질문 드립니다.  <svg class="svg_box">     <defs>        <mask id="maskBox">            <circle cx="50" cy="10" r="100"></circle>        </mask>         <style>             #maskBox circle{                 fill:#fff;             }         </style>         <script>             window.addEventListener('DOMContentLoaded', () => {                                  const maskElem = document.querySelector('#maskBox circle');                                  window.addEventListener('mousemove', (e) => {                                          maskElem.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`;                                      });                              });         </script>     </defs>           <g mask="url(#maskBox)">         <text x="10" y="100"> 긴텍스트 긴텍스트 긴텍스트<br></text>      </g>   </svg> 마스크 안의 텍스트가 br태그를 써도 안내려가고 브라우저 창 밖으로 길게만 텍스트가 유지되더라구요. 혹시 텍스트태그로는 단락 띄어쓰기가 불가능한것인지 여쭤봅니다!

1
베베베 프로필

circle dasharray / dashoffset 사용시 궁금점 베베베 1달 전
circle 애니메이션 에서 기본값이 3시 방향이던데 12시 방향을 기본값으로 하려면 어떻게 해야 하나요?

1
Dongwoo Ha 프로필

설정값 우선순위... Dongwoo Ha 2달 전
기존의  html tag들은 css에 속성을 넣은것보다 tag에 직접 넣는것이 우선순위가 높았던것 같은데... 왜 svg는 역순(?)인가 궁금해서 아래 3가지 방법을 통해서 h1 tag와 비교해 보았어요.   a. tag에 직접 컬러설정   b. tag명으로 css에 컬러설정   c. class로 css에 컬러설정 [ CSS ] ... .ellipse { fill: blueviolet; } ellipse { fill: #fff000; } .h1 { color: blueviolet; } h1 { color: #fff000; } ... [ code ] ... <svg class="shapes"> <ellipse class="ellipse" cx="200" cy="200" rx="100" ry="50" fill="red" stroke="green" stroke-width="20" ></ellipse> </svg> <h1 class="h1" style="color: red;">Hello</h1> ... [ result ] svg는  c > b > a  순서로 우선순위 높음 (ellipse는 보라색) h1 tag는 a > c > b 순서로 우선순위 높음 (h1은 빨간색) chrome 개발자 도구를 통해 css stack을 보니깐, 아래와 같았는데... 여기서 질문..! tag에 값을 주었는데, ellipse는 가장아래 ellipse의 fill attribute style로 적용되고, h1은 가장위에 element.style로 적용이 되네요. ellipse는 fill속성이 기본적으로(?) 있어서 가장 먼저 적용되면서 그려지고, 이후 tag css, class css로 덮어쓰여지는 것이고,  h1같은 경우에는 기본 attr에 color가 없어서, tag css, class css가 쓰인 이후에 마지막으로 tag내의 style="color:red;"로 적용되는현상 이다.....라고 생각하면 될까요? 이건 어떻게 이해하면 가장 옳은(?) 생각일까요...ㅎ 간단하면서도 해깔리길래... 맞는가, 잘못 생각하는건가... 궁금해서 질문들 봅니다.  좋은 하루 되세요.

2
박샘 프로필

object 태그로 넣은 svg는 어떻게 컨트롤 하나요? 박샘 2달 전
안녕하세요! 수업 내용을 듣고 object태그를 이용하여 svg를 넣어 주었는데요! 처음에 연결만 되고 뜨는건 많은데 인라인으로 삽입했을 때 처럼 자유롭게 컨트롤이 안되 더라고요! 여기저기 찾아보다가 해당오브젝트에.addEventListener('load', ()=>{})를 이용하여 패스를 선택하는 것에는 성공하였는데요. 뭔가 이상한건지..그 위에 마우스가 지나갈 때(마우스에 움직이는 모양을 달았어요),  엄청 버벅거리면서 svg그림에 막혔다가 움직이는 것처럼 보이더라고요(기본 마우스 포인터는 상관없는데,  clientX,clientY로 위치를 준 마우스를 쫒아다니는 이미지가 이상해요). 그냥 인라인으로 svg를 넣었을 때는 아무이상 없는데,  object에넣고 위에 말한 방식으로 부른 svg파일에서만 그러더라고요..뭔가 다른 방법이 있는데 잘 못 연결해서 그런 걸까요.. 인라인으로 svg를 컨트롤 할 때의 내용들만 있어서, 어디에 질문을 남겨야 할지 몰라서 여기에 남겨요ㅠ 내용이 길었네요 감사합니다!

2
HIRU 프로필

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

1
조인태 프로필

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

2
개발자 프로필

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

2
고만석 프로필

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

1
고만석 프로필

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

1
jmh90711 프로필

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

1

27,500원

내 목록 추가 475 공유
지식공유자 : 1분코딩
총 37개 수업˙총 4시간 21분
평생 무제한 수강
수료증 발급 강의
초급 대상
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스