CSS 불릿(ul, li) 간격, 점 나타나기 - ul와 li의 기호 옵션
페이지 정보
조회 958회 작성일 22-07-06 00:19
본문
ul와 li의 기호 옵션
불릿(ul, li) 간격, 점 나타내기
불릿이란 뜻은 항목을 구분하기 좋게 시작 부분에 표시를 해 주는 것이다. 대표적으로 li 태그를 사용하면 나타나는 점이 있다.
이때 li의 점 없애기나 간격 조절을 위해 알아 둘 것이 있다. 바로 불릿 기호의 옵션에 대한 것이다.
불릿(ul, li) 간격, 점 나타나기 - ul와 li의 기호 옵션
강제로 li의 점 만들기
홈페이지 기호에서 아래처럼 점이 왼쪽에 나타나는 것이 불릿 기호다.
• 목록
기본적인 불릿 기호 사용은 아래와 같다. 이렇게 하면 자동으로 li에 점을 만들 수 있게 된다.
[code]
<ul>
<li>내용</li>
<li>내용</li>
</ul>
[/code]
그런데 어떤 홈페이지나 블로그에서는 li의 점을 없애기 해 버렸을 것이다.
그럴 때는 아래처럼 CSS에서 조절하면 된다. 그러면 점이 생긴다.
[code]
<script>
li { list-style:inside; }
</script>
[/code]
특히 블로그를 한다면 종종 쓸만한 방법이다.
불릿(ul, li) 기호 간격 조절
이제 li의 간격을 조절할 차례다. 아래처럼 CSS에서 마진을 조절해 주면 된다.
[code]
<script>
li { list-style:inside; margin-left:10px; }
</script>
[/code]
그런데 이렇게 하면 제대로 된 간격 조절이 아니다. 왜냐면 점의 왼쪽 간격만 조절되기 때문이다. 점과 글자 사이에 있는 간격은 조절되지 않는다.
그럴 때는 "내용" 부분에 마진 옵션을 줘야 한다.
다시 맨 위의 코드로 돌아가서, 맨 위의 태그를 아래처럼 입력해 놓자.
[code]
<ul>
<li><span class="li_item">내용</span></li>
</ul>
[/code]
그 다음에 CSS에서 아래처럼 불릿 기호 li에 간격 주기를 하면 원하는 대로 점과 li 사이의 간격을 조절할 수 있게 된다. [저작권법 표시] 원본 출처 : 키스세븐(www.kiss7.kr)
[code]
<script>
li { list-style:inside; margin-left:10px; }
.li_item { margin-left:-10px; }
</script>
[/code]
위에서는 강제로 li 점 나타내는 방법을 봤는데, 다음에는 li의 점을 지우기하는 방법에 대해 설명할 것이다.