[Basic HTML/CSS] 2. html - list tags

18
BASIC HTML & CSS 2. html - list tags [ 2017.01.10. Tue ]

Transcript of [Basic HTML/CSS] 2. html - list tags

Page 1: [Basic HTML/CSS] 2. html - list tags

BASIC HTML & CSS2. html - list tags

[ 2017.01.10. Tue ]

Page 2: [Basic HTML/CSS] 2. html - list tags

To Do

1. Basic Tags○ h1~h6, div, p, span, img, a, strong, b, em, i

2. List tags○ ul li, ol li, dl dt dd

3. Table tags○ table, thead, tbody, tfoot, tr, td, colgroup, col

4. Form tags○ form, fieldset, legend, label, input, select, option, textarea, button

5. Etc○ header, footer, nav, aside, section, article○ iframe, blockquote, ruby, sup, sub, pre, code, mark

Page 3: [Basic HTML/CSS] 2. html - list tags

UL / LI

Page 4: [Basic HTML/CSS] 2. html - list tags

ul / li● The HTML <ul> element represents an unordered list of items,

typically rendered as a bulleted list.● 순서 없는 목록

block

Page 6: [Basic HTML/CSS] 2. html - list tags

OL / LI

Page 7: [Basic HTML/CSS] 2. html - list tags

ol / li● The HTML <ol> element represents an ordered list of items, typically

rendered as a numbered list.● 순서 있는 목록

block

Page 8: [Basic HTML/CSS] 2. html - list tags

http://codepen.io/zineeworld/pen/pRvdNq

<!-- start 속성을 이용해 1이 아닌 숫자에서 시작할 수 있습니다. --><ol start="2"> <li>Moonju</li> <li>Hong</li> <li>Jisoo</li> <li>Seho</li> <li>Hangyo</li></ol>

<!-- type(1 | a | A | i | I)을 바꾸면 숫자의 종류를 다양하게 바꿀 수 있습니다. --><ol type="a"> <li>Moonju</li> <li>Hong</li> <li>Jisoo</li> <li>Seho</li> <li>Hangyo</li></ol>

<!-- 항목을 역순으로 표시합니다. --><ol reversed> <li>Moonju</li> <li>Hong</li> <li>Jisoo</li> <li>Seho</li> <li>Hangyo</li></ol>

Page 9: [Basic HTML/CSS] 2. html - list tags

DL / DT / DD

Page 10: [Basic HTML/CSS] 2. html - list tags

dl / dt / dd● The HTML <dl> element encloses a list of groups of terms and

descriptions. Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).

● 설명 목록

block

Page 12: [Basic HTML/CSS] 2. html - list tags

Find out!

Page 13: [Basic HTML/CSS] 2. html - list tags

ul li

Page 14: [Basic HTML/CSS] 2. html - list tags

ol li

Page 15: [Basic HTML/CSS] 2. html - list tags

dl dt dd

Page 16: [Basic HTML/CSS] 2. html - list tags

Practice

Page 17: [Basic HTML/CSS] 2. html - list tags

● document title: 20170110 Practice● <h1>을 제외한 3개의 구역으로 나누어 주세요.● 가로 줄은 <hr> 입니다.

이미지를 누르면 새 창으로 마이뮤직테이스트 홈페이지가 연결 되게 해주세요.https://productionmedia.mymusictaste.com/img/mmt_web/header_logo.png

아래와 같이 자신의 정보를 추가해주세요.1. Hyejin

○ 여자, 개발자○ 28세

Page 18: [Basic HTML/CSS] 2. html - list tags

Facebook / Twitter / Codepen

@zineeworld