🎉 berenickt 블로그에 온 걸 환영합니다. 🎉
Lang
HTML
Emmet 문법 정리

1. Emmet (에밋)

Emmet은 , XML, XSL 문서 등을 편집할 때 빠른 코딩을 위해 사용하는 플러그인이다.

  • 원래 젠코딩으로 부르다가 에밋으로 이름을 변경했다. 매우 간단한 몇 가지 코드만 입력하면,
  • 자동으로 완전한 코드를 생성해 준다.
  • Emmet을 사용하면 HTML & CSS의 작업 속도를 엄청나게 향상시킬 수 있다.
  • VSCode는 기본적으로 지원하고, Tab키를 통해 사용한다.

2. 태그

2.1 자식(하위) 요소 >

1
div>ul>li
1
<div>

2
  <ul>

3
    <li></li>

4
  </ul>

5
</div>

2.2 형제 요소 +

1
div>p+span
1
<div>

2
  <p></p>

3
  <span></span>

4
</div>

2.3 올라가기 ^

1
div>ul>li^p+a
1
<div>

2
  <ul>

3
    <li></li>

4
  </ul>

5
  <p></p>

6
  <a href=""></a>

7
</div>

2.3.1 두번 올라가기 ^^

1
div>ul>li^^div
1
<div>

2
  <ul>

3
    <li></li>

4
  </ul>

5
</div>

6
<div></div>

2.4 반복하기 *

1
div>ul>li*3
1
<div>

2
  <ul>

3
    <li></li>

4
    <li></li>

5
    <li></li>

6
  </ul>

7
</div>

2.5 그룹화 ()

1
div>(header>ul>li*2)+footer
1
<div>

2
  <header>

3
    <ul>

4
      <li></li>

5
      <li></li>

6
    </ul>

7
  </header>

8
  <footer></footer>

9
</div>

10


11
<!-- 그룹화를 통해 `footer`는 `header`의 형제 요소가 되었다. －－＞

2.5 속성

2.5.1 클래스 .class

  • 기본은 div이기 때문에 div를 생략하고 - .container라고 입력해도 결과는 같다
1
div.container
1
<div class="container"></div>

2.5.2 아이디 #id

1
span#hello
1
<span id="hello"></span>

2.5.3 속성 [attr]

1
td[title="bye" colspan=5]
1
<td title="bye" colspan="5"></td>

2.6 넘버링 $

2.6.1 $ - 숫자를 순서대로 나열

1
ul>li.item$*5
1
<ul>

2
  <li class="item1"></li>

3
  <li class="item2"></li>

4
  <li class="item3"></li>

5
  <li class="item4"></li>

6
  <li class="item5"></li>

7
</ul>

2.6.2 $@ - 뒤의 숫자부터 시작

1
ul>li.item$@5*5
1
<ul>

2
  <li class="item5"></li>

3
  <li class="item6"></li>

4
  <li class="item7"></li>

5
  <li class="item8"></li>

6
  <li class="item9"></li>

7
</ul>

2.7 텍스트

2.7.1 {} - {중괄호} 안에 넣으려는 텍스트를 입력

1
.fruit{banana}
1
<div class="fruit">banana</div>

2.7.2 응용

1
.container>ul.list>li.list-item*5>a{list$}
1
<div class="container">

2
  <ul class="list">

3
    <li class="list-item"><a href="">list1</a></li>

4
    <li class="list-item"><a href="">list2</a></li>

5
    <li class="list-item"><a href="">list3</a></li>

6
    <li class="list-item"><a href="">list4</a></li>

7
    <li class="list-item"><a href="">list5</a></li>

8
  </ul>

9
</div>

2.7.3 응용2

1
.container>.item*8>{$}
1
<div class="container">

2
  <div class="item">1</div>

3
  <div class="item">2</div>

4
  <div class="item">3</div>

5
  <div class="item">4</div>

6
  <div class="item">5</div>

7
  <div class="item">6</div>

8
  <div class="item">7</div>

9
  <div class="item">8</div>

10
</div>

3. CSS 문법

css는 솔직히 단축문법 외울바에, 그냥 vscode자동완성 기능으로 치는게 나을듯 하다.

[ 단위 ]

  • p → %
  • e → em
  • w → width
  • h → height
  • m → margin
  • p → padding
  • bg → background

3.1 px 변환

1
w100

2


3
/*  변환 ▼ */

4


5
width: 100px; /* 기본이 px단위 */

3.2 p → %변환

1
w50p

2


3
/*  변환 ▼ */

4


5
width: 50%
1
h100p

2


3
/*  변환 ▼ */

4


5
height: 100%;

3.3 margin

1
m10p30e5

2


3
/*  변환 ▼ */

4


5
margin: 10% 30em 5px;
1
bg10p

2


3
/*  변환 ▼ */

4


5
background: 10%;
자주 쓰는 HTML 태그 간단 정리웹 접근성과 WAI-ARIA