이것 저것 개발 공부/CSS

[CSS] CSS 목록 스타일 완벽 가이드 : ul, ol, li 꾸미는 방법

crushed-taro 2025. 3. 19. 15:17
728x90
반응형

CSS 문단 스타일 완벽 가이드: 정렬, 간격, 줄 간격 설정하기

1. 목록 스타일

  • list-style-type
    • list-style-type 속성은 목록 마커의 유형을 지정하는 데 사용됨.
disc 원형
circle 원형 (비어 있음)
square 사각
decimal 숫자
decimal-leading-zero 0이 포함된 숫자
lower-roman 로마 숫자 (소문자)
upper-roman 로마 숫자 (대문자)
lower-alpha 알파벳 (소문자)
upper-alpha 알파벳 (대문자)
none 마커 없음
inherit
 부모 요소에서 상속
  • list-style-image
    • list-style-image 속성은 목록 마커로 사용할 이미지를 지정하는 데 사용됩니다. 이미지 경로를 url()로 감싸서 지정
url(image-path) 이미지 경로
  • list-style
    • list-style 속성은 list-style-type, list-style-image, list-style-position 속성을 한 줄로 축약
list-style: list-style-type list-style-image list-style-position;  
list-style: initial; 초기값으로 설정
list-style: inherit; 부모 요소에서 상속

2. 예제 코드

<!doctype html>
<html lang="ko">
 <head>
  <meta charset="UTF-8">
  <title>목록 스타일</title>
  <style>
	#default-bulltet{
		list-style-type : disc;
	}
	#circle-bullet{
		list-style-type : circle;
	}
	#square-bullet{
		list-style-type : square;
	}
	#none-bullet{
		list-style-type : none;
	}
	#default-number{
		list-style-type : decimal;
	}
	#zero-number{
		list-style-type : decimal-leading-zero;
	}
	#lower-rome-number{
		list-style-type : lower-roman;
	}
	#upper-rome-number{
		list-style-type : upper-roman;
	}
	#lower-alpha{
		list-style-type : lower-alpha;
	}
	#upper-alpha{
		list-style-type : upper-alpha;
	}

	#image-bullet {
		list-style-image : url("../01_html/sample/image/strawberry.png");
	}
  </style>
 </head>
 <body>
  <h1>목록 스타일</h1>
  <h3>순서 없는 목록스타일</h3>
  <h4>채운 원 모양 불렛(기본값)</h4>
    <ul id="default-bullet">
		<li>HTML5</li>
		<li>CSS3</li>
		<li>JavaScript</li>
		<li>JQuery</li>

	</ul>
   <h4>빈 원 모양 불렛</h4>
    <ul id="circle-bullet">
		<li>HTML5</li>
		<li>CSS3</li>
		<li>JavaScript</li>
		<li>JQuery</li>
	</ul>
   <h4>채운 사각형 모양 불렛</h4>
    <ul id="square-bullet">
		<li>HTML5</li>
		<li>CSS3</li>
		<li>JavaScript</li>
		<li>JQuery</li>
	</ul>
   <h4>불렛 없애기</h4>
    <ul id="none-bullet">
		<li>HTML5</li>
		<li>CSS3</li>
		<li>JavaScript</li>
		<li>JQuery</li>
	</ul>
	<hr>
   <h3>순서 있는 목록스타일</h3>
   <h4>1로 시작하는 10진수(기본값)</h4>
	<ol id="default-number">
		<li>HTML5</li>
		<li>CSS3</li>
		<li>JavaScript</li>
		<li>JQuery</li>
	</ol>
   <h4>앞에 0이 붙는 10진수</h4>
	<ol id="zero-number">
		<li>HTML5</li>
		<li>CSS3</li>
		<li>JavaScript</li>
		<li>JQuery</li>
	</ol>
   <h4>소문자 로마 숫자</h4>
	<ol id="lower-rome-number">
		<li>HTML5</li>
		<li>CSS3</li>
		<li>JavaScript</li>
		<li>JQuery</li>
	</ol>
   <h4>대문자 로마 숫자</h4>
	<ol id="upper-rome-number">
		<li>HTML5</li>
		<li>CSS3</li>
		<li>JavaScript</li>
		<li>JQuery</li>
	</ol>
   <h4>알파벳 소문자</h4>
	<ol id="lower-alpha">
		<li>HTML5</li>
		<li>CSS3</li>
		<li>JavaScript</li>
		<li>JQuery</li>
	</ol>
   <h4>알파벳 대문자</h4>
	<ol id="upper-alpha">
		<li>HTML5</li>
		<li>CSS3</li>
		<li>JavaScript</li>
		<li>JQuery</li>
	</ol>

	<hr>
	<h3>기호 대신 이미지 삽입</h3>
	<ul id="image-bullet">
		<li>HTML5</li>
		<li>CSS3</li>
		<li>JavaScript</li>
		<li>JQuery</li>
	</ul>

 </body>
</html>

3. 결과 화면

CSS 목록 스타일 결과 화면

728x90
반응형