초간단 개발환경 세팅하기 – 웹 코딩 강좌

웹 디자이너를 위한 웹 코딩 강좌 두 번째 시간입니다.

웹 코딩에 대한 이해와 실제 작업을 하기 전에 최소한의 준비물이 있습니다. 바로 에디터 툴! 마치 포토샵과 같은 거예요. 물론 그림판으로 그림을 그리듯, 메모장으로도 코드를 작성할 수는 있지만… 개인적으로 굳이 그렇게 해야 하나 싶어요.

저는 개인적으로 비주얼 스튜디오 코드를 사용합니다. 브라켓, 아톰, 서브라임 텍스트, 스톰 등등의 좋은 에디터 툴들도 있습니다. 기존에 사용하시던 툴이 있다면 따로 설치하실 필요는 없습니다.

비주얼 스튜디오 코드 사이트 바로 가기 https://code.visualstudio.com/

*디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 제가 사용하는 툴은 비주얼 스튜디오 코드(Visual Studio Code)를 사용하며 여러분이 다른 툴을 사용한다면 환경이 다를 수 있습니다. 하지만 언어는 똑같기 때문에 작업하는 데 문제는 전혀 없습니다.

​

누구나 손쉽게 배우는 디자인 강좌, 디자인베이스입니다. 디자이너로서 웹 코딩 공부의 첫 단추는 디자인베이스에서 시작하세요. 열정만 준비하시면 다 따라 할 수 있습니다.

핵심 요약

코딩을 효과적으로 하기 위해 도움을 주는 익스텐션들이 있어요. 작업능률을 올려줄 Extension을 소개해드릴게요. 빠르게 설치해 주세요.

Auto Close Tag – 자동으로 태그를 닫아주는 기능

Auto Rename Tag – 시작 태그를 수정하면 종료 태그를 같이 바꿔주는 기능

HTML Snippets – 효율적인 태그 작성을 도와주는 기능 (VS Code에는 emmet이 기본으로 설치되어 있어서 꼭 설치를 안 하셔도 됩니다.)

Autoprefixer – 크로스 브라우징을 위해 접두사를 넣어주는 기능

Live Server – 로컬 서버를 만들어 브라우저에서 실행되고 저장하면 바로 적용을 보여주는 기능