[basic html/css] 2. html - list tags
TRANSCRIPT
![Page 1: [Basic HTML/CSS] 2. html - list tags](https://reader034.vdocument.in/reader034/viewer/2022052207/58ce75c41a28abdc578b67d9/html5/thumbnails/1.jpg)
BASIC HTML & CSS2. html - list tags
[ 2017.01.10. Tue ]
![Page 2: [Basic HTML/CSS] 2. html - list tags](https://reader034.vdocument.in/reader034/viewer/2022052207/58ce75c41a28abdc578b67d9/html5/thumbnails/2.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022052207/58ce75c41a28abdc578b67d9/html5/thumbnails/3.jpg)
UL / LI
![Page 4: [Basic HTML/CSS] 2. html - list tags](https://reader034.vdocument.in/reader034/viewer/2022052207/58ce75c41a28abdc578b67d9/html5/thumbnails/4.jpg)
ul / li● The HTML <ul> element represents an unordered list of items,
typically rendered as a bulleted list.● 순서 없는 목록
block
![Page 5: [Basic HTML/CSS] 2. html - list tags](https://reader034.vdocument.in/reader034/viewer/2022052207/58ce75c41a28abdc578b67d9/html5/thumbnails/5.jpg)
http://codepen.io/zineeworld/pen/YNPEpN
![Page 6: [Basic HTML/CSS] 2. html - list tags](https://reader034.vdocument.in/reader034/viewer/2022052207/58ce75c41a28abdc578b67d9/html5/thumbnails/6.jpg)
OL / LI
![Page 7: [Basic HTML/CSS] 2. html - list tags](https://reader034.vdocument.in/reader034/viewer/2022052207/58ce75c41a28abdc578b67d9/html5/thumbnails/7.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022052207/58ce75c41a28abdc578b67d9/html5/thumbnails/8.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022052207/58ce75c41a28abdc578b67d9/html5/thumbnails/9.jpg)
DL / DT / DD
![Page 10: [Basic HTML/CSS] 2. html - list tags](https://reader034.vdocument.in/reader034/viewer/2022052207/58ce75c41a28abdc578b67d9/html5/thumbnails/10.jpg)
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 11: [Basic HTML/CSS] 2. html - list tags](https://reader034.vdocument.in/reader034/viewer/2022052207/58ce75c41a28abdc578b67d9/html5/thumbnails/11.jpg)
http://codepen.io/zineeworld/pen/egmepX
![Page 12: [Basic HTML/CSS] 2. html - list tags](https://reader034.vdocument.in/reader034/viewer/2022052207/58ce75c41a28abdc578b67d9/html5/thumbnails/12.jpg)
Find out!
![Page 13: [Basic HTML/CSS] 2. html - list tags](https://reader034.vdocument.in/reader034/viewer/2022052207/58ce75c41a28abdc578b67d9/html5/thumbnails/13.jpg)
ul li
![Page 14: [Basic HTML/CSS] 2. html - list tags](https://reader034.vdocument.in/reader034/viewer/2022052207/58ce75c41a28abdc578b67d9/html5/thumbnails/14.jpg)
ol li
![Page 15: [Basic HTML/CSS] 2. html - list tags](https://reader034.vdocument.in/reader034/viewer/2022052207/58ce75c41a28abdc578b67d9/html5/thumbnails/15.jpg)
dl dt dd
![Page 16: [Basic HTML/CSS] 2. html - list tags](https://reader034.vdocument.in/reader034/viewer/2022052207/58ce75c41a28abdc578b67d9/html5/thumbnails/16.jpg)
Practice
![Page 17: [Basic HTML/CSS] 2. html - list tags](https://reader034.vdocument.in/reader034/viewer/2022052207/58ce75c41a28abdc578b67d9/html5/thumbnails/17.jpg)
● 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](https://reader034.vdocument.in/reader034/viewer/2022052207/58ce75c41a28abdc578b67d9/html5/thumbnails/18.jpg)
Facebook / Twitter / Codepen
@zineeworld