html & css/개념
목록 스타일링
by Doo Hee
2023. 7. 4.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* 순서 없는 목록 마커 스타일 */
ul.disc {
list-style-type: disc;
/* 앞의 마커 모양은 list-style-type으로 설정 */
/* ul.disc - 태그명이 ul이면서 클래스가 disc인 것을 가리킨다. */
}
ul.circle {
list-style-type: circle;
}
ul.square {
list-style-type: square;
}
ul.dash {
list-style-type: "-";
}
ul.asta {
list-style-type: "*";
}
/* ""안에 원하는 마커 모양을 넣어 커스텀할 수 있다. */
/* 순서 있는 목록 마커 스타일 */
/* decimal, lower-roman, lower-greek */
/* lower-latin, lower-alpha, armenian 등 */
ol.decimal {
list-style-type: decimal;
}
ol.lower-roman {
list-style-type: lower-roman;
}
ol.upper-roman {
list-style-type: upper-roman;
}
</style>
</head>
<body>
<p>순서 없는 목록 앞의 마커 모양(기본, 채워진 동그라미): disc</p>
<ul>
<li>에스프레소</li>
<li>아메리카노</li>
<li>카페라떼</li>
</ul>
<p>순서 없는 목록 앞의 마커 모양(동그라미): circle</p>
<ul class="circle">
<li>에스프레소</li>
<li>아메리카노</li>
<li>카페라떼</li>
</ul>
<p>순서 없는 목록 앞의 마커 모양: square</p>
<ul class="square">
<li>에스프레소</li>
<li>아메리카노</li>
<li>카페라떼</li>
</ul>
<p>순서 없는 목록 앞의 마커 모양: dash</p>
<ul class="dash">
<li>에스프레소</li>
<li>아메리카노</li>
<li>카페라떼</li>
</ul>
<p>순서 없는 목록 앞의 마커 모양: asta</p>
<ul class="asta">
<li>에스프레소</li>
<li>아메리카노</li>
<li>카페라떼</li>
</ul>
<p>순서 있는 목록 앞의 마커 모양</p>
<ol>
<li>Node.js 설치</li>
<li>비주얼 스튜디오 코드 설치</li>
<li>확장 프로그램 설치</li>
</ol>
<p>순서 있는 목록 앞의 마커 모양(기본): decimal</p>
<ol>
<li class="decimal">Node.js 설치</li>
<li>비주얼 스튜디오 코드 설치</li>
<li>확장 프로그램 설치</li>
</ol>
<p>순서 있는 목록 앞의 마커 모양</p>
<ol class="lower-roman">
<li>Node.js 설치</li>
<li>비주얼 스튜디오 코드 설치</li>
<li>확장 프로그램 설치</li>
</ol>
<p>순서 있는 목록 앞의 마커 모양</p>
<ol class="upper-roman">
<!-- 대문자 roman -->
<li>Node.js 설치</li>
<li>비주얼 스튜디오 코드 설치</li>
<li>확장 프로그램 설치</li>
</ol>
</body>
</html>
