HTML
  • 태그 - 코딩의 시작, TCP School

    • Home » What Is Li In Html » HTML

  • 태그 - 코딩의 시작, TCP School

    • Maybe your like

    HTML <li> 태그

    정의 및 특징

    <li> 태그는 HTML 리스트(list)에 포함되는 아이템(item)을 정의할 때 사용합니다.

    <li> 요소는 순서가 있는 리스트(ordered list)를 정의하는 <ol> 요소나 순서가 없는 리스트(unordered list)를 정의하는 <ul> 요소, 메뉴 리스트(menu list)를 정의하는 <menu> 요소에서 리스트의 각 아이템을 정의합니다.

    리스트 아이템을 나타내는 기본 마커(marker)는 순서가 없는 리스트나 메뉴 리스트에서는 검정색의 작은 원(bullet) 모양으로 표현되며, 순서가 있는 리스트에서는 아라비아 숫자나 알파벳으로 표현됩니다. 이렇게 리스트 아이템을 표현하는 마커(marker)는 CSS를 사용하면 다른 모양으로 손쉽게 변경할 수 있습니다.

    예제
    <ul> <li>아메리카노</li> <li>카페라떼</li> <li>핫초코</li> </ul> <ol> <li>아메리카노</li> <li>카페라떼</li> <li>핫초코</li> </ol>

    코딩연습 ▶

    지원하는 브라우저 및 버전

    태그명

    chrome

    edge

    ie

    firefox

    safari

    opera
    <li> 지원함 지원함 지원함 1.0 지원함 지원함

    HTML5에서 변경된 사항

    HTML5에서는 <li> 요소의 type 속성을 더 이상 지원하지 않습니다.

    또한, HTML 4.01에서 더 이상 지원되지 않도록 변경되었던 value 속성이 HTML5에서는 다시 지원되도록 변경되었습니다.

    사용할 수 있는 속성

    속성명 속성값 설명

    type

    1

    A

    a

    I

    i

    disc

    square

    circle

    리스트 아이템에 사용될 마커(marker)의 모양을 명시함.

    HTML5에서는 더 이상 지원하지 않으며, CSS를 대신 사용함.

    value

    숫자

    리스트 아이템의 마커(marker)로 사용될 시작 숫자를 명시함.

    단, <li> 요소의 부모 요소가 <ol> 요소인 경우에만 사용할 수 있음.

    CSS 기본값

    li {

    display: list-item;

    }

    DOM 인터페이스

    interface HTMLLIElement : HTMLElement {

    attribute long value;

    };

    연관 페이지

    HTML 리스트 수업 ⇒

    CSS 리스트 수업 ⇒

    연습문제

    • 연습문제1
    • 연습문제2
    • 연습문제3
    • 연습문제4
    • 연습문제5

    Tag » What Is Li In Html