- Emmet coding 이란?
- 여러 코드를 입력할 때 반복 작업을 줄여주고 간단하게 입력할 수 있는 코딩
1. html 기본 구성 요소 출력
!+Tab
//출력예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>2. 자식 관계 코드생성
div > section>: 부모 안에 자식을 의미
//출력예시
<div>
<section></section>
</div>3. 형제 관계 코드생성
div > nav+section+: 부모 안의 형제를 의미
// 출력예시
<div>
<nav></nav>
<section></section>
</div>4. 같은 태그 여러 개 출력
section*2*: 곱하기
//출력예시
<section></section>
<section></section>
4-1. 응용버전
- 형제 관계일 경우
(section+div)*2(): 묶기
//출력예시
<section></section>
<div></div>
<section></section>
<div></div>5. 속성 여러 개 출력하기
a[href=""][target="_blank"]{네이버로 이동}*2[]: 속성,{}: 속성내용
//출력예시
<a href="" target="_blank">네이버로 이동</a>
<a href="" target="_blank">네이버로 이동</a>5-1. 응용버전
a[href=""][target="_blank"]{네이버로 이동 $}*2$: 숫자치환 기능
//출력예시
<a href="" target="_blank">네이버로 이동1</a>
<a href="" target="_blank">네이버로 이동2</a>
- Today Comment :
초반에 코드를 배우면서 필수는 아니지만 알아두면 코드 작성 시 불필요한 시간을 단축해줄 유용한 방법이다
추후 언어를 배울 때마다 발견되면 추가로 업로드 해주도록 하자
박상은
zen 코딩은 이제 emmet으로 바꿔부르기로 했대요.
화이팅!