본문 바로가기
프로그래밍/HTML, CSS, JavaScript

CSS 목록 속성 불릿(Bullet) 지정하기

by [바가지] 2018. 2. 6.
반응형

CSS 목록 속성 불릿 지정하는 방법

 

CSS 불릿 지정하기

 

 

CSS 불릿 지정하는 방법에 대하여 알아보도록 하겠습니다. 

※ 불릿이란 텍스트 앞에 주의를 끌기 위하여 붙이는 그래픽 문자 입니다.

 

 불릿 모양 지정

 - 속성 : list-style-type

 - 속성값 : none, circle, square, 등

 

불릿 이미지 지정

 - 속성 list-style-image

 - 속성값 :  불릿 이미지 URL

 

불릿 위치 지정

 - 속성 :  list-style-position

 - 속성값 : inside, outside

 

예제 사용 이미지 : 불릿 이미지(기쁨이가 만든 쿠키 이미지 입니다)

 

 불릿 지정하기 전 예제

 소스

결과 

 <UL>
    <LI>대메뉴1
        <UL>
            <LI>메뉴1</LI>
            <LI>메뉴2</LI>
            <LI>메뉴3</LI>
        </UL>
    </LI>
     <LI>대메뉴2
        <UL>
            <LI>메뉴1</LI>
            <LI>메뉴2</LI>
            <LI>메뉴3</LI>
         </UL>
     </LI>
 </UL>
  • 대메뉴1
    • 메뉴1
    • 메뉴2
    • 메뉴3
  • 대메뉴2
    • 메뉴1
    • 메뉴2
    • 메뉴3

 

불릿 지정 한 예제

소스

결과

<UL>
    <LI style="list-style-image : url('https://t1.daumcdn.net/cfile/tistory/993855465A79B6C51A');">대메뉴1
        <UL>
            <LI style="list-style-type:square">메뉴1</LI>
            <LI>메뉴2</LI>
            <LI>메뉴3</LI>
        </UL>
    </LI>
     <LI>대메뉴2
        <UL>
            <LI style="list-style-position:inside">메뉴1</LI>
            <LI style="list-style-position:outside">메뉴2</LI>
            <LI>메뉴3</LI>
         </UL>
     </LI>
 </UL>

  • 대메뉴1
    • 메뉴1
    • 메뉴2
    • 메뉴3
  • 대메뉴2
    • 메뉴1
    • 메뉴2
    • 메뉴3

 

CSS 불릿 속성에 대하여 알아 보았습니다

 

반응형