HTML - 목록을 만드는 태그

HTML - 목록을 만드는 태그

목록을 만드는 태그

목록을 만드는 태그 <ul> <ol> <li> 태그 사용합니다.

<ul> 태그 : Unoerdered List의 약자로 순서가 없는 목록, 글머리 기호를 붙혀서 목록을 만드는 형식입니다.

<ol> 태그 : Ordered List의 약자로 순서가 있는 목록, 번호 형식으로 순서를 매겨 목록을 만드는 형식입니다.

<dl> 태그 : Dfinition List의 약자로 정의의 목록을 만드는 형식, 어떤 용어의 정의를 나열하는 형식입니다.

<li> 태그 : List Item의 약자로 ul 태그와 ol 태그의 내부에서 사용되는 태그 , 목록의 내용이 되는 실질적인 태<>그이며 들여쓰기 및 줄바꿈 기능이 있고 type 속성으로 다양한 기호를 사용할 수 있다.

<ul> 태그

<ul>속성 : 글머리 기호를 붙혀서 목록을 만드는 형식

ul 태그의 type 속성 : 전체 항목에 대한 type을 설정합니다.

disc : ● circle : ○ square : ■

<li>속성

li 태그의 type 속성 : 해당 항목에 대한 type을 설정합니다.

disc : ● circle : ○ square : ■

예제)

<html>
	<head>
		<meta charset="utf-8">
		<title>First create html document</title>
	</head>

	<body>

	<body>
		<li>ul 태그</li>

			<ul>

				<li type="square">글머리 기호를 붙혀서 목록을 만드는 형식</li>
				
			</ul>
	</body>

</html>

<ol> 태그

<ol>속성 : 순서가 있는 목록을 만드는 형식

ol 태그의 type 속성 : 전체 항목에 대한 type을 설정합니다.

1 : 숫자 A : 아파벳 대문자 a : 알파벳 소문자 i : 로마숫자 i ii iii ㅣ : I II III

<li>속성

li 태그의 type 속성 : 해당 항목에 대한 type을 설정합니다.

1 : 숫자 A : 아파벳 대문자 a : 알파벳 소문자 i : 로마숫자 i ii iii ㅣ : I II III

예제)

<html>
	<head>
		<meta charset="utf-8">
		<title>First create html document</title>
	</head>

	<body>

	<body>
		<li>ul 태그</li>

			<ol type="A">

				<li >글머리 기호를 붙혀서 목록을 만드는 형식</li>
				<li >글머리 기호를 붙혀서 목록을 만드는 형식</li>
				<li >글머리 기호를 붙혀서 목록을 만드는 형식</li>
				<li >글머리 기호를 붙혀서 목록을 만드는 형식</li>
				
			</ol>

			<ol type="1">

				<li >글머리 기호를 붙혀서 목록을 만드는 형식</li>
				<li >글머리 기호를 붙혀서 목록을 만드는 형식</li>
				<li >글머리 기호를 붙혀서 목록을 만드는 형식</li>
				<li >글머리 기호를 붙혀서 목록을 만드는 형식</li>
				
			</ol>

	</body>

</html>

<dl> 태그

<dl>속성 : 용어에 대한 정의 목록을 만드는 형식

dt : definintion term 의 약자로 용어의 제목을 나타내는 태그이다. 줄바꿈 기능이 있다.

dd : definintion description의 약자로 용어에 대한 설명을 나타내는 태그이다. 줄바꿈 기능이 있다.

예제)

<html>
	<head>
		<meta charset="utf-8">
		<title>First create html document</title>
	</head>

	<body>

	<body>

		<dl>

			<dt>HTML 자주 사용하는 태그</dt>
			<dd>dl 태그<br>
			용어의 대한 정의 목록을 만드는 형식<br>
			dt태그는 줄바꿈 기능이 있다.</dd>
			
		</dl>

	</body>

</html>

저작자표시

'웹언어 > HTML' 카테고리의 다른 글

HTML - <div>, <span> 태그 (0)	2017.03.05
HTML - <br>태그, <p>태그 (0)	2017.03.05
HTML - 문법과 주의사항 (0)	2017.03.05
HTML - 기본 구조의 HTML 문서 만들기 (0)	2017.03.05
HTML이란? (0)	2016.12.28