목록(List)
브라우저 화면에 목록을 보여주기 위한 태그
목록 종류
1. 순서 목록 : 1, 2, 3, ....
2. 무순서 목록 : 순서가 없는 목록
3. 정의형 목록 : 각 항목을 정의하기 위한 목록
무순서 목록의 모양 변경 속성
style = "list-style-type : disk"
disk : 채워진 원
circle : 속이 빈 원
square : 채워진 사각형
none : 기호 없음.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>목록 출력</title>
</head>
<body>
<!-- 무순서 목록 -->
<section>
<article>
<h2>무순서 목록</h2>
<ul style = "list-style-type: square;">
<li><a href="#">Coffee</a></li>
<li>Tea
<ul>
<li>Black Tea</li>
<li>Grean Tea</li>
</ul>
</li>
</ul>
</article>
<article>
<h2>순서 목록</h2>
<ol type = "A" start = "3">
<li>Apple</li>
<li>Banana</li>
<li>Pineapple</li>
<li>strawberry</li>
<li>berry</li>
<ol type="I">
<li>strawberry</li>
<li>blueberry</li>
</ol>
</ol>
</article>
</section>
</body>
</html>
테이블(표)
<table>, <tr>, <td>, <th> 로 구성
tr : 한 행을 표현한다.
th, td : 한 칸을 표현한다
table 밑에 tr을 작성하고.
tr 밑에는 td 또는 th를 작성한다.
th는 컬럼이나 행의 제목을 작성하는데 사용(볼드체로 나옴).
td는 칸의 내용을 작성하는데 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>표 만들기</title>
<style type = "text/css">
table, td, th{
border: 1px solid black;
border-collapse: collapse;
text-align: center;
}
table {
background-color:#f1f1c1;
}
th{
background-color:#00aa0088;
}
tr:nth-child(even){
background-color: pink;
}
tr:hover{ <!-- 마우스를 표에 대면 색상이 변경됨. -->
background-color: blue;
color: white;
}
</style>
</head>
<body>
<h2>기본 테이블 생성</h2>
<table width = "400">
<tr>
<th>번호</th>
<th>이름</th>
<th>성정</th>
</tr>
<tr>
<td>1</td>
<td>홍길동</td>
<td>90점</td>
</tr>
<tr>
<td>2</td>
<td>강동희</td>
<td>0점</td>
</tr>
<tr>
<td>3</td>
<td>희동강</td>
<td>1점</td>
</tr>
</table>
<h3>가로 셀 병합</h3>
<table>
<tr>
<th> 1열</th>
<th colspan = "3">2열</th>
<th> 5열</th>
</tr>
<tr>
<td>2행 1열</td>
<td>2행 2열</td>
<td>2행 3열</td>
<td>2행 4열</td>
<td>2행 5열</td>
</tr>
</table>
<p/>
<h3>세로 셀 병합</h3>
<table>
<tr>
<th>1행</th>
<th>1행 2열</th>
</tr>
<tr>
<th rowspan="2">2행</th>
<td>2행 1열</td>
</tr>
<tr>
<td>3행 2열</td>
</tr>
</table>
</body>
</html>
'HTML & CSS' 카테고리의 다른 글
| 블록과 인라인 (0) | 2022.08.29 |
|---|---|
| 멀티미디어 태그 (image, audio, video) (0) | 2022.08.29 |
| 수평선 <hr> / 링크걸기 <a> 태그 (0) | 2022.08.29 |
| HTML 태그와 텍스트 관련 태그 (0) | 2022.08.29 |
| HTML 기본 구조 (0) | 2022.08.29 |