[HTML] 목록을 만드는 태그

HTML

[HTML] 목록을 만드는 태그

Arr_ 2021. 10. 26. 21:48

<ul></ul>,<li></li> : 순서없는 목록 만들기

  <body>
    <ul>
      <!--부모태그-->
      <!--ul : unordered list의 약자, 순서가 없는 목록 나타내기
            li : list item, 항목 나타내기(자동으로 디자인이 들어감)
          메뉴만들때 주로 사용함-->
      <!--자식태그-->
      <li>에스프레소</li>
      <li>아메리카노</li>
      <li>카페라떼</li>
    </ul>
    <!--ul>li*3 : 자동완성 시킬 수 있음, 3위치에 개수 설정-->
  </body>

** 브라우저 예시

- <ul>태그는 순서없는 목록을 만들때 <ul>태그를 넣고, 그 안에 <li>태그를 사용해 각 항목을 표시

- 순서없는 목록의 경우 각 항목앞에 작은 원형이나 사각형같은 불릿이 붙음

<ol></ol>, <li></li> : 순서있는 목록 만들기

  <body>
    <!--ol : ordered list의 약자, 순서가 있는 목록 나타내기
            li : list item, 항목 나타내기(자동으로 디자인이 들어감)-->
    <ol>
      <li>에스프레소</li>
      <li>아메리카노</li>
      <li>카페라떼</li>
    </ol>
  </body>

**브라우저 예시

<ol type = ""></ol>

- <ol> 태그에 타입이 있어서, 각 항목 앞에 오는 것을 1,2,3...아닌 다른 것으로 변경할 수 있음

- <ol type="1"></ol>이 기본값

 <body>
    <ol type="1">
      <li>1번</li>
      <li>2번</li>
      <li>3번</li>
    </ol>
    <ol type="A">
      <li>A번</li>
      <li>B번</li>
      <li>C번</li>
    </ol>
    <ol type="a">
      <li>a번</li>
      <li>b번</li>
      <li>c번</li>
    </ol>
    <ol type="I">
      <li>I번</li>
      <li>II번</li>
      <li>III번</li>
    </ol>
    <ol type="i">
      <li>i번</li>
      <li>ii번</li>
      <li>iii번</li>
    </ol>
  </body>

** 브라우저 예시

<li value = ""></li>

- value를 이용해 시작 번호를 지정할 수 있음

        <ol>
          <!--value를 이용해서 시작하는 숫자를 지정할 수 있음, 7입력시 7번부터 시작됨-->
          <li value="7">1차 : 5.20</li>
          <li>2차 : 6.20</li>
        </ol>

**브라우저 예시

'HTML' 카테고리의 다른 글

[HTML] 텍스트 관련 태그 (0)	2021.10.24
[HTML] 기본 설명 (0)	2021.10.24

현재글[HTML] 목록을 만드는 태그

코시국에 Coding Life📑

Today :
Yesterday :

일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

코시국에 Coding Life📑

[HTML] 목록을 만드는 태그

'HTML' 카테고리의 다른 글

'HTML'의 다른글

티스토리툴바

[HTML] 목록을 만드는 태그

'HTML' 카테고리의 다른 글

'HTML'의 다른글

관련글

티스토리툴바