[CSS] 06_목록 관련 스타일

2022. 9. 15. 16:12·📗 self-study/📗 KH정보교육원 당산지원

 

더보기

CSS의 목록 관련 스타일에 대하여 알아보자

 

 

 

 <list ~ 로 시작하는 코드>

 

list-style-type: 불릿기호를 변경시켜 줄 때 사용

 

       [ 표현법 ]
        * 순서 없는 목록 (ul)
        선택자 {
            list-style-type: disc/circle/square/none; 👉🏻 기본값은 disc
        }

        * 순서 있는 목록 (ol)
        선택자 {
            list-style-type : decimal/decimal-leading-zero; 👉🏻 기본값은 decimal
            list-style-type : lower-alpha/upper-alpha;
            list-style-type : lower-roman/upper-roman;
        }

 

 👉🏻  순서 없는 목록

기본값
circle, 빈 동그라미
square
none
기본값 circle, 빈 동그라미 square, 네모 none
    <style>

        #ul1 {
            list-style-type : none;
        }

    </style>
    
  <body>
    <h4>순서 없는 목록</h4>
    <!-- ul>#ul1>li*4 + Enter -->
    <ul id="ul1">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
    </ul>
  </body>

 

 

 👉🏻  순서 있는 목록

decimal decimal-leading-zero

lower-alpha upper-alpha
lower-roman upper-roman
    <style>

        #ol1 {
            list-style-type : upper-roman;
        }

    </style>
    
    
     <h4>순서 있는 목록</h4>
     <!-- ol>#ol1>li*4 + Enter -->
    <ol id="ol1">
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>jQuery</li>
        </li>
    </ol>

 

list-style-position : 불릿 기호의 위치를 조정할 때 사용

 

 [ 표현법 ]
        선택자 {
            list-style-position : inside/outside;  👉🏻 기본값은 outside
            list-style-image : url("이미지의경로");
        }

 

inside 👉🏻 불렛기호 들여쓰기

 

iconsample.png

 

 <style>
        #ul2 {
            list-style-position : inside;
            list-style-image : url("resources/image/iconsample.png")
        }
 </style>
 
 
 	<h4>KH 정보교육원 위치 안내</h4>
    <!-- ul#ul2>li*5 --> 
    <ul id="ul2">
        <li>강남본원 1관</li>
        <li>강남본원 2관</li>
        <li>강남본원 3관</li>
        <li>당산지원</li>
        <li>종로지원</li>
    </ul>
저작자표시 비영리 변경금지 (새창열림)
'📗 self-study/📗 KH정보교육원 당산지원' 카테고리의 다른 글
  • [CSS] 08_테두리 관련 스타일
  • [CSS] 07_영역 관련 스타일
  • [CSS] 05_텍스트 관련 스타일
  • [CSS] 04_글꼴 관련 스타일
천재강쥐
천재강쥐
  • 천재강쥐
    디버거도 버거다
    천재강쥐
  • 전체
    오늘
    어제
    • Category (467)
      • 진짜 너무 궁금한데 이걸 나만 몰라...? (0)
      • 💾 Portfolio (2)
      • 🐤 CodingTest (28)
        • Java (20)
        • ᕕ(ꐦ°᷄д°᷅)ᕗ❌ (5)
      • 🚀 from error to study (142)
        • AI (1)
        • Cloud (2)
        • DB (12)
        • Front-End (16)
        • Github (14)
        • Java (39)
        • Mac (7)
        • Normal (29)
        • Server (22)
      • 📘 certificate (44)
        • 📘 리눅스마스터1급 (1)
        • 📘⭕️ 정보처리기사 (40)
        • 📘⭕️ SQLD (3)
      • 📗 self-study (234)
        • 📗 inflearn (35)
        • 📗 생활코딩 (8)
        • 📗 KH정보교육원 당산지원 (190)
      • 🎨 Scoop the others (0)
        • 📖 Peeking into other people.. (0)
        • 🇫🇷 (0)
        • 📘⭕️ 한국사능력검정시험 심화 (11)
        • 오블완 (4)
  • 인기 글

  • hELLO· Designed By정상우.v4.10.1
천재강쥐
[CSS] 06_목록 관련 스타일
상단으로

티스토리툴바