Chap 07-2 텍스트를 표현하는 다양한 스타일
텍스트를 표현하는 다양한 스타일
4. 목록 스타일
list-style-type 속성
-
순서 없는 목록의 불릿이나 순서 목록의 숫자를 바꾸는 속성종류 설명 예시 disc 채운 원 모양 ● circle 빈 원 모양 ○ square 채운 사각형 모양 ■ decimal 1부터 시작하는 10진수 1,2,3, ... decimal-leading-zero 앞에 0이 붙는 10진수 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 불릿이나 숫자를 없앰 -
✅ TIP!!
- 불릿 없애기는
list-style-type: none;도 가능하지만,list-style:none;도 가능하다.
- 불릿 없애기는
- 코드 예시 )
...
<title>불릿과 번호 바꾸기</title>
<style>
/* 목록의 불릿과 번호 바꾸기 */
.car1 {
/* 불릿 없앰 */
list-style-type: none;
}
.car2 {
/* 알파벳 대문자 */
list-style-type: lower-roman;
}
.car3 {
/* 검정색 네모로 */
list-style-type: square;
}
</style>
</head>
<body>
<h1>차량 종류</h1>
<ul class="car1">
<li>Benz</li>
<li>BMW</li>
<li>Bentley</li>
<li>Porsche</li>
</ul>
<ol class="car2">
<li>Benz</li>
<li>BMW</li>
<li>Bentley</li>
<li>Porsche</li>
</ol>
<ol class="car3">
<li>Benz</li>
<li>BMW</li>
<li>Bentley</li>
<li>Porsche</li>
</ol>
</body>
</html>- 결과 )
list-style-image 속성
순서 없는 목록의 불릿을 이미지로 바꾸는 속성- 기본형 : list-style-image : <url(이미지 파일 경로)> | none
- 코드 예시 )
...
<title>불릿 이미지 사용하기</title>
<style>
/* 불릿 이미지 사용하기 */
ul {
/* 불릿으로 사용할 이미지 */
list-style-image: url('./images/dot.png');
}
</style>
</head>
<body>
<h1>과일</h1>
<ul>
<li>사과</li>
<li>레몬</li>
<li>샤인머스캣</li>
<li>포도</li>
<li>복숭아</li>
</ul>
</body>
</html>- 결과 )
list-style-position 속성
불릿이나 번호를 들여쓰거나 내어쓸 수 있음- 기본형 : list-style-position : inside | outside;
- 코드 예시 )
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>들여쓰기</title>
<style>
.outside {
list-style-position: outside;
}
/* 목록 들여쓰기 */
.inside {
/* 목록 들여쓰기 */
list-style-position: inside;
}
</style>
</head>
<body>
<h1>과일</h1>
<ul class="outside">
<li>샤인머스캣</li>
<li>복숭아</li>
<li>포도</li>
<li>사과</li>
</ul>
<ul class="inside">
<li>샤인머스캣</li>
<li>복숭아</li>
<li>포도</li>
<li>사과</li>
</ul>
</body>
</html>- 결과 )
5. 표 스타일
caption-side
- 캡션(설명글)은 기본으로 표 위쪽에 표시됨.
이러한 속성을 이용해 아래쪽에 표시 가능!- 기본형 : caption-side: top | bottom
- 코드 예시 )
...
<title>표 스타일</title>
<style>
table {
/* 표 캡션 위치 */
caption-side: bottom;
/* 표 테두리는 검은 색 실선으로 */
border: 1px solid black;
}
</style>
</head>
<body>
<h2>상품 구성</h2>
<table>
<caption>선물용과 가정용 상품 구성</caption>
<thead>
<tr>
<th>용도</th>
<th>중량</th>
<th>갯수</t>
<th>가격</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">선물용</td>
<td>3kg</td>
<td>11~16과</td>
<td>35,000원</td>
</tr>
<tr>
<td>5kg</td>
<td>18~26과</td>
<td>52,000원</td>
</tr>
<tr>
<td rowspan="2">가정용</td>
<td>3kg</td>
<td>11~16과</td>
<td>30,000원</td>
</tr>
<tr>
<td>5kg</td>
<td>18~26과</td>
<td>47,000원</td>
</tr>
</tbody>
</table>
</body>
</html>- 결과 )
border 속성과 border-collapse
- border
- 표의 바깥 테두리와 셀 테두리 모두 지정해야함.
- border-collapse
- 표 테두리와 셀 테두리를 합칠 것인지 설정
- 기본형 : border-collapse: collapse | separate (separate가 기본형)
- 코드 예시 )
...
<title>표 스타일</title>
<style>
/* 테두리를 1줄로 그리기 */
table {
caption-side: bottom; /* 표 캡션 위치 */
border:3px solid black; /* 표 테두리는 검은 색 실선으로 */
border-collapse: collapse;
}
td, th {
border:2px dotted blue; /* 셀 테두리는 검은 색 점선으로 */
padding:10px; /* 셀 테두리와 내용 사이의 여백 */
text-align:center; /* 셀 내용 가운데 정렬 */
}
</style>
</head>
<body>
<h2>상품 구성</h2>
<table>
<caption>선물용과 가정용 상품 구성</caption>
<thead>
<tr>
<th>용도</th>
<th>중량</th>
<th>갯수</t>
<th>가격</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">선물용</td>
<td>3kg</td>
<td>11~16과</td>
<td>35,000원</td>
</tr>
<tr>
<td>5kg</td>
<td>18~26과</td>
<td>52,000원</td>
</tr>
<tr>
<td rowspan="2">가정용</td>
<td>3kg</td>
<td>11~16과</td>
<td>30,000원</td>
</tr>
<tr>
<td>5kg</td>
<td>18~26과</td>
<td>47,000원</td>
</tr>
</tbody>
</table>
</body>
</html>- 결과 )
Hi