10. 목록스타일

 

 

채운 원모양 불렛

 <style>
        /* 채운 원 모양 불렛(기본값) */
        
        #default-bullet {
            list-style-type: disc;
        }
 </style>
     <h4>채운 원 모양 불렛(기본값)</h4>
    <ul id="default-bullet">
        <li>HTML5</li>
        <li>CSS3</li>
        <li>JavaScript</li>
        <li>JQuery</li>
    </ul>

 

채운 원 모양 불렛(기본값)

• HTML5
• CSS3
• JavaScript
• JQuery

 

빈원모양 불렛

<style>
#circle-bullet {
            list-style-type: circle;
        }
</style>
   <h4>빈 원 모양 불렛</h4>
    <ul id="circle-bullet">
        <li>HTML5</li>
        <li>CSS3</li>
        <li>JavaScript</li>
        <li>JQuery</li>
    </ul>

 

빈 원 모양 불렛

• HTML5
• CSS3
• JavaScript
• JQuery

 

채운사각형모양 불렛

<style>
#square-bullet {
            list-style-type: square;
        }
</style>
   <h4>채운 사각형 모양 불렛</h4>
    <ul id="square-bullet">
        <li>HTML5</li>
        <li>CSS3</li>
        <li>JavaScript</li>
        <li>JQuery</li>
    </ul>

채운 사각형 모양 불렛

• HTML5
• CSS3
• JavaScript
• JQuery

 

불렛없애기

<style>
#none-bullet {
            list-style-type: none;
        }
 </style>
 
     <h4>불렛 없애기</h4>
    <ul id="none-bullet">
        <li>HTML5</li>
        <li>CSS3</li>
        <li>JavaScript</li>
        <li>JQuery</li>
    </ul>

불렛 없애기

• HTML5
• CSS3
• JavaScript
• JQuery

 

1로 시작하는 10진수

        <style>
        #default-number {
            list-style-type: decimal;
        }
        </style>
<h4>1로 시작하는 10진수(기본값)</h4>
    <ol id="default-number">
        <li>HTML5</li>
        <li>CSS3</li>
        <li>JavaScript</li>
        <li>JQuery</li>
    </ol>

1로 시작하는 10진수(기본값)

1. HTML5
2. CSS3
3. JavaScript
4. JQuery

 

앞에 0이붙는 10진수

       <style>
       #zero-number {
            list-style-type: decimal-leading-zero;
        }
        </style>
        
            <h4>앞에 0이 붙는 10진수</h4>
    <ol id="zero-number">
        <li>HTML5</li>
        <li>CSS3</li>
        <li>JavaScript</li>
        <li>JQuery</li>
    </ol>

앞에 0이 붙는 10진수

1. HTML5
2. CSS3
3. JavaScript
4. JQuery

 

소문자 로마숫자

        <style>
        lower-rome-number {
            list-style-type: lower-roman;
        }
        </style>
        
            <h4>소문자 로마 숫자</h4>
    <ol id="lower-rome-number">
        <li>HTML5</li>
        <li>CSS3</li>
        <li>JavaScript</li>
        <li>JQuery</li>
    </ol>

소문자 로마 숫자

1. HTML5
2. CSS3
3. JavaScript
4. JQuery

 

대문자 로마숫자

       <style>
       #upper-rome-number {
            list-style-type: upper-roman;
        }
        </style>
        
            <h4>대문자 로마 숫자</h4>
    <ol id="upper-rome-number">
        <li>HTML5</li>
        <li>CSS3</li>
        <li>JavaScript</li>
        <li>JQuery</li>
    </ol>

 

대문자 로마 숫자

1. HTML5
2. CSS3
3. JavaScript
4. JQuery

 

알파벳소문자

       <style>
       #lower-alpha {
            list-style-type: lower-alpha;
        }
        </style>
        
            <h4>알파벳 소문자</h4>
    <ol id="lower-alpha">
        <li>HTML5</li>
        <li>CSS3</li>
        <li>JavaScript</li>
        <li>JQuery</li>
    </ol>

 

알파벳 소문자

1. HTML5
2. CSS3
3. JavaScript
4. JQuery

 

알파벳대문자

<style>
#upper-alpha {
            list-style-type: upper-alpha;
        }
</style>

    <ol id="upper-alpha">
        <li>HTML5</li>
        <li>CSS3</li>
        <li>JavaScript</li>
        <li>JQuery</li>
    </ol>

1. HTML5
2. CSS3
3. JavaScript
4. JQuery

 

기호대신 이미지삽입

       <style>
       #image-bullet {
           /* list-style-image: url("resources/image/iconsample.PNG");*/
        }
        </style>
        
            <h3>기호 대신 이미지 삽입</h3>
    <ul id="image-bullet">
        <li>HTML5</li>
        <li>CSS3</li>
        <li>JavaScript</li>
        <li>JQuery</li>
    </ul>

 

 

 

 

---

"본 인터넷 사이트 내의 모든 이미지, 문구, 콘텐츠, 내용 등에 대한 저작권은 76beny에게 있습니다.

이를 무단으로 도용, 복사, 전재, 재배포, 2차 변형 등을 할 경우

민, 형사상 법적 조치 등 저작권법에 의거하여 처벌 받을 수 있습니다."