Emmet이란?이것만 알면 돼!

개시하다

Emmet을 사용할 수 있다면 특별히 1부터 코드를 전부 기술하지 않아도 되기 때문에 인코딩의 효율이 매우 높다.
이런 Emmet에 대해서 제가 정리를 해봤습니다!

Emmet이란?

Emmet은 HTML 및 CSS를 생략하여 입력할 수 있는 플러그인입니다.
Visual Studio Code, SublimeText, Atom 등 다양한 편집기에서 사용할 수 있습니다.
특히 비주얼 스튜디오 코드에는 Emmet이 표준으로 탑재돼 있어 비주얼 스튜디오 코드를 사용한다.편리한 기능입니다.
Emmet을 사용하면 "margin-bottom: 80px;"'mb80'만 입력하면 되기 때문에 키의 입력 수를 대폭 줄일 수 있으며 인코딩 효율화에 필요한 도구입니다.

Emmet 설명 방법

Emmet의 기술 방법은 매우 간단하다.
다음 세 가지 형식을 기억하면 문제 없이 사용할 수 있으니 각자 한번 보세요.

[기본형] 요소 + 반환 또는 탭

기본적으로'h2','li'등 요소를 입력한 후'Return'키나'Tab'키를 누르면 요소 라벨을 입력하고 라벨을 닫습니다.

li

Return 키 또는 Tab 키를 입력하면 다음 코드가 확장됩니다.

<li></li>

이것은 자주 사용하는 기본 형식이니 기억하세요.

【등급】원소>원소

이것은'list'등의 단어에서 자주 사용하는 형식이다.

ul>li

Return 키 또는 Tab 키를 입력하면 다음 코드가 확장됩니다.

<ul>
  <li></li>
</ul>

등급이 있는 코드를 설명하려면 이런 형식으로 설명한다.

[복사] 요소* 숫자

이것도'list'등 여러 가지 같은 요소를 자주 사용하는 코드다.

ul>li*3

Return 키 또는 Tab 키를 입력하면 다음 코드가 확장됩니다.

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

같은 요소를 여러 개 사용한 코드는 여러 번 기술하기 어려우니 이 형식으로 기술하세요.

일반적인 HTML 단축키

기본적으로 자주 사용하는 HTML 단수를 정리했다.

ID, Class 관련

「.」클래스 부여

확장된 코드에 클래스 이름을 추가하려면 선택하십시오

div.class-name

Return 키 또는 Tab 키를 입력하면 다음 코드가 확장됩니다.

<div class="class-name"></div>

"#"으로 ID 추가

확장된 코드에 ID 이름을 지정하려는 경우

div#id-name

Return 키 또는 Tab 키를 입력하면 다음 코드가 확장됩니다.

<div class="id-name"></div>

'div'의 경우'div. 클래스 이름','div#ID 이름'을'. 클래스 이름','#ID 이름'으로 줄일 수 있으니 기억해라!

list 연결

링크 목록

압축을 풀기 위한 목록 코드에 링크를 추가하려면 선택하십시오

ul>li*3>a

에서 보듯이 끝에'>a'를 입력하고'Return'키나'Tab'키를 누르면 다음 코드를 펼칠 수 있습니다.

<ul>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
</ul>

일련 번호가 있는list

펼친list 코드의 클래스 이름에 번호를 부여하려면

ul>li.list$*3

처럼 "$"을 입력하고 "Return"키나 "Tab"키를 누르면 다음 코드를 확장할 수 있습니다.

<ul>
  <li class="list1"></li>
  <li class="list2"></li>
  <li class="list3"></li>
</ul>

텍스트 연결

텍스트 삽입

확장할 코드에 텍스트를 삽입하려면

h2{タイトル}

처럼 요소 뒤에 '{}' 로 텍스트를 둘러싸고 입력한 다음 'Return' 키나 '탭' 키를 누르면 다음 코드를 펼칩니다.

