본문 바로가기
IT

[Atom]아톰 설치하기 및 html 미리보기

by 토뇽 2022. 3. 5.

비주얼 스튜디오 코드에서 html사용 시 불편한 점은 입력한 코드가 화면에 어떻게 구현되는지 실시간 확인이 힘들다는 점이다. 반면 아톰 에디터는 아래 영상처럼 html 코드를 입력한 뒤 바로 옆 창에서 그 코드가 실제로 어떻게 구현되는지 확인할 수 있다는 장점을 가지고 있다. 따라서 CSS 작업을 해야 할 때 효율적으로 사용 가능한 에디터 중 하나라고 생각한다 :)

아톰 html 미리보기

 


 

무료로 사용가능한 아톰 에디터(Atom editor) 설치 방법

 

1. 아톰 공식홈페이지에 접속한다.

 

A hackable text editor for the 21st Century

At GitHub, we’re building the text editor we’ve always wanted: hackable to the core, but approachable on the first day without ever touching a config file. We can’t wait to see what you build with it.

atom.io

 

2. Download를 눌러 설치 파일을 다운로드한다.

  • 공식 홈페이지에 접속 시 자동으로 사용하는 운영체제에 맞는 버전을 추천해준다.

아톰 설치방법

 


 

아톰 에디터에서 html 미리 보기(옆에 같이 띄우기)

 

1. 아톰에서 html 파일을 실행한다. 

  • html 파일이 없다면 새로 생성한다. 
  • html 파일 생성 방법: ①파일 탭에서 새로운 파일(New File) > ②다른 이름으로 저장(Save As) > ③파일명. html 저장 

 

아톰 html 파일 만들기

 

2. 단축키 "shift + ctrl + H"을 누른다.

아톰 html 미리보기 단축키

댓글