emmet이 설치된 ATOM 을 실행한 후
Cmd + N 하여 새파일을 만든다.
Cms + S 하여 "저장하고싶은파일명.html" 과 같이 파일을 저장한다.
html 확장자로 저장된 문서에서
! 입력 후 탭 클릭 하면, HTML5기본 스니펫이 채워진다.
탭 클릭하면 수정할 부분들의 자리를 숑숑 움직여 준다.
h1{내용입력} 에서 탭을 치면 <h1>내용입력</h1> 과 같이 태그로 변환된다.
다만 이상태로 브라우저에서 실행(f12) 할 경우 브라우저에서 번역 확인을 물어보게 된다.
원인은<html lang="en"> 기본 값 때문에 , 영어 문서를 컴퓨터 기본 언어로 변경할지 물어 보게 된다.
우리는 보통 한국어로 되어있을 테니 기본 <html lang="en"> 부분을 <html lang="ko"> 로
변경하는 방법도 계속 말씀 드릴께요.
이 ! 후 탭 하여 자동완성하는 부분이 emmet 패키지에서 제공하는 것이므로, 패키지로 다시 이동합니다.
- atom 메뉴 > Preferences 클릭 후,
Packages > Community Packages > emmet > Settings를 찾아가서 클릭합니다.
View Code를 클릭합니다.
emmet > node_modules > emmet > lib > snippets.json 을 클릭하여 우측 내용의 lang 과 locale 값을 각각 en > ko , en-US > ko-KR 로 변경합니다.
"variables": {
"lang": "ko",
"locale": "ko-KR",
"charset": "UTF-8",
"indentation": "\t",
"newline": "\n"
},
설정내용을 저장하고 프로그램을 종료하고 HTML 파일을 열거나 만들어서 ! 입력후 탭을 눌러 봅니다.
body안에 내용을 입력 후 f12 등으로 브라우저에서 실행해봅니다.
--- 이상으로 emmet으로 간단하게 문서 만드는 방법과 html lang 속성을 영문에서 한글로 변경하는 방법을 확인해 보았습니다.
emmet 단축키 모음 (ATOM)
| COmmaND | Darwin (macOS) | Linux / Windows |
| Expand Abbreviation | tab or shift + ⌘ + e | tab or ctrl + e |
| Expand Abbreviation (interactive) | alt + ⌘ + enter | ctrl + alt + enter |
| Wrap with Abbreviation | ctrl + w | ctrl + alt + w |
| Balance (outward) | ctrl + d | ctrl + shift + e |
| Balance (inward) | alt + d | ctrl + shift + 0 |
| Go to Matching Pair | ctrl + alt + j | ctrl + alt + j |
| Next Edit Point | ctrl + → | ctrl + alt + → |
| Previous Edit Point | ctrl + ← | ctrl + alt + ← |
| Select Next Item | ctrl + shift + → | ctrl + shift + . |
| Select Previous Item | ctrl + shift + ← | ctrl + shift + , |
| Toggle Comment | ⌘ + / | ctrl + shift + / |
| Split/Join Tag | shift + ⌘ + j | ctrl + shift + ` |
| Remove Tag | ⌘ + ' | ctrl + shift + ; |
| Evaluate Math Expression | shift + ⌘ + y | ctrl + shift + y |
| Increment Number by 0.1 | ctrl + alt + ↑ | alt + ↑ |
| Decrement Number by 0.1 | ctrl + alt + ↓ | alt + ↓ |
| Increment Number by 1 | ctrl + alt + ⌘ + ↑ | ctrl + ↑ |
| Decrement Number by 1 | ctrl + alt + ⌘ + ↓ | ctrl + ↓ |
| Increment Number by 10 | ctrl + alt + ⌘ + shift + ↑ | shift + alt + ↑ |
| Decrement Number by 10 | ctrl + alt + ⌘ + shift + ↓ | shift + alt + ↓ |
| Reflect CSS value | shift + ⌘ + r | ctrl + shift + r |
| Update Image Size | ctrl + i | ctrl + u |
| Encode/Decode image to data:URL | ctrl + shift + i | ctrl + ' |
| Update Tag | ctrl + shift + u | ctrl + shift + ' |
| Merge Lines | shift + ⌘ + m | ctrl + shift + m |
'코딩ㆍ개발 정보 > HTML 연습' 카테고리의 다른 글
| Edit > Lines > Auto Indent 에 단축키 지정하기 + ATOM 기존 단축키 확인하기 (0) | 2020.09.18 |
|---|---|
| HTML에서 플랫UI 컬러 색상표 제공해주는 사이트 정보 (0) | 2020.09.18 |
| ATOM 에 emmet and open-in-browsers 설치 및 설정하기 (0) | 2020.09.18 |
| ATOM 다운로드 및 설치하기 (0) | 2020.09.18 |
| 모바일 용 데이터 베이스 SQLite 사용방법 (0) | 2020.09.17 |
댓글