<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>개인정보</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="main_title">학생정보</h1>
<div class="main_contents">
<nav class="local_nav">
<ul>
<li><a href="personal.html">개인정보</a></li>
<li><a href="score.html">성적확인</a></li>
</ul>
</nav>
<section class="local_section">
<label>이름 : <input type="text" value="김동연" readonly></label><br><br>
<label>학번 : <input type="text" value="123456" readonly></label><br><br>
<label>학과 : <input type="text" value="관광학과" readonly></label>
</section>
</div>
</body>
</html>
학생정보
-----TABLE----
<section class="local_section">
<table border="1" class="score_table">
<thead>
<tr>
<th>구분</th>
<th>과목</th>
<th>성적</th>
<th>학점</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">전공필수</td>
<td>전산학개론</td>
<td>3.5</td>
<td>A</td>
</tr>
<tr>
<td>정보구조론</td>
<td>4.3</td>
<td>A</td>
</tr>
<tr>
<td rowspan="2">교양</td>
<td>북한학</td>
<td>2.8</td>
<td>C</td>
</tr>
<tr>
<td>한국 근현대사</td>
<td>3.2</td>
<td>B</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2">성적평균</th>
<td>3.45</td>
<td>B</td>
</tr>
</tfoot>
</table>
</section>
</div>
</body>
</html>
학생정보
| 구분 | 과목 | 성적 | 학점 |
|---|---|---|---|
| 전공필수 | 전산학개론 | 3.5 | A |
| 정보구조론 | 4.3 | A | |
| 교양 | 북한학 | 2.8 | C |
| 한국 근현대사 | 3.2 | B | |
| 성적평균 | 3.45 | B | |
--------------------CSS--------------------------
@charset 'utf-8';
.main_title {
border-top: 1px solid gray;
border-bottom: 1px solid gray;
padding-top: 10px;
padding-bottom: 10px;
margin-bottom: 2px;
}
.main_contents {
display: grid;
grid-template-columns: 200px 1fr;
height: 100%;
}
.local_nav {
border-right: 1px solid gray;
height: 100%;
}
.local_section
{
padding: 10px;
}
table {
text-align: center;
}
-----------------------------------------
@charset 'utf-8';
html, body {
font-size: 16px;
height: 100%;
}
a {
text-decoration: none;
}
CSS파일을 따로 만들어서 관리하면 훨씬 수정하기가 쉽다.
'HTML' 카테고리의 다른 글
| HTML Table 만들기 (0) | 2022.07.29 |
|---|