offfff

HTML 리스트(HTML Lists) 본문

프로그래밍

HTML 리스트(HTML Lists)

offfff 2016. 9. 5. 09:00

Unordered HTML List


순서없는 리스트는 <ul>태그로 정의한다. 리스트의 각 항목은 <li>태그로 정의한다.

리스트 항목들은 기본값으로 검은 점을 가지고 표시된다.


<!DOCTYPE html>

<html>

<body>

<ul>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ul>

</body>

</html>




Unordered HTML List - Choose List Item Marker


위의 예제는 리스트를 검은 점을 가지고 표시했었다.

CSS list-style-type 속성을 사용하면, 리스트 마커(점)의 스타일을 변경할 수 있다.


 Value

 Description

 disc

 기본 값(●)

 circle

 원으로 설정(○)

 square

 네모로 설정(■)

 none

 없음


<!DOCTYPE html>

<html>

<body>

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

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ul>

</body>

</html>




Ordered HTML List


순서가 있는 리스트는 <ol>태그를 사용하여 정의한다. 마찬가지로 리스트의 각 항목은 <li>로 정의한다.

기본 값에 의해 리스트는 아라비아 숫자(1~9)로 표시된다.


<!DOCTYPE html>

<html>

<body>

<ol>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>

</body>

</html>




Ordered HTML List - The Type Attribute


type 속성을 통해, 리스트 항목의 숫자 표기를 바꿀 수 있다.


 Type

 Description

 type="1"

 아라비아 숫자(기본값)

 type="A"

 알파벳 대문자

 type="a"

 알파벳 소문자

 type="I"

 로마 숫자 대문자

 type="i"

 로마 숫자 소문자


<!DOCTYPE html>

<html>

<body>

<ol type="1">

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>

</body>

</html>




HTML Description Lists


description list는 어떤 용어의 리스트 인데, 그 내용 항목으로 각 용어의 설명이 들어간다.

<dl> 태그는 description list를 정의하고, <dt> 태그는 용어를 정의한다.

그리고 <dd> 태그는 각 용어의 설명들을 정의하는 태그이다.


<!DOCTYPE html>

<html>

<body>

<dl>

<dt>Coffee</dt>

<dd> - black hot drink</dd>

<dt>Milk</dt>

<dd> - white cold drink</dd>

</dl>

</body>

</html>




Nested HTML Lists


리스트는 다른 리스트를 항목으로 포함시킬 수도 있는데, 이런 리스트를 Nested List라고 한다.

리스트 뿐만 아니라 이미지나 링크 같은 다른 element도 리스트의 항목으로 포함할 수 있다.


<!DOCTYPE html>

<html>

<body>

<ul>

<li>Coffee</li>

<li>Tea

<ul>

<li>Black tea</li>

<li>Green tea</li>

</ul>

</li>

<li>Milk</li>

</ul>

</body>

</html>




Horizontal Lists


HTML list는 CSS를 가지고 많은 방법으로 꾸밀 수 있다.

대표적인 방법은 메뉴를 만드는 것으로, 메뉴는 수평으로 늘어뜨린 스타일의 리스트로 볼 수 있다.


<!DOCTYPE html>

<html>

<head>

<style>

ul {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #333333;

}


li {

float: left;

}


li a {

display: block;

color: white;

text-align: center;

padding: 16px;

text-decoration: none;

}

</style>

</head>

<body>


<ul>

<li><a class="active" href="#home">Home</a></li>

<li><a href="#news">News</a></li>

<li><a href="#contact">Contact</a></li>

<li><a href="#about">About</a></li>

</ul>


</body>

</html>




아래 링크를 참조하여 번역 및 수정 함

http://www.w3schools.com/html/html_lists.asp

저작자표시 비영리

'프로그래밍' 카테고리의 다른 글

HTML Classes  (0) 2016.09.07
HTML 블록(HTML Blocks)  (0) 2016.09.06
HTML 표(HTML Tables)  (0) 2016.09.04
HTML 이미지(HTML Images)  (0) 2016.09.03
HTML 링크(HTML Links)  (0) 2016.09.02
'프로그래밍' Related Articles more