728x90
SMALL
스파르타코딩클럽의 도움을 받긴 하였지만, 처음으로 나만의 개인 프로필 링크를 만들어보았다.
신기하기도 하고 재미도 있었다.
앞으로 프론트엔드 개발자가 되기 위해 더 노력해서 더 나은 프로젝트를 구현해보겠다.
링크 : https://yeomboyeon.github.io/Javascript_project_profile/
<!DOCTYPE html>
<html>
<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">
<meta property="og:title" content="염보연 - 86년 12월 21일">
<meta property="og:description" content="프론트엔드 개발자">
<meta property="og:image" content="캡처.PNG">
<title>프론트엔드 개발자 염보연</title>
<style>
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
* {
font-family: "Pretendard",serif;
}
body {
background-color: blueviolet;
}
.profile {
width: 100px;
height: 100px;
background-color: pink;
border-radius: 100px;
border: 2px solid white;
background-image: url(캡처.PNG);
background-position: center;
background-size: cover;
}
.main {
color: white;
font-size: 20px;
margin-top: 15px;
margin-bottom: 0px;
}
.sub {
color: white;
font-size: 15px;
margin-top: 5px;
margin-bottom: 30px;
}
.wrap {
width: 300px;
margin: 50px auto 0px auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.wrap > a {
width: 300px;
height: 50px;
background-color: white;
border-radius: 8px;
margin-bottom: 10px;
font-size: 16px;
font-weight: bold;
color: blueviolet;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-decoration: none;
box-shadow: 2px 2px 2px 2px black;
}
.wrap > a:hover{
background-color:#f2f2f2;
font-size: 18px;
}
</style>
</head>
<body>
<div class="wrap">
<div class ="profile"></div>
<h1 class ="main">프론트엔드 개발자</h1>
<p class ="sub">염보연</p>
<a target="_blank" href="https://yeomboyeon.tistory.com/">개인 블로그(티스토리)</a>
<a target="_blank" href="https://www.notion.so/537bd427f44743b5bc10a6e8a6b396a3/">Notion 노트</a>
<a target="_blank" href="https://codepen.io/JungSungHun/full/bGLQGNe/">Front-end 수업</a>
<a target="_blank" href="https://codepen.io/woooyoung/full/popONZJ">Java 수업(1)</a>
<a target="_blank" href="https://codepen.io/woooyoung/full/VwQpxvE">Java 수업(2)</a>
<a target="_blank" href="https://github.com/">github</a>
<a target="_blank" href="https://codepen.io/your-work/">codepen</a>
<a target="_blank" href="https://programmers.co.kr/?utm_source=google&utm_medium=cpc&utm_campaign=brand_prgms_pc&gclid=Cj0KCQjwxtSSBhDYARIsAEn0thTMyMj0XsgE-F1fh98Cmth-KGp4IrWX8h2-39d8D-ASusz9TMHu-1QaArz9EALw_wcB">프로그래머스</a>
<a target="_blank" href="https://studio.code.org/users/sign_in">Code.org</a>
<a target="_blank" href="https://www.typingclub.com/sportal/">타이핑클럽(영타연습)</a>
</div>
</body>
</html>728x90
LIST