Tech Stock logo Tech Stock

ol은 OrderedList의 약자 (번호가 매겨진 리스트)
ul은 UnOrderedList의 약자 (번호가 매겨지지 않은 리스트)
li는 List의 약자 (리스트의 구성요소)

먼저 ol 부터 보자

각 항목 요소들을 li로 감싸주고, 그 항목들을 ol로 감싸주면 된다.

<ol>
  <li>첫번째 항목 입니다</li>
  <li>두번째 항목 입니다</li>
  <li>세번째 항목 입니다</li>
</ol>

결과

  1. 첫번째 항목 입니다
  2. 두번째 항목 입니다
  3. 세번째 항목 입니다

그다음 ul을 보자

마찬가지로 항목 요소들을 li로 감싸주고, 그 항목들을 ul로 감싸주면 된다.

<ul>
  <li>첫번째 항목 입니다</li>
  <li>두번째 항목 입니다</li>
  <li>세번째 항목 입니다</li>
</ul>

결과

  • 첫번째 항목 입니다
  • 두번째 항목 입니다
  • 세번째 항목 입니다

항목 안에 또다른 항목들이 있을경우 (nest한다고 한다)
항목안에 ul이나 ol을 쓰면 된다.

ul항목 안에 nest된 ol항목이 있을 경우를 보자

<ul>
    <li>첫번째 항목 입니다
        <ol>
            <li>첫번째 항목의 첫번째 ol항목 입니다</li>
            <li>첫번째 항목의 두번째 ol항목 입니다</li>
        </ol>
    </li>
    <li>두번째 항목 입니다</li>
    <li>세번째 항목 입니다</li>
</ul>

결과

  • 첫번째 항목 입니다
    1. 첫번째 항목의 첫번째 ol항목 입니다
    2. 첫번째 항목의 두번째 ol항목 입니다
  • 두번째 항목 입니다
  • 세번째 항목 입니다

이번에는 ol항목 안에 nest된 ul항목이 있을 경우를 보자

<ol>
    <li>첫번째 항목 입니다
        <ul>
            <li>첫번째 항목의 첫번째 ol항목 입니다</li>
            <li>첫번째 항목의 두번째 ol항목 입니다</li>
        </ul>
    </li>
    <li>두번째 항목 입니다</li>
    <li>세번째 항목 입니다</li>
</ol>

결과

  1. 첫번째 항목 입니다
    • 첫번째 항목의 첫번째 ol항목 입니다
    • 첫번째 항목의 두번째 ol항목 입니다
  2. 두번째 항목 입니다
  3. 세번째 항목 입니다

줄바꿈을 넣고 싶을때

항목들의 li안에 개행태그를 넣는다

<ul>
  <li>첫번째<br>항목 입니다</li>
  <li>두번째<br>항목<br>입니다</li>
  <li>세번째 항목 입니다</li>
</ul>

결과

  • 첫번째
    항목 입니다
  • 두번째
    항목
    입니다
  • 세번째 항목 입니다

항목들 앞의 마크를 없애고 싶을때

<ul style="list-style-type: none">
    <li>첫번째 항목 입니다</li>
    <li>두번째 항목 입니다</li>
    <li>세번째 항목 입니다</li>
</ul>

결과

  • 첫번째 항목 입니다
  • 두번째 항목 입니다
  • 세번째 항목 입니다

html은 내비두고 css에서 스타일 식으로 바꿔주는 방법도 있다.

순수하게 html코드를 쓰고

<ul>
    <li>첫번째 항목 입니다</li>
    <li>두번째 항목 입니다</li>
    <li>세번째 항목 입니다</li>
</ul>

css에서 이렇게 ol선택자를 지정해서 바꿔준다

ol {
  list-style-type: none;
}

항목들 앞의 마크를 ABC나 다른 기호로 바꾸고 싶을때

<ul style="list-style-type: circle">
    <li>첫번째 항목 입니다</li>
    <li>두번째 항목 입니다</li>
    <li>세번째 항목 입니다</li>
</ul>

결과

  • 첫번째 항목 입니다
  • 두번째 항목 입니다
  • 세번째 항목 입니다

좀더 다양한 마크들을 살펴보자

<ul style="list-style-type: disc">
    <li>첫번째 항목 입니다</li>
    <li>두번째 항목 입니다</li>
    <li>세번째 항목 입니다</li>
</ul>

<ul style="list-style-type: circle">
    <li>첫번째 항목 입니다</li>
    <li>두번째 항목 입니다</li>
    <li>세번째 항목 입니다</li>
</ul>

