반응형
1. list 종류
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<body>
<ol type="a(소문자),A(대문자),i(로마 소문자),I(로마 대문자),1(숫자=default)">
<li></li>
<li></li>
</ol>
<ul>
<li></li>
<li></li>
</ul>
</body>
//ol: ordered list
//li: list
//ul: unordered list
|
cs |
2. list 스타일링
//li 태그 검사 -> display : list-item인 걸 확인해 볼 수 있음 ->block으로 바꿀 시 없앨 수 있음
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
ul{
padding left: 0;
width: 200px;
}
li{
list-style-type: square; //square모양
list-sytle: none;
margin-bottom: 10px;
background-color: #77abff;
color: white;
padding: 10px 20px;
}
|
cs |
<결과>
반응형
'Web > HTML & CSS' 카테고리의 다른 글
| 12. 부트스트랩 (0) | 2019.03.23 |
|---|---|
| 11. 반응형 웹 (0) | 2019.03.23 |
| 9. float (0) | 2019.03.21 |
| 8. Positioning (0) | 2019.03.21 |
| 7. display (0) | 2019.03.19 |