<h2>テキスト</h2>

위조 텍스트 삽입

확장할 코드에 위조 텍스트를 삽입하려면 선택하십시오

lorem

을 입력한 후 Return 키 또는 Tab 키를 눌러 다음 유사 텍스트를 확장합니다.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dicta, ut harum asperiores fugit cum facere unde voluptates vitae necessitatibus tempora! Ipsum quos, nemo sequi unde esse placeat dolor quia praesentium.

자주 사용하는 CSS 단축키

기본적

기본적으로 자주 사용하는 손은 다음과 같은 것이다.
단축키
결과 내보내기
db
display: block;
dib
display: inline-block;
dn
display: none;
w
width: ;
maw
max-width: ;
miw
min-width: ;
h
height: ;
mah
max-height: ;
mih
min-height: ;
bg
background: ;
bd
border: ;
또한 각 속성의 수치 단위는 다음과 같이 입력한다.
단축키
결과 내보내기
w14
display: block;
w50p
display: inline-block;
w10r
display: none;
w10e
width: ;

padding, margin 관련

padding, margin 관련 등장 횟수가 가장 많기 때문에 반드시 기억해야 한다.
단축키
결과 내보내기
p
padding: ;
pt
padding-top: ;
pr
padding-right: ;
pb
padding-bottom: ;
pl
padding-left: ;
m
margin: ;
mt
margin-top: ;
mr
margin-right: ;
mb
margin-bottom: ;
ml
margin-left: ;
처음에도 그랬듯이 "margin-bottom:80px;"제출할 경우

mb80

Return 키 또는 Tab 키를 입력하면 다음 코드가 확장됩니다.

margin-bottom: 80px;

또한margin 등에서 자주 사용하는 여러 값을 입력할 때'-'로 값을 구분한다.

m10-20-10-30

Return 키 또는 Tab 키를 입력하면 다음 코드가 확장됩니다.

margin: 10px 20px 10px 30px;

font 연결

이것은 font 관련 자주 사용하는 단축키입니다.
단축키
결과 내보내기
c
color: ;
fz
font-size: ;
fw
font-weight: ;
fwb
font-weight: bold;
ff
font-family: ;
또한 각 속성의 수치 단위는 다음과 같이 입력한다.
단축키
결과 내보내기
fz14
font-size: 14px;
fz1.6r
font-size: 1.6rem;
fz1.6e
font-size: 1.6rem;

text 연결

text 연결에서 자주 사용하는 짧은 손입니다.
단축키
결과 내보내기
ta
text-align: ;
tac
text-align: center;
td
text-decoration: ;
tdn
text-decoration: none;
lh
line-height: ;
lts
letter-spacing: ;
「text-decoration: none;」"tdn"으로만 펼치면 시간이 단축됩니다.

Flexbox 관련

Flexbox 관련 영역에서 자주 사용하는 단축키입니다.
단축키
결과 내보내기
df
display: flex;
ai
align-items: ;
aic
align-items: center;
fxw
flex-wrap: ;
fxd
flex-direction: ;
jc
justify-content: ;
jcc
justify-content: center;
「justify-content: center;」나갈 때 큰 도움이 됐어요.

Emmet 저렴한 의자

https://docs.emmet.io/cheat-sheet/
앞서 소개한 것 외에 편리한 단축키도 많다.
Emmet에도 블러셔가 있으니 줄이고 싶은 코드를 찾아보고, 그게 있으면 다음부터 사용해보자.
이렇게 하나하나 습관 Emmet 기억해요!

최후

어때요?
이번에는 Emmet이 매우 편리하다고 생각합니다.
일단 Emmet을 사용하면 원래 쓰는 방식을 회복하지 못하고 Emmet의 매력에 끌린다.
무료이기 때문에 인코딩의 작업 효율도 향상될 수 있으니 이 기회를 틈타 꼭 가져오세요!