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('http://cfile1.uf.tistory.com/image/993855465A79B6C51AABC3');">대메뉴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 불릿 속성에 대하여 알아 보았습니다

 

Posted by JOY [바가지]

댓글을 달아 주세요

  1. Anchou 2018.02.13 05:11 신고  댓글주소  수정/삭제  댓글쓰기

    와우, 프로그램 언어도 잘 아시나봐요! 부럽습니다. 저도 공부 중이긴 한데 독학의 한계가 있거든요.ㅠㅠ



티스토리 툴바