html 강좌 6 목록 관련 태그 정리
안녕하세요 엘빈입니다.
저번 포스팅에서는 텍스트 관련 태그들에 대해서 알아보았는데요.
이번 포스팅에서는 메뉴를 만드는데에 중요한 목록 관련 태그들에 대해서 알아보겠습니다.
1. 순서 없는 목록을 만들때 사용하는 <ul>, <li> 태그
순서가 필요하지 않은 목록을 만들때에는 ul,li 태그를 세트로 사용합니다. 다음과 같은 코드를 작성해봅시다.
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>첫 홈페이지 만들기 프로젝트</title>
</head>
<ul>
<li>이거는 목록 리스트입니다</li>
<li>이렇게 작성하면</li>
<li>순서없는 목록으로 표시됩니다.</li>
</ul>
</body>
</html>
ul 태그 밑에 li 태그를 작성하며 실제 내용은 li 태그안에 작성합니다.
해당 코드를 브라우저로 열면 다음과 같이 화면이 표시됩니다.
화면에 표시되는 것과 같이 점 표시로 목록을 표시하며 코드 적은 순서대로 화면에 표시됩니다ㅣ.
실제 html 개발때 자주 사용되는 것은 순서가 없는 목록이 많습니다.
따라서 자주 사용하는 태그이기에 기억하시면 좋습니다.
2. 순서가 있는 목록을 만들때 사용되는 <ol>,<li>
항목을 나열하되 순서가 필요한 목록을 만들고자 하면 ol,li 태그를 사용합니다.
다음과 같이 소스코드를 작성해봅시다.
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>첫 홈페이지 만들기 프로젝트</title>
</head>
<ol>
<li>순서가 있는 태그입니다</li>
<li>순서대로 표시가 되는데요</li>
<li>참 편리하죠?</li>
</ol>>
</body>
</html>
ol 태그도 ul 태그와 같이 아래에 li 태그를 작성합니다.
li 태그 안에 내용을 작성하면 다음과 같이 표시됩니다.
ol 태그는 ul 태그와 다르게 속성을 지정할 수 있습니다.
지정할 수 있는 속성은 3가지로 다음과 같습니다.
(1) type 속성
type 속성은 항목 앞의 글씨를 지정할 수 있는 속성입니다. 총 5가지의 타입을 지정할 수 있습니다.
| 속성 값 | 설명 |
| 1 | 숫자 |
| A | 영문 대문자 |
| a | 영문 소문자 |
| i | 로마 소문자 |
| I | 로마 대문자 |
다음과 같이 코드를 작성해봅시다.
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>첫 홈페이지 만들기 프로젝트</title>
</head>
<ol>
<li>순서가 있는 태그입니다</li>
<li>순서대로 표시가 되는데요</li>
<li>참 편리하죠?</li>
</ol>
<ol type="a">
<li>순서가 있는 태그입니다</li>
<li>순서대로 표시가 되는데요</li>
<li>참 편리하죠?</li>
</ol>
<ol type="A">
<li>순서가 있는 태그입니다</li>
<li>순서대로 표시가 되는데요</li>
<li>참 편리하죠?</li>
</ol>
<ol type="i">
<li>순서가 있는 태그입니다</li>
<li>순서대로 표시가 되는데요</li>
<li>참 편리하죠?</li>
</ol>
<ol type="I">
<li>순서가 있는 태그입니다</li>
<li>순서대로 표시가 되는데요</li>
<li>참 편리하죠?</li>
</ol>
</body>
</html>다음과 같이 ol 꺾은 괄호 안에 type="(지정하려는 속성)" 이런 형식으로 작성을 합니다.
코드는 다음과 같이 화면에 표시됩니다. type 속성값에 따라서 항목 글씨가 변하는 것을 볼 수 있습니다.
(2) start 속성
start 속성을 이용해 순서 목록의 시작 번호를 바꿀 수 있습니다.
다음과 같은 코드를 작성해 봅시다.
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>첫 홈페이지 만들기 프로젝트</title>
</head>
<ol start="4">
<li>순서가 있는 태그입니다</li>
<li>순서대로 표시가 되는데요</li>
<li>참 편리하죠?</li>
</ol>
</body>
</html>이 코드에서 ol 태그에 start 속성값을 4로 주었습니다. 화면에는 어떻게 표시될까요?
목록의 시작 숫자가 4부터 시작되는 것을 알 수 있습니다.
(3) reversed 속성
reversed 속성은 항목을 역순으로 표시하는 태그입니다. 다음과 같이 코드를 작성해봅시다.
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>첫 홈페이지 만들기 프로젝트</title>
</head>
<ol reversed>
<li>순서가 있는 태그입니다</li>
<li>순서대로 표시가 되는데요</li>
<li>참 편리하죠?</li>
</ol>
</body>
</html>
reversed 속성을 사용함으로서 기존의 시작 숫자 1부터가 아닌 끝 숫자 번호인 3부터 시작하는 것을 알 수 있습니다.
3. 설명 목록을 만들기 위한 <dl>,<dt>,<dd> 태그
제목과 설명을 한 세트로 구성하기 위한 설명 목록 태그입니다.
보통 단어/정의, 질문/답 목록에서 많이 사용됩니다.
dl 태그는 목록을 만들고 dt 태그는 제목을 dd 태그는 설명을 표시합니다.
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>첫 홈페이지 만들기 프로젝트</title>
</head>
<dl>
<dt>이거는 제목입니다</dt>
<dd>제목에 대한 내용은 여기서 표시됩니다.</dd>
<dd>보통 제목은 하나 내용은 여러개로 작성합니다.</dd>
<dd>엘빈 올림</dd>
</dl>
</body>
</html>다음과 같이 코드를 작성하면 화면에는 제목과 설명글을 나뉘어 이렇게 표시됩니다.
제목 부분을 제외한 내용 부분이 들여쓰기 되어 표시되는 것을 알 수 있습니다.
지금까지 목록과 관련된 태그들을 알아보았는데요.
메뉴를 만드는데에 정말 많이 사용되니 ul,li 태그 만큼은 꼭 기억하시기 바랍니다!
'개발 > HTML_CSS' 카테고리의 다른 글
| Html 강좌 8 이미지 관련 태그 정리 (0) | 2020.01.12 |
|---|---|
| html 강좌 7 표(테이블) 관련 태그 정리, 간단하게 만들자 (0) | 2020.01.11 |
| html 강좌 5 텍스트 관련 태그 정리 (0) | 2020.01.09 |
| 홈페이지 만들기 html 강좌 4 - 기본 문서 구조 (0) | 2020.01.08 |
| 홈페이지 만들기 HTML 강좌 2 - 설정 및 기본 구조 (0) | 2019.03.28 |
