📌 Emmet

html를 빠르게 마크업 하는 방법. 반복할 태그들이 많을때 쓰면 빠르고 쉽게 완성할 수 있다. 목적에 맞게 쓴뒤 tab키를 누르면 100줄이라도 0.1초만에 만들어지는 마법같은 기능이다.

1. id,class (#,.)

• class나 id가 있는 div라면 적어주지 않아도 div가 생성된다.

div#id_container

<div id="id_container"></div>

.class_container

<div class="class_container"></div>

2. 부모,형제,자식 (>,+)

div>ul>li

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

div>ul+ol

<div>
	<ul>
    </ul>
    <ol>
    </ol>
</div>

3. 반복 (*)

ul>li*3

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

4. 상위추가 (^)

• 자식요소 입력후 형제요소 만들고 싶을때 사용한다.

div>ul>li^span

<div>
	<ul>
    	<li>
        </li>
    </ul>
    <span>
    </span>
</div>

• 여기서 ^ 대신 형제요소를 의미하는 +를 사용한다면

div>ul>li+span

<div>
    <ul>
        <li></li>
        <span></span>
    </ul>
</div>

• 올라가고싶은 만큼 ^추가 가능

div>il>li^^span

<div>
    <ul>
        <li></li>
    </ul>
</div>
<span></span>

5. 넘버링 ($)

div>li#item$*5

<div>
    <li id="item1"></li>
    <li id="item2"></li>
    <li id="item3"></li>
    <li id="item4"></li>
    <li id="item5"></li>
</div>

• @뒤에 시작하고싶은 숫자 작성하면 원하는 숫자부터 시작도 가능하다.

div>li.item$@5*5

<div>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
    <li class="item8"></li>
    <li class="item9"></li>
</div>

6.텍스트({})

div>li{item}

<div>
    <li>item</li>
</div>

7.그룹화()

• class나 id속성을 준 후 형제태그를 만들고싶다면

.continer>(div.box*3)+span

<div class="continer">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <span></span>
</div>

✏️ Emmet 복합적으로 적용해보기

.container>ul>li.item$*5^ol>li.box${box$}*3

<div class="container">
    <ul>
        <li class="item1"></li>
        <li class="item2"></li>
        <li class="item3"></li>
        <li class="item4"></li>
        <li class="item5"></li>
    </ul>
    <ol>
        <li class="box1">box1</li>
        <li class="box2">box2</li>
        <li class="box3">box3</li>
    </ol>
</div>

📎 드림코딩 Emmet강의
📎 Emmet 공식사이트

---

📝 오늘의 회고

• 오늘은 계산기 목업을 완성한뒤 발표하는 시간을 가졌다. 자랑하기 버튼을 누른 분들 먼저 발표하기로 했는데 글쎄 갑자기 내이름이 불려서 너무 당황했다.누가 잘못 체크를 하신거같다고 해명했는데 그래도 해보라고 권유해주셔서 못할건 없다 생각하고 마이크를 켰는데 너무 떨려서 웃기만 했다 😂 사실 더 손보고싶은 부분이 많았는데 기본적인 기능만 넣어놔서 발표하기 부끄러웠지만 많은 분들에게 용기를 주었길! 이렇게 대충 만든 사람도 있어요^^

• 코드스테이츠 라이브 세션 진짜 좋은 프로그램 같다. 못해도 1시간은 기본으로 진행되는데 다른분들의 아이디어도 들을 수 있고 개념을 빠르게 훑어주면서 좋은 정보들을 쏙쏙 주워갈 수 있다. 오늘의 수확은 바로 Emmet! 클래스나 반복정도는 익숙하게 쓰고 있었는데 그룹화나 원하는 숫자부터 넘버링 등은 기억속에 사라진 기능이었다. 이참에 복습해서 기부니 조크든요😇

• 주말에는 그동안 대충 써놨던 블로그를 손봐야겠다. 오늘처럼 나중에 찾아보기 좋게 목록화 하는게 좋을것 같다.

민머리파 충성..!🫡 태우님 승현님 ㅎㅇㅎㅇ