08. list-style _ 리스트 말머리 변경

ul, ol 등의 리스트에 이쁨을 담당합니다.
말머리로 ul은 꽉찬 동그라미, ol은 숫자가 기본값으로 출력되는데요
이걸 바꿔주는 거라 볼 수 있겠네요.

list-style-type

말그대로 입니다. 리스트 스타일의 타입을 골라줍니다.
값으로는 circle, square, upper-roman, lower-alpha, disc, none이 있습니다.
여기서 disc가 기본값 꽉찬 동그라미 입니다.
기본값을 지우고 싶다면 none을 값으로 주면 됩니다.확인해 봅시다.

<ul class="circle">
   <li>뚫린 동그라미</li>
   <li>뚫린 동그라미</li>
</ul>
<ul class="square">
   <li>네모네모</li>
   <li>네모네모</li>
</ul>
<ul class="none">
   <li>기본 속성을 버려봅시다</li>
   <li>똥글뱅이 안나오죠?</li>
</ul>
<ol class="roman">
   <li>로마숫자</li>
   <li>5이상 못외웁니다</li>
</ol>
<ol class="alpha">
   <li>소문자 abc</li>
   <li>잘 안씁니다 전</li>
</ol>
 

CSS

<style>
   ul.circle {list-style-type:circle;}
   ul.square {list-style-type:square;}
   ul.none {list-style-type:none;}
   ol.roman {list-style-type:upper-roman;}
   ol.alpha {list-style-type:lower-alpha;}
</style>
 

• 뚫린 동그라미
• 뚫린 동그라미

• 네모네모
• 네모네모

• 기본 속성을 버려봅시다
• 똥글뱅이 안나오죠?

1. 로마숫자
2. 5이상 못외웁니다

1. 소문자 abc
2. 잘 안씁니다 전

list-style-image

글머리를 이미지로 처리할 수도 있습니다.
background에 이미지 넣는 것과 모양은 똑같습니다.

<ul class="image">
   <li>왼쪽 글머리에</li>
   <li>일반 지정 도형이 아닌</li>
   <li>이미지로 내맘대로 처리할 수 있습니다</li>
   <li>전 잘 안써요</li>
</ul>
 

CSS

<style>
   ul.image {list-style-image:url('http://ododog12.com/img/btn/btn_con_close1.png');}
</style>
 

• 왼쪽 글머리에
• 일반 지정 도형이 아닌
• 이미지로 내맘대로 처리할 수 있습니다
• 전 잘 안써요

list-style-position

글머리를 어떻게 쓸것이냐 하는 요소입니다.
사실 전 한번도 실무에서 써본적이 없어요. 표를 많이 다루시는 분들은 유용하겠네요.
대충 글머리를 들여쓰기 할까 내어쓰기 할까를 정해주는 겁니다.
기본 default값은 내어쓰기에요.

<ul>
   <li>기본값으로 내어쓰구</li>
</ul>
<ul class="inside">
   <li>들여쓰구</li>
</ul>
 

CSS

<style>
   ul.inside {list-style-position:inside;}
</style>
 

• 기본값으로 내어쓰구

• 들여쓰구

shorthand property

background처럼 list-style도 줄여서 한번에 쓸 수 있습니다.
물론 한가지 값만 사용하더라도 list-style로 통일해서 사용할 수 있어요.
list-style-type, list-style-image... 언제 치고 있겠어요.
순서는 타입 위치 이미지경로 이렇게 됩니다.
list-style로 줄여서 쓰는법, 보겠습니다.

<ul class="short">
   <li>여러개의 값을 묶어서 list-style로 한번에!</li>
</ul>
<ul class="one">
   <li>그냥 머리말 하나 바꿀때도 줄여서 list-style로!</li>
</ul>
 

CSS

<style>
   ul.short {list-style:square inside url('http://ododog12.com/img/btn/btn_con_close1.png');}
   ul.one {list-style:none;}
</style>
 

• 여러개의 값을 묶어서 list-style로 한번에!

• 그냥 머리말 하나 바꿀때도 줄여서 list-style로!

* 개인적인 공부를 정리하는 블로그입니다.