강의

멘토링

커뮤니티

BEST
개발 · 프로그래밍

/

웹 개발

SVG 마스터

웹 벡터 그래픽 SVG를 기초부터 제대로 익히고, 재미있고 다양한 예제들을 통해 원하는 방향으로 응용할 수 있는 기술을 습득합니다.

(4.9) 수강평 102개

수강생 1,669명

  • 1분코딩

먼저 경험한 수강생들의 후기

수강 후 이런걸 얻을 수 있어요

  • 웹페이지에서 SVG 그래픽 제대로 사용하기

  • 자바스크립트를 이용해 인터랙션이 있는 SVG 만들기

  • Font Awesome같은 아이콘폰트 만들기

깨지지 않는 이미지 제작을 원한다면?
1분코딩님의 SVG강의로 마스터하기! 😎

SVG (스케일러블 벡터 그래픽스)
2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로,
해상도가 깨지지 않는 깔끔한 이미지를 표현하기에 좋습니다.


기초부터 다양한 효과까지
한 번에 배워요 🔎

SVG는 현대 웹페이지 그래픽 표현에 널리 쓰이는 벡터 그래픽 포맷입니다.
본 강의는 SVG의 처음인 기초 개념부터 애니메이션, 다양한 효과, 스크립트 인터랙션까지 다뤄봅니다.

SVG를 공부해보고 싶었지만 너무 방대하고 산발적인 자료들 때문에
손 놓으셨던 분들은 이 수업으로 한 번에 학습하여 정리하실 수 있습니다.

이 강의만의
특징을 알려드려요 😝

  • SVG 조작에는 기본적인 CSS와 JS 개념들이 필요합니다.
    이에 익숙하지 않은 분들을 위해 보너스 강의 섹션에 개념정리 영상을 넣어두었습니다.

  • 처음부터 자바스크립트의 개념정리가 필요하시다면,
    유튜브 채널의 JS 기초 영상들로 함께 공부하셔도 좋습니다.

  • 각 섹션의 첫 번째 강의마다 삽입되어 있는 버튼을 클릭하시면
    모든 예제의 소스코드를 다운받아 편하게 학습하실 수 있습니다.


이런 분들께 추천해요 ✨

해상도가 깨지지 않는
SVG를 하나씩 배우고싶은 분

다양한 실습을 통해
SVG를 마스터하고싶은 분

인터랙티브 SVG를
만들어보고싶은 분

 

연관 로드맵 🚎

"Oh!" 감탄사가 나오는 역동적인 인터랙티브 웹사이트를 만들어요.
1분코딩님의 인터랙티브 웹 사이트를 만들어보는
강의들로 구성된 로드맵입니다.
이 강의 포함

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • 웹페이지의 아이콘, 일러스트 등에 SVG를 이용하고 싶은 분

  • 동적이고 멋진 인터랙티브 애니메이션 그래픽을 만들고 싶은 분

  • SVG를 이용해 창의력 넘치는 작업을 하고 싶은 디자이너

  • SVG가 뭔지는 대강 알겠는데 정보가 많고 혼란스러워 정리가 필요한 분

  • 웹페이지에 살아있는 내 작품을 표현하고 싶은 일러스트레이터

선수 지식,
필요할까요?

  • CSS와 자바스크립트 기초

안녕하세요
입니다.

19,573

수강생

1,266

수강평

1,175

답변

5.0

강의 평점

11

강의

서울에서 웹 개발자/디자이너로 일했고, 제주를 거쳐.. 현재는 말레이시아 페낭에서 열심히 개발도 하고, 교육 콘텐츠도 만들고, 1인 기업으로서 해볼 수 있는 여러가지 시도와 실험들을 해보고 있습니다.
비주얼 임팩트가 있는 인터랙티브 웹에 관심이 많고, 유튜브와 페이스북 "1분코딩"에서 웹 개발 관련 기술들을 공유하고 있어요.

커리큘럼

전체

