Dev/HTML, CSS
[css] 리스트 앞 기호 및 여백 제거하기
bskyvision.com
2020. 11. 19. 15:56
웹페이지에 리스트를 넣을 때 앞에 기호를 제거해야하는 경우도 종종 있습니다. 이럴 때는 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가 꾸며주는 것입니다. 코드 실행결과는 다음과 같습니다.
기호와 여백이 잘 제거된 것을 확인하실 수 있습니다.