[HTML] <li> 태그 {<ul>, <ol>, 목록(list) 만들기}

HTML은 웹 사이트에 표시되는 뼈대이다.

깔끔한 화면의 정돈을 위해선 <li>는 매우 중요하다.

먼저 이 목록 태그들은 모두 '블록' 요소이다.

할당된 범위가 있어 자동으로 개행이 된 것처럼 화면에 보인다.

HTML 블록과 인라인의 개념 (특징, 주의할 점)

<ol> 태그는 숫자를 자동으로 내부 li리스트에 부여해준다.

다음으로 <ul> 태그는 숫자를 없애고 기본 속성의 아이콘이 앞에 붙는다.

---

<li>는

단독으로 쓸 수 없어 <ol> 혹은 <ul> 내부에 들어간다.

바로 확인해보자.

    <h1>ol tag</h1>
    <ol>
        <li>Facebook</li>
        <li>Tweeter</li>
    </ol>
    <h1>ul tag</h1>
    <ul>
        <li>메일</li>
        <li>카페</li>
    </ul>

---

결과

---

자동으로 부여된 <ol> 내부 <li> 태그의 번호도

<ul> 내부의 아이콘도 확인할 수 있다.

 

ul과 li는 나중에 CSS 작업을 통해 이런 느낌으로 꾸며진다. (네이버 메인화면 메뉴)

CSS란?

이해하기 쉬운 CSS 설명 (Cascading Style Sheet 기초 지식)