CSS list-style-position — inside · outside 완전 정리

 

 

Web Development · CSS List

CSS list-style-position —
불릿 위치 outside vs inside

불릿이 li 박스 안쪽으로 들어오느냐, 바깥에 머무느냐

.inside { list-style-position: inside; }

기본 (outside):

• 회사소개
• 도서

inside:

• 회사소개
• 도서

---

1 outside vs inside

outside (기본)

불릿이 li 박스 바깥
li의 padding/margin 영향 없음
줄바꿈 시 첫 줄과 둘째 줄 들여쓰기 같음

inside

불릿이 li 박스 안쪽
일반 글자처럼 흐름에 포함
줄바꿈 시 둘째 줄이 더 들여짐

---

2 시각적 차이

긴 텍스트 li에서 차이가 가장 잘 보인다.

outside: ● 한 줄 텍스트
      두 번째 줄도 같은 위치 들여쓰기

inside: ● 한 줄 텍스트
두 번째 줄은 불릿 자리부터 다시 시작

---

핵심 한 줄 요약

outside (기본)불릿 li 박스 바깥

inside불릿 li 박스 안쪽 (글자처럼)

실무대부분 outside 그대로 사용

반응형

Tags

#list-style-position #inside #outside #ul #li #CSS #HTML #불릿위치 #리스트 #웹개발 #티스토리

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

list-style-position, inside, outside, ul, li, CSS, HTML, 불릿위치, 리스트, 웹개발, 티스토리