- list-style : disc 처럼 사용합니다.
- disc 는 기본값이며 점 모양입니다.
- 증가형 숫자, 알파벳, 로마자 등으로 표시할 수 있습니다.
list-style
CSS 공작소에 방문해 주셔서 감사드립니다. 반응형 예제로 느껴보세요!!
list-style 은 li 태그에 표시되는 점, 숫자 등의 모양을 지정합니다.
예제 1
list-style 개요
보기
list-style : none
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
소스
<style type="text/css">
.css_test {
font-size : 15pt !important;
margin : 0 0 25px 0;
}
</style>
list-style : none
<ul class="css_test" style="list-style:none;">
<li>CSS 공작소</li>
<li>CSS 공작소</li>
<li>CSS 공작소</li>
</ul>
list-style : disc
<ul class="css_test" style="list-style:disc;">
<li>CSS 공작소</li>
<li>CSS 공작소</li>
<li>CSS 공작소</li>
</ul>
list-style : circle
<ul class="css_test" style="list-style:circle;">
<li>CSS 공작소</li>
<li>CSS 공작소</li>
<li>CSS 공작소</li>
</ul>
list-style : square
<ul class="css_test" style="list-style:square;">
<li>CSS 공작소</li>
<li>CSS 공작소</li>
<li>CSS 공작소</li>
</ul>
list-style : decimal
<ul class="css_test" style="list-style:decimal;">
<li>CSS 공작소</li>
<li>CSS 공작소</li>
<li>CSS 공작소</li>
</ul>
list-style : lower-alpha
<ul class="css_test" style="list-style:lower-alpha;">
<li>CSS 공작소</li>
<li>CSS 공작소</li>
<li>CSS 공작소</li>
</ul>
.css_test {
font-size : 15pt !important;
margin : 0 0 25px 0;
}
</style>
list-style : none
<ul class="css_test" style="list-style:none;">
<li>CSS 공작소</li>
<li>CSS 공작소</li>
<li>CSS 공작소</li>
</ul>
list-style : disc
<ul class="css_test" style="list-style:disc;">
<li>CSS 공작소</li>
<li>CSS 공작소</li>
<li>CSS 공작소</li>
</ul>
list-style : circle
<ul class="css_test" style="list-style:circle;">
<li>CSS 공작소</li>
<li>CSS 공작소</li>
<li>CSS 공작소</li>
</ul>
list-style : square
<ul class="css_test" style="list-style:square;">
<li>CSS 공작소</li>
<li>CSS 공작소</li>
<li>CSS 공작소</li>
</ul>
list-style : decimal
<ul class="css_test" style="list-style:decimal;">
<li>CSS 공작소</li>
<li>CSS 공작소</li>
<li>CSS 공작소</li>
</ul>
list-style : lower-alpha
<ul class="css_test" style="list-style:lower-alpha;">
<li>CSS 공작소</li>
<li>CSS 공작소</li>
<li>CSS 공작소</li>
</ul>
설명
예제 2
list-style 개요 - 1개 속성 조절해보기
보기
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
| list-style : | |
|---|---|
|
list-style : disc
|
|
예제 3
list-style 개요 - 2개 속성 조절해보기
보기
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
| list-style : | |
|---|---|
|
list-style : disc outside
|
|
설명
- 모양과 정렬방식을 지정할 수 있습니다.
예제 4
실습 - 이미지 사용하기
보기
| list-style : | |
|---|---|
|
list-style : url('http://superkts.com/img/css/icon0021.gif')
|
|
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
설명
- 이미지를 사용해서 좀 더 보기좋게 만들 수 있습니다.
- 적절한 크기의 이미지를 사용해야 겠습니다. ^^;
- 적절한 크기의 이미지를 사용해야 겠습니다. ^^;
연구 1
list-style 의 다양한 속성 적용해 보기
보기
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
- CSS 공작소
| list-style-type : | |
|---|---|
|
list-style-type : disc
|
|
+ 관련 CSS +