* 해당 포스트는 연습을 작성자의 연습을 위한 것이므로 코드에 대한 조언은 환영합니다.
<style>
div {
width: 550px;
margin: auto;
}
fieldset {
border: 2px solid pink;
border-radius: 10px;
padding: 10px 0 20px 50px;
}
legend {
font-size: 20px;
color: rgb(255, 99, 125);
font-weight: bold;
}
li {
list-style: none;
line-height: 28px;
}
.chapter {
font-weight: 900;
}
table {
width: 450px;
}
tr,th,td {
padding: 10px 0 10px 10px;
}
th {
background-color: rgb(231, 231, 231);
color: rgb(255, 99, 125);
}
</style>
</head>
<body>
<div class="box1" id="box1">
<fieldset>
<legend>기초 개념</legend>
<li><span class="chapter">1장</span> 자료구조 소개</li>
<li>
<span class="chapter">2장</span> 재귀(자가호출)와 귀납적 사고
</li>
<li><span class="chapter">3장</span> 알고리즘 성능</li>
</fieldset>
<br /><br />
<fieldset>
<legend>프로그래밍 기초</legend>
<li><span class="chapter">4장</span> 자바 기초</li>
</fieldset>
<br /><br />
<fieldset>
<legend>자료구조와 생각의 훈련</legend>
<table>
<tr>
<th>선형 자료구조</th>
<td>
<li><span class="chapter">5장</span> 리스트</li>
<li><span class="chapter">6장</span> 스택</li>
<li><span class="chapter">7장</span> 큐</li>
</td>
</tr>
<tr>
<th>효율적인 자료구조</th>
<td>
<li><span class="chapter">8장</span> 힙</li>
</td>
</tr>
<tr>
<th>색인 자료구조</th>
<td>
<li>
<span class="chapter">9장</span> 색인과 이진 검색트리
</li>
<li><span class="chapter">10장</span> 균형 검색 트리</li>
<li><span class="chapter">11장</span> 해시 테이블</li>
</td>
</tr>
<tr>
<th>관계와 생각의 방법</th>
<td>
<li><span class="chapter">12장</span> 정렬</li>
<li><span class="chapter">13장</span> 그래프</li>
</td>
</tr>
</table>
</fieldset>
</div>
</body>
</html>
'코딩연습 > HTML CSS' 카테고리의 다른 글
| HTML연습 자바수업과정 만들기 (0) | 2023.07.26 |
|---|---|
| HTML연습 포스터 만들기 (0) | 2023.07.26 |
| HTML연습 회원정보가입폼 만들기 (0) | 2023.07.25 |
| HTML연습 회원정보입력폼 만들기 (0) | 2023.07.25 |
| HTML연습 택배요금표 만들기 (0) | 2023.07.25 |