html & css/개념

목록 스타일링

Doo Hee 2023. 7. 4. 22:53 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 순서 없는 목록 마커 스타일 */
      ul.disc {
        list-style-type: disc;
        /* 앞의 마커 모양은 list-style-type으로 설정 */
        /* ul.disc - 태그명이 ul이면서 클래스가 disc인 것을 가리킨다. */
      }

      ul.circle {
        list-style-type: circle;
      }

      ul.square {
        list-style-type: square;
      }

      ul.dash {
        list-style-type: "-";
      }

      ul.asta {
        list-style-type: "*";
      }
      /* ""안에 원하는 마커 모양을 넣어 커스텀할 수 있다. */

      /* 순서 있는 목록 마커 스타일 */
      /* decimal, lower-roman, lower-greek */
      /* lower-latin, lower-alpha, armenian 등 */

      ol.decimal {
        list-style-type: decimal;
      }

      ol.lower-roman {
        list-style-type: lower-roman;
      }

      ol.upper-roman {
        list-style-type: upper-roman;
      }
    </style>
  </head>
  <body>
    <p>순서 없는 목록 앞의 마커 모양(기본, 채워진 동그라미): disc</p>
    <ul>
      <li>에스프레소</li>
      <li>아메리카노</li>
      <li>카페라떼</li>
    </ul>
    <p>순서 없는 목록 앞의 마커 모양(동그라미): circle</p>
    <ul class="circle">
      <li>에스프레소</li>
      <li>아메리카노</li>
      <li>카페라떼</li>
    </ul>
    <p>순서 없는 목록 앞의 마커 모양: square</p>
    <ul class="square">
      <li>에스프레소</li>
      <li>아메리카노</li>
      <li>카페라떼</li>
    </ul>
    <p>순서 없는 목록 앞의 마커 모양: dash</p>
    <ul class="dash">
      <li>에스프레소</li>
      <li>아메리카노</li>
      <li>카페라떼</li>
    </ul>
    <p>순서 없는 목록 앞의 마커 모양: asta</p>
    <ul class="asta">
      <li>에스프레소</li>
      <li>아메리카노</li>
      <li>카페라떼</li>
    </ul>
    <p>순서 있는 목록 앞의 마커 모양</p>
    <ol>
      <li>Node.js 설치</li>
      <li>비주얼 스튜디오 코드 설치</li>
      <li>확장 프로그램 설치</li>
    </ol>
    <p>순서 있는 목록 앞의 마커 모양(기본): decimal</p>
    <ol>
      <li class="decimal">Node.js 설치</li>
      <li>비주얼 스튜디오 코드 설치</li>
      <li>확장 프로그램 설치</li>
    </ol>
    <p>순서 있는 목록 앞의 마커 모양</p>
    <ol class="lower-roman">
      <li>Node.js 설치</li>
      <li>비주얼 스튜디오 코드 설치</li>
      <li>확장 프로그램 설치</li>
    </ol>
    <p>순서 있는 목록 앞의 마커 모양</p>
    <ol class="upper-roman">
      <!-- 대문자 roman -->
      <li>Node.js 설치</li>
      <li>비주얼 스튜디오 코드 설치</li>
      <li>확장 프로그램 설치</li>
    </ol>
  </body>
</html>