CSS list-style-type — 불릿 모양 바꾸기 완전 정리

 

 

Web Development · CSS List

CSS list-style-type —
불릿 모양 바꾸기 완전 정리

기본 점에서 사각형·원·없애기까지

시작 분석할 코드

.sqbullet { list-style-type: square; } .nobullet { list-style-type: none; }

square:

• 회사소개
• 도서
• 자료실

none:

• 회사소개
• 도서
• 자료실

---

1 list-style-type 값 종류

값	모양	용도
disc (기본)	● 채운 원	일반 ul
circle	○ 빈 원	2단계 중첩 자동
square	■ 채운 사각	3단계 중첩 자동
none	없음	네비게이션 메뉴
decimal	1. 2. 3.	ol 기본
upper-roman	I. II. III.	책 챕터
lower-alpha	a. b. c.	하위 항목
korean-hangul-formal	일. 이. 삼.	한국어 번호

---

2 none — 가장 자주 쓰이는 값

list-style-type: none은 실무에서 압도적으로 자주 쓴다. 메뉴·내비게이션·폼 그룹 등에서 ul 구조는 유지하되 점은 없애야 할 때.

※ ul/li로 시맨틱 의미는 살리고, list-style: none으로 시각적으로만 일반 박스처럼. nav · header · footer 메뉴의 표준 패턴.

---

3 단축 — list-style

list-style는 type · position · image를 한 줄로 줄 수 있는 단축 속성.

list-style: square inside; = type + position 동시에

---

4 자주 하는 실수

실수	해결
list-style만 적용 (li 아닌 ul에)	ul에 적용 — 자식 li 모두 영향
none 후 padding 그대로	padding-left: 0 함께
ol에 disc 강제	의미 깨짐 — 순서면 ol 그대로

반응형

---

핵심 한 줄 요약

list-style-type불릿 모양 변경

none실무 최다 — 메뉴 표준

disc/circle/square기본 3종

decimal/roman/alpha번호형 (ol에)

list-styletype+position+image 단축

Tags

#list-style-type #square #disc #circle #none #ul #li #CSS #불릿 #HTML #메뉴 #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

list-style-type, square, disc, circle, none, ul, li, CSS, 불릿, HTML, 메뉴, 웹개발, 티스토리