본문 바로가기

HTML_CSS/HTML

리스트를 표현하는 <li> 태그

<li> 태그

<li> 태그는 웹 페이지에서 리스트를 표현하는 태그이다.

웹 페이지에서 리스트의 사용 용도는 어떠한 정보를 나열해서 한 눈에 알아보기 편하게 하거나, 정보의 순서를 나열하기 위함이다.

ex) 웹 사이트를 제작하는데 기본적으로 배워야 할 것

  • HTML
  • CSS
  • JavaScript

<li> 태그 사용법

list.html
<body>
    <li>리스트1</li>
    <li>리스트2</li>
    <ul>
      <li>리스트1</li>
      <li>리스트2</li>
    </ul>
    <ul>
      <li>리스트1</li>
      <li>리스트2</li>
        <ul>
      	    <li>리스트2-1</li>
            <li>리스트2-2</li>
        </ul>
    </ul>
    <ol>
        <li>리스트1</li>
        <li>리스트2</li>
    </ol>
</body>

(실행결과)


<li>
</li>

<li> 태그는 원하는 내용을 리스트로 만들어주는 역할을 한다. 리스트를 나타내는 기본 값으로는 흑색 원을 사용한다.

<ul>
</ul>

<ul> 태그는 <li> 태그와 함께 쓰이며 관련이 있는 리스트들 끼리 묶어주는 역할을 하거나, 위의 예제 코드처럼 리스트의 하위 리스트를 만드는 역할을 한다. 그리고 <ul> 태그 내부의 리스트들을 순서없이 모양으로 나타낸다.

<ol>
</ol>

<ol> 태그는 <ul> 태그와 거의 비슷한 역할을 한다. 그러나, <ol> 태그는  내부에 있는 <li> 태그들에 번호를 매겨서 순서 정한다.  

'HTML_CSS > HTML' 카테고리의 다른 글

줄바꿈 기능이 있는 <br> 태그  (0) 2021.02.28
단락을 나누는 <p> 태그  (0) 2021.02.28
이미지를 삽입하는 <img> 태그  (0) 2021.02.27
HTML의 뜻과 구조  (2) 2021.02.21