html 고급 문서 만들기 2 - ol, ul, dl 태그로 리스트 만들기
네 안녕하세요, 이번 포스팅에서는 리스트를 만드는 방법에 대하여 알아보도록 하겠습니다.
우리가 웹을 만들 때 장황한 글보다는 중요한 키워드만을 띄워서 표현하는 것이 더 좋을 때가 있습니다.
그럴 경우에 쓰는 것이 리스트인데,
이번 포스팅에서는 이러한 리스트가 어떤 종류들이 있는지 한 번 알아보도록 하겠습니다.
그럼 지금부터 시작하도록 하겠습니다.
1. 리스트 만들기 : ol, ul, dl 태그 사용
보통 우리가 쓰는 리스트는 크게 3가지가 있습니다.
- ol 태그 : 순서가 있는 리스트
- ul 태그 : 순서가 없는 리스트
- dl 태그 : 정의 리스트
그리고 dl 태그를 제외하고, 리스트의 내용을 나타낼 때에는 li 태그를 씁니다.
1 - 1. ol 태그 -순서가 있는 리스트
ol 태그는 순서가 명확히 존재하는 리스트를 작성할 때 사용을 합니다.
제일 대표적인 사레는 무언가를 만드는 순서가 되겠습니다.
ol 태그의 사용법은 아래와 같습니다.
<!--<ol>태그 사용법-->
<ol type="1"|"A"|"a"|"I"|"i"> 또는 <ol start="value">
<!--value = 값(6을 적으면 6번부터 나열함), type 1 : 숫자, A : 대문자 알파벳, a : 소문자 알파벳,
I : 로마 대문자, i : 로마 소문자
<li>아이템</li>-->
</ol>이렇게 규칙이 있는 리스트에는 취향에 따라 문자, 혹은 숫자로 나타낼 수 있고,
리스트의 내용에 대한 것을 기술하는 태그인 li 태그를 이용하여 내용을 적을 수 있으며,
각각의 설명을 아이템이라고 합니다.
여기에서 <li> 태그는 종료 태그가 굳이 없어도 사용이 가능합니다.
그리고 정의 리스트는 전문적인 용어와 설명에 대한 글이 적히기 때문에 다른 태그를 쓰는 걸 볼 수 있습니다.
그럼 간단한 예제 코드들을 통하여 함께 보실까요?
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>라면을 끓이는 순서</title>
</head>
<body>
<h3>라면을 끓이는 순서</h3>
<hr>
<ol type="A">
<li>물을 끓인다.</li>
<li>라면과 스프를 넣는다.</li>
<li>파를 썰어 넣는다.</li>
<li>5분 후 먹는다.</li>
</ol>
</body>
</html>이건 순서가 있는 리스트인 <ol> 태그에 대한 예시이고, 순서를 문자로 표현하기 위해서 타입에 A를 적었습니다.
이렇게 적으면 문자로 순서가 적힙니다.
그러면 결과 화면을 같이 보실까요?
이렇게 순서가 있는 리스트이기 때문에 순서가 적혀있는 걸 볼 수 있습니다.
그래서 굳이 직접 하나하나 쓰지 않고도 <ol> 태그를 쓰면 순서대로 알아서 넘버링을 해서 나열을 해줍니다.
1 - 2. ul 태그 - 순서가 없는 리스트
ul 태그는 순서가 없는 리스트를 사용할 때 사용하는 태그입니다.
이를테면 위에서 보여드린 것과 같이 무언가를 만드는 순서 같은 것이 아니라,
자기가 좋아하는 것이라던가, 그렇게 굳이 순서가 필요없는 것을 쓸 때 씁니다.
보통은 순서가 있는 것 보다는 없는 것을 작성하는 경우가 더 많아서 ul 태그를 더 많이 씁니다.
ul 태그의 사용 방법은 이렇습니다.
<!--<ul>태그 사용법-->
<ul>
<li type="1"|"A"|"a"|"I"|"i">아이템</li> // type은 <ol> 태그에 사용한 방법과 동일함.
</ul>이어서 보여줄 예제는 순서가 없는 리스트에 대한 예제 코드입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>내가 좋아하는 음식</title>
</head>
<body>
<h3>내가 좋아하는 음식</h3>
<hr>
<ul>
<li>감자탕</li>
<li>스파게티</li>
<li>올레국수</li>
</ul>
</body>
</html>이건 순서가 필요가 없는 리스트이기 때문에 순서가 적혀있지는 않습니다.
다만 엄연한 리스트이기 때문에 리스트의 형태만 갖추고 있지요.
그럼 결과화면을 같이 보실까요?
이런 식으로 넘버링이 되어있지 않은 게 보이시죠?
이게 순서가 있는 리스트와 없는 리스트가 가지는 차이점입니다.
1 - 3. dl 태그 - 정의 리스트
장의 리스트는 무언가를 정의할 때 쓰는 리스트입니다.
예를 들면 어떤 용어에 대한 정의와 해설 등을 적을 때 쓰는 태그입니다.
보통 나무위키 같은 백과사전 관련 플랫폼이 이러한 기능을 많이 씁니다.
아래는 dl 태그의 사용법입니다.
<!--<dl>태그 사용법-->
<dl>
<dt>용어</dt>
<dd>설명</dd>
</dl>여기서 주목해야 할 점은 dl 태그는 정의 리스트를 작성하는 태그이기 때문에
용어의 정의를 나타내는 인라인 태그와 해당 용어의 설명을 나타내는 인라인 태그가 분리가 되어있습니다.
그리고 이들도 굳이 블록 태그처럼 끝을 감싸주지 않아도 쓸 수 있습니다.
다음 보여드릴 것은 정의 리스트에 관한 예제 코드입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>정의 리스트</title>
</head>
<body>
<h3>웹 브라우저의 종류</h3>
<hr>
<dl>
<dt><strong>Internet Explorer</strong></dt>
<dd>마이크로소프트에서 만든 브라우저로
현재 국내 시장에서 가장 많이 사용</dd>
<dt><strong>Firefox</strong></dt>
<dd>Mozilla 재단에서 오픈 소스로 만든
것으로 W3C의 웹 표준을 선도</dd>
<dt><strong>Chrome</strong></dt>
<dd>구글에서 만든 것으로 좋은 디버거를
갖추고 있어 디버깅에 많이 사용</dd>
</dl>
</body>
</html>이런 식으로 용어에 대한 정의 칸과 설명 칸으로 나눠서 작성을 할 수 있습니다.
이렇게 썼을 때의 결과 화면은 이렇게 나옵니다.
같이 보실까요?
이렇게 용어에 대한 설명이 들여 쓰기가 되어있는 것을 볼 수 있습니다.
그래서 전문적인 용어에 대하여 기술을 할 때는 부가적인 설명을 좀 더 알아보기 쉽게 하기 위해 사용하곤 합니다.
여기까지 리스트를 작성하는 방법에 대하여 알아보았습니다.
다음 포스팅에서는 테이블을 작성하는 방법에 대하여 알아보도록 하겠습니다.
긴 글 읽어주신 독자분들께 진심으로 감사드립니다~
'html, css, 자바스크립트 > html' 카테고리의 다른 글
| html a 태그로 하이퍼링크(하이퍼텍스트, 하이퍼미디어)와 다운로드 링크 만들기 (0) | 2023.03.02 |
|---|---|
| html 고급 문서 만들기 3 - table 태그로 표 만들기 (0) | 2023.03.01 |
| html 고급 문서 만들기 1 - img 태그로 이미지 삽입하기 (0) | 2023.03.01 |
| html 기본 문서 만들기 10 - 블록 태그와 인라인 태그 이용하기 (0) | 2023.03.01 |
| html 기본 문서 만들기 9 - 텍스트 꾸미기 (0) | 2023.03.01 |
댓글