Appia의 IT세상

[초보HTML배우기 08]HTML - HTML에 리스트(List) 나열하기 본문

Programming/HTML&CSS

[초보HTML배우기 08]HTML - HTML에 리스트(List) 나열하기

Appia 2020. 7. 23. 07:33
반응형

[초보HTML배우기 08]HTML - HTML에 리스트(List) 나열하기 

 

앞선 포스팅에서는 HTML에 표를 입력하는 부분에 대해서 살펴봤습니다. 앞선 포스팅에서 이야기 드린 바와 같이 HTML 자체가 문서를 작성하는 것과 그리 크게 차이가 없습니다. 그래서 이번에는 항목에 대한 리스트(List)을 열거하는 방법에 대해서 살펴보겠습니다.

 

먼저, HTML상에서 총 3가지 형태로 리스트를 제공하고 있습니다.

  • 순서가 있는 리스트 - <ol>

순서가 있는 리스트의 경우 각 항목 앞에 번호를 붙여 줍니다.

  • 순서가 없는 리스트 - <ul>

순서가 없는 리스트의 경우 도형등을 통해서 앞에 명시를 해줍니다.

  • 사용자 정의 리스트 - <dl>

사용자 정의 리스트의 경우 각 항목들을 사용자가 지정한 대로 사용이 가능합니다.

 

그럼 각 항목들에 대해서 살펴보겠습니다. 그럼 위의 부분의 예시를 한번 살펴보겠습니다. 

 

순서가 있는 리스트 - <ol>

순서가 있는 리스트의 경우 <ol> </ol> 태그 안에 각 리스트 항목들을 나열하면 됩니다. 각 항목에 대해서는 <li> </li>로 작성하시면 됩니다.

<!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>
    <ol>
        <li>Appia</li>
        <li>Appia1</li>
        <li>Appia2</li>
        <li>Appia3</li>
     </ol>
</body>
</html>
cs

위의 실행결과는 다음과 같이 나타납니다. 

순서있는 리스트 표현

<ol>태그안에 타입을 입력해야 하고, 관련해서 각 항목들을 다음과 같은 형태로 됩니다. 

<ol type = "I">은 경우는 다음과 같은 형태로 명시가 됩니다. 

 

<ol type="I">인 경우 순서있는 리스트 출력

<ol type = "i">은 경우는 다음과 같은 형태로 명시가 됩니다. . 

<ol type="i">인 경우 순서있는 리스트 출력

<ol type = "A">은 경우는 다음과 같은 형태로 명시가 됩니다. 

<ol type="A">인 경우 순서있는 리스트 출력

<ol type = "a">은 경우는 다음과 같은 형태로 명시가 됩니다. 

<ol type="a">인 경우 순서있는 리스트 출력

추가로 <ol start = "2"> 일경우 숫자일때는 2부터 알파벳일때는 b부터 시작을 합니다. 

 

순서가 없는 리스트 - <ul>

숫자가 없는 리스트을 출력할 경우 특정 도형들을 통해서 각 리스트 항목들을 나열 합니다. 지원하는 항목은 다음과 같습니다. 

<ul type = "square">
<ul type = "disc">
<ul type = "circle">

그럼 위의 속성을 바탕으로 다음과 같은 예제를 작성해봤습니다. 

<!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>
    <ul type = "square">
        <li>Appia</li>
        <li>Appia1</li>
        <li>Appia2</li>
        <li>Appia3</li>
     </ul>
     <ul type = "disc">
        <li>Appia</li>
        <li>Appia1</li>
        <li>Appia2</li>
        <li>Appia3</li>
     </ul>
     <ul type = "circle">
        <li>Appia</li>
        <li>Appia1</li>
        <li>Appia2</li>
        <li>Appia3</li>
     </ul>
</body>
</html>
cs

위의 코드를 실행하면 다음과 같은 결과가 나타납니다. 

순서 없는 리스트 출력 

위와 같이 각 항목에 따라서 리스트 항목 앞에 표시되는 아이콘의 모양이 달라집니다. 

 

사용자 정의 리스트<dl>

이번에는 사용자 정의 리스트에 대해서 살펴보겠습니다. 원래는 definition list 라고 하는데 이 부분에 대해서 출력되는 부분등에 대해서 사용자가 직접 정의 할 수 있는 부분이라, 쉽게 사용자 정의 리스트로 명명하였습니다. 흔히 파이썬에 딕셔너리와 비슷한 형태입니다. 키 값에 따른 Value가 존재하는 형태라고 보시면 조금이나마 이해가 편하실 것입니다. 자세한 설명은 코드 부분에서 같이 살펴보겠습니다. 

 

기본 태크는 다음과 같습니다. 

<dl> 리스트 시작 의미 

<dt> 키의 정의 설정 

<dd> 키의 값 설정 

</dl> 리스트 종료 

 

그럼 코드에서 살펴보겠습니다. 

<!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>
    <dl>
        <dt>Appia</dt>
        <dd>Python Lecture</dd>
        <dt>Appia1</dt>
        <dd>HTML/CSS</dd>
 
</body>
</html>
cs

위의 코드를 실행하면 다음과 같은 형태가 나타납니다. 

사용자 정의 리스트 출력 예시 

간단하게 appia/appia1은 키 이고, 이 부분에 대한 값은 <dd> 태그에 입력된 부분이라고 생각하시면 편할 것입니다. 

 

오늘은 [초보HTML배우기 08]HTML - HTML에 리스트(List) 나열하기라는 주제로 리스트를 나열하는 방법에 대해서 간단히 살펴봤습니다. 다음 링크의 이전 포스팅과 함께 보시면 도움이 될 것이라고 생각합니다. 

[초보HTML배우기 07]HTML - HTML에 표(Table) 입력하기

 

혹시 궁금하시거나 문의 사항이 있으시면 언제든지 댓글 및 방명록에 글 남겨주시길 바랍니다. 

반응형
저작자표시 비영리 변경금지

'Programming > HTML&CSS' 카테고리의 다른 글

[초보HTML배우기 10]HTML - 태그 항목 그룹화 하기(span, div)  (0) 2020.07.27
[초보HTML배우기 09]HTML - HTML에 하이퍼 링크(hyper-link)연결하기  (0) 2020.07.25
[초보HTML배우기 07]HTML - HTML에 표(Table) 입력하기  (0) 2020.07.21
[초보HTML배우기 06]HTML - HTML에 사진/이미지(Images) 삽입하기  (0) 2020.07.19
[초보HTML배우기 05]HTML - HTML에 주석(Comment) 입력하기  (0) 2020.07.17
'Programming/HTML&CSS' Related Articles more
Comments