<ul style="list-style-type: square">
    <li>첫번째 항목 입니다</li>
    <li>두번째 항목 입니다</li>
    <li>세번째 항목 입니다</li>
</ul>

<ul style="list-style-type: decimal">
    <li>첫번째 항목 입니다</li>
    <li>두번째 항목 입니다</li>
    <li>세번째 항목 입니다</li>
</ul>

<ul style="list-style-type: decimal-leading-zero">
    <li>첫번째 항목 입니다</li>
    <li>두번째 항목 입니다</li>
    <li>세번째 항목 입니다</li>
</ul>

<ul style="list-style-type: lower-roman">
    <li>첫번째 항목 입니다</li>
    <li>두번째 항목 입니다</li>
    <li>세번째 항목 입니다</li>
</ul>

<ul style="list-style-type: upper-roman">
    <li>첫번째 항목 입니다</li>
    <li>두번째 항목 입니다</li>
    <li>세번째 항목 입니다</li>
</ul>

<ul style="list-style-type: lower-latin">
    <li>첫번째 항목 입니다</li>
    <li>두번째 항목 입니다</li>
    <li>세번째 항목 입니다</li>
</ul>

<ul style="list-style-type: upper-latin">
    <li>첫번째 항목 입니다</li>
    <li>두번째 항목 입니다</li>
    <li>세번째 항목 입니다</li>
</ul>

결과

  • 첫번째 항목 입니다
  • 두번째 항목 입니다
  • 세번째 항목 입니다
  • 첫번째 항목 입니다
  • 두번째 항목 입니다
  • 세번째 항목 입니다
  • 첫번째 항목 입니다
  • 두번째 항목 입니다
  • 세번째 항목 입니다
  • 첫번째 항목 입니다
  • 두번째 항목 입니다
  • 세번째 항목 입니다
  • 첫번째 항목 입니다
  • 두번째 항목 입니다
  • 세번째 항목 입니다
  • 첫번째 항목 입니다
  • 두번째 항목 입니다
  • 세번째 항목 입니다
  • 첫번째 항목 입니다
  • 두번째 항목 입니다
  • 세번째 항목 입니다
  • 첫번째 항목 입니다
  • 두번째 항목 입니다
  • 세번째 항목 입니다
  • 첫번째 항목 입니다
  • 두번째 항목 입니다
  • 세번째 항목 입니다

한국어 중국어 일본어도 가능하다.

<ul style="list-style-type: korean-hangul-formal">
    <li>첫번째 항목 입니다</li>
    <li>두번째 항목 입니다</li>
    <li>세번째 항목 입니다</li>
</ul>

<ul style="list-style-type: korean-hanja-formal">
    <li>첫번째 항목 입니다</li>
    <li>두번째 항목 입니다</li>
    <li>세번째 항목 입니다</li>
</ul>

<ul style="list-style-type: korean-hanja-informal">
    <li>첫번째 항목 입니다</li>
    <li>두번째 항목 입니다</li>
    <li>세번째 항목 입니다</li>
</ul>

<ul style="list-style-type: simp-chinese-formal">
    <li>첫번째 항목 입니다</li>
    <li>두번째 항목 입니다</li>
    <li>세번째 항목 입니다</li>
</ul>

<ul style="list-style-type: simp-chinese-informal">
    <li>첫번째 항목 입니다</li>
    <li>두번째 항목 입니다</li>
    <li>세번째 항목 입니다</li>
</ul>

<ul style="list-style-type: hiragana">
    <li>첫번째 항목 입니다</li>
    <li>두번째 항목 입니다</li>
    <li>세번째 항목 입니다</li>
</ul>

<ul style="list-style-type: katakana">
    <li>첫번째 항목 입니다</li>
    <li>두번째 항목 입니다</li>
    <li>세번째 항목 입니다</li>
</ul>

결과

  • 첫번째 항목 입니다
  • 두번째 항목 입니다
  • 세번째 항목 입니다
  • 첫번째 항목 입니다
  • 두번째 항목 입니다
  • 세번째 항목 입니다
  • 첫번째 항목 입니다
  • 두번째 항목 입니다
  • 세번째 항목 입니다
  • 첫번째 항목 입니다
  • 두번째 항목 입니다
  • 세번째 항목 입니다
  • 첫번째 항목 입니다
  • 두번째 항목 입니다
  • 세번째 항목 입니다
  • 첫번째 항목 입니다
  • 두번째 항목 입니다
  • 세번째 항목 입니다
  • 첫번째 항목 입니다
  • 두번째 항목 입니다
  • 세번째 항목 입니다