웹페이지에 리스트를 넣을 때 앞에 기호를 제거해야하는 경우도 종종 있습니다. 이럴 때는 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가 꾸며주는 것입니다. 코드 실행결과는 다음과 같습니다.
기호와 여백이 잘 제거된 것을 확인하실 수 있습니다.
'Dev > HTML, CSS' 카테고리의 다른 글
| [html] a 태그에서 title 속성의 역할은? (0) | 2020.12.29 |
|---|---|
| [css] 리스트 앞 기호 내가 원하는 이미지로 바꾸려면? list-style-image 속성 (0) | 2020.12.18 |
| [html] 비밀번호를 최소 6자, 최대 12자까지만 입력하게 하려면? input 태그 minlength, maxlength 속성 (2) | 2020.12.16 |
| [css] 링크 효과 관련 a:link, a:visited, a:hover, a:active 정리 (5) | 2020.11.21 |
| [css] div 요소 화면 정중앙에 배치하기, flex box 활용 (0) | 2020.11.08 |
| [css] 밑줄 여유있게 치기 (0) | 2020.10.21 |
| [css] 단어를 기준으로 줄바꿈 하려면? word-break:keep-all (2) | 2020.10.15 |
| [html] 예쁜 아이콘을 문자처럼 사용하게 도와주는 Font Awesome 사용법 (0) | 2020.10.14 |