HTML5, CSS 편집기 아톰(Atom) Emmet 유용한 단축키 - HTML전문, DIV생성, CSS3 width/height/padding/margin 생성

아톰(Atom)을 사용하여 HTML5를 편집을 위해 Emmet 플러그인을 설치하였습니다.

Emmet의 유용한 단축키 활용법입니다.

 

HTML 전문 한번에 만들기

기본적으로 HTML 단축키를 사용하려면 해당 파일의 확장자가 .html이어야 합니다.

또는 아래와 같이 현재 문서의 포맷을 바꿔 주시면 화인이 가능합니다.

아톰에서 신규 페이지를 만들면 untilted라고 페이지가 나옵니다.

이때의 페이지 설정은 Plan Text이며, 이 부분을 마우스로 클릭합니다.

아톰에서 문서 포맷 바꾸기

여기서 HTML로 되어 있는 부분을 선택하시면 아톰은 해당 파일을 HTML로 인식을 합니다.

아톰에서 문서 포맷을 HTML로 바꾸기

한번에 HTML 전문을 만드는 방법은 !(느낌표) + TAB키입니다.

!+탭키를 누르는 화면

! 단축키로 HTML 한번에 만든 화면

DIV 태그 한번에 만들기

원하는 클래스, 아이디가 들어간 DIV와 하위 DIV를 한번에 만드는 방법입니다.

원하는 클래스가 들어간 경우 : .content>div*3 + TAB

원하는 클래스가 들어간 DIV와 하위 DIV 한번에 만드는 단축키

content라는 클래스가 들어간 DIV와 하위 DIV가 한번에 생겼습니다.

원하는 클래스가 들어간 DIV와 하위 DIV 한번에 만들어진 화면

원하는 아이디가 들어간 경우 : #wrap>div*3 + TAB

원하는 아이디가 들어간 DIV와 하위 DIV 한번에 만드는 단축키

wrap이라는 아이디가 들어간 DIV와 하위 DIV가 한번에 생겼습니다.

원하는 아이디가 들어간 DIV와 하위 DIV 한번에 만들어진 화면

 

container class가 들어가 dvi 생성하는 화면

 

스타일시트에서 width, height 값 넣는 단축키

w100 + TAB :  width: 100px

h100 + TAB :  height: 100px

w100p + TAB :  width: 100%

h100p + TAB :  height: 100%

스타일시트에서 width, height 값 넣는 단축키

 

스타일시트에서 margin, padding 값 넣는 단축키

m0 +TAB : margin: 0

p0 + TAB : padding: 0

스타일시트에서 margin, padding 값 넣는 단축키

 

2019/10/15 - [유용한 활용팁] - 소스코드 편집기 아톰(Atom) FTP(remote-ftp) Package 설치, SFTP 연결 설정, 서버 여러대(다중 호스트) 연결 방법 - FTP접속 오류 해결

2019/10/17 - [유용한 활용팁] - HTML5, CSS3, JavaScript, PHP 에디터 편집기 아톰(atom) 설치 방법

2019/10/25 - [유용한 활용팁] - HTML5, CSS3, JavaScript, PHP, Python 편집기 아톰(Atom) 유용한 단축키 활용법 - 줄복사, 줄찾기(검색), 일괄주석, 파일검색