Computer >> 컴퓨터 >  >> 프로그래밍 >> CSS

CSS로 글머리 기호 없는 순서 없는 목록(ul) 만드는 방법

웹 페이지에서 목록을 표시할 때 기본적으로 나타나는 글머리 기호(bullet)를 제거하고 싶은 경우가 종종 있습니다. CSS의 list-style-type 속성을 none

핵심 CSS 속성

글머리 기호를 제거하는 핵심은 다음 속성입니다.

  • list-style-type: none; — 목록 앞에 표시되는 글머리 기호를 제거합니다.
  • margin: 0; — 브라우저가 기본적으로 적용하는 바깥 여백을 제거합니다.
  • padding: 0; — 브라우저가 기본적으로 적용하는 안쪽 여백을 제거합니다.

여백과 패딩까지 함께 초기화하면 목록이 화면 왼쪽 끝에 깔끔하게 정렬됩니다.

예제 코드

CSS를 사용하여 글머리 기호 없이 순서 없는 목록을 만드는 전체 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        font-size: 18px;
        font-weight: bold;
    }
</style>
</head>
<body>
<h1>Remove bullets from ul example</h1>
<ul>
<li>Tiger</li>
<li>Giraffe</li>
<li>Lion</li>
</ul>
</body>
</html>

실행 결과

위 코드를 브라우저에서 실행하면 다음과 같은 결과가 출력됩니다.

CSS로 글머리 기호 없는 순서 없는 목록(ul) 만드는 방법

정리

list-style-type: none; 한 줄만 추가해도 글머리 기호가 사라지지만, 실무에서는 margin과 padding 초기화를 함께 적용하는 것이 좋습니다. 이렇게 하면 브라우저마다 다른 기본 스타일 차이와 무관하게 일관된 레이아웃을 유지할 수 있으며, 내비게이션 메뉴나 커스텀 리스트 디자인을 만들 때 특히 유용합니다.