[basic html/css] 2. html - list tags
Post on 12-Apr-2017
104 Views
Preview:
TRANSCRIPT
BASIC HTML & CSS2. html - list tags
[ 2017.01.10. Tue ]
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
UL / LI
ul / li● The HTML <ul> element represents an unordered list of items,
typically rendered as a bulleted list.● 순서 없는 목록
block
http://codepen.io/zineeworld/pen/YNPEpN
OL / LI
ol / li● The HTML <ol> element represents an ordered list of items, typically
rendered as a numbered list.● 순서 있는 목록
block
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>
DL / DT / DD
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
http://codepen.io/zineeworld/pen/egmepX
Find out!
ul li
ol li
dl dt dd
Practice
● document title: 20170110 Practice● <h1>을 제외한 3개의 구역으로 나누어 주세요.● 가로 줄은 <hr> 입니다.
이미지를 누르면 새 창으로 마이뮤직테이스트 홈페이지가 연결 되게 해주세요.https://productionmedia.mymusictaste.com/img/mmt_web/header_logo.png
아래와 같이 자신의 정보를 추가해주세요.1. Hyejin
○ 여자, 개발자○ 28세
Facebook / Twitter / Codepen
@zineeworld
top related