모르는개 HIML

코딩 text editor atom 쓸만한 패키지 3종 !

스트라컴 2021. 2. 9. 15:06

안녕하세요 산책입니다.

오늘은 HTML 사용하기 전에 아톰이란 에디터에 대해 알아볼꺼에요.

 

 

 

일단 먼저 아톰을 열어주세요.

 

File-settings 로 들어가 주세요  ctrl+, 로도 들어갈 수 있습니다. 

 

 

들어가시면  이런 화면이 나올껀데 

 

 

install 클릭후 빨간색 박스에서 패키지 적을 준비 완료! 

 

하나하나 다운 받아볼까요??

NO.1 atom-Html-preview

 

이건 국민 패키지랄까?

언제까지 저장하고 웹페이지들어가서 새로 고침할것인가? 

실시간으로 내가 적은 태그들과 글자들을 보여줘서 직관적으로 

볼 수 있기 때문에 정말 많은 아톰 이용자들이 사용중인 패키지 입니다. 

가장 많이 사용해서 젤 먼저 소개해 드립니다.

 

 

 

젤 위에꺼 받아주시면 됩니다.!

 

다 받으셨으면 컨트롤+쉬프트+H 를 누르면 위에 사진과 같이 preview 라고 나오면서 

실시간으로 볼 수 있습니다. 무조건 필수 패키지 ! 

 

 

NO.2 open-in-browsers

두번째는 웹사이트를 바로 열어주는 패키지에요.

위에 preview 기능이 있는데 왜 이걸써?라고  궁금증이 생기실수도 있어요..

저도 그랬지만 좀더 직관적이고 나중에  검사키를 사용하려면 필요하더라구요.

파일에 있는 브라우저를 열어도 되지만  이 기능을 쓴다면 개꿀 ~!

 

 

 

open in browser

체크한 패키지 받아주시면 됩니다.

패키지를 받으면 이렇게 창이 뜰껀데 

크롬으로 클릭을 해보면?

wow 웹사이트가 뜨네요! 

 

 

NO.3 atom-beautify

마지막 패키지 

 

atom-beautify

우리가 적은 태그들 너무 정렬이 안되어 있네요 

이쁘게 수정을 해줄까요?

사람이 일일이 수정을 하면 얼마나 힘들까요..

하지만 이 패키지 아주아주 ~ 잘 정리해 준답니다. 

이걸 왜써 ? 라고 생각했는데.. 조금만 태그가 길어지거나 많아지면 복잡해서 

내가 적었는데 이해를 못하겠드라구요.

그래서 꼭 필요한 패키지라고 생각됩니다. 

 

변경전 
변경후 

 

이상 atom 을 사용하기전에 꼭필요한 패키지 3종을 알아보았습니다. 

여러분이 알고 있는 유요한 패키지는 어떤것들이 있나요??