- 2024.02~2024.03 진행
INTRO
2024년 2월 10일, 골절로 독일 방문학생 일정이 3월 초에서 5월 초로 미뤄졌다. 퇴원해서 시간을 유용히 보낼 방법을 찾다가 평소에 관심있던 Webprogramming에 도전해보기로 했다. 처음부터 혼자 하기보다는 코딩과정의 전반적 흐름을 알고 싶어 유튜브 코딩강의를 참고했다.
참고한 코딩강의는 성균관대생의 웹프로그래밍 나만의 포트폴리오 만들기 강의였다. 대단하다.. 나도 나중에 실력을 키워서 직접 강의를 해 봐야지 !
Code
기본적인 html코드 뿐만 아니라 글자에 마우스 커서를 올려놓으면 글자 색이 변하는 등 효과를 낼 수 있는 CSS 코드도 활용했다. 후에 더 구체화시켜서 정말 나의 포트폴리오 사이트로 활용해야겠다.
코드를 첨부하겠다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">
<title>INDEX</title>
</head>
<body>
<div class="frame">
<nav class="navigator">
<h3 class="site-name">HYEJUNlog</h3>
<ul>
<li><a class="nav-menu" href="index.html"> WORK </a></li>
<li><a class="nav-menu" href="info.html"> INFO </a></li>
</ul>
</nav>
<div class="profile-section">
<img id="profile-picture" src="profile.jpg">
<div class="introduction">
<h2>ABOUT ME</h2>
<p> 컴퓨터공학을 전공하지만 디자인, 마케팅에 관심이 많으며 취미는 독서이기에 문이과 통합형 인재를 꿈꿉니다. 향후 진로에 문과적, 예체능적 능력도 활용하려 해요. UI.UX 디자인에 관심이 생겨 Front-End 를 공부중입니다. 끈기와 인내심, 꾸준함은 제 대표 장점입니다. 함께 세상을 바라보는 색다른 시선을 표현해봐요!</p>
<h2>CAPABLITY</h2>
<p id="capablity">UX Research<br>UX Research<br>UI Prototyping<br>Publishing with html/css</p>
</div>
</div>
<h5 class="value-menu">MY VALUES</h5>
<div class="value-section">
<div class="value">
<img class="value-icon" src="free-icon-cat-14257452.png">
<div class="value-intro">
<h4 class="value-name">CREATIVITY</h4>
<p class="value-exp">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non. Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa. Commodo odio aenean sed adipiscing diam donec adipiscing tristique. </P>
</div>
</div>
<div class="value">
<img class="value-icon" src="free-icon-pet-care-14257508.png">
<div class="value-intro">
<h4 class="value-name">RESPONSIBILITY</h4>
<p class="value-exp">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non. Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa. Commodo odio aenean sed adipiscing diam donec adipiscing tristique. </P>
</div>
</div>
<div class="value">
<img class="value-icon" src="free-icon-dog-grooming-14257474.png">
<div class="value-intro">
<h4 class="value-name">COMMUNICATION</h4>
<p class="value-exp">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non. Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa. Commodo odio aenean sed adipiscing diam donec adipiscing tristique. </P>
</div>
</div>
</div>
</div>
<footer class="footer">
<h3 class="contact"> CONTACT ME</h3>
<div class="links">
<a class="blog" href="https://blog.naver.com/khjcoco3387">BLOG</a>
<a class="instagram" href="https://www.instagram.com/hye.__.jun/">INSTAGRAM</a>
</div>
<p class="footer-comment"><br>Feel free to contact me!<br>Icons made by <a href="https://www.freepik.com/" title="Freepik" > Freepik </a>from
<a href="https://www.flaticon.com/" title="Flaticon"> flaticon </a></p>
</footer>
</body>
</html>
info.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>INFO</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">
</head>
<body>
<div class="frame">
<nav class="navigator">
<h3 class="site-name">HYEJUNlog</h3>
<ul>
<li><a class="nav-menu" href="index.html">WORK</a></li>
<li><a class="nav-menu" href="info.html">INFO</a></li>
</ul>
</nav>
<div class="dashboard">
<h1 class="korean-comment">안녕하세요! 제 이름은 <a class="sample">hyejun</a> <br>
<a class="highlight type1">세상</a>을 바라보는 <a class="highlight type2">색다른 시선</a>을 가진 <a class="highlight type3">UI.UX 디렉터</a><br>
를 꿈꿉니다.</h1>
<p class="english-comment">Hello. I'm Hyejun Koo, an aspiring UI.UX designer who sees the world from a different perspective.<br>
Let's change the stereotypes and think outside the box.
</p>
</div>
<h5 class="recent-menu">RECENT WORKS</h5>
<div class="recent-works">
<div class="article" id="arti1">
<img class="thumbnail" id="thumb1" src="thumbnail.png">
<div class="article-info">
<h3 class="article-name" id="name1">교통약자를 위한 지도앱, 모두의 지도 설계
</h3>
<p class="article-comment">2023년 1학기 '소프트웨어융합창의설계' 수업에서 앱 개발설계 팀과제를 수행했다.
교통약자를 위한 지도앱 설계를 하여 스토리보드, 프로토타입, 실연영상을 직접 제작했고 중간, 기말 영어PT에서 준수한 성적을 거두었다.
</p>
<a class="more">More ></button>
</div>
</div>
<div class="article" id="arti2">
<div class="article-info">
<h3 class="article-name" id="name2">교통약자를 위한 지도앱, 모두의 지도 설계
</h3>
<p class="article-comment">2023년 1학기 '소프트웨어융합창의설계' 수업에서 앱 개발설계 팀과제를 수행했다.
교통약자를 위한 지도앱 설계를 하여 스토리보드, 프로토타입, 실연영상을 직접 제작했고 중간, 기말 영어PT에서 준수한 성적을 거두었다.
</p>
<a class="more">More ></button>
</div>
<img class="thumbnail" id="thumb2" src="thumbnail.png">
</div>
</div>
<footer class="footer">
<h3 class="contact"> CONTACT ME</h3>
<div class="links">
<a class="blog" href="https://blog.naver.com/khjcoco3387">BLOG</a>
<a class="instagram" href="https://www.instagram.com/hye.__.jun/">INSTAGRAM</a>
</div>
<p>Feel free to contact me!</p>
</footer>
</div>
</body>
</html>
PORTFOLIO.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PORTFOLIO</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">
</head>
<body>
<div class="frame">
<nav class="navigator">
<h3 class="site-name">HYEJUNlog</h3>
<ul>
<li><a class="nav-menu" href="index.html"> WORK </a></li>
<li><a class="nav-menu" href="info.html"> INFO </a></li>
</ul>
</nav>
<div class="dashboard"></div>
<footer class="work footer"></footer>
</div>
</body>
</html>style.css
body{
background-color:#EFE7E3;
}
.frame{
margin: 30px 150px;
display: flex;
flex-direction: column;
}
/*navigater*/
.navigator{
display: flex;
flex-direction: row;
justify-content: space-between;
}
li{
display: inline;
align-self: center;
margin:0;
margin-left: 15px;
}
ul{
margin:0;
}
.site-name{
margin:0;
font-family: 'Montserrat',sans-serif;
font-size: 24px;
color: #C2B4AB;
}
.nav_menu{
font-family: 'Montserrat',sans-serif;
font-weight:400;
font-size: 16px;
}
.nav-menu{
color: black;
text-decoration: none;
}
.nav-menu:hover{
color: white;
transition: 0.3s;
}
/*dashboard*/
.dashboard{
display: flex;
flex-direction: column;
margin-top:100px;
}
.korean-comment{
font-family: "Noto Sans KR", sans-serif;
font-weight:500;
font-size:50px;
-webkit-text-stroke: 1px black;
}
.sample{
background-color: pink;
}
.sample:hover{
background-color: transparent;
color:white;
-webkit-text-stroke: 1px black;
transition: none;
}
.highlight{
background-color: transparent;
color:white;
-webkit-text-stroke: 1px black;
transition: none;
}
.highlight:hover{
background-color: pink;
transition: none;
color: black;
}
.type1:hover{
background-color: yellowgreen;
}
.type2:hover{
background-color: rgb(147, 171, 239);
}
.type3:hover{
background-color: rgb(171, 98, 202);
}
.english-comment{
font-family: 'Noto Sans KR', sans-serif;
font-weight: 100;
font-size: 15px;
font-style: italic;
letter-spacing: 0.3px;
}
/*recent works*/
.recent-menu{
font-family :'Montserrat',sans-serif;
font-size:15px;
font-weight:700;
color:#C2B4AB;
text-align: right;
margin-top: 100px;
}
/*footer*/
.footer{
display:flex;
flex-direction: column;
align-items:center;
margin-bottom:200px;
}
.contact{
font-family: 'Montserrat', sans-serif;
font-size:50px;
font-weight:700;
border-top:1px solid;
color: rgb(147, 171, 239);
margin-bottom:30px;
border: bottom 3px solid black;
}
.links>a{
font-family: 'Montserrat', sans-serif;
font-size:30px;
font-weight:500;
margin-left:15px;
color: black;
text-decoration: none;
}
.links>a:hover{
color: white;
transition: 0.3s;
}
.footer>p{
font-family: 'Noto Sans KR', sans-serif;
font-weight: 100;
font-size: 15px;
font-style: italic;
margin:0;
margin-top:10px;
}
/*profile-section*/
.profile-section{
display:flex;
flex-direction: row;
justify-content: center;
align-items:flex-start;
margin: 100px 100px;
}
#profile-picture{
width:400px;
margin-right:60px;
}
.introduction>h2{
margin:0px;
font-family:'Montserrat',sans-serif;
font-size:35px;
}
.introduction>p{
font-family:'Noto Sans KR', sans-serif;
font-weight:300;
font-size: 16px;
margin-bottom:40px;
}
#capability{
font-family:'Montserrat', sans-serif;
font-weight:400;
font-size:20px;
font-style:italic;
line-height:30px;
}
/*value section*/
.value-menu{
font-family: 'Montserrat', sans-serif;
font-size:35px;
margin:30px 100px;
}
.value-section{
display:flex;
flex-direction:column;
justify-content:flex-start;
align-content:center;
margin: 100px 150px;
margin-top:20px;
}
.value{
display:flex;
flex-direction:row;
margin-bottom:40px;
align-items:center;
}
.value-icon{
width:100px;
height:100px;
padding:15px;
border:2px solid #C2B4AB;
border-radius:100px;
padding: 15px;
margin-right: 50px;
}
.value-intro{
margin-left:30px;
}
.value-name{
font-family:'Montserrat',sans-serif;
font-weight:700px;
margin-top:0px;
margin-bottom:5px;
}
/*footer section*/
.footer-comment{
text-align:center;
}
a[title="Freepik"]{
color: black;
text-decoration: underline;
}
a[title="Flaticon"]{
color: black;
text-decoration: underline;
}
a[title="Freepik"]:hover{
color: rgb(138, 184, 203);
text-decoration: underline;
}
a[title="Flaticon"]:hover{
color:rgb(138, 184, 203);
text-decoration: underline;
}
/*RECENT-WORKS*/
.recent-works{
display:flex;
flex-direction:column;
}
.article{
display:flex;
flex-direction:row;
margin-bottom: 140px;
}
.thumbnail{
width: 300px;
height: 400px;
margin-left: 50px;
margin-right: 50px;
}
.article-info{
margin: 0px 20px;
}
.article-name{
font-family: 'Noto Sans KR', sans-serif;
font-size: 30px;
margin-top:0px;
margin-bottom: 30px;
}
.article-name:hover{
color:pink;
-webkit-text-stroke:1px black;
transition: 0.3s;
}
.article-comment{
font-family: 'Noto Sans KR', sans-serif;
font-size: 16px;
font-weight:200;
}
.more{
margin-top: 50px;
margin-left: 10px;
width:content;
height: content;
font-family:'Montserrat',sans-serif;
font-size:12px;
background-color:transparent;
border:none;
outline: none;
padding:0px;
}
#name1{
font-size:40px;
position: relative;
right:100px;
margin-bottom: 50px;
}
#name2{
font-size:40px;
position: relative;
left:320px;
margin-bottom: 50px;
}
#name2:hover{
color:skyblue;
-webkit-text-stroke:1px black;
}'프로젝트 > 개인프로젝트' 카테고리의 다른 글
| [개인프로젝트] 감각 MBTI 테스트 (JAVA swing 이용) (5) | 2025.01.22 |
|---|