1. 글의 목적
최근 타임어택 과제를 진행하면서, 요소들의 속성을 파악하는 것뿐만 아니라 작업 시 사용하는 단축 속성의 숙련도가 작업 속도에 큰 영향을 미친다는 것을 깨닫고 상당한 충격을 받았다. 이번 기회를 통해 Emmet 속성들에 대해 자세히 학습하고, 이를 익숙하게 다루는 시간을 가져보려 한다.
2. Emmet이란?
에밋(Emmet)은 HTML, XML, XSL 문서 편집 시 빠르고 효율적인 코딩을 지원하는 플러그인이다. 원래는 젠 코딩(Zen Coding)으로 불리다가 이름이 변경되었다고 한다. 에밋은 특정 텍스트 에디터의 엔진이나 소프트웨어에 종속되지 않으며, 텍스트 상태에서 직접 작동하고 MIT 라이선스를 따르는 오픈 소스다. 사용자는 미리 정의된 축약형 코드를 입력하고 클릭, 엔터 또는 탭 키를 누르면 완전한 HTML 코드를 생성할 수 있다. 복잡한 HTML 구조를 생성할 때 특히 유용하다.
3. 사용 예제
에밋에는 다양한 축약 코드들이 있어, 더 많은 기능을 확인하고 싶다면 아래 사이트를 방문하면 된다. 아래 예제들에서는 자주 사용하는 기능들을 중심으로 다루어 보았다.
3-1. HTML 템플릿 생성
[ ! / html:5 / doc ] : HTML 문서 구조 한 번에 생성하기
!(느낌표) 또는 html:5, doc 을 입력한 후 자동완성 제안이 나타나면 클릭하거나 엔터 키를 누른다. 이렇게 하면 HTML 문서의 기본 구조를 직접 입력할 필요 없이 한 번에 간단하게 생성할 수 있다. 만약 입력 과정에서 자동완성 제안을 놓쳤다면, ctrl+space 키를 눌러 다시 자동완성 제안을 불러올 수 있다. 이 과정에서는 대부분 느낌표를 사용한다.
3-2. HTML에서의 Emmet들
[ element * n ] : 요소 복제하기
*는 태그 이름과 함께 사용되어 원하는 수만큼 요소를 복제할 수 있다. 동일한 구조의 반복 요소가 많은 경우, 복사+붙여넣기 대신 아래와 같은 방식으로 생성하는 것이 더 효율적이다.
li*4
[ . / # ] : class와 id 이름 한 번에 생성하기
태그 이름 뒤에 .와 클래스 이름, #와 아이디 이름을 연달아 작성하면 해당 클래스와 아이디를 가진 요소를 생성할 수 있다. 또한, 동시에 사용할 수도 있다. 태그명을 지정하지 않고 바로 사용하는 경우에는 기본적으로 <div> 요소로 생성된다.
ul#product-list.list
태그 이름 지정 O
#page.section.main
태그 이름 지정 X
[ + / > ] : 형제/자식 요소 한 번에 생성하기
에밋 기능을 사용하면 개별 태그를 하나씩 간편하게 생성할 수 있을 뿐만 아니라, 아래와 같이 한 번의 명령으로 형제, 자식 관계의 요소들을 함께 생성할 수도 있다. 이를 통해 HTML 구조를 빠르고 효율적으로 작성할 수 있으며 반복적인 작업을 줄여 개발 생산성을 높일 수 있다.
header+main+footer
형제 구조 생성
ul>li*3>a
자식 구조 생성
div>p+span
자식+형제 구조 생성
[ ( ) / ^ ] : 상위 계층으로 올라가기
특정 부분을 소괄호 ()로 묶거나 캐럿 ^을 사용하면 해당 부분을 상위 계층으로 이동시킬 수 있다. 캐럿 ^은 한 번에 한 계층씩 상위로 이동한다. 여러 개의 캐럿을 연속으로 사용하면 여러 계층을 이동할 수 있다.
(header>nav)+main+footer
div>ul>li*2>a^^^di
[ $ / @ ] : 1씩 증가하는 값으로 넘버링 하기 / 넘버링 시작 값 지정하기
클래스, 아이디 이름 또는 텍스트 자리에 $를 작성하면 1부터 시작하여 1씩 증가하는 번호를 자동으로 삽입할 수 있다. $의 개수를 늘리면 여러 자리의 번호도 지정 가능하다. 예를 들어, $$는 01, 02, 03과 같이 두 자리 숫자를, $$$$는 0001, 0002, 0003과 같이 네 자리 숫자를 생성한다. 또한, @ 뒤에 숫자를 작성하면 넘버링의 시작 값을 설정할 수 있다. 단, 시작 값 설정 기능은 요소를 복제할 때 함께 사용해야 작동한다.
li.list-$*5 → 한 자리 수 넘버링으로, 1부터 5까지 생성
li.list-$$$@98*3 → 세 자리 수 넘버링으로, 98부터 100까지 생성
[ { } / [ ] ] : 태그 내 내용 삽입하기 / 태그 속성 작성하기
{} 중괄호 내에 텍스트를 작성하여 특정 태그에 바로 내용을 삽입할 수 있으며, [] 대괄호 내에 스타일, 타입, 데이터 등을 작성하여 여러 속성을 가진 요소를 한 번에 생성할 수 있다.
div*4{box$}
태그 내 내용 삽입하기
button[type=”button”]
태그 속성 작성하기 1
li.list-$$@2[style=”color:blue”]{list_$$@2}*3
태그 속성 작성하기 2
3-3. CSS에서의 Emmet들
CSS에서의 Emmet은 여러 기능을 조합하여 사용하는 HTML Emmet과는 달리, 예약된 단어의 축약형을 단순히 입력하는 방식이다. 여러 속성이 공백으로 나열될 때는 하이픈(-)을 사용하여 각 속성을 연결할 수 있다. 또한, 더하기 기호(+)는 전체 속성을 한 번에 작성한 후 자동으로 개행을 삽입한다. 이를 통해 CSS 작성이 더욱 효율적이고 신속해진다.
width / height
w100 -> width: 100px
h100 -> height: 100px
margin / padding
m0 -> margin: 0
m0-a -> margin: 0 auto
ml10 -> margin-left: 10px
mr10 -> margin-right: 10px
p0 -> padding: 0px
pl10 -> padding-left: 10px
pr10 -> padding-right: 10px
position
por -> position: relative
poa -> postion: absolute
pof -> position: fixed
t50p -> top: 50%
l50p -> left: 50%
border
bd1-s-#000 -> border: 1px solid #000
bdrs50p -> border-radius: 50%
transform: translate
tftl -> transform: translate(x,y)
tftx -> transform: translateX(x)
tfty -> transform: translateY(y)
background / color
bc#f00 -> background-color: #f00
br -> background-repeat: no-repeat
bgs -> background-size: contain
bp -> background-position: 0 0
cri -> color: inherit
font
fi -> font: inherit
fz100 -> font-size: 100px
lh50 -> line-height: 50
tac -> text-align: center
사용예시
.box { m10+p10+bd1-s-#000+fz20+c-#f00+z3 }
4. 알아두면 좋을 VSCode의 단축키들
기본 편집 기능
Ctrl + Enter: 아래에 행 삽입Ctrl + Shift + Enter: 위에 행 삽입Alt + Down: 행을 아래로 이동Alt + Up: 행을 위로 이동Shift + Alt + Down: 아래에 행 복사 추가Shift + Alt + Up: 위에 행 복사 추가Ctrl + X: 한 줄 삭제Ctrl + L: 코드 한 라인 블록으로 묶기 (여러 번 지정 가능)Home: 행의 시작으로 이동End: 행의 끝으로 이동Ctrl + End: 파일 끝으로 이동Ctrl + Home: 파일 시작으로 이동Ctrl + Down: 스크롤 다운Ctrl + Up: 스크롤 업
코드 탐색 및 편집
Ctrl + F: 찾기Ctrl + H: 바꾸기Ctrl + P: 파일 검색하여 빠르게 열기Ctrl + G: 라인 검색 후, 해당 라인으로 이동Ctrl + D: 같은 단어 하나씩 선택 (밑으로 하나씩 선택됨)Ctrl + Shift + L: 같은 단어 전체 선택Ctrl + Alt + Down: 커서를 아래에 추가Ctrl + Alt + Up: 커서를 위에 추가Alt + Click: 멀티 커서Shift + Alt + 마우스 드래그: 자유 영역 지정 드래그Alt + Shift + I: 드래그된 모든 줄의 끝에 커서 생성Ctrl + Alt + Up / Down: 세로로 길게 커서 생성
코드 서식
Ctrl + ]: 라인 들여쓰기Ctrl + [: 라인 내어쓰기Ctrl + /: 주석 토글드래그 + (: 선택된 문자를 자동으로 괄호로 묶기
사용자 인터페이스 관리
Ctrl +(백틱)` : 터미널 열기/닫기Ctrl + B: 왼쪽 탐색기 창 끄기/켜기Ctrl + '+' / Ctrl + '-' : 폰트 사이즈 조절Ctrl + 1 or 2: 좌측 또는 우측 화면으로 포커스 이동Ctrl + Page Up / Page Down: 열어놓은 탭 전환
참고자료
https://velog.io/@goblin820/Emmet
https://inpa.tistory.com/entry/HTML-%F0%9F%8E%A8-Emmet-%EB%AC%B8%EB%B2%95-%EC%A0%95%EB%A6%AC