[Web] Emmet, Zen-coding / lorem(로렘)

🔻Emmet, Zen-coding🔻

• CSS 선택자 문법을 사용해서 HTML/CSS 코드를 손쉽게 작성하는 기능
• 개발도구(Eclipse, VS code 등)들이 Emmet 기능을 지원한다.
• 생산성 도구
• HTML과 CSS 코드를 간결하고 빠르게 작성할 수 있도록 도와주는 확장 툴이다.
• id,클래스,속성 선택자를 먼저 만들면 HTML 코드를 작성해준다.

 

1. 클래스 및 ID 속성 추가

• .classname 또는 #idname과 같이 클래스와 ID 속성을 빠르게 추가할 수 있다.
• '$'를 사용하여 id 중복을 방지한다.

 

 

아이디는 중복되면 안되니 아래처럼 사용불가하다.

    div#box1{상자}*5
    <div id="box1">상자</div>
    <div id="box1">상자</div>
    <div id="box1">상자</div>
    <div id="box1">상자</div>
    <div id="box1">상자</div>

숫자가 변화되야할 때는 '$'를 사용한다.

    div#box${상자}*5
    <div id="box1">상자</div>
    <div id="box2">상자</div>
    <div id="box3">상자</div>
    <div id="box4">상자</div>
    <div id="box5">상자</div>

$로 자릿수 표현도 가능하다

    div#box$${상자}*5
    <div id="box01">상자</div>
    <div id="box02">상자</div>
    <div id="box03">상자</div>
    <div id="box04">상자</div>
    <div id="box05">상자</div>

 

2. 약어를 활용한 태그 생성

• 예를 들어, div를 입력하고 탭 키를 누르면 <div></div>가 생성된다.

 

3. 계층적 구조 표현

    div+p
    <div></div>
    <p></p>

    div~p
    <!-- 둘 사이에 어떤 태그가 있는지 모르기에 지원하지 않는다. -->

 

4. 이미지 속성 추가

    (img[src=images/cat$$.jpg alt=고양이$ title=고양이$ width=250]+br)*6
    <img src="images/cat01.jpg" alt="고양이1" title="고양이1" width="250"><br>
    <img src="images/cat02.jpg" alt="고양이2" title="고양이2" width="250"><br>
    <img src="images/cat03.jpg" alt="고양이3" title="고양이3" width="250"><br>
    <img src="images/cat04.jpg" alt="고양이4" title="고양이4" width="250"><br>
    <img src="images/cat05.jpg" alt="고양이5" title="고양이5" width="250"><br>
    <img src="images/cat06.jpg" alt="고양이6" title="고양이6" width="250"><br>

 

5. 테이블 속성 추가

    table>tr>td
    3행 3열 테이블
    table#tbl1>tr*3>td.cell${데이터$}*3
    <table id="tbl1">
        <tr>
            <td class="cell1">데이터1</td>
            <td class="cell2">데이터2</td>
            <td class="cell3">데이터3</td>
        </tr>
        <tr>
            <td class="cell1">데이터1</td>
            <td class="cell2">데이터2</td>
            <td class="cell3">데이터3</td>
        </tr>
        <tr>
            <td class="cell1">데이터1</td>
            <td class="cell2">데이터2</td>
            <td class="cell3">데이터3</td>
        </tr>
    </table>

 

 

+) lorem ipsum

• 더미생성시 사용한다.
• 원하는 단어 수만큼 아무 단어를 나열해준다.
• 로렘 기능에 한해 자식으로 넣어야한다.

    lorem숫자

    lorem5
    Lorem ipsum dolor sit amet.

    
    h1>lorem5
    <h1>Lorem ipsum dolor sit amet.</h1>