텍스트 표현 스타일(3)
2025. 9. 14. 22:43ㆍ웹 기초/css
목록 스타일
list-style-type
- 목록 앞에 다양한 모양을 지정해줌.
| disc | ● |
| circle | ○ |
| square | ■ |
| decimal | 1, 2, 3, ... |
| decimal-leading-zero | 01, 02, 03, ... |
| lower-roman | i, ii, iii, ... |
| upper-roman | I, II, III, ... |
| lower-alpha 또는 lower-latin | a, b, c, ... |
| upper-alpha 또는 upper-latin | A, B, C, ... |
| none | 숫자나 불릿을 없앰. |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>AI 텍스트 데코레이션</title>
<style>
.b1{
list-style-type : circle;
}
.b2{
list-style-type : lower-roman;
}
</style>
</head>
<body>
<h1>ssjjss</h1>
<ol class="b1">
<li>html</li>
<li>css</li>
<li>javascript</li>
</ol>
<ol class="b2">
<li>html</li>
<li>css</li>
<li>javascript</li>
</ol>
</body>
</html>
list-style-image
- 불릿을 원하는 이미지로 변경가능함.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>AI 텍스트 데코레이션</title>
<style>
.b1{
list-style-image: url('images/dot.png');
}
.b2{
list-style-type : lower-roman;
}
</style>
</head>
<body>
<h1>ssjjss</h1>
<ol class="b1">
<li>html</li>
<li>css</li>
<li>javascript</li>
</ol>
<ol class="b2">
<li>html</li>
<li>css</li>
<li>javascript</li>
</ol>
</body>
</html>
list-style-position
- 불릿이나 번호의 위치를 들여 쓰는 것을 지정해줌.
| inside | 불릿이나 번호를 기본 위치보다 안으로 들여씀 |
| outside | 기본 값 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>AI 텍스트 데코레이션</title>
<style>
.b1{
list-style-type: circle;
list-style-position: inside;
}
.b2{
list-style-type: circle;
}
</style>
</head>
<body>
<h1>ssjjss</h1>
<ol class="b1">
<li>html</li>
<li>css</li>
<li>javascript</li>
</ol>
<ol class="b2">
<li>html</li>
<li>css</li>
<li>javascript</li>
</ol>
</body>
</html>
list-style
- list-style-type, list-style-image, list-style-position을 한번에 표시가능함.
- 다음은 위가 원래 list-style-type과 list-style-position을 사용하여 표시한 것이고 아래가 list-style을 사용한 예시.
ol{
list-style-type: lower-alpha;
list-style-position: inside;
}
ol {list-style: lower-alpha inside}표 스타일
caption-side
- 캡션의 위치 지정가능.
- top이 기본, bottom이 아래로 캡션을 지정함.
caption-side: top| bottom<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>AI 텍스트 데코레이션</title>
<style>
table {
border-collapse: collapse;
width: 300px;
text-align: center;
}
td {
border: 1px solid #333;
padding: 10px;
}
caption {
caption-side: bottom;
font-weight: bold;
margin-bottom: 8px;
}
</style>
</head>
<body>
<h1>ssjjss</h1>
<table>
<caption>백준</caption>
<tr>
<td>DFS</td>
<td>BFS</td>
</tr>
<tr>
<td>다익스트라</td>
<td>플로이드워셜</td>
</tr>
<tr>
<td>이분 탐색</td>
<td>DP</td>
</tr>
</table>
</body>
</html>
border-spacing & border-collapse
- border-spacing : 셀과 셀 사이에 여백을 생성해줌.
- border-collapse : <table>태그와 <td>태그에서 border속성을 사용하면 셀과 셀 사이에 여백이 생기면서 두 줄로 표시됨. 하지만 하나로 합쳐서 표현할 지를 결정해줌.
| collapse | 두 줄로 표시된 것을 합침. |
| seperate | 두 줄로 유지해줌. 기본값. |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>AI 텍스트 데코레이션</title>
<style>
table {
border-collapse: collapse;
width: 300px;
text-align: center;
}
td {
border: 1px solid #ffffff;
padding: 10px;
}
caption {
caption-side: bottom;
font-weight: bold;
margin-bottom: 8px;
}
</style>
</head>
<body>
<h1>ssjjss</h1>
<table>
<caption>백준</caption>
<tr>
<td>DFS</td>
<td>BFS</td>
</tr>
<tr>
<td>다익스트라</td>
<td>플로이드워셜</td>
</tr>
<tr>
<td>이분 탐색</td>
<td>DP</td>
</tr>
</table>
</body>
</html>
'웹 기초 > css' 카테고리의 다른 글
| 텍스트 표현 스타일(4) (1) | 2025.09.15 |
|---|---|
| 텍스트 표현 스타일(2) (0) | 2025.09.14 |
| 텍스트 표현 스타일 (2) | 2025.09.14 |
| CSS 선택자 (0) | 2025.09.11 |
| CSS 기초 (0) | 2025.09.10 |