HTML을 처음 시작하면, <html>, <head>, <body> 같은 태그들을 계속해서 일일이 입력하는 게 번거로울 수 있어요.
이때 Emmet이라는 기능을 사용하면 훨씬 빠르게 코딩할 수 있습니다.
오늘은 초보자도 쉽게 따라 할 수 있도록 Emmet 기능에 대해 알려드릴게요!
1. Emmet이란?
Emmet은 코드를 짧게 입력해도 자동으로 완성해주는 기능이에요.
특히 HTML 같은 마크업 언어에서 자주 사용되며, 코딩 속도를 정말 많이 높여줘요.
복잡한 HTML 구조도 Emmet으로 몇 초 만에 작성할 수 있답니다!
Emmet 기능이 있는 에디터:
- VS Code (Visual Studio Code)
- Sublime Text
- Atom
- WebStorm
- 다른 주요 코딩 에디터에도 대부분 Emmet이 기본적으로 들어있어요!
2. VS Code에서 Emmet 사용하기
VS Code는 무료로 많이 사용되는 코딩 에디터입니다.
Emmet 기능도 기본으로 탑재되어 있어서, 별도의 설정 없이 바로 사용할 수 있어요.
2.1. 기본 HTML 자동 완성하기
가장 많이 사용하는 기능부터 볼까요? 새 HTML 파일을 열고 느낌표(!)만 입력해보세요.
!이렇게 느낌표를 입력하고 Tab 키나 Enter 키를 누르면, Emmet이 HTML 기본 구조를 자동으로 완성해줍니다!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Document</title>
</head>
<body>
</body>
</html>이렇게 전체 HTML 기본 코드가 한 번에 완성되죠? 이 코드를 일일이 다 적지 않아도 되는 게 정말 편리해요!
3. Emmet의 기본 문법
Emmet은 HTML 태그를 입력하는 방법을 아주 간단하게 줄여줍니다.
몇 가지 기본 문법만 알아두면 복잡한 코드를 금방 작성할 수 있어요.
3.1. 태그 자동 생성
태그 이름만 입력하고 Tab 키를 누르면 자동으로 해당 태그가 완성돼요.
h1위처럼 h1이라고 적고 Tab을 누르면, 아래처럼 자동으로 <h1></h1>이 완성됩니다.
<h1></h1>3.2. 자식 태그 만들기
부모 태그 안에 자식 태그를 넣고 싶을 때는 > 기호를 사용해요.
div>ul>li이 코드를 입력하면, Emmet이 아래와 같이 자동으로 태그를 완성해줍니다.
<div>
<ul>
<li></li>
</ul>
</div>3.3. 클래스와 아이디 추가하기
클래스는 . (점), 아이디는 # (샵) 기호로 추가할 수 있어요.
div.container>ul#menu>li.item이 코드는 다음과 같은 HTML 구조로 자동 완성됩니다.
<div class="container">
<ul id="menu">
<li class="item"></li>
</ul>
</div>3.4. 태그 반복하기
여러 개의 태그를 한 번에 생성하고 싶을 때는 * 뒤에 숫자를 적으면 돼요.
ul>li*3이 코드를 입력하면, <li> 태그가 3개 생성됩니다.
<ul>
<li></li>
<li></li>
<li></li>
</ul>3.5. 텍스트 내용 넣기
태그 안에 기본 텍스트를 넣고 싶으면, {} 안에 내용을 적어 넣을 수 있어요.
p{Hello, world!}이 코드를 입력하면, Emmet이 다음과 같은 태그를 완성해줍니다.
<p>Hello, world!</p>4. Emmet으로 HTML 페이지 빠르게 만들기
이제 Emmet을 사용해서 실제로 HTML 페이지를 얼마나 빠르게 만들 수 있는지 보여드릴게요. 예를 들어, 다음과 같은 HTML 구조를 작성하려면 어떻게 해야 할까요?
<div class="container">
<h1>My Website</h1>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>이 구조를 Emmet으로 빠르게 만들려면 이렇게 입력하면 돼요.
div.container>h1{My Website}+ul.menu>li*3- div.container: 클래스가 "container"인 <div> 태그 생성
- h1{My Website}: <h1> 태그 안에 "My Website"라는 텍스트 추가
- +: 다음 태그를 형제로 추가
- ul.menu: 클래스가 "menu"인 <ul> 태그 생성
- li*3: <li> 태그를 3개 생성
이렇게 짧게 입력하면, Emmet이 자동으로 모든 태그를 완성해주죠!
5. Emmet으로 HTML 더 빠르게 코딩하기
Emmet은 HTML 코딩을 훨씬 빠르고 효율적으로 만들어주는 도구입니다. 몇 가지 기호만 외우면 복잡한 HTML 구조도 몇 초 만에 만들 수 있어요.
Emmet 사용법 요약
- !: HTML 기본 구조 자동 완성
- >: 자식 태그 생성
- .: 클래스 추가
- #: 아이디 추가
- *: 태그 반복
- {}: 태그 안에 텍스트 추가
Emmet 기능을 잘 활용하면 초보자도 더 쉽게 웹 개발을 시작할 수 있고, 코딩 속도가 크게 빨라질 거예요.
Emmet을 연습하면서 점점 더 빠르게 웹 페이지를 만드는 방법을 익혀보세요!
구독!! 공감과 댓글은 저에게 큰 힘이 됩니다.
Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.
Tester Share [테스터쉐어] - Google Play 앱
Tester Share로 Google Play 앱 등록을 단순화하세요.
play.google.com
'Web Publishing > HTML' 카테고리의 다른 글
| HTML에서 오픈그래프 소셜 공유 미리보기를 작성하는 방법 (1) | 2024.09.27 |
|---|---|
| HTML 코딩을 빠르게 만드는 필수 기능!:Emmet 추가 고급사용법 (0) | 2024.09.24 |
| HTML 기초 최종 정리 - 웹 개발의 첫 걸음 (0) | 2024.09.24 |
| VS Code에서 HTML 기본 코드 자동 완성하는 방법 (1) | 2024.09.23 |
| HTML 영역 나누기 - <div>와 <span> 태그 활용하기 (1) | 2024.09.23 |
