본문 바로가기

공부/html, css

ul 스타일 주기 (li 불릿 교체 및 삭제, 들여쓰기 없애기)

728x90

 

 

 

UL 스타일 주기

퍼블리싱을 할때 DIV 만큼 많이 쓰는 것이 ul (비순차목록) 인데요.
ul (비순차목록) 을 사용하면 li 리스트 앞에 자동으로 동그란 불릿아이콘 (bullet icon) 이 생성됩니다.
이 불릿아이콘을 없애려면 먼저 아래의 스타일을 css에 추가해 주세요

ul li {list-style : none;}
 
 
 

위의 스타일을 사용해서 불릿아이콘을 없앴는데, 다른 이미지를 불릿아이콘으로 사용하고 싶을때는 list-style-image:url(경로);를 사용해 주시면 되는데요. 예제 소스 첨부해 드리도록 하겠습니다.

<style>
	li#box1 {list-style-image:url(경로);}
	li#box2 {list-style-image:url(경로);}
</style> 


<body> 
	<ul> 
		<li id="box1"></li> 
		<li id="box2"></li> 
	</ul> 
</body>

 

 

 

 

마지막으로 비순차목록에서 나타나는 들여쓰기를 없애주고 싶을때는 ul 태그에 padding-left:0; margin-left:0; 를 추가해 줍니다.

ul {padding-left:0; margin-left:0;}

 

 

 

반응형

'공부 > html, css' 카테고리의 다른 글

video 태그로 웹에 동영상 넣기  (0) 2023.01.07
audio 태그로 웹에 음악 넣기  (0) 2023.01.07
폰트 그림자 넣기 (text-shadow)  (0) 2023.01.07
웹폰트 적용하기  (0) 2023.01.07
개체 변형, 회전 시키기 (transform)  (0) 2023.01.07