bskyvision$

[css] 리스트 앞 기호 및 여백 제거하기

코딩/web
@2020-11-19 15:56:14

웹페이지에 리스트를 넣을 때 앞에 기호를 제거해야하는 경우도 종종 있습니다. 이럴 때는 li 요소의 list-style 속성의 값을 none으로 바꿔줘야 합니다. 또한 기호를 제거했는데 앞에 여백이 마음에 들지 않아 제거하고 싶다면, ul 요소의 padding-left 속성의 값을 0으로 해줘야 합니다. 아래 코드와 실행한 결과를 비교해서 보시면 어렵지 않게 이해하실 수 있을 것입니다. 

 

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>기본 리스트</h1>
    <ul id="example0">
        <li>리스트1</li>
        <li>리스트2</li>
        <li>리스트3</li>
    </ul>
 
    <h1>앞에 기호 제거된 리스트</h1>
    <ul id="example1">
        <li>리스트1</li>
        <li>리스트2</li>
        <li>리스트3</li>
    </ul>
 
    <h1>기호 및 여백도 제거된 리스트</h1>
    <ul id="example2">
        <li>리스트1</li>
        <li>리스트2</li>
        <li>리스트3</li>
    </ul>
</body>
</html>
cs

 

style.css

1
2
3
4
5
6
7
8
9
10
11
12
#example1 li {
    list-style: none;
}
 
 
#example2 {
    padding-left: 0;
}
 
#example2 li {
    list-style: none;
}
cs

 

index.html과 style.css 파일 두 개가 있는데, 웹 페이지의 내용을 담고 있는 index.html을 style.css가 꾸며주는 것입니다. 코드 실행결과는 다음과 같습니다. 

 

 

기호와 여백이 잘 제거된 것을 확인하실 수 있습니다. 

댓글

[1] [···] [12] [13] [14] [15] [16] [17] [18] [19] [20] [···] [546]