[CSS] list-style 종류 / list-style-type
by mini_min[CSS] list-style 종류 / list-style-type
✔️ list-style
: list-style-type : 리스트의 불릿 기호 변경한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3> list-style </h3>
<p>기본 : disc(채워진원) </p>
<ul>
<li>자바</li>
<li>서블릿</li>
<li>스프링</li>
</ul>
<p>padding을 0으로 주면 list-style가 표시 되지 않는다. </p>
<ul style="padding: 0">
<li>자바</li>
<li>서블릿</li>
<li>스프링</li>
</ul>
<p>list-style-type : 리스트의 불릿 기호 변경 </p>
<ul style="list-style-type: circle;">
<li>자바</li>
<li>서블릿</li>
<li>스프링</li>
</ul>
<ul>
<li style="list-style-type: disc;">자바</li>
<li style="list-style-type: circle;">서블릿</li>
<li style="list-style-type: square;">스프링</li>
<li style="list-style-type: none;">없음</li>
</ul>
<p>OL 태그의 list-style-type</p>
<ol style="list-style-type: upper-roman;">
<li>자바</li>
<li>서블릿</li>
<li>스프링</li>
</ol>
<ol >
<li style="list-style-type: decimal;">자바</li>
<li style="list-style-type: lower-roman;">서블릿</li>
<li style="list-style-type: upper-roman;">스프링</li>
<li style="list-style-type: lower-alpha;">웹</li>
<li style="list-style-type: upper-alpha;">HTML</li>
</ol>
<p>블릿을 이미지로...</p>
<ul style="list-style-image: url(plus.png)">
<li>자바</li>
<li>서블릿</li>
<li>스프링</li>
</ul>
</body>
</html>list-style
기본 : disc(채워진원)
- 자바
- 서블릿
- 스프링
padding을 0으로 주면 list-style가 표시 되지 않는다.
- 자바
- 서블릿
- 스프링
list-style-type : 리스트의 불릿 기호 변경
- 자바
- 서블릿
- 스프링
- 자바
- 서블릿
- 스프링
- 없음
OL 태그의 list-style-type
- 자바
- 서블릿
- 스프링
- 자바
- 서블릿
- 스프링
- 웹
- HTML
블릿을 이미지로...
- 자바
- 서블릿
- 스프링
💡 이미지를 삽입할 수도 있다. (맨 마지막 예시!)
'HTML' 카테고리의 다른 글
| [CSS] 이미지 관련 스타일 image / gradient (0) | 2022.09.17 |
|---|---|
| [CSS] 배경 및 이미지 관련 스타일 background (0) | 2022.09.17 |
| [CSS] text-overflow 조건 (넘치는 텍스트 처리) (0) | 2022.09.15 |
| [CSS] white-space / letter-spacing / word-space / word-break / 대소문자 (0) | 2022.09.15 |
| [CSS] 텍스트 관련 스타일 (font) / 웹 폰트 가져오기 (0) | 2022.09.15 |
블로그의 정보
개발자 미니민의 개발로그
mini_min