<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html 3일차 수업 </title>
--CSS를 추가 하는 것.
<style type="text/css">
/* id가 menu 라는 소리 */
ul#menu li{
display: inline; /* 수평으로 표시 */
}
</style>
</head>
<body>
<!-- list -->
<ul> <!-- unordered list -->
--순서가 없는 list
<li>커피</li>
<li>홍차</li>
<li>우유</li>
</ul>
<ul style="list-style-type: disc;"> --기본적인 원 모양
<li>커피</li>
<li>홍차</li>
<li>우유</li>
</ul>
<ul style="list-style-type: circle;"> --원 안이 비어있는 원 모양
<li>커피</li>
<li>홍차</li>
<li>우유</li>
</ul>
<ul style="list-style-type: square;"> -- 네모 모양
<li>커피</li>
<li>홍차</li>
<li>우유</li>
</ul>
<ul style="list-style-type: none;"> -- 모양이 표시 안되는 것.
<li>커피</li>
<li>홍차</li>
<li>우유</li>
</ul>
<ol> <!-- ordered list --> --순서가 있는 list 숫자로 1 2 3 이렇게 표시 됨
<li>커피</li>
<li>홍차</li>
<li>우유</li>
</ol>
<ol type="1"> <!-- html4 --> --숫자로 1부터 순서를 나타낸다
<li>커피</li>
<li>홍차</li>
<li>우유</li>
</ol>
<ol start="2"> <!-- html5 --> --숫자로 2부터 순서를 나타낸다
<li>커피</li>
<li>홍차</li>
<li>우유</li>
</ol>
<ol type="A"> <!-- html4 --> --영어 대문자 A 부터 시작함
<li>커피</li>
<li>홍차</li>
<li>우유</li>
</ol>
<ol type="i"> <!-- html4 --> -- 로마숫자 그리고 대문자 I 로 쓰면 대문자 로마 숫자로 나타낸다
<li>커피</li>
<li>홍차</li>
<li>우유</li>
</ol>
<!-- dl,dt,dd -->
--dl 태그는 설명 목록을 정의하고 dt 태그는 용어 (name)를 정의하며 dd 태그는 각 용어를 설명합니다.
<dl>
<dt>커피</dt>
<dd>검은 음료</dd>
<dd>카페인</dd>
<dt>우유</dt>
<dd>주황 음료</dd>
<dt>홍차</dt>
<dd>백색 음료</dd>
</dl>
결과값
<!-- list 안에 list 를 포함할 수 있따아 -->
<ul>
<li>커피
<ol>
<li>블랙</li>
<li>밀크</li>
</ol>
</li>
<li>홍차</li>
<li>우유</li>
</ul>
<ul id="menu">
<li>사과</li>
<li>수박</li>
<li>배</li>
</ul>
</body>
</html>
'HTML,CSS' 카테고리의 다른 글
| HTML(10)+CSS 파일 불러오기 (0) | 2018.07.29 |
|---|---|
| HTML(9)+CSS padding,display,border-radius, (0) | 2018.07.29 |
| HTML(7)+CSS ,전체에 style주기 (0) | 2018.07.28 |
| HTML(6) table, caption,tr,td,th,colspan,rowspan (0) | 2018.07.28 |
| HTML(5) img, br clear (0) | 2018.07.28 |