[멋사 프론트엔드 부트캠프 14기] Emmet이란?

• 수업 중, 다음과 같은 코드를 settings.json에 추가했다.

"emmet.syntaxProfiles": {
    "html": "xhtml"
  }

• 위 코드를 추가하고 난 뒤, HTML 파일에서 img 처럼 태그 이름만 입력하고 Enter를 누르면 자동완성된다는 것!! 
• 신기하니까 한 번 emmet에 대해서 더 알아보자!

 

Emmet 이란?

• HTML 문법을 자동 완성할 때 XHTML 스타일로 마크업 출력하라는 설정
• 코드를 빠르게 작성할 수 있게 해주는 플러그인 또는 기능
• 주로 HTML이나 CSS 작성할 때 자동완성(Snippet Expansion)을 엄청 빠르게 도와줌.
• 예를 들어 ul>li*3 입력하고 Tab 키를 누르면,이런 식으로 자동으로 코드를 만들어 줌!

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

 

 

syntaxProfiles는 뭐지?

• Emmet의 syntaxProfiles 설정은 "특정 언어(문법)로 자동 완성할 때, 어떤 스타일로 완성할지" 를 결정하는 옵션임.
• 쉽게 말해서 "HTML을 작성할 때 어떤 규칙으로 태그를 만들어줄까?" 를 정하는 것!

 

"html": "xhtml" 이 뜻하는 것은?

• "html": HTML 파일에서 사용할 때
• "xhtml": 자동완성 스타일을 XHTML 규칙에 맞춰서 출력해라

즉, HTML 파일 안에서 Emmet이 태그를 만들 때, XHTML 스타일을 따르도록 설정한 것!

 

 

XHTML 스타일이란?

• Extensible HyperText Markup Language의 약자
• XHTML은 XML 문법을 따르기 때문에, 태그를 엄격하게 작성해야 함.

HTML 스타일	XHTML 스타일
<img src="img.png">	<img src="img.png" />
<input>	<input />
<br>	<br />

• 닫는 슬래시(/)가 꼭 필요!!
• Emmet이 자동완성할 때, 이렇게 XHTML처럼 빈 태그를 닫아서 만들어 줌.

 

예시 비교

만약 img 입력하고 Tab이나 Enter 누르면,

• 기본 HTML 설정이라면

<img src="" alt="">

 

• 하지만 XHTML 스타일 설정을 해두면,  /가 붙은 XHTML 스타일로 자동 완성된다~!!

<img src="" alt="" />

 

 

요약

Emmet	HTML/CSS를 빠르게 작성하는 도구
syntaxProfiles	특정 문법에서 자동완성 스타일을 정하는 설정
"html": "xhtml"	HTML 파일에서 XHTML 스타일로 태그를 생성하겠다는 뜻
XHTML 스타일	빈 태그는 꼭 <tag />처럼 닫는다 (엄격한 문법)