html/css 이용한 웹페이지 이력서 작성
이력서 바로가기
미리보기
html 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>장세빈의 이력서</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://kit.fontawesome.com/acfbc5814d.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrapper">
<h1>장세빈의 홈페이지</h1>
<section id="my_info">
<h2>INFO</h2>
<img src="images/jsb.png" id="장세빈 얼굴 사진">
<table>
<tbody>
<tr id="my_name">
<th>이름</th>
<td>장세빈</td>
</tr>
<tr>
<th>직업</th>
<td>학생</td>
</tr>
<tr>
<th>생년월일</th>
<td>97.06.02</td>
</tr>
<tr>
<th>주거지</th>
<td>부산</td>
</tr>
</tbody>
</table>
</section>
<section id="about">
<h2>ABOUT ME</h2>
<blockquote>
<p class="hello">"안녕하세요. 신입 개발자가 되고 싶은 장세빈입니다."</p>
<p class="hello1">
항상 제가 하는 일들이 사람들에게 좀 더 나은 삶을 주었으면 하였고, 일반적인 일들을 통해서는 그 한계가 명확하다고
느낄 수 있었습니다.
그러던 도중 프로그래밍이라는 것을 접하게 되었고,
프로그래밍을 통해 사람들에게 이로운 서비스를 개발하고 우리의 인생이라는
한정된 시간 안에서 사람들이 시간을 좀 더 가치 있게 쓸 수 있도록 해주고 싶었습니다.
그런 생각이 든 이후, 올 초부터 하루 온 종일 시간을 투자하여 개발 공부를 하고 있습니다.
늦은 만큼 남들보다 더 열심히 개발을 배워가고 있습니다.
</p>
</blockquote>
</section>
<section id="contact">
<h2>CONTACT</h2>
<ul>
<li><i class="fa-solid fa-phone fa-2x"></i><a href="#">010-3910-9087</a></li>
<li><i class="fa-solid fa-envelope fa-2x"></i><a href="https://www.naver.com" target="_blank">bxxn10@naver.com</a></li>
<li><i class="fa-brands fa-facebook fa-2x"></i><a href="https://www.facebook.com">@myfacebook</a></li>
<li><i class="fa-brands fa-blogger fa-2x"></i><a href="https://wkdtpqls.github.io/" target="_blank">@myblog</a></li>
</ul>
</section>
<section id="skills">
<h2>SKILLS</h2>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>Typescript</li>
<li>PHP</li>
<li>Python</li>
</ol>
</section>
<section id="projects">
<h2>PROJECTS</h2>
<ol>
<li>
<h4>프로젝트 1</h4>
<p><a href="http://l.bsks.ac.kr/~p202206020/" target="_blank">Java Script 실습 사이트 </a></p>
<p><a href="http://l.bsks.ac.kr/~p202206020/php/" target="_blank">PHP 실습 사이트 </a></p>
</li>
<li>
<h4>프로젝트 2</h4>
<p><a href="https://wkdtpqls.github.io/" target="_blank">Git Blog</a></p>
<iframe src="https://wkdtpqls.github.io/" width="90%" height="450">Git Blog</iframe>
</li>
<li>
<h4>프로젝트 3</h4>
<iframe width="90%" height="450" src="https://www.youtube.com/embed/7vedHzJu-H0"
title="Youtube video player" frameborder="0"
allow="accelermeter; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</li>
</ol>
</section>
</div>
</body>
</html>
css 코드
@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@700&display=swap');
body{
background-color: #353d47;
color: darkslategray;
font-family: 'Noto Sans KR', sans-serif;
font-size: 15px;
line-height: 30px;
}
section{
background-color: white;
border-radius: 10px;
padding: 40px;
margin-bottom: 10px;
}
.wrapper{
width: 70%;
margin: 20px auto;
}
h1{
display: none;
}
h2,h3{
font-family: 'Noto Sans KR', sans-serif;
}
h2{
margin: 0 0 20px 0;
text-transform: uppercase;
font-size: 18px;
}
#my_info img{
width: 100px;
height: auto;
border-radius: 50px;
margin-right: 40px;
}
table{
display: inline-block;
border-collapse: collapse ;
border-spacing: 0;
vertical-align: top;
}
th{
text-align: left;
padding-right: 20px;
}
th, td{
font-size: 15px;
}
#myname td{
display: block;
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
}
a {
color: inherit;
text-decoration: none;
}
a:hover{
color: rgb(0, 163, 141);
text-decoration: none;
}
ul{
list-style: none;
padding: 0;
}
ul li{
margin-bottom: 4px;
}
ul li::before{
display: inline-block;
width: 20px;
height: 20px;
vertical-align: middle;
margin-right: 10px;
}
/* ul li:nth-child(1)::before{
content: url('../images/ico_mobile.png');
}
ul li:nth-child(2)::before{
content: url('../images/ico_email.png');
}
ul li:nth-child(3)::before{
content: url('../images/ico_facebook.png');
}
ul li:nth-child(4)::before{
content: url('../images/ico_blog.png');
}
*/
#skills ol{
list-style: none;
padding:0;
}
#skills li{
display: inline-block;
background-color: gold;
padding:4px 10px;
border-radius: 32px;
margin:0 8px 8px 0;
}
#skills li::before {
content: "#";
}
#projects ol{
list-style: none;
padding: 0;
}
#projects li{
border-bottom: 1px solid #ddd;
padding-bottom: 20px;
}
#projects li:last-child{
border-bottom: none;
}
#projects video{
width: 100%;
}
#projects a{
background-color:#2f2f2f;
display: inline-block;
color: #ddd;
border-radius: 10px;
padding: 2px 8px;
}
#projects a:hover{
background-color: #d3a10a;
text-decoration: none;
padding: 3px 9px;
transition: padding 0.2s;
}
blockquote{
position: relative;
padding:3rem;
margin-top: 1rem;
}
blockquote::before,
blockquote::after{
content: '';
width: 30px;
height: 30px;
position: absolute;
}
blockquote::before{
border-top: 5px solid rgb(237, 237, 237);
border-left: 5px solid rgb(234, 234, 234);
top:0;
left:0;
}
blockquote::after{
border-bottom: 5px solid rgb(238, 238, 238);
border-right: 5px solid rgb(240, 240, 240);
bottom:0;
right:0;
}
.hello{
font-style: italic;
font-family: 'Nanum Myeongjo', serif;
letter-spacing: 1.2px;
font-size: 16px;
}
.hello1{
font-size: 14.5px;
font-family: 'Noto Sans KR', sans-serif;
}
ol{
list-style: circle;
}
i{
padding-right: 9px;
padding-bottom: 7px;
color: rgb(87, 92, 107);
}
Leave a comment