[CSS] ATOM 윈도우 설치 및 사용방법

설치 링크 : https://atom.io/

Download Windows 선택

위와 같은 창이 뜨면 설치완료

Open Folder 를 눌러서 자주 사용하는 소스폴더를 지정해준다.

ex) htdocs

Settings 에 들어가면 아래와 같은 창이 뜨는데

왼쪽 목록에 install 을 클릭하고 확장기능을 설치할 수 있는 화면이 뜬다.

아톰에서는 이 기능을 패키지라고 한다.

 emmet 라는 확장기능을 인터넷으로 검색 설치.

emmet : 코드를 작성하는 것의 수고를 줄여주는 확장기능이다.

index.html 우클릭 후 split right 를 클릭하면 오른쪽에 분할 코딩을 할 수 있는 것이 생긴다.

아톰에디터로 위 사진과 같이 분할해서 코딩을 할 수 있다.

좌측에 위치한 사이드바를 없애려면 view에 들어가서 toggle tree view 를 클릭하면 사라진다.

control + \

html 을 입력하고 탭키를 입력하면 바로 위에 보이는 사진과 같이 나온다.

li*3>a 를 입력하고 탭키를 누르면 위와 같이 3개의 li 목록과 링크를 입력 할 수 있는 a href 가 3개 생긴다.

h1>a 로 사용해도 가능

똑같은 것이 있는 경우에는 control 키를 누르고 드래그 한 뒤

다른 값을 입력해주면 드래그 내용이 똑같이 다 변경된다.