37개 ∙ (4시간 21분)

해당 강의에서 제공:

수업자료
강의 게시일: 
마지막 업데이트일: 

수강평

전체

102개

4.9

102개의 수강평

  • 김성은님의 프로필 이미지
    김성은

    수강평 1

    평균 평점 5.0

    5

    11% 수강 후 작성

    안녕하세요. 항상 공부하면서 라이브러리나 SVG 효과가 들어간 홈페이지를 보면서 저건 어떻게 만드는지 너무너무 궁금해서 혼자 코드를 분석해보기도 했었는데요. 혼자 코드 분석했을 때, 이해가 잘 가지 않아 제자리 걸음만 했었습니다. 그렇던 와중에 유튜브로 스튜디오 밀님의 영상을 보게 되었고, 강의를 알게 되어 결제를 진행했습니다. SVG 효과 뿐만 아니라, 인터렉티브 웹도 엄청 관심있는 부분이어서 바로 결제 했고, 강의 또한 너무너무 만족스럽게 잘 보고 있습니다. 아직 제대로 다 학습하진 못했지만, 이런 강의를 만들어주셔서 너무 감사한 마음에 평가 남깁니다. 감사합니다.

    • 1분코딩
      지식공유자

      와- 감사합니다. 써주신 수강평을 읽으니 힘이 막 납니다 ^^

  • 개발자님의 프로필 이미지
    개발자

    수강평 4

    평균 평점 5.0

    5

    100% 수강 후 작성

    html,css 기본기를 독학으로 2달간 깊숙히 익히고, java script도 어느정도 기본기를 익혔을때쯤, front 기술에 더 욕심이나서 svg강의를 신청하고 완강하는데 3일가량 걸렸습니다. 초반에는 html,css랑 비슷하면서도 뭔가 다른 느낌에 조금 어려울꺼 같다는 생각을 했었는데, 생각보다 어렵다는 느낌보다는 선수과정을 열심히 복습(?)해서 그런지 ㅎㅎ 어렵지 않고 재밌게 했습니다. 도중 도중 나오는 실습과제들도 혼자 계속 만들어보고 생각해보고 하다보니 어느새 3일만에 완강을 했네요 ㅎㅎ ( 개인적으로 정말 재밌게 했습니다. ㅎㅎ ) 인제는 java script를 확실하게 공부하러 갈 생각입니다 ! 모두다 화이팅입니다~~!

    • 1분코딩
      지식공유자

      다른 강의들 통해서 열심히 공부하셔서 기본기가 많이 좋아지셔서 아마 쉽게 느껴지셨을거에요! 학습 효과가 나타나는~^^ 항상 화이팅입니다! 좋은 수강평도 감사드려요.

  • 쏭아님의 프로필 이미지
    쏭아

    수강평 3

    평균 평점 5.0

    5

    81% 수강 후 작성

    1분코딩님 인터렉티브 강의 초급편 보고 넘어왔는데. 진행속도가 좀 빨라져서 좋아요~ 그리고 언제나 처럼 편안하게 이해가 쉽도록 강의해주셔서 좋아요. svg 너무 흥미롭네요~ 꼭 실무에 적용해봐야겠어요

    • 1분코딩
      지식공유자

      감사합니다 쏭아님!

  • 김기웅님의 프로필 이미지
    김기웅

    수강평 4

    평균 평점 5.0

    5

    100% 수강 후 작성

    좋은 강의 잘 들었습니다~~

  • 에버그린님의 프로필 이미지
    에버그린

    수강평 4

    평균 평점 5.0

    5

    32% 수강 후 작성

    css 마스터 1분코딩님 강의라 고민 없이 수강 신청했습니다! 아직 섹션4 듣고 있는데 가볍게 지식 쌓기 좋아요!! 앞으로 강의도 기대가 됩니당 ㅎㅎㅎ

₩27,500

1분코딩님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

비슷한 강의

같은 분야의 다른 강의를 만나보세요!