728x90
반응형
SMALL
안녕하세요.
#yeoneeblog 여니입니다 :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>목론 관련 스타일</title>
<style>
#ul2{
list-style-position: outside;
list-style-image: url("resources/images/iconsample2.png");
}
</style>
</head>
<body>
<h1>목록 관련 스타일(list~)</h1>
<h3>list-style-type : 불릿기호를 변경해줄때 사용</h3>
<pre>
* 순서 없는 목록(ul)
선택자 {
list-style-type : none(진짜많이씀)/disc/circle/square;
}
* 순서 있는 목록(ol)
선택자{
list-style-type : decimal/decimal-leading-zero;
list-style-type : lower-alpha/upper-alpha;
list-style-type : lower-roman/upper-roman;
}
</pre>
<h4>순서 없는 목록</h4>
<ul id="ul1" style="list-style-type: upper-alpha;">
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
<li>JQUERY</li>
</ul>
<hr>
<h3>list-style-position : 불릿기호의 위치를 조정할 때 사용</h3>
<h3>list-style-image: 불릿기호로 이미지를 적용할 때 사용</h3>
<pre>
선택자 {
list-style-position : inside/outside;
list-style-image : url(적용시키고자하는 이미지의 경로);
}
</pre>
<ul id="ul2">
<li>강남지원 1관</li>
<li>강남지원 2관</li>
<li>강남지원 3관</li>
<li>당산지원</li>
<li>종로지원</li>
</ul>
</body>
</html>
728x90
반응형
LIST
'VsCode(HTML)' 카테고리의 다른 글
| 테두리관련스타일 HTML (0) | 2023.05.13 |
|---|---|
| 영역관련스타일 HTML (0) | 2023.05.12 |
| 텍스트관련스타일 HTML (0) | 2023.05.12 |
| 글꼴관련스타일 HTML (0) | 2023.05.11 |
| 선택자우선순위 HTML (0) | 2023.05.11 |
