[Client] Emmet (Zen-Coding), Lorem Ipsum

🍁Emmet (Zen-Coding)

---

CSS 선택자 문법을 사용해서 HTML/CSS 코드를 손쉽게 작성할 수 있도록 하는 기능이다.

다양한 개발 도구(Eclipse, VS CODE..)에서 Emmet 기능을 지원하고 있다.

주로 #, ., [], {}, +, >, $ 등의 선택자 노드를 조합하여 사용하며, Emmet은 생산성을 높여주는 생산성 도구라고 할 수 있다.

 

Emmet — the essential toolkit for web-developers

Emmet 홈페이지에 들어가 보면 우리가 사용하는 많은 개발 도구들이 있다.

 

Eclipse에서 Emmet 설치

GitHub - emmetio/emmet-eclipse: Emmet for Eclipse

VS CODE에서 Emmet은 기본 기능으로 이미 설치가 되어 있다.

하지만 Eclipse에서는 따로 설치를 해 주어야 한다.

• http://download.emmet.io/eclipse/updates/

설치가 완료되면 Eclipse IDE를 다시 시작하라는 문구가 뜬다.

 

🍁Emmet의 사용

---

Emmet은 CSS 선택자를 통해서 태그를 역으로 만들어준다.

태그를 명시하지 않으면 <div> 태그를 만들어준다.

입력을 마치거나 Ctrl + Space를 누르면 Emmet 약어가 자동 완성 결과를 보여주는 것을 확인할 수 있다.

! 또는 HTML:5를 입력했을 때 HTML 문서 타입이 출력되는 것도 Emmet의 사용 예시이다.

 

태그 선택자

<h1>태그 선택자</h1>

div {}
<div></div>

a {}
<a href=""></a>

img
<img src="url" alt="">

input
<input type="text">

 

ID 선택자 #

ID 선택자는 #를 이용해 아이디를 선택한다.

<h1>ID 선택자</h1>

div#box1 {}
<div id="box1"></div>

h1#title
<h1 id="title"></h1>

#test
<div id="test"></div>

 

클래스 선택자 .

클래스 선택자는 .를 이용해 클래스를 선택한다.

<h1>클래스 선택자</h1>

div.box {}
<div class="box"></div>

div.box
<div class="box"></div>

a.link
<a href="url" class="link"></a>

img.cat
<img src="url" alt="" class="cat">

div#box1.box
<div id="box1" class="box"></div>

div.one.tow.three
<div class="one tow three"></div>

div#box1.one.two.three
<div id="box1" class="one two three"></div>

 

속성 선택자 []

[] 내에 부여할 속성을 기재한다.

width와 height는 w, h로 작성할 수 있다.

<h1>속성 선택자</h1>

div[title] {}
<div title=""></div>

div[title]
<div title="상자">상자</div>

div[title=상자]
<div title="상자"></div>

img[width height]
<img src="" alt="" width="" height="">

img[width=100 height=200]
<img src="" alt="" width="100" height="200">

img#dog1.dog[width=200 height]
<img src="" alt="" id="dog1" class="dog" width="200" height="">

 

PCDATA {}

{} 내에 SPACE BAR 없이 PCDATA를 적는다.

<h1>PCDATA(Emmet 전용)</h1>

<!-- div { 구현부 } -->

div{상자}
<div>상자</div>

div#box1.box[title=상자]{상자입니다.}
<div id="box1" class="box" title="상자">상자입니다.</div>

 

🍁Emmet의 활용

---

Emmet을 반복하여 만들면 생산성이 훨씬 증가한다.

또한 ()로 코드를 묶어 그룹화하여 내가 원하는 Emmet을 생성할 수 있다.

$는 넘버링을 부여하라는 의미로 사용한다.

div
<div></div>

div*5
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

div.item*5
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>

div.item[title]{아이템}*5
<div class="item" title="">아이템</div>
<div class="item" title="">아이템</div>
<div class="item" title="">아이템</div>
<div class="item" title="">아이템</div>
<div class="item" title="">아이템</div>

div#box1{상자}*5
<div id="box1">상자</div>
<div id="box1">상자</div>
<div id="box1">상자</div>
<div id="box1">상자</div>
<div id="box1">상자</div>
<!-- id에 중복 발생 -->

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="box1">상자1</div>
<div id="box2">상자2</div>
<div id="box3">상자3</div>
<div id="box4">상자4</div>
<div id="box5">상자5</div>

div#box$${상자}*5
div#box$$${상자}*5
<div id="box001">상자</div>
<div id="box002">상자</div>
<div id="box003">상자</div>
<div id="box004">상자</div>
<div id="box005">상자</div>

 

형제 선택자 +

형제 선택자는 +를 사용해 요소와 같은 단계에 위치한 요소를 생성한다.

<h1>형제 선택자</h1>
a + b
a ~ b

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

div~p
div~<p></p>
<!-- 쓸모 X -->

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

h1+p+p+p
<h1></h1>
<p></p>
<p></p>
<p></p>

h1+p*3
<h1></h1>
<p></p>
<p></p>
<p></p>

h1#title1.title{제목입니다.}+p.content{설명입니다.}*3
<h1 id="title1" class="title">제목입니다.</h1>
<p class="content">설명입니다.</p>
<p class="content">설명입니다.</p>
<p class="content">설명입니다.</p>

cat01.jpg ~ cat06.jpg
<img src=""images/cat01.jpg" alt="고양이1" title="고양이1" width="250"><br>
<img src=""images/cat02.jpg" alt="고양이1" title="고양이1" width="250"><br>

