강사님이 중간중간 에밋을 많이 사용하시는데, 여태 HTML을 가볍게 스쳐만 지나가서 그런가 처음 봐서 신기했다.
생산성 높여주는거라니 공부할겸 정리!
에밋(Emmet)
HTML에서 "에밋(Emmet)"은 코드 작성 속도를 크게 향상시킬 수 있는 도구다.
HTML, CSS 코드를 빠르게 생성하는 데 사용되며, 코드 작성 시 많은 시간을 절약할 수 있다.
1. 다양한 기호와 구조
1) ">" (자식 선택자)
- 부모와 자식 관계를 표현할 때 사용
- 예:
div>p→<div><p></p></div>
2) "+" (형제 선택자)
- 형제 요소를 생성
- 예:
div+p→<div></div><p></p>
3) (반복)
- 태그를 여러 번 반복
- 예:
li*5→<li></li><li></li><li></li><li></li><li></li> li*3→<li></li><li></li><li></li>
4) "[]" (속성 지정)
- 태그에 속성을 추가
- 예:
a[href="https://example.com"]→<a href="https://example.com"></a>
5) "{}" (텍스트 노드)
- 텍스트 추가. 텍스트를
{}로 감싸면 해당 요소에 텍스트를 넣을 수 있다 - 예:
h1{Hello}→<h1>Hello</h1>
2. 고급 문법
1) "$" (자동 증가 숫자)
- 숫자가 자동으로 증가
- 예:
li.item$*5→<li class="item1"></li><li class="item2"></li><li class="item3"></li><li class="item4"></li><li class="item5"></li>
2) "()" (그룹화)
- 그룹을 만들어 하나로 묶을 수 있다
- 예:
ul>(li*3>a)+p→<ul><li><a></a></li><li><a></a></li><li><a></a></li></ul><p></p>
3) "|" (대체 텍스트)
- 기본값을 대체할 수 있다
- 예:
p>{Hello|Goodbye}→<p>Hello</p>
4) "#" (아이디 지정)
- 태그에 아이디를 추가하려면
#을 사용 - 예:
div#container→<div id="container"></div>
5 "!" (HTML 기본 템플릿)
- HTML의 기본 구조를 한 번에 작성할 수 있다
- 예:
!→ 기본 구조가 생성<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> </head> <body> </body> </html>
3. 복잡한 구조
1) 복합 구조
>,+와 조합하여 복잡한 구조도 쉽게 작성할 수 있다- 예:
div>ul>li*3+a*2→<div> <ul> <li></li> <li></li> <li></li> </ul> <a></a> <a></a> </div>
2) 다중 클래스와 아이디
- 하나의 태그에 여러 클래스나 아이디를 동시에 지정할 수 있다
- 클래스는
.(점)으로 구분하고, 아이디는#(샵)으로 구분한다 - 예:
div.container.header#main→<div id="main" class="container header"></div>
3) "&" (형제 연결)
- 여러 태그를
&로 연결해 동시에 작성할 수 있다 - 예:
div>p&h1*2→<div> <p></p> <h1></h1> <h1></h1> </div>
4) "^" (부모 선택자)
- 부모 요소로 돌아가서 다시 태그를 추가할 수 있다
- 예:
div>p^ul>li*3→<div> <p></p> </div> <ul> <li></li> <li></li> <li></li> </ul>
4. CSS에서 사용
CSS에서도 사용할 수 있다!!
1) 속성 설정
- 예:
div{width:100px;height:100px;}→div { width: 100px; height: 100px; }
2) 미디어 쿼리
- 예:
@mixin media($size){}→@media (max-width: $size)
3) 서로 다른 속성 적용
- 여러 속성을 동시에 지정할 수 있다
- 예:
div{display:block;margin:0 auto;}→div { display: block; margin: 0 auto; }
4) 간편한 단축어
m10은margin: 10px;와 같은 방식으로 간단하게 작성할 수 있다
5. 기타 유용한 문법
1) "~" (형제 요소 선택자)
~를 사용하여 특정 형제 요소를 선택할 수 있다- 예:
div~p→<div></div><p></p>
2) "|" (접기/펼치기)
- 코드를 접을 때 사용
- 예:
div>p|li*3→p와li의 요소들을 구분지어 그룹화할 때 사용
결론
나름 많이 쓰는것만 정리했는데도 생각보다 많다..
많이 연습해서 손에 익혀두면 속도가 진짜 빨라질거같긴하다
많이 사용 해보자!!!
[개발자] Lv.1