HTML의 요소

block element

• p, div, ou, ul, dl, li, h1~ h6

• <p> 컨텐츠 </p>

• 컨텐츠 : 텍스트, 다른태그

inline element

• a, img, span, …

• <a> 컨텐츠 </a>

• 컨텐츠 - 주로 텍스트(예외적으로 img는 컨텐츠를 가질수 없다.)

empty element

• img, br

• <br /> → <br>

• <img src = “이미지경로”/> → <img>

container의 역할을 하는 element

• 다른 태그들을 포함할 수 있다.

• 주로 서로 관련있는 태그들을 한덩어리로 묶는 울타리 역할을 한다.

• div - 블록 엘리먼트, 인라인 엘리먼트들을 묶을 때 사용한다.

• span - 인라인 엘리먼트를 묶을 때 사용한다.

목록

ul

• unordered list

• li를 가진다.

ol

• ordered list

• li를 가진다.

dl

• definition list

• dt와 dd를 가진다.

테이블

<thead>

<tr> </tr>

<tr> </tr>

</thead>

<tbody>

<tr> </tr>

<tr> </tr>

</tbody>

이미지태그

• 상대경로 표시법

• “/”로 시작하지 않는 경로 표시

• 현재 페이지의 url에 대한 상대적인 경로다.

• 절대경로 표시법

• “/”로 시작하는 경로 표시

젠코딩

emmet플러그인 설치해야 사용가능. // Tab키 또는 control + E

• ID, CLASS 속성

• div#page.section.main

• <div id="page" class="section main"></div>

• 커스텀 속성

• a[title="hello world"]

• <a title="hello world"></a>

• 엘리먼트 복제

• li*3

• <li></li><li></li><li></li>

• 넘버링 - $ 위치에 값이 1부터 1씩 증가 (1,2,3,4...)

• li.item$*3

• <li class="item1"></li><li class="item2"></li><li class="item3"></li>

• li.item$$$*2

• <li class="item001"></li><li class="item002"></li>

• 그룹핑

• div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer

• ID, CLASS 앞에 태그명을 생략하면 DIV로 간주

• #content>.section

• <div id="content"><div class="section"></div></div>

• 텍스트

• p>{click}

• <p>click</p>

p{태그안}

p>a   : p안에 a태그

p+p    : p태그가 나란히

select>option{텍스트}  : select안에 option

div#container>div.row

a[href=url주소 onclick=send();]