728x90
1. <ul> 태그
ul(unordered list) 태그는 순서가 없는 목록을 생성할 때 사용한다. 이때, 목록 내용들은 <li> 태그와 함께 사용한다.
<ul> 태그를 사용하여 실행결과 값을 확인해보면 글머리 기호가 붙는 걸 확인할 수가 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>ul,ol,li,dl태그</title>
</head>
<body>
<h1>FrontEnd</h1>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
</body>
</html>
2. <ol> 태그
ol(ordered list) 태그는 순서형 목록을 생성할 때 사용한다. <ul> 태그와 마찬가지로 <li> 태그를 같이 사용하여
코드를 작성하도록 한다. <ol> 태그를 사용하여 출력한 값을 확인해보면 순서가 붙는 것을 확인할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>ul,ol,li,dl태그</title>
</head>
<body>
<h1>FrontEnd</h1>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ol>
</body>
</html>
3.dl태그
dl(description list) 태그는 정의형 목록을 만들 때 사용한다.
정의형 목록은 용어와 설명을 나열한 형태의 목록이라고 보면 된다. <dl> 태그는 <ol>, <ul> 태그와는 다르게 <li> 태그 대신
dt(description term) 태그, dd(description details) 태그로 설명한다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>ul,ol,li,dl태그</title>
</head>
<body>
<h1>FrontEnd</h1>
<dl>
<dt>HTML</dt>
<dd>HTML은 Hyper Text Markup Language의 약자이다.</dd>
<dt>CSS</dt>
<dd>CSS는 Cascading Style Sheets의 약자이다.</dd>
<dt>JS</dt>
<dd>JS는 javascript의 약자이다.</dd>
</dl>
</body>
</html>
html의 목록형 태그로 다양한 웹 사이트를 구현할 수 있다. 몇 가지 예를 들어 사용해 보자
<!DOCTYPE html>
<html lang="en">
<head>
<title>ul,ol,li,dl태그</title>
</head>
<body>
<ol>
<li>과일이 아닌 것은?</li>
<ol>
<li>바나나</li>
<li>사과</li>
<li>수박</li>
<li>오렌지</li>
<li>배추</li>
<br />
</ol>
<li>1+1 의 값은?</li>
<ol>
<li>2</li>
<li>귀요미</li>
<li>3</li>
<li>5</li>
<br />
</ol>
<li>목록형 태그의 종류가 아닌것은?</li>
<ul>
<li>ul 태그</li>
<li>ol 태그</li>
<li>dl 태그</li>
<li>html 태그</li>
</ul>
</ol>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>ul,ol,li,dl태그</title>
</head>
<body>
<dl>
<dt>바다에 사는 생물</dt>
<dd>고래</dd>
<dd>새우</dd>
<dd>상어</dd>
<dd>물개</dd>
</dl>
</body>
</html>
728x90
'Front-end Developer > HTML' 카테고리의 다른 글
| 10. [HTML] <form>태그, <input>태그.<label>태그 (0) | 2022.10.25 |
|---|---|
| 8. [HTML] <a> 태그, <img> 태그를 사용하여 링크와 이미지 넣는방법 (0) | 2022.10.24 |
| 6.HTML의 부모, 자식, 형제 관계 / 줄 바꿈과 들여쓰기 (0) | 2022.10.23 |
| 4.HTML 태그를 사용하여 텍스트 만들기 <h>,<p>,<br>,<span> (0) | 2022.10.22 |
| 5. Html의 <div> 태그 (0) | 2022.10.22 |
