반응형
내가 컴공에 다닌다는 것을 자연스럽고 멋있게 어필하는 방법이 뭐가 있을까?
바로 나를 소개하는 페이지 만들기라고 생각한다.
About Me
txxnrd.github.io
이것은 나의 자기소개 페이지이다.
발행하는 방법까지 알아보자.
<!DOCTYPE html>
<html>
<head>
<title>About Me</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* CSS code to style your page */
.center {
display: flex;
justify-content: center;
align-items: center;
}
body {
font-family: Arial, sans-serif;
background-color: #f1f1f1;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
h1 {
font-size: 36px;
margin: 0;
}
h2 {
font-size: 30px;
margin: 0;
}
h3 {
font-size: 20px;
margin: 0;
}
main {
margin: 20px;
padding: 20px;
background-color: #fff;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
p {
font-size: 18px;
line-height: 1.5;
}
img {
max-width: 100%;
height: auto;
}
/* Media query for small devices */
@media only screen and (max-width: 600px) {
header {
padding: 10px;
}
h1 {
font-size: 24px;
}
h2 {
font-size: 22px;
}
h3 {
font-size: 18px;
}
main {
margin: 10px;
padding: 10px;
}
p {
font-size: 16px;
line-height: 1.3;
}
div {
display: flex;
flex-direction: column;
align-items: center;
}
a > img {
height: 80%;
width: 60%;
}
h3 {
margin-top: 10px;
}
ul {
margin-top: 0;
}
a > img {
margin-top: 10px;
}
ul > li {
margin-bottom: 10px;
}
footer {
padding: 10px;
font-size: 14px;
text-align: center;
color: #333;
}
}
</style>
</head>
<body>
<header>
<h1>About Me</h1>
</header>
<main>
<div style="display: flex; align-items: center;">
<div style="flex-shrink: 0; margin-right: 20px;">
<img src="img/profile.jpg" alt="Profile picture" height="200px" width="200px">
</div>
<div>
<h1>여기에다가 소개 멘트</h1>
<p>자기소개해</p>
<hr>
<p>Find more about me in</p>
<div class="center">
페이스북,링크드인,인스타,블로그 등 링크 걸기.
</div>
</div>
</div>
</div>
<h2>Education</h2>
<hr>
<p>자기소개</p>
<h2>Portfolio</h2>
<hr>
<h3>Portfolio 쓰기</h3>
<ul>
<li><p>내용 채우기</p></li>
</ul>
<h2>Research</h2>
<hr>
<h3>쓰세요</h3>
<h2>Contact</h2>
<hr>
<h3>Email</h3>
<ul>
<li>hihihih@naver.com</li>
</ul>
<h3>Phone Number</h3>
<ul>
<li>010-1234-5678</li>
</ul>코드를 올려두었으니, 자신의 기호에 맞게 코드를 바꾸면 된다.
발행은 github.io를 이용하였다. 방법은 다음과 같다.
github에 들어가 New Repositories를 만들어준다.
Repository name에 옆에 있는 repository name에 owner아이디.github.io를 입력해준다. (txxnrd.github.io 형식으로)
add file을 누르고 index.html 및 img 파일을 업로드 해주면
짜잔! 간지나는 나만의 소개 페이지가 완성된다.
잘 보았으면 좋아요라도 꾸욱 눌러주세요~
내 코드를 전부 보려면은 https://github.com/txxnrd/txxnrd.github.io를 방문하세요.
반응형
