Daily coding

HTML : Tags - List 리스트 본문

Front-end/Client

HTML : Tags - List 리스트

sunnnkim 2020. 1. 3. 13:12

List 

<ul> Unordered List

<li> : 리스트안에 들어갈 실제 값을 입력한다.

 

예시 : <ul style="list-style-type : disc">

 

  • coffee
  • tea
  • milk

disc : 동그라미 (default값)

  • coffee
  • tea
  • milk

square : 네모 버튼

  • coffee
  • tea
  • milk

none : 아무것도 없음

    coffee

    tea

    milk

list안에 anchor(a)넣을 수 있음

<ol> : 순서가 있는 목록 (ordered list)

  1. Apple
  2. Pear
  3. Banana

---> ol 또는 ul 태그에 클래스 이름을 붙이고 CSS에서 디자인을 조절하도록 한다. 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.cls li{
	display: inline; /* 리스트의 가로모드 */
}
/*
. = 클래스를 의미
.cls li -> cls라는 이름의 클래스 속의 li에 적용
 */


</style>
</head>
<body>

list
<ul> <!-- 1. unordered list (순서없는 목록 -->
	<li>coffee</li>
	<li>tea</li>
	<li>milk</li>
</ul>

disc : 동그라미 (default값)
<ul style="list-style-type: disc">
	<li>coffee</li>
	<li>tea</li>
	<li>milk</li>
</ul>

square : 네모 버튼
<ul style="list-style-type: square">
	<li>coffee</li>
	<li>tea</li>
	<li>milk</li>
</ul>

none : 아무것도 없음
<ul style="list-style-type: none">
	<li>coffee</li>
	<li>tea</li>
	<li>milk</li>
</ul>

list안에 anchor(a)넣을 수 있음
<ul style="list-style-type: none">
	<li>
		<a href="#">coffee</a>
	</li>
	<li>tea</li>
	<li>milk</li>
</ul>

ol: 순서가 있는 목록 (ordered list)
<ol>
	<li>Apple</li>
	<li>Pear</li>
	<li>Banana</li>
</ol>

중간 숫자부터 표현하기 (html4)<br>
type ----> html4에서 사용함 <br>
<ol type="2">
	<li>Apple</li>
	<li>Pear</li>
	<li>Banana</li>
</ol>
type ="A" (알파벳기호), "I"(로마자기호)
<ol type="A">
	<li>Apple</li>
	<li>Pear</li>
	<li>Banana</li>
</ol>
<ol type="I">
	<li>Apple</li>
	<li>Pear</li>
	<li>Banana</li>
</ol>

중간 숫자부터 표현하기(html5)<br>
start ----> html5에서 사용함
<ol start="3">
	<li>Apple</li>
	<li>Pear</li>
	<li>Banana</li>
</ol>

list안에 list
<ul>
	<li>coffee</li>
		<ol>
			<li>black</li>
			<li>milk</li>
		</ol>
</ul>

CSS사용해서 list 가로로 표현하기 (가로로 표현되면 앞에 붙는 기호가 사라짐)
<p>좋아하는 과일은?</p>
<ol class = "cls">
	<li>1. Apple</li>
	<li>2. Pear</li>
	<li>3. Banana</li>
</ol>



</body>
</html>

'Front-end > Client' 카테고리의 다른 글

웹 - 아파치 톰캣 설정방법  (0) 2020.01.03
HTML : Tags - iframe i프레임  (0) 2020.01.03
HTML : Basic 1 - table  (0) 2020.01.02
HTML : Basic 1 - img  (0) 2020.01.02
HTML : Basic 1 - Anchor  (0) 2020.01.02
'Front-end/Client' Related Articles more