Thumbnail
BEST
개발 · 프로그래밍 웹 개발

SVG 마스터 대시보드

(5)
87개의 수강평 ∙  1,534명의 수강생

27,500원

지식공유자: 1분코딩
총 37개 수업 (4시간 21분)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유

초급자를 위해 준비한
[프론트엔드] 강의입니다.

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

✍️
이런 걸
배워요!
웹페이지에서 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와 자바스크립트 기초

안녕하세요
1분코딩 입니다.
1분코딩의 썸네일

서울에서 웹 개발자/디자이너로 일했고 지금은 제주에서 웹사이트 만드는 일, 강의, 영상 만드는 일, 컨텐츠 만드는 일 등 해보고 싶은거 이것저것 해보며 살고 있습니다 :)
비주얼 임팩트가 있는 인터랙티브 웹 개발에 특히 관심이 많고 페이스북과 유튜브 "1분코딩"에서 관련 기술들을 공유하고 있어요.

커리큘럼 총 37 개 ˙ 4시간 21분의 수업
이 강의는 영상, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 시작하기
준비하기 08:35
섹션 2. CSS와 자바스크립트 적용하기
CSS 적용하기 1 10:12
CSS 적용하기 2 02:49
자바스크립트 적용하기 1 03:51
자바스크립트 적용하기 2 01:25
섹션 3. 그리기
기본도형 그리기 10:00
직선 그리기 04:08
Path로 그리기 08:30
Stroke 모양 조정하기 05:12
그룹 만들기 01:39
섹션 4. 텍스트
기본 글자 쓰기 01:57
곡선을 따라 글자 쓰기 05:04
텍스트 부분 스타일링 적용하기 02:07
섹션 5. 효과
그라디언트 06:50
패턴 1 - 패턴의 기본적인 사용법 08:35
패턴 2 - 애니메이션이 적용된 일러스트 패턴 03:44
마스크 1 - 마스크의 기본적인 사용법 07:08
마스크 2 - 자바스크립트를 이용해 돋보기 효과 만들기 18:25
섹션 6. Stroke 애니메이션
Stroke 애니메이션 기본 06:55
그래픽 로고가 그려지는 애니메이션 만들기 09:43
섹션 7. SMIL 애니메이션
SMIL 애니메이션의 기본적인 사용법 05:11
애니메이션 조작하기 03:09
Morphing 효과 만들기 09:53
CSS 애니메이션의 alternate를 SMIL로 구현하기 04:07
섹션 8. 아이콘 폰트 만들기
아이콘 폰트 세트 만들기 07:52
섹션 9. 인터랙티브 SVG: 마우스를 부드럽게 따라다니는 귀여운 몬스터 애니메이션 만들기
React Mon 만들기 1 10:41
React Mon 만들기 2 08:01
React Mon 만들기 3 05:55
React Mon 만들기 4 12:15
섹션 10. 보너스 강의
CSS - Transform 13:20
CSS - Transition 10:01
CSS - Animation 1 09:42
CSS - Animation 2 05:30
강의 게시일 : 2019년 07월 17일 (마지막 업데이트일 : 2019년 07월 28일)
수강평 총 87개
수강생분들이 직접 작성하신 수강평입니다.
5
87개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
개발자 thumbnail
5
html,css 기본기를 독학으로 2달간 깊숙히 익히고, java script도 어느정도 기본기를 익혔을때쯤, front 기술에 더 욕심이나서 svg강의를 신청하고 완강하는데 3일가량 걸렸습니다. 초반에는 html,css랑 비슷하면서도 뭔가 다른 느낌에 조금 어려울꺼 같다는 생각을 했었는데, 생각보다 어렵다는 느낌보다는 선수과정을 열심히 복습(?)해서 그런지 ㅎㅎ 어렵지 않고 재밌게 했습니다. 도중 도중 나오는 실습과제들도 혼자 계속 만들어보고 생각해보고 하다보니 어느새 3일만에 완강을 했네요 ㅎㅎ ( 개인적으로 정말 재밌게 했습니다. ㅎㅎ ) 인제는 java script를 확실하게 공부하러 갈 생각입니다 ! 모두다 화이팅입니다~~!
2020-09-02
지식공유자 1분코딩
다른 강의들 통해서 열심히 공부하셔서 기본기가 많이 좋아지셔서 아마 쉽게 느껴지셨을거에요! 학습 효과가 나타나는~^^ 항상 화이팅입니다! 좋은 수강평도 감사드려요.
2020-09-04
김성은 thumbnail
5
안녕하세요. 항상 공부하면서 라이브러리나 SVG 효과가 들어간 홈페이지를 보면서 저건 어떻게 만드는지 너무너무 궁금해서 혼자 코드를 분석해보기도 했었는데요. 혼자 코드 분석했을 때, 이해가 잘 가지 않아 제자리 걸음만 했었습니다. 그렇던 와중에 유튜브로 스튜디오 밀님의 영상을 보게 되었고, 강의를 알게 되어 결제를 진행했습니다. SVG 효과 뿐만 아니라, 인터렉티브 웹도 엄청 관심있는 부분이어서 바로 결제 했고, 강의 또한 너무너무 만족스럽게 잘 보고 있습니다. 아직 제대로 다 학습하진 못했지만, 이런 강의를 만들어주셔서 너무 감사한 마음에 평가 남깁니다. 감사합니다.
2019-10-01
지식공유자 1분코딩
와- 감사합니다. 써주신 수강평을 읽으니 힘이 막 납니다 ^^
2019-10-01
박우림 thumbnail
5
잘 봤습니다!
2024-01-09
지식공유자 1분코딩
감사합니다 우림님!
2024-02-29
김기웅 thumbnail
5
좋은 강의 잘 들었습니다~~
2022-09-01
지식공유자 1분코딩
감사합니다!
2022-11-03
쏭아 thumbnail
5
1분코딩님 인터렉티브 강의 초급편 보고 넘어왔는데. 진행속도가 좀 빨라져서 좋아요~ 그리고 언제나 처럼 편안하게 이해가 쉽도록 강의해주셔서 좋아요. svg 너무 흥미롭네요~ 꼭 실무에 적용해봐야겠어요
2023-06-30
지식공유자 1분코딩
감사합니다 쏭아님!
2023-07-03