2024. 12. 13. 11:19ㆍFullStack Steps/HTML Practicing
이번 시간에는 HTML에서 목록을 표시하는 방법을 알아보려고 한다.
먼저 목록이란 연관있는 항목(item)들을 나열하는것을 의미한다.
우리가 알아볼 HTML은 '순서있는 목록'과 '순서없는 목록'으로 구분한다.
순서 있는 목록이란 뭘까?
HTML 코드를 통해 살펴보도록 하자!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<hr>
Ordered List(순서가 있는 목록) <!-- 순서가 있는 목록은 Ordered List 라고 한다 -->
<hr>
<ol> <!-- ol 태그는 Ordered List의 약자다 -->
<li>하나</li> <!-- li 태그는 list의 약자다 -->
<li>둘</li>
<li>셋</li>
</ol>
</body>
</html>하나 둘 셋 이라고 적은 부분이 굉장히 하찮아 보이긴 하지만 가장 대표적인 순서가 있는 목록이다
출력을 한 번 해보자
우리가 1. 2. 3. 을 적어주지 않았지만 자동적으로 숫자를 기입하여 정렬해 준 모습을 볼 수 있다.
이번에는 순서가 없는 목록도 같이 출력해보자
간단한 소스를 더 추가해보겠다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<hr>
Ordered List(순서가 있는 목록) <!-- 순서가 있는 목록은 Ordered List 라고 한다 -->
<hr>
<ol> <!-- ol 태그는 Ordered List의 약자다 -->
<li>하나</li> <!-- li 태그는 list의 약자다 -->
<li>둘</li>
<li>셋</li>
</ol>
<hr>
Unordered List(순서없는 목록) <!-- 순서가 없는 목록은 Ordered List 라고 한다 -->
<hr>
<ul> <!-- ul은 Unordered List의 약자다 -->
<li>사과</li>
<li>참외</li>
<li>수박</li>
</ul>
</body>
</html>사과 참외 수박은 과일이라는 공통점을 가지고 있지만 순서를 가지고 있다고 볼 수 없다.
출력을 해서 비교해보자!
이렇게 숫자가 아닌 기호를 통해서 차례대로 나타나는 것을 알 수 있다.
눈치빠른 사람들은 알아차렸겠지만 List는 블록 요소다!!
자 마지막으로 Dictionary List(사전 목록)에 대해 설명하고 이 포스팅을 마치도록 하겠다.
일반적으로 사전은 목차가 있고 그 목차에 따라서 여러 설명들이 붙어 있다. 이 모양새를 따와서 Dictionary List란 이름을 붙인거 같다.
말로는 어려우니 코드로 직접 눈으로 확인해보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<hr>
Ordered List(순서가 있는 목록) <!-- 순서가 있는 목록은 Ordered List 라고 한다 -->
<hr>
<ol> <!-- ol 태그는 Ordered List의 약자다 -->
<li>하나</li> <!-- li 태그는 list의 약자다 -->
<li>둘</li>
<li>셋</li>
</ol>
<hr>
Unordered List(순서없는 목록) <!-- 순서가 없는 목록은 Ordered List 라고 한다 -->
<hr>
<ul> <!-- ul은 Unordered List의 약자다 -->
<li>사과</li>
<li>참외</li>
<li>수박</li>
</ul>
<hr>
Dictionary List(사전목록)
<hr>
<dl> <!-- dl 태그는 Dictionary List의 약자다 -->
<dt>Html이란?</dt> <!-- dt 태그는 Dictionary Title 의 약자다 -->
<!-- dd 태그는 Dictionary Data의 약자다 -->
<dd>1.Hyper Text Markup Language의 약자입니다</dd>
<dd>2.Browser에서 해석되는 언어입니다</dd>
<dt>CSS란?</dt>
<dd>1.Cacading Style Sheet의 약자입니다</dd>
<dd>2.Html의 디자인을 담당하는 언어입니다</dd>
<dt>Javascript란?</dt>
<dd>1.Browser를 제어하는 언어입니다</dd>
<dd>2.각각의 Element의 Event등을 담당합니다</dd>
<dd>3.현재 창닫기</dd>
</dl>
</body>
</html>
dt와 dl 태그를 통해 자동으로 들여쓰기가 된 것을 확인할 수 있다.
직접 숫자를 써주긴 했지만 나는 ol 태그를 통해 숫자를 쓰고 싶다고 하면 충분히 쓸 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<hr>
Ordered List(순서가 있는 목록) <!-- 순서가 있는 목록은 Ordered List 라고 한다 -->
<hr>
<ol> <!-- ol 태그는 Ordered List의 약자다 -->
<li>하나</li> <!-- li 태그는 list의 약자다 -->
<li>둘</li>
<li>셋</li>
</ol>
<hr>
Unordered List(순서없는 목록) <!-- 순서가 없는 목록은 Ordered List 라고 한다 -->
<hr>
<ul> <!-- ul은 Unordered List의 약자다 -->
<li>사과</li>
<li>참외</li>
<li>수박</li>
</ul>
<hr>
Dictionary List(사전목록)
<hr>
<dl> <!-- dl 태그는 Dictionary List의 약자다 -->
<dt>Html이란?</dt> <!-- dt 태그는 Dictionary Title 의 약자다 -->
<!-- dd 태그는 Dictionary Data의 약자다 -->
<dd>
<ol> <!-- ol 태그를 사용 하여 li 태그를 사용 -->
<li>Hyper Text Markup Language의 약자입니다</li>
<li>Browser에서 해석되는 언어입니다</li>
</ol>
</dd>
<dt>CSS란?</dt>
<dd>1.Cacading Style Sheet의 약자입니다</dd>
<dd>2.Html의 디자인을 담당하는 언어입니다</dd>
<dt>Javascript란?</dt>
<dd>1.Browser를 제어하는 언어입니다</dd>
<dd>2.각각의 Element의 Event등을 담당합니다</dd>
<dd>3.현재 창닫기</dd>
</dl>
</body>
</html>위는 가장 위의 dd 태그에 ol태그와 li 태그를 사용하였다. 결과는 어떻게될까?
우리가 숫자를 쓰지 않아도 저절로 생겼지만 ol 태그가 블록 요소기 때문에 ol 태그의 수 만큼 빈 줄이 2 개 생긴 것을 알 수 있다.
ol 태그를 지워보면 어떻게 될까
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<hr>
Ordered List(순서가 있는 목록) <!-- 순서가 있는 목록은 Ordered List 라고 한다 -->
<hr>
<ol> <!-- ol 태그는 Ordered List의 약자다 -->
<li>하나</li> <!-- li 태그는 list의 약자다 -->
<li>둘</li>
<li>셋</li>
</ol>
<hr>
Unordered List(순서없는 목록) <!-- 순서가 없는 목록은 Ordered List 라고 한다 -->
<hr>
<ul> <!-- ul은 Unordered List의 약자다 -->
<li>사과</li>
<li>참외</li>
<li>수박</li>
</ul>
<hr>
Dictionary List(사전목록)
<hr>
<dl> <!-- dl 태그는 Dictionary List의 약자다 -->
<dt>Html이란?</dt> <!-- dt 태그는 Dictionary Title 의 약자다 -->
<!-- dd 태그는 Dictionary Data의 약자다 -->
<dd>
<li>Hyper Text Markup Language의 약자입니다</li>
<li>Browser에서 해석되는 언어입니다</li>
</dd>
<dt>CSS란?</dt>
<dd>1.Cacading Style Sheet의 약자입니다</dd>
<dd>2.Html의 디자인을 담당하는 언어입니다</dd>
<dt>Javascript란?</dt>
<dd>1.Browser를 제어하는 언어입니다</dd>
<dd>2.각각의 Element의 Event등을 담당합니다</dd>
<dd>3.현재 창닫기</dd>
</dl>
</body>
</html>
빈 줄은 줄었지만 ul 태그의 특징인 기호를 통해 정렬된 모습을 확인할 수 있다.
그렇다 li 태그의 기본형은 ul 태그이다.
자 오늘 이렇게 세 가지 리스트 태그에 대해 알아보았고 다음 시간에는 HTML에 이미지를 삽입할 수 있는
img 태그에 대해 알아보도록 하겠다.
'FullStack Steps > HTML Practicing' 카테고리의 다른 글
| HTML의 컨테이너 태그와 전역 속성 (0) | 2024.12.13 |
|---|---|
| HTML의 링크 태그 (0) | 2024.12.13 |
| HTML에서 이미지와 동영상 그려보기 (1) | 2024.12.13 |
| HTML의 텍스트 표시 방법과 태그의 구분(Block VS Inline) (0) | 2024.12.12 |
| HTML에서 인사를 해보자! (1) | 2024.12.12 |