초급자를 위해 준비한
[프론트엔드] 강의입니다.
이런 걸
배워요!
웹페이지에서 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분코딩"에서 관련 기술들을 공유하고 있어요.
개발자/디자이너/컨텐츠크리에이터
커리큘럼
전체
37개 ∙ (4시간 21분)
가 제공되는 강의입니다.