원하는 개발 환경을 찾아서 다운받아서 설치 해주면된다. 대부분 아마 Visual Code를 많이 사용하는것 같다.
중간에 코드를 계속 짜다 보니 뭔가 불편한 점이 많아서 결국에는 Brackets로 갈아 타게됬다.
또 모름.. 다른 언어들을 많이 사용하다 보닌까 Brackets보다 Visual Code를 사용하게 될 지도..
Brackets
A modern, open source code editor that understands web design
Brackets is a lightweight, yet powerful, modern text editor. We blend visual tools into the editor so you get the right amount of help when you want it. With new features and extensions released every 3-4 weeks, it's like getting presents all year long.
brackets.io
실시간 라이브 활성화 하기
파일을 열고 나면 오른쪽 사이드 바에 번개모양의 버튼이 있는데 이게 Brackets의 실시간 미리보기 버튼이다.
해당 기능은 컴퓨터에 Chrom이 깔려 있어야지 사용이 가능하다. 네이버 웨일을 쓰는 사람은... 눈물흘릴뿐...
에디터 자체는 깔끔하고 만들어진 클래스가 있을 경우 ctrl+e 단축키를 사용해서 바로 아래에 관련 .css가 나오게도 할 수 있다.
Visual Studio code
https://code.visualstudio.com/
Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.
code.visualstudio.com
실시간 라이브 활성화 하기
왼쪽 바에 있는 확장 프로그램 버튼을 눌러준다. 그럼 다양한 종류의 확장프로그램들이 나오는 것을 확인 할 수있다.
검색창에 Live Server라고 검색을 하거나 권장에서 찾아서 설치를 해주면 된다
실행하는 방법은 Live Server가 설치가 완료되고 나면 하단 바에 GoLive라는 버튼이 생긴것을 볼 수 있다.
GoLive를 하게 되면 새로운 창이 하나 나오면서 실시간으로 사이트가 변경되는 것을 확인 할 수 있게 된다.
'PROGRAMING📚 > WEB📑' 카테고리의 다른 글
| [HTML]좌표값을 받아서 레이아웃 이동하기 : Postion/z-index (0) | 2023.05.23 |
|---|---|
| [HTML]문단(br,p,pre) 태그 사용하기 (0) | 2023.05.22 |
| [HTML] <html>,<head>,<body> 태그 (0) | 2023.05.14 |
| [WEB]리액트(React) 설치하고 세팅하기 (0) | 2023.03.30 |
| [WEB]Web-app(application)이란 (0) | 2023.03.30 |
댓글