패밀리 서비스
goormEDU
로그인회원가입
전체
루트공지사항Q&A

SVG 마스터

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

클래스 소개
난이도
쉬움
카테고리
웹 프로그래밍 - 프로그래밍
태그
자바스크립트, CSS
추천 학습대상
- 웹페이지의 아이콘, 일러스트 등에 SVG를 이용하고 싶은 분들
- SVG를 이용해 동적이고 멋진 인터랙티브 애니메이션 그래픽을 만들고 싶은 분들
- SVG를 이용해 창의력 넘치는 작업을 하고 싶은 디자이너들
- SVG가 뭔지는 대강 알겠는데 정보가 많고 혼란스러워 정리가 필요한 분들
- 웹페이지에 살아있는 내 작품을 표현하고 싶은 일러스트레이터


여러분 안녕하세요! 1분코딩의 일분이에요 🙌

<부담 없이 쉽고 편하게, 자바스크립트 기초 정리!>를 듣고
좀 더 다양한 웹 개발이 궁금해졌다면
<SVG 마스터>를 들어보실래요?



Q. 무슨 수업인가요?



SVG가 무엇인지 아는 분?!👋
SVG란 현대 웹페이지 그래픽 표현에서
유용하게 쓰이는 벡터 그래픽 포멧입니다.
👼이번 시간에는 SVG의 기본 개념과 사용법부터 
애니메이션, 다양한 효과, 스크립트 인터랙션까지
SVG에 대한 핵심을 다루어볼 거에요




Q. 왜 들어야 하나요?



SVG에 대해 공부하려다가
너무 방대하고 이리저리 퍼져있는 자료 때문에
공부하기도 전에 지친 적 있으실 거에요😵

🤗그런 분들을 위해 SVG 조작에 필요한
기본적인 CSS, 자바스크립트 개념과
초보자를 위한 보너스 영상까지 챙겨드릴게요!
완강하고나면 여러분도 인터랙션 있는 SVG와
Font Awesome 같은 아이콘 폰트를 만들 수 있어요.





Q. 자랑하고 싶은 강의의 장점은?



여러분이 좀 더 편하게 공부할 수 있도록
강의에서 사용하는 예제 소스를 모두 제공드려요.
챕터마다 다운로드 받을 수 있으니
꼭 다운로드 받아서 편하게 따라하세요!📚





Q. 자바스크립트를 모르면 어떡해요?



🎁자바스크립트 개념정리부터 짚어보셔야 한다면
스튜디오밀 유튜브의 자바스크립트 기초 영상과 함께 보세요.



강의자 유준모 님을 소개합니다!

 

(現) 창의력 넘치는 웹 사이트 개발 전문 스튜디오밀 대표
(前) 한글과컴퓨터 Front-end 개발자 / 디자이너

자바스크립트 이외에도 더 많은 웹 디자인 공부를 하고 싶다면
스튜디오밀 유튜브에서 다양한 강의와 경험 이야기를 만나실 수 있어요😉
체험하기
모두 펼치기
교육 과정
모두 펼치기
  • 01
    시작하기
    • 준비하기
    체험하기
  • 02
    SVG의 개념과 기본적인 사용법
    • 1챕터 소스코드 다운로드
    SVG란?
    체험하기
    HTML 문서에 SVG를 넣는 여러 가지 방법들
    체험하기
    SVG 크기 설정
    체험하기
    SVG 압축하기
    체험하기
  • 03
    CSS와 자바스크립트 적용하기
    • 2챕터 소스코드 다운로드
    CSS 적용하기 1
    CSS 적용하기 2
    자바스크립트 적용하기 1
    자바스크립트 적용하기 2
  • 04
    그리기
    • 3챕터 소스코드 다운로드
    기본도형 그리기
    직선 그리기
    Path로 그리기
    Stroke 모양 조정하기
    그룹 만들기
  • 05
    텍스트
    • 4챕터 소스코드 다운로드
    기본 글자 쓰기
    곡선을 따라 글자 쓰기
    텍스트 부분 스타일링 적용하기
  • 06
    효과
    • 5챕터 소스코드 다운로드
    그라디언트
    패턴 1 - 패턴의 기본적인 사용법
    패턴 2 - 애니메이션이 적용된 일러스트 패턴
    마스크 1 - 마스크의 기본적인 사용법
    마스크 2 - 자바스크립트를 이용해 돋보기 효과 만들기
  • 07
    Stroke 애니메이션
    • 6챕터 소스코드 다운로드
    Stroke 애니메이션 기본
    그래픽 로고가 그려지는 애니메이션 만들기
  • 08
    SMIL 애니메이션
    • 7챕터 소스코드 다운로드
    SMIL 애니메이션의 기본적인 사용법
    애니메이션 조작하기
    Morphing 효과 만들기
    CSS 애니메이션의 alternate를 SMIL로 구현하기
  • 09
    아이콘 폰트 만들기
    • 8챕터 소스코드 다운로드
    아이콘 폰트 세트 만들기
  • 10
    인터랙티브 SVG: 마우스를 부드럽게 따라다니는 귀여운 몬스터 애니메이션 만들기
    • 9챕터 소스코드 다운로드
    React Mon 만들기 1
    React Mon 만들기 2
    React Mon 만들기 3
    React Mon 만들기 4
  • 11
    보너스 강의
    • CSS - Transform
    CSS - Transition
    CSS - Animation 1
    CSS - Animation 2
마지막 업데이트|2019년 07월 28일
강의자 소개
1분코딩캡틴
안녕하세요. 구름에듀 캡틴 1분코딩입니다. 함께 학습을 시작해봐요!
강좌 후기
￦
27,500
평균평점
0.0
난이도
쉬움
수강기간
평생 무제한