*{
box-sizing: border-box;
}
body{
background-color: #222;
height: 100%;
}
#container{
position: absolute;
margin-left: -450px;
width: 900px;
height: 100%;
background-color: #fff;
left: 50%;
}
aside{
float: left;
width: 300px;
padding: 20px 50px;
height: 100%;
background: lightgray;
}
aside>div>img{
width: 150px;
border-radius: 100px;
}
#main{
float: right;
padding: 40px;
width: 600px;
height: auto;
}
#portfolio{
list-style: none;
}
#portfolio a{
margin-left: 20px;
text-decoration: none;
color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="../css/port.css">
<title>Document</title>
<style>
thead{
background-color: black;
}
</style>
</head>
<body>
<div id="container">
<!-- 사이드바 -->
<aside>
<div id="namecard">
<img src="../연예인사진/9.jpg" width="200px">
<h1>존잘남</h1>
<p>오늘도 기모링 하자</p>
</div>
<div id="addr">
<p>Seoul Korea</p>
<p>meboongii@nexen.com</p>
</div>
<div id="portfolio">
<h2>portfolio</h2>
<ui>
<li><a href="https://limchard.tistory.com/">tistory</a></li>
<li><a href="https://github.com/Limchard">git-hub</a></li>
</ui>
</div>
</aside>
<div id="main">
<!-- 자기소개 -->
<section>
<h2 class="subtitle"> 경력 소개 </h2>
<p><mark>프론트 앤드(Front-end-WebTech)</mark> 웹에 관심이 많아 공부중입니다<br>
현재 친구와 같이 웹프로젝트 제작중입니다</p><br>
</section>
<!-- 이력서 -->
<section>
<h2>Experience</h2>
<ul>
<li>
프론트 앤드 개발
<ul>
<li>JavaScript 개발</li>
<li>Jquery 개발</li>
<li>Ajax 개발</li>
</ul>
</li>
<li>
백엔드 개발
<ul>
<li>Java</li>
<li>Oracle</li>
<li>Spring</li>
</ul>
</li>
</ul>
</section>
<!-- 학력사항 -->
<section>
<h2>Education</h2>
<table class="table table-striped" style="width: 400px">
<caption><b>학력사항</b></caption>
<thead>
<tr> <!-- 하나의 행 -->
<th>학교</th>
<th>전공</th>
<th>기간</th>
</tr>
</thead>
<tbody>
<tr>
<td>쌍용고등학교</td>
<td>-</td>
<td>1999년 3월 ~ 2002년 2월</td>
</tr>
<tr>
<td>쌍용대학교</td>
<td>컴퓨터공학과</td>
<td>2002년 3월 ~ 2009 년 2월</td>
</tr>
</tbody>
</table>
</section>
</div>
</div>
</body>
</html>
java를 잡아...... 하... 이게 맞나...