Atom 설치방법
안녕하세요 루이입니다.
앞으로 저는 웹 언어를 공부해볼건데요 그러기 위해선 웹 에디터가 필요하겠죠?
그래서 저는 Atom 이라는 웹 에디터를 쓸거에요 그래서!!
오늘은 HTML CSS 등 웹 언어 에디터 Atom 설치방법에 대해 알아 볼거에요.
수 많은 에디터 중 (메모장, Notepad++, tinyMCE, summernote, CK Editor 등등) 왜 Atom을 쓰냐고 물으신다면 다음과 같아요.
1. 무료 웹 에디터
2. 플러그인으로 간편하게 패키지 설치 및 기능 확장
3. 운영체제 상관없이 실행 및 코딩 가능
4. HTML CSS 뿐 아니라 JavaScript 또한 손쉽게 이용가능
5. 디자인이 너무 깔끔 (개인적으로 너무 맘에 듦)
이러한 장점이 있어서 Atom 웹 에디터로 정했어요. (사실 그냥 보자마자 맘에 듦)
이제 Atom 설치 방법에 대해 알려드릴게요.
저만 잘 따라오세요.
아톰 설치 홈페이지 : https://atom.io 주소가 정말 짧고 간단해요.
링크를 눌러주세요.
링크를 누르면 홈페이지가 들어가집니다
그러면 Download 버튼을 눌러주세요.
다운로드 후 실행 시키시면 설치가 진행 됩니다.
영어로 쏼라쏼라... 영어울렁증..
설치 이미지가 뭔가 있어 보이지 않나요.
코딩할 생각에 벌써부터 기대가 되네요.
짠 ! 설치를 완료하고 난 뒤 화면입니다.
처음 보시는분들은 복잡해 보일수도 있을거라 생각해요.
하지만 그냥 과감히 가이드 꺼주시고
Welcome 꺼주시고 그냥 다 꺼주세요.
X 표시 눌러줍시다.
이제 Atom 설치가 다 완료 됐어요.
그다음 패키지 설정을 간단하게 해볼거에요.
어렵지 않으니까 잘 따라와주세요.
설치 패키지 목록 및 설명
|
패키지 |
설명 |
|
emmet |
HTML & CSS 태그 자동완성 기능 |
|
Language-asp |
Atom은 Asp언어를 인식을 못하여 색상이 나타나지 않습니다. 색상을 보완하기위한 패키지. |
|
atom-html-preview |
세상 완전 편리한기능 코딩을하면 미리보기로 보여주는 기능 |
|
atom-beauify |
소스 코드를 정렬해주는 패키지 |
패키지를 설치하기 위해
상단 메뉴에 File - Setting을 눌러주세요.
왼쪽부터 순서대로 클릭을 해주고 검색을 해줍니다. emmet라고 검색하시면 맨 위에 뜹니다.
Install 눌러줍시다.
가만히 놔두면 자동으로 설치가 됩니다.
위에 세개도 똑같이 검색을해서 설치를 해줍니다.
패키지가 다 설치 됐으면 File - OpenFolder 눌러주세요.
폴더를 하나만들어 줍니다.
이 폴더 안에는 앞으로 작업할 HTML파일이나 CSS파일 등등 작업파일들이 저장 될 공간입니다.
저는 바탕화면에 폴더를 미리 만들어놨습니다.
굳이 바탕화면이 아니여도 괜찮습니다.
여러분이 원하시는 경로 설정해서 만들어놓으시고 폴더를 열어주세요.
그러면 위와 같이 Study라는 폴더가 생기는데 (저는 폴더명이 Study이기 때문에 Study입니다.)
우클릭후 New file을 눌러줍니다.
그러면 위와 같이 파일명을 지정하라고 나옵니다.
모든 언어에서 쓰는 첫 문장을 써보죠
다 같이 1.2.3
Hello World
저는 Hello World.html 이라고 지정할게요
짠 여기가 이제 마무리입니다.
왼쪽이 코드 쓰는 공간이고
오른쪽이 미리보기 공간입니다.
참 편하죠?
아 참 미리보기 단축키는 Ctrl+Shift+H 입니다. 참고해주세요
이상 웹 언어 에디터 Atom을 간단하게 설치방법 및 설정방법에 대해
소개해드렸습니다.
문의 및 질문 댓글로 남겨주세요.