ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko nb ko ko ko en en ko ko ko ko ko ko ko ko ko ko ko en ko ko ko ko ko km ko ko ko ko ko ko ko ko oc ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko en ko ko ko en ko ko ko ko en es ko ko ko ko ko ko en
#2 초간단 개발환경 세팅하기 – 웹 코딩 강좌 | 디자인베이스
홈 웹 코딩 #2 초간단 개발환경 세팅하기 – 웹 코딩 강좌
웹 디자이너를 위한 웹 코딩 강좌 두 번째 시간입니다.
웹 코딩에 대한 이해와 실제 작업을 하기 전에 최소한의 준비물이 있습니다. 바로 에디터 툴! 마치 포토샵과 같은 거예요. 물론 그림판으로 그림을 그리듯, 메모장으로도 코드를 작성할 수는 있지만… 개인적으로 굳이 그렇게 해야 하나 싶어요.
저는 개인적으로 비주얼 스튜디오 코드를 사용합니다. 브라켓, 아톰, 서브라임 텍스트, 스톰 등등의 좋은 에디터 툴들도 있습니다. 기존에 사용하시던 툴이 있다면 따로 설치하실 필요는 없습니다.
*디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 제가 사용하는 툴은 비주얼 스튜디오 코드(Visual Studio Code)를 사용하며 여러분이 다른 툴을 사용한다면 환경이 다를 수 있습니다. 하지만 언어는 똑같기 때문에 작업하는 데 문제는 전혀 없습니다.
누구나 손쉽게 배우는 디자인 강좌, 디자인베이스입니다. 디자이너로서 웹 코딩 공부의 첫 단추는 디자인베이스에서 시작하세요. 열정만 준비하시면 다 따라 할 수 있습니다.
코딩을 효과적으로 하기 위해 도움을 주는 익스텐션들이 있어요. 작업능률을 올려줄 Extension을 소개해드릴게요. 빠르게 설치해 주세요.
Auto Close Tag – 자동으로 태그를 닫아주는 기능
Auto Rename Tag – 시작 태그를 수정하면 종료 태그를 같이 바꿔주는 기능
HTML Snippets – 효율적인 태그 작성을 도와주는 기능 (VS Code에는 emmet이 기본으로 설치되어 있어서 꼭 설치를 안 하셔도 됩니다.)
Autoprefixer – 크로스 브라우징을 위해 접두사를 넣어주는 기능
Live Server – 로컬 서버를 만들어 브라우저에서 실행되고 저장하면 바로 적용을 보여주는 기능
03. Figma에 LottieFiles 사용하는 방법 – LottieFiles 강좌
02. 작업 환경 세팅하기 – 일러스트레이터 기초 강좌
앱 GUI 참고 사이트 모음
클릭 한 번으로 웹사이트 화면 캡쳐뜨는 방법(크롬 확장 프로그램)
쉽게 사람 일러스트레이션 믹스 매치 하기 ‘humaaans’
그라데이션 컬러 추천해주는 사이트
롤업 스탠딩 배너 목업
앱 개발 관련 일러스트 ai 파일
10. 자유롭게 화면 조절하는 방법 OrbitControls – Three.js 강좌
27. 귀여운 꿀벌 일러스트 쉽게 만드는 방법 – 일러스트레이터 기초 강좌
09. 3d 물체에 그림자 적용하는 방법 – Three.js 강좌
26. 프리폼 그라디언트로 5초 만에 부드러운 그라데이션 배경 만드는 방법 – 일러스트레이터 기초 강좌
Youtube Instagram Pinterest Naver Blog
포토샵 일러스트레이터 피그마 스케치 XD 프로토파이
웹디자인 웹코딩 인비전 프린서플 Lottie Three.js
소개 매거진 디자인 사전 북마크 무료 소스 문의하기 멤버십
© 2022 Designbase. All rights reserved.