안녕하세요.
오늘은 텍스트에디터인 ATOM에 대해 알아보고, 설치해보겠습니다.
1. 텍스트에디터란?
텍스트에디터는 쉽게말하면 메모장입니다.
우리가 문서를 작성하기 위해 한글프로그램을 사용하듯이 프로그래밍 언어도 텍스트로 표현되므로 코드를 편집할 수 있는 편집기가 필요합니다.
문서작성을 할 수 있는 프로그램은 한글도 있지만 워드도 있죠?
코딩을 지원하는 텍스트에디터도 다양한 종류가 있습니다.
아래 사진은 가장 유명한 텍스트 에디터인 VisualStudioCode이며, 우리가 오늘 사용해볼 프로그램은 VSC보다는 조금 더 가볍게 사용할 수 있는 텍스트에디터인 ATOM입니다.
+) 역시 텍스트에디터인 메모장으로도 코딩을 할 수 있습니다만, 편의성이 떨어져 추천하지는 않습니다.
2. 왜 ATOM인가요?
혹시 HTML을 아시나요?
여러분이 현재 보고계시는 블로그 페이지는 물론, 네이버 같은 검색엔진, 웹툰 페이지까지 모두 HTML을 이용해 만들었습니다.
물론 겉모습을 꾸며주고, 다양한 기능과 효과를 추가하긴 했지만, HTML이 위에 예시로 든 페이지들의 구조를 이루고 있다는 사실은 바뀌지 않죠.
텍스트에디터인 ATOM은 바로 그 HTML을 조금 더 손쉽게 편집할 수 있는 도구입니다.
아래사진과 같이 HTML에 다양한 색깔을 입혀 문법과 구조를 이해하기 쉽도록 해주며, 자동완성 기능 등을 제공하여 코드 작성을 더욱 편리하게 만들어줍니다.
물론 앞서 말한 VSCode에서도 자동완성이나 색깔 구분 등이 가능하지만 우리는 조금 더 가볍게 사용하기 위해 ATOM을 사용해보도록 하겠습니다.
3. ATOM 설치방법
우선 아래 링크에 접속하여 ATOM 설치파일을 다운받아주세요.
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
아래 화면에서 노란색 다운로드 버튼을 누르시면 됩니다.
다운받은 설치파일을 실행하시면 설치가 진행되고, 그리 오래 걸리지 않습니다.
설치가 끝나면 아래와 같은 화면이 뜹니다.
저기 파란색 팝업창에서는 No를 클릭하시고, [Welcome Guide], [Welcome], [Telemetry Consent] 등 불필요한 탭들을 모두 종료해주세요.
이제 HTML을 좀 더 수월하게 편집하기 위한 부가기능을 설치해보겠습니다.
아톰에서는 다양한 부가기능들을 제공하는데 이런 부가기능들을 '패키지'라고 부릅니다.
패키지를 설치하기 위해서는 아톰에서 제공하는 패키지 스토어를 이용해야 합니다.
좌측 상단의 [File] - [Settings]로 들어가주세요.
그럼 다음과 같은 화면이 뜹니다.
여기서 [Install]이라고 적힌 항목을 눌러주세요.
그럼 우측에 [Install Packeges]라는 검색창이 뜹니다.
여기에 [atom-live-server]라고 검색해줍니다.
[Install] 버튼을 눌러 패키지를 설치해주세요.
아래와 같이 뜨면 설치완료입니다.
3. 코딩 시작하기
자 이제 코딩을 시작해볼까요?
아까 저희가 모든 탭을 꺼버려서 아톰 창에는 아래와 같이 아무것도 없는 빈 화면만 보일 것입니다.
[File] - [Open Folder]를 눌러주세요.
그럼 아래와 같은 폴더 선택 창이 뜹니다.
본인이 원하는 위치에서 새폴더를 만들어줍니다.
만들어준 폴더를 선택한 후, [폴더 선택] 버튼을 눌러주세요.
그럼 아래 사진과 같이 좌측에는 Project라는 탭이 생기고, 그 아래에 아까 만들어준 폴더명이 보일겁니다.
폴더명을 마우스 오른쪽 클릭하고, [New File]을 눌러주세요.
자 이렇게 파일명을 입력할 수 있는 창이 뜨죠?
여기에 'index.html' 이라고 입력하고 엔터키를 눌러줍니다.
아래처럼 우측 탭에 index.html파일이 열려있고, 커서가 깜빡이는게 보입니다.
html이라고 입력해보시면 아래와 같이 꼬리표가 뜰텐데, 그걸 눌러주세요.
그럼 아래와 같이 HTML의 기본 태그들이 셋팅됩니다.
자 이제 코딩을 시작할건데요.
<title></title>이라고 적힌 곳 사이에 [코딩 시작]이라고 입력하신 후 저장해주세요.
저장은 Ctrl + S를 눌러도 되고, 아래와 같이 [File] - [Save]를 눌러주셔도 됩니다.
그럼 이제 [Packages] - [atom-live-server] - [Start server]를 선택해줍니다.
아래와 같은 경고창이 뜨면 그냥 허용해주시면 됩니다.
허용하시면 인터넷창이 하나 뜰텐데 상단의 탭이름을 보면 '코딩시작'이라고 적혀있는걸 확인하실 수 있습니다.
자 이제 우리는 HTML파일을 수정하고, 저장할때마다 자동으로 변경 사항을 보여주는 환경을 셋팅하였습니다.
간단한 테스트를 해볼까요?
아래 사진과 같이 index.html을 수정해주세요.
body태그 사이에 '<h1>안녕하세요</h1>' 라는 텍스트를 삽입해주시면 됩니다.
그리고 저장해주세요.
그럼 아까 열린 인터넷창이 자동으로 새로고침 되면서 아래와 같이 '안녕하세요'라는 텍스트가 표시되나요?
여기까지 HTML을 위한 ATOM 사용법을 간단하게 알아보았습니다.
'코딩 > 악세사리' 카테고리의 다른 글
| VSCode - 들여쓰기를 space에서 tab으로 변경하고 저장하기 (0) | 2024.02.27 |
|---|---|
| VSCode 테마 바꾸기 (0) | 2021.01.13 |
