이전에는 Emmet의 기본 사용법을 소개해드렸는데요, Emmet은 초보자도 쉽게 배울 수 있지만, 그 기능은 훨씬 더 다양하고 강력합니다!
오늘은 Emmet의 조금 더 고급 기능과 추가 팁을 알아보도록 할게요.
이를 통해 HTML 코딩을 더욱 효율적으로 만들 수 있습니다.
1. Emmet의 Nth-child 기능
CSS에서 자주 사용하는 nth-child 선택자를 Emmet에서도 사용할 수 있어요. 특정 태그에만 다른 클래스를 적용하거나 다르게 스타일링해야 할 때 유용합니다.
예시: 여러 태그에 다양한 클래스 적용하기
ul>li.item$*5이 코드는 숫자가 포함된 클래스 이름을 가진 <li> 태그 5개를 생성합니다.
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>여기서 $ 기호는 숫자를 자동으로 증가시켜 각 태그에 적용해줘요. 그래서 반복되는 요소에서 번호가 필요한 경우에 매우 유용해요!
2. 그룹화를 통해 복잡한 구조 만들기
여러 요소를 그룹화해서 한 번에 여러 구조를 생성할 수 있어요. 중첩된 구조가 많을 때 매우 유용한 기능입니다.
예시: 중첩된 구조 만들기
div>(header>h1{Welcome})+(section>p{Hello World})+(footer>p{Copyright})이 코드를 Emmet에 입력하면 다음과 같은 구조가 생성됩니다.
<div>
<header>
<h1>Welcome</h1>
</header>
<section>
<p>Hello World</p>
</section>
<footer>
<p>Copyright</p>
</footer>
</div>
- >: 자식 요소를 나타냄
- +: 형제 요소를 나타냄
- `(): 그룹화를 통해 우선순위를 지정해 복잡한 구조도 쉽게 만들 수 있음
3. 텍스트와 속성 함께 자동 완성하기
Emmet은 태그뿐만 아니라 속성과 텍스트도 동시에 입력할 수 있어요. 자주 사용하는 속성이나 태그를 빠르게 입력하려면 유용합니다.
예시: <img> 태그 자동 완성
img[src="image.jpg" alt="Sample Image"]
위 코드를 입력하면 Emmet이 자동으로 아래처럼 완성해줘요.
<img src="image.jpg" alt="Sample Image">속성 값까지 한 번에 넣을 수 있기 때문에 반복적인 작업이 줄어듭니다.
예시: 링크 태그 자동 완성
a[href="https://example.com"]{Go to Example}이 코드를 입력하면, Emmet이 다음과 같이 자동 완성해줍니다.
<a href="https://example.com">Go to Example</a>여기서는 링크 주소와 텍스트까지 모두 한 번에 입력할 수 있어요!
4. Emmet Snippets 활용하기
Emmet은 이미 많은 기본 기능을 제공하지만, Snippets라는 기능을 통해 자신만의 코드를 저장해두고 불러올 수 있어요. 자주 사용하는 코드를 한 번에 불러오고 싶다면 이 기능을 활용해보세요.
예시: 커스텀 Snippet 설정
예를 들어 자주 사용하는 구조가 있다면, 직접 snippets.json 파일을 설정해서 나만의 코드를 등록할 수 있어요.
- VS Code 설정 파일 열기: Ctrl + Shift + P를 눌러 명령어 창에서 Preferences: Configure User Snippets를 검색하세요.
- HTML Snippets를 선택하고, 다음과 같은 코드를 추가해보세요.
"HTML template": {
"prefix": "html5",
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"<head>",
" <meta charset=\"UTF-8\">",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
" <title>${1:Document}</title>",
"</head>",
"<body>",
" $0",
"</body>",
"</html>"
],
"description": "HTML5 template"
}이렇게 설정하면 "html5"라고 입력하는 것만으로 HTML5 템플릿이 자동으로 생성됩니다.
$1, $0 등은 텍스트 커서가 이동할 위치를 나타냅니다.
5. Emmet과 함께 쓰면 좋은 단축키들
Emmet 기능과 함께 사용하면 좋을 몇 가지 VS Code 단축키도 소개할게요. 이 단축키들과 함께 Emmet을 사용하면 더 빠르고 편리하게 코딩할 수 있어요.
- Alt + Shift + Arrow Up/Down: 한 줄 복사하기
- Ctrl + D: 동일한 단어/태그 선택 (여러 개 한꺼번에 수정 가능)
- Ctrl + /: 선택한 코드 주석 처리/해제
- Tab: Emmet 자동 완성
6. Emmet 고급 문법 요약
- >: 자식 요소 만들기
- +: 형제 요소 만들기
- *: 태그 반복하기
- .: 클래스 추가
- #: 아이디 추가
- {}: 태그 안에 텍스트 삽입
- $: 숫자 자동 증가 (반복 시)
- (): 그룹화하여 복잡한 구조 만들기
7. Emmet은 초급부터 고급까지 모두에게 유용한 도구
Emmet은 초보자도 금방 익힐 수 있을 만큼 직관적이지만, 고급 사용자들에게도 충분히 유용한 도구입니다.
HTML뿐만 아니라 CSS, 자바스크립트에서도 사용할 수 있으며, 반복적인 코딩 작업을 단순화해줘요.
Emmet을 연습하면 할수록 더 빠르고 효율적으로 코딩할 수 있을 거예요.
이제 Emmet의 고급 기능도 조금씩 익히면서 HTML 페이지를 더 빠르고 간편하게 만들어 보세요!
구독!! 공감과 댓글은 저에게 큰 힘이 됩니다.
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에서 메타 태그의 사용 방법과 종류 (2) | 2024.09.27 |
|---|---|
| HTML에서 오픈그래프 소셜 공유 미리보기를 작성하는 방법 (1) | 2024.09.27 |
| HTML 코딩을 빠르게 만드는 필수 기능!:Emmet 사용법 (1) | 2024.09.24 |
| HTML 기초 최종 정리 - 웹 개발의 첫 걸음 (0) | 2024.09.24 |
| VS Code에서 HTML 기본 코드 자동 완성하는 방법 (1) | 2024.09.23 |
