Notice
Recent Posts
Recent Comments
Link
Everything has an expiration date
[Emmet] 20231215 [프로그램 소스] - EmmetTest01, EmmetTest02 본문
[JSP & JDBC & Oracle]/Program source (JSP & JDBC & Oracle)
[Emmet] 20231215 [프로그램 소스] - EmmetTest01, EmmetTest02
Jelly-fish 2023. 12. 18. 08:46
EmmetApp
EmmetTest01
1. 태그 선택자 - `태그명 + 『ctrl+e』` (`div + 『ctrl+e』`)
1. 태그 선택자
<!-- "div" 작성 후 → Ctrl + E -->
div
<div></div>
<div>넣을내용</div>
<!-- "div{넣을내용}" 작성 후 → Ctrl + E -->
div{넣을내용}
<div>넣을내용</div>
<!-- Tab 키 누르면, <a> 태그 사이에 커서가 쏙 들어감! -->
a
<a href="http://wwww.naver.com">네이버</a>
img
<img src="" alt="" />
table
<table></table>
span
<span></span>
p
<p></p>2. 아이디 선택자 - `#` (`div#box`)
2. 아이디 선택자 <!-- # -->
div#box
<div id="box"></div>
div#box{kkk}
<div id="box">kkk</div>
<!-- HTML 에서 가장 많이 쓰이는 태그가 <div> 이므로 아이디만 작성해도 구성됨! -->
#box
<div id="box"></div>
#box{1234}
<div id="box">1234</div>3. 클래스 선택자 - `.` (`div.items`)
3. 클래스 선택자 <!-- . -->
div.items
<div class="items"></div>
div.items{aaa}
<div class="items">aaa</div>
.items
<div class="items"></div>
.items{bbb}
<div class="items">bbb</div>4. 조합 - `『.』 + 『#』` (`div#box.items`)
4. 조합
<!-- id : box, class: items -->
div#box.items
<div id="box" class="items"></div>
<!-- class 가 총 3개인 경우 -->
div#box.items.unit.control
<div id="box" class="items unit control"></div>
div#box.items.unit{aaa}
<div id="box" class="items unit">aaa</div>
<!-- 클래스만 부여 -->
div.items.unit{bbb}
<div class="items unit">bbb</div>5. 속성 선택자 - `[ ]` (`div[title="test"]` )
5. 속성 선택자 <!-- [] -->
div[title]
<div title=""></div>
div[title='test']
<div title="test"></div>
a[href='www.naver.com' title='네이버']
<a href="www.naver.com" title="네이버"></a>
a[href='www.naver.com' title='네이버']{사이트로 이동}
<a href="www.naver.com" title="네이버">사이트로 이동</a>6. PCDATA - `태그명 { 입력할 내용 }` (`div{내용}`)
6. PCDATA
div{박스}
<div>박스</div>
a{홈페이지로이동}
<a href="">홈페이지로이동</a>
p{문단내용기술}
<p>문단내용기술</p>
7. 반복 생성 - `태그명 * (반복횟수)` (`div*5`)
7. 반복 생성
div*5
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
img[src=images/dog.jpg]*5
<img src="images/dog.jpg" alt="aaa" />
<img src="images/dog.jpg" alt="" />
<img src="images/dog.jpg" alt="" />
<img src="images/dog.jpg" alt="" />
<img src="images/dog.jpg" alt="" />
<!-- 클래스가 "box" -->
.box*5
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
.box{content}*5
<div class="box">content</div>
<div class="box">content</div>
<div class="box">content</div>
<div class="box">content</div>
<div class="box">content</div>
<!-- $가 id를 1 2 3 4 5 형식으로 만들어 준다. (시리즈) -->
#box$.box{content}*5
<div id="box1" class="box">content</div>
<div id="box2" class="box">content</div>
<div id="box3" class="box">content</div>
<div id="box4" class="box">content</div>
<div id="box5" class="box">content</div>
img[src=images/obj$jpg]*5
<img src="images/obj1jpg" alt="" />
<img src="images/obj2jpg" alt="" />
<img src="images/obj3jpg" alt="" />
<img src="images/obj4jpg" alt="" />
<img src="images/obj5jpg" alt="" />
h1*6
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>
h$*6
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
h${제목$}*6
<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<h4>제목4</h4>
<h5>제목5</h5>
<h6>제목6</h6>8. 연속 생성 - ` 첫 번째 태그 + 두 번째 태그 ` (`div+p`)
8. 연속 생성
<!-- 커서가 항상 태그 사이에 간다.. (Tab 누를시 다음 태그 사이로 이동) -->
div+p
<div></div>
<p></p>
h1{제목}+p{내용}*5
<h1>제목</h1>
<p>내용</p>
<p>내용</p>
<p>내용</p>
<p>내용</p>
<p>내용</p>
<!-- 제목 하나에 내용 두 개 있는 것을 다섯 개 생성 -->
(h1{제목}+p{내용}*2)*5
<h1>제목</h1>
<p>내용</p>
<p>내용</p>
<h1>제목</h1>
<p>내용</p>
<p>내용</p>
<h1>제목</h1>
<p>내용</p>
<p>내용</p>
<h1>제목</h1>
<p>내용</p>
<p>내용</p>
<h1>제목</h1>
<p>내용</p>
<p>내용</p>
div+a+div+p+div+img
<div></div>
<a href=""></a>
<div></div>
<p></p>
<div></div>
<img src="" alt="" />9, 하위 생성 - `태그명+` (`table+`)
9. 하위 생성
table+
<table>
<tr>
<td></td>
</tr>
</table>
ul+
<ul>
<li></li>
</ul>
ol+
<ol>
<li></li>
</ol>
select+
<select name="" id="">
<option value=""></option>
</select>10. 자식 생성 - `태그명 > 태그명` (`div>p`)
10. 자식 생성
div>p
<div>
<p></p>
</div>
div>p*5
<div>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
(div>p*2)*5
<div>
<p></p>
<p></p>
</div>
<div>
<p></p>
<p></p>
</div>
<div>
<p></p>
<p></p>
</div>
<div>
<p></p>
<p></p>
</div>
<div>
<p></p>
<p></p>
</div>
table#tbl>tr*5>td*3
<table id="tbl">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
table#tbl>tr*3>td.label+td.content
<table id="tbl">
<tr>
<td class="label"></td>
<td class="content"></td>
</tr>
<tr>
<td class="label"></td>
<td class="content"></td>
</tr>
<tr>
<td class="label"></td>
<td class="content"></td>
</tr>
</table>
table#tbl>tr*3>td#label+td#content
<table id="tbl">
<tr>
<td id="label"></td>
<td id="content"></td>
</tr>
<tr>
<td id="label"></td>
<td id="content"></td>
</tr>
<tr>
<td id="label"></td>
<td id="content"></td>
</tr>
</table>
table#tbl>tr*3>td#label$+td.content
<table id="tbl">
<tr>
<td id="label1"></td>
<td class="content"></td>
</tr>
<tr>
<td id="label2"></td>
<td class="content"></td>
</tr>
<tr>
<td id="label3"></td>
<td class="content"></td>
</tr>
</table>
table#tbl>(tr>th*3)+((tr>td*3)*5)
<table id="tbl">
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
11. 더미 키워드 - `lorem`
11. 더미 키워드
<!-- 그냥 더미로 아무거나 적혀있는 스페인어... -->
lorem
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Enim aliquid tempora molestias commodi doloribus obcaecati
laboriosam temporibus rem quibusdam ducimus veritatis
iste nam provident sapiente repellendus fugit repudiandae in sequi?
lorem
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Tempore nam quam dignissimos quos itaque exercitationem
ab necessitatibus suscipit accusantium officiis soluta
quisquam autem nesciunt beatae eveniet. Aut placeat facilis doloremque.
lorem
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Cum quia perspiciatis excepturi ipsam cumque inventore eius
nesciunt eos nobis nam eligendi voluptatibus facilis quisquam
animi perferendis ipsa fuga laborum rerum.
table>(tr>th*2)+(tr>(td{word}+td{lorem}))*3
<table>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td>word</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem ipsam repellendus velit accusamus fuga quo totam quod quia voluptatibus veniam veritatis perferendis cumque dicta in dolorem distinctio vero! Error explicabo.</td>
</tr>
<tr>
<td>word</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis libero minima ex mollitia reprehenderit error dolorem aliquam odio optio doloremque recusandae et quo tenetur modi corrupti ipsa harum ad magni!</td>
</tr>
<tr>
<td>word</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit blanditiis vitae facere natus reprehenderit debitis ex voluptatum consectetur qui excepturi repellendus accusamus laboriosam nisi. Dolores natus nam sint nesciunt voluptate.</td>
</tr>
</table>
table>(tr>th*2)+(tr>(td{word}+lorem(td{desc})))*3
<table>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td>word</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae reprehenderit culpa ut ratione dolorem quod est atque fuga aperiam temporibus iure doloribus velit perferendis distinctio nobis dolores provident. Veritatis perspiciatis.</td>
</tr>
<tr>
<td>word</td>
<td>Consectetur distinctio officiis quos cumque aut ex possimus sapiente nemo sint sit unde omnis dicta nisi voluptatem minus repellendus voluptate. Laboriosam quam veritatis velit totam quia aspernatur fugit? Ad voluptatibus.</td>
</tr>
<tr>
<td>word</td>
<td>Veritatis unde hic harum ipsam iste dicta adipisci voluptatum assumenda nam consequuntur culpa saepe. Non earum neque sapiente ipsa pariatur minima eos dolorem ex praesentium quod modi porro voluptatum natus!</td>
</tr>
</table>
EmmetTest02
실습 1. 다음과 같은 형식을 Emmet을 통해 구성하기
<h1 id="title" class="blue">Emmet</h1>
<h2 class="subtitle">소제목</h2>
<p class="content">내용</p>
<h2 class="subtitle">소제목</h2>
<p class="content">내용</p>
<h2 class="subtitle">소제목</h2>
<p class="content">내용</p>
<h2 class="subtitle">소제목</h2>
<p class="content">내용</p>
<h2 class="subtitle">소제목</h2>
<p class="content">내용</p>
Answer
h1#title.blue{Emmet}+(h2.subtitle{소제목}+p.content{내용})*5
실습 2. 다음과 같은 형식을 Emmet을 통해 구성하기
<table>
<tr class="line">
<td class="col">내용1</td>
<td class="comm">부연설명</td>
<td class="col">내용2</td>
<td class="comm">부연설명</td>
<td class="col">내용3</td>
<td class="comm">부연설명</td>
</tr>
<tr class="line">
<td class="col">내용1</td>
<td class="comm">부연설명</td>
<td class="col">내용2</td>
<td class="comm">부연설명</td>
<td class="col">내용3</td>
<td class="comm">부연설명</td>
</tr>
<tr class="line">
<td class="col">내용1</td>
<td class="comm">부연설명</td>
<td class="col">내용2</td>
<td class="comm">부연설명</td>
<td class="col">내용3</td>
<td class="comm">부연설명</td>
</tr>
</table>
Answer
table>(tr.line>(td.col{내용$}+td.comm{부연설명})*3)*3
실습 3. 다음과 같은 형식을 Emmet을 통해 구성하기
<table id="table">
<tr id="line1">
<th id="head1">항목1</th>
<td class="col">내용1</td>
<td class="col">내용2</td>
<td class="col">내용3</td>
</tr>
<tr id="line2">
<th id="head2">항목2</th>
<td class="col">내용1</td>
<td class="col">내용2</td>
<td class="col">내용3</td>
</tr>
</table>
ⓐ Answer - 선생님 풀이
table#table>(tr#line$*2>th#head${항목$}$+(td.col{내용$})*3)
ⓑ Answer - 내 풀이
table#table>(tr#line$>th#head${항목$}$+(td.col{내용$})*3)*2
번외 - Final Project
<!--
※【NOTICE】※
※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※
2월 중순이 공식 시작일이지만
그 기간보다 더 앞당겨서 할 것임!!
주제선정이 빠르다면... 시간을 굉장히 아낄 수 있다.
프레임워크 들어가기 전에 그 부분은 기다려주시길 바랍니다~~
※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※
-->
'[JSP & JDBC & Oracle] > Program source (JSP & JDBC & Oracle)' 카테고리의 다른 글
'[JSP & JDBC & Oracle]/Program source (JSP & JDBC & Oracle)' Related Articles
more
