wecode 4주차_2일 TIL_Emmet 단축키로 html 핵 간단하게 짜보자

dooreplay·2020년 3월 6일
0

작년 8월에 작성된 글입니다.


1번 타자는 Emmet 단축키는 아니지만 구조부터 찬찬히 만들어 보자는 의미에서 추가..!

html 구조 만들기

! 누르고 tab키 누르면 뙇!! 뜬다는 사실은 이미 널리 알려져 있어서 패쓰

<!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>

요렇게 간편하게 뙇!!!
그치만 Emmet은 진짜 진짜 진짜로 신박한데 많이 알려져 있는거 같진 않다!
그래서 써보는 오늘의 포스팅.

자식요소는 >를 이용하기

nav>ul>li 입력하고 엔터 치면

<nav>
    <ul>
        <li></li>
    </ul>
</nav>

이런 구조가 뙇!

자매? 형제?요소는 +를 이용하기

div+p+bq 입력하고 엔터 치면

<div></div>
<p></p>
<blockquote></blockquote>

>를 입력하면 부모-자식 관계가 되지만, +를 입력하면 동등한 관계로 태그가 생성됩니다!

여러개의 동일한 속성은 * 를 이용하기

ul>li*5 입력하고 엔터 치면

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

list 일일히 다 쓰는게 얼마나 귀찮게요! 원하는 개수만큼 곱해주면 끝!

id는 # class는 .

#header 입력시 <div id="header"></div>, .header입력시 <div class="title"></div>
여기서 알 수 있는 사실! div는 딱히 div라고 안 써줘도 id나 class 이름만 줘도 자동으로 적용됩니다요

text는 {}안에

a{Click me} 입력하고 엔터 치면
<a href="">Click me</a> Click me라는 text를 클릭시 링크이동하는 anchor 태그가 뙇!

$ 사인으로 숫자 매기기

ul>li.item$*5 입력하고 엔터 치면

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>

짠~ $사인이 있는 곳에 번호가 자동으로 생겼슴돠
그렇다면 응용문제....

h$[title=item$]{Header $}*3 이걸 치면 뭐가 나올까요?

정답은...

<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>

Emmet 치트키가 편해진다면 코드 칠때 진짜 편할거 같지 않나요?ㅋㅋ
더 자세한 문법은 https://docs.emmet.io/cheat-sheet/ 요기 들어가시면 예시와 함께 다 나와있습니다!!

안그래도 코드치는데 손가락을 많이 혹사시키는데...
단축키 쓰면 건강지수도 2% 정도 올라가고.. 일단 멋있어보입니다 ㅎ

연습만이 살길!!!!

Reference

profile
Community Manager && front-end Dev

0개의 댓글