img[src=images/cat$$.jpg alt=고양이$ title=고양이$ width=250]+br*6
(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>

 

자식 선택자 >

자식 선택자는 >를 사용해 자식 요소를 생성한다.

a > b
a b

div>a
<div><a href=""></a></div>

div a
<!-- 실행 X -->

ul>li*5
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

ul>li.item*5
<ul>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
</ul>

ul#list>li.item*5
<ul id="list">
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
</ul>

#ul#list>li.item*5
<div id="list">
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
</div>

h1#title{오늘의 할 일}+ul#list>li.item{할일$}*5
<h1 id="title">오늘의 할 일</h1>
<ul id="list">
    <li class="item">할일1</li>
    <li class="item">할일2</li>
    <li class="item">할일3</li>
    <li class="item">할일4</li>
    <li class="item">할일5</li>
</ul>

table>tr>td
<table>
    <tr>
        <td></td>
    </tr>
</table>

table>tr*3>td*2
<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

table#tbl1>tr*5>td/cell${항목$}*3
<table id="tbl1">
    <tr>
        <td>
        <cell1>항목1</cell1>
        <cell2>항목2</cell2>
        <cell3>항목3</cell3>
    </tr>
    <tr>
        <td>
        <cell1>항목1</cell1>
        <cell2>항목2</cell2>
        <cell3>항목3</cell3>
    </tr>
    <tr>
        <td>
        <cell1>항목1</cell1>
        <cell2>항목2</cell2>
        <cell3>항목3</cell3>
    </tr>
    <tr>
        <td>
        <cell1>항목1</cell1>
        <cell2>항목2</cell2>
        <cell3>항목3</cell3>
    </tr>
    <tr>
        <td>
        <cell1>항목1</cell1>
        <cell2>항목2</cell2>
        <cell3>항목3</cell3>
    </tr>
</table>

 

🍁Lorem Ipsum

---

lorem은 라틴어로, 디자인 시안을 잡을 때 더미데이터로 사용한다.

의미가 없는 다량의 텍스트를 만들어주며, 내장 기능은 아니지만 찾아보면 한글 버전도 있다.

의미 있는 글이 들어가게 되면 디자인이 아니라 글에 눈에 들어가기 때문에 사용한다.

lorem
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae deserunt, ex asperiores similique error veritatis dolorum nostrum eligendi sapiente excepturi dolorem eius, illo reprehenderit autem tempore laudantium provident sequi quas.

lorem5
Lorem ipsum dolor sit amet.

lorem1
Lorem.

lorem10
Lorem ipsum, dolor sit amet consectetur adipisicing elit. In, sapiente.

h1{lorem5}
<!-- 작동 X -->

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

h1>lorem8+p>lorem50*3
<h1>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit.
    <p><span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tenetur inventore quibusdam magnam pariatur eveniet. Tempore repudiandae, non hic corrupti culpa magni esse fugiat ab. Quibusdam ullam libero hic deleniti unde sint earum quaerat veniam, modi provident. Distinctio quod consequuntur, quae aperiam unde odit inventore repellendus pariatur architecto rerum fugiat ab!</span><span>Minus, sint? Qui quisquam deleniti sunt nesciunt voluptas est laborum impedit repellendus atque quo eius expedita sit eaque officiis molestias ab voluptatibus, nulla nostrum eos provident fugiat velit fuga totam! Odit magni vero expedita quo fuga facere a nesciunt, unde incidunt velit quasi quaerat cum dolores vel cupiditate dolorum pariatur!</span><span>Voluptates dolor magni rerum ducimus officiis aperiam vero consequatur voluptate neque necessitatibus. Corporis distinctio tempore explicabo iure in, et nobis placeat nesciunt perspiciatis dicta eius harum pariatur dolorum laborum! Laboriosam tenetur porro ipsum sit accusamus? Libero officiis architecto dignissimos vitae quia veritatis a illum nostrum, dolor minima culpa consectetur sequi.</span></p>
</h1>
<!-- 구분 X -->

(h1>lorem8)+(p>lorem50)*3
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit ipsa ducimus reiciendis eaque? Cum modi impedit enim, perspiciatis iure quae, ipsum quos quod eaque sed consequuntur vitae distinctio voluptates asperiores aspernatur magnam! Cumque corporis quasi dolorum ullam. Accusantium, iste dignissimos deleniti aperiam hic, laborum illo doloribus, dolore fugiat rerum optio.</p>
<p>Natus labore modi quasi rerum laboriosam nesciunt distinctio! Rem ex aperiam illum assumenda laudantium nemo aliquid maiores, dolore excepturi magni nesciunt molestiae, saepe sapiente facere ipsa voluptate minima velit tempore, placeat quos fugiat quis ipsum nisi! Nobis, quae numquam. Inventore quia corporis mollitia nostrum repellat commodi sed animi voluptatem reprehenderit?</p>
<p>Neque suscipit corrupti voluptatibus nihil et harum non, soluta excepturi voluptas, doloremque corporis aspernatur reiciendis repellendus. Incidunt velit praesentium est atque, ipsam ipsa sed alias reiciendis necessitatibus aspernatur, magni fugiat. Nesciunt delectus aspernatur labore soluta dicta eveniet saepe perferendis voluptates molestias deleniti, asperiores beatae animi consequuntur, officia mollitia dolor ratione.</p>