반응형 테이블을 만들기 위해서는 CSS 미디어 쿼리를 사용하여 화면 크기에 따라 테이블의 스타일을 조정해야 합니다. 아래는 초보자가 이해할 수 있도록 단계별로 설명한 코드입니다.
HTML 파일 생성:
HTML 파일을 생성하고 테이블을 작성합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>반응형 테이블</title>
</head>
<body>
<table>
<thead>
<tr>
<th>이름</th>
<th>나이</th>
<th>직업</th>
</tr>
</thead>
<tbody>
<tr>
<td>홍길동</td>
<td>30</td>
<td>의사</td>
</tr>
<tr>
<td>김철수</td>
<td>25</td>
<td>교사</td>
</tr>
<!-- 나머지 데이터 추가 -->
</tbody>
</table>
</body>
</html>
CSS 스타일 시트 생성:
CSS 스타일 시트 파일(styles.css)을 생성하고 테이블의 스타일을 조정합니다.
/* styles.css */
table {
width: 100%;
border-collapse: collapse;
margin: 20px;
}
table, th, td {
border: 1px solid #ccc;
}
th, td {
padding: 10px;
text-align: center;
}
/* 미디어 쿼리: 화면 폭이 600px 이하일 때 테이블 스타일 변경 */
@media screen and (max-width: 600px) {
table, th, td {
width: 100%;
display: block;
}
}
결과 확인:
웹 브라우저에서 HTML 파일을 열어서 반응형 테이블을 확인합니다.
브라우저를 줄여보면 테이블이 변 할 겁니다.
'HTML 예제' 카테고리의 다른 글
| 실시간 통계: JavaScript로 실시간 통계 표시 (0) | 2023.12.06 |
|---|---|
| 도넛 차트: JavaScript와 HTML5 <canvas>로 도넛 차트 생성 (0) | 2023.12.06 |
| 동적 그래프: JavaScript와 HTML5 <canvas>로 동적 그래프 생성 (0) | 2023.12.06 |
| 타이핑 효과: JavaScript로 타이핑 효과 구현 (0) | 2023.12.06 |
| 팝아트 이미지: 이미지를 팝아트 스타일로 변경 (0) | 2023.12.06 |
