59doit

HTML 기본요소 (6) 리스트 본문

HTML & CSS

HTML 기본요소 (6) 리스트

yul_S2 2023. 2. 9. 23:36
반응형

list

리스트(list)란 여러 요소들을 일렬로 나열한 목록이나 명단을 의미한다.
HTML에서는 여러 요소들을 일렬로 나열한 목록이나 명단을 표현 할 수 있는 태그를 제공하고 있다.

  1. 순서가 있는 목록(ordered list)
  2. 순서가 없는 목록(unordered list)
  3. 정의 목록(definition list)

 

순서가 있는 목록(ordered list)

순서가 있는 목록는 <ol>태그로 작성하고, 여기에 포함되는 각각의 리스트 요소는 <li>태그로 작성한다.

각각의 목록 요소 앞에는 기본 마커(marker)로 아라비아 숫자가 표시된다.

 

<html>

<head>
<title>리스트</title>
</head>

<body>
  <h1>순서가 있는 목록</h1>
  <ol>
    <li>HTML</li>
    <li>Java</li>
    <li>C++</li>
  </ol>
</body>

</html>

▲결과

 

 

 

 

CSS의 list-style-type 속성을 사용하면 리스트 요소 앞에 위치하는 마커(marker)를 다른 모양으로 변경할 수 있다.

  • decimal : 숫자 (기본설정)
  • upper-alpha : 영문 대문자
  • lower-alpha : 영문 소문자
  • upper-roman : 로마 숫자 대문자
  • lower-roman : 로마 숫자 소문자
<html>

<head>
<title>리스트</title>
</head>

<body>
  <h1>순서가 있는 목록</h1>
<p>decimal : 숫자 (기본설정)</p>
<ol>
  <li>HTML</li>
  <li>Java</li>
  <li>C++</li>
</ol>
  
<p>upper-alpha : 영문 대문자</p>
<ol style="list-style-type: upper-alpha">
  <li>HTML</li>
  <li>Java</li>
  <li>C++</li>
</ol>
  
<p>lower-alpha : 영문 소문자</p>
<ol style="list-style-type: lower-alpha">
  <li>HTML</li>
  <li>Java</li>
  <li>C++</li>
</ol>
  
<p>upper-roman : 로마 숫자 대문자</p>
<ol style="list-style-type: upper-roman">
  <li>HTML</li>
  <li>Java</li>
  <li>C++</li>
</ol>
  
<p>lower-roman : 로마 숫자 소문자</p>
<ol style="list-style-type: lower-roman">
  <li>HTML</li>
  <li>Java</li>
  <li>C++</li>
</ol>
</body>

</html>

▲결과

 

 

 

 

순서가 없는 목록(unordered list)

순서가 없는 목록은 <ul> 태그로 작성하고, 여기에 포함되는 각각의 목록 요소는 <li>태그로 작성한다.

각각의 목록 요소 앞에는 기본 마커(marker)로 검정색의 작은 원(bullet)이 표시된다.

 

<html>

<head>
<title>리스트</title>
</head>

<body>
  <h1>순서가 없는 목록</h1>
  <ul>
    <li>HTML</li>
    <li>Java</li>
    <li>C++</li>
  </ul>
</body>

</html>

▲결과

 

 

 

 

CSS의 list-style-type 속성을 사용하면 리스트 요소 앞에 위치하는 마커(marker)를 다른 모양으로 변경할 수 있다.

  • disc : 검정색 작은 원형 모양 (기본설정)
  • circle : 흰색 작은 원형 모양
  • square : 사각형 모양
<html>

<head>
<title>리스트</title>
</head>

<body>
  <h1>순서가 없는 목록</h1>
  <p>disc : 검정색 작은 원형 모양(기본설정)</p>
  <ul>
    <li>HTML</li>
    <li>Java</li>
    <li>C++</li>
  </ul>
  
  <p>circle : 흰색 작은 원형 모양</p>
  <ul style="list-style-type: circle">
    <li>HTML</li>
    <li>Java</li>
    <li>C++</li>
  </ul>
  
  <p>square : 사각형모양</p>
  <ul style="list-style-type: square">
    <li>HTML</li>
    <li>Java</li>
    <li>C++</li>
  </ul>
</body>

</html>

▲결과

 

 

 

정의 목록(definition list)

정의 목록은 용어와 그에 대한 정의를 모아놓은 목록으로 <dl>태그로 작성한다.

<dt>태그에는 용어가 들어가고, <dd>태그에는 해당 용어에 대한 정의가 들어간다.

 

<html>

<head>
<title>리스트</title>
</head>

<body>
  <h1>정의 목록</h1>
  <dl>
    <dt>HTML</dt>
    <dd>Hyper Text Markup Language</dd>
    <dt>XML</dt>
    <dd>eXtensible Markup Language</dd>
  </dl>
</body>

</html> 

▲결과

반응형

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

HTML 입력양식 (1) 입력폼  (3) 2023.03.06
HTML 기본요소 (7) 테이블  (0) 2023.03.05
HTML 기본요소 (5) 이미지  (7) 2023.02.09
HTML 기본요소 (4) 링크  (2) 2023.01.25
HTML 기본요소 (3) 색 & 배경  (3) 2023.01.24
'HTML & CSS' Related Articles more
Comments