Emmet 문법 사용법
<!-- ! emmet 자동완성 : 기본 템플릿 -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Emmet 문법 알아보기</title>
</head>
<body>
</body>
</html>
HTML 파일을 오픈한 뒤 !를 입력하면 기본 템플릿이 자동완성 된다.
- lang 속성의 기본값은 en으로 HTML파일을 브라우저에서 읽을 때 영문으로 인식한다. ko로 바꿔주면 한국어로 인식함.
<!-- > child(자식) : div>ul>li -->
<div>
<ul>
<li></li>
</ul>
</div>
간단한 자식 태그는 > 기호로 표시할 수 있다.
- div>ul>li 이라면 div태그 안에 ul태그 안에 li이 태그를 만든다.라고 생각하면 된다.
<!-- + sibling(형제) : div+p+bq -->
<div></div>
<p></p>
<blockquote></blockquote>
같은 컨테이터 위치를 가진(?) 형제 관계의 경우 + 기호를 사용하여 만들 수 있다.
-div+p+bq 라면 div 태그와 p 태그, 그리고 blockquote 태그가 같은 위치에 생성된다.
<!-- 자식 + 형제 응용 : div+div>p>span+em -->
<div></div>
<div>
<p>
<span></span>
<em></em>
</p>
</div>
자식과 형제를 동시에 생성할 수도 있다.
-div+div> p> span+em이라면 div 태그와 div태그는 형제관계로 같은 위치에 생성되고, 두 번째 div 태그 내부에 p 태그가 생성된다. p 태그 내부에 span 태그와 em 태그가 형제관계이므로 같은 위치에 생성된다.
<!-- ^ 올라가기 : div+div>p>span+em^bq -->
<div></div>
<div>
<p>
<span></span>
<em></em>
</p>
<blockquote></blockquote>
</div>
올라가기 ^ 기호를 이용해 생성 위치를 조절 할 수 있다.
- div+div> p> span+em^bq 이라면 blockquote 태그는 한 단계 위인 p 태그와 같은 선상에 생성된다.
<!-- * 곱셈 : ul>li*5 -->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
다수의 태그를 생성해야 할 때 곱셉을 사용하면 쉽게 생성이 가능하다.
- ul태그 내에 5개의 li 태그가 필요할 때, ul > li*5 을 이용하면 쉽게 생성이 가능하다.
<!-- () 그룹핑 : (ul>li)*5 -->
<ul>
<li></li>
</ul>
<ul>
<li></li>
</ul>
<ul>
<li></li>
</ul>
<ul>
<li></li>
</ul>
<ul>
<li></li>
</ul>
태그안에 태그가 들어간 상태로 다수를 생성해야 할 때는 그룹핑()을 사용하면 된다.
-(ul>li)*5 같은 형태를 사용하면 li 태그가 들어간 ul 태그를 5개 생성해준다.
<!-- () 그룹핑 : div>(header>ul>li*2>a)+footer>p -->
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
그룹핑은 위치에 관계없이 사용 가능하므로 어려운 태그를 생성 할 때에도 유용하게 사용이 가능하다.
'Today I Learn' 카테고리의 다른 글
| [BasicHTML] Head 태그 뜯어보기 (1) | 2024.11.26 |
|---|---|
| [JS기본문법] 오늘의 안된 점! (0) | 2024.11.26 |
| [Python] 챌린지 1일차 (0) | 2024.08.08 |
| [TIL] "클린코드" 11일차 (0) | 2024.07.12 |
| [TIL] "클린코드" 10일 차 (0) | 2024.07.09 |