안녕하세요ㅎㅎ 코딩을 배운지 몇달밖에 안된 초보입니당.. 처음으로 만들어본 포트폴리오구요 화려하게 만들고싶은데 뭘 어떻게 해야될지 아직 감이 안와서 ㅠㅠ 생각한걸 표현을 못하겠어요... 지금 배운것들로 최대한 이것저것 다 써가면서 만들어봤습니당.. 실력이 좀 더 늘면 다시 만들어봐겠어요.....ㅎㅎ;;; HTML 코드
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Sticky Memo</title>
<script src="랜딩페이지.js" defer></script>
<link rel="stylesheet" href="랜딩페이지.css">
<script src="https://kit.fontawesome.com/3777ee8c9b.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- 상단 메뉴 -->
<header>
<nav class="headA">
<span><a href="#" class="num1">HOME</a></span>
<span><a href="#a1" class="num2">ABOUT</a></span>
<span><a href="#a2" class="num3">SKILL</a></span>
<span><a href="#a3" class="num4">PROJECTS</a></span>
<span><a href="#a4" class="num5">CONTACT</a></span>
<a>
<i class="fa-solid fa-angles-down"></i>
<i class="fa-solid fa-angles-down"></i>
<i class="fa-solid fa-angles-down"></i>
<i class="fa-solid fa-angles-down"></i>
<i class="fa-solid fa-angles-down"></i>
<i class="fa-solid fa-angles-down"></i>
</a>
</nav>
</header>
<!--메인화면-->
<section class="conA" >
<div class="container">
<h1>PORTFOLIO</h1>
<p>안녕하세요 *** 입니다.</p>
<p>제 포트폴리오에 오신것을 환영합니다.</p>
</div>
</section>
<div id="a1"></div>
<!--소개-->
<section class="conB">
<div class="ABOUT">ABOUT</div>
<div class="container">
<div class="Img"></div>
<div class="cover">
여기에 소개글 작성
</div>
</div>
</section>
<div id="a2"></div>
<!--스킬-->
<section class="conC">
<div class="SKILL">SKILL</div>
<div class="container">
<div class="text">
<h1 class="HTML">HTML</h1>
<div class="HTMLImg"></div>
</div>
<div class="text">
<h1 class="Java">Java</h1>
<div class="JavaImg"></div>
</div>
<div class="text">
<h1 class="Python">Python</h1>
<div class="PythonImg"></div>
</div>
<div class="text">
<h1 class="SQL">SQL</h1>
<div class="SQLImg"></div>
</div>
<div class="text">
<h1 class="CSS">CSS</h1>
<div class="CSSImg"></div>
</div>
<div class="text">
<h1 class="JavaScript">JavaScript</h1>
<div class="JavaScriptImg"></div>
</div>
</div>
</section>
<div id="a3"></div>
<!--작업-->
<section class="conD">
<div class="PROJECTS">PROJECTS</div>
<div class="container">
<div><img src="../Resource/NumberPuzzle.gif" class="Img"></div>
<div class="Project">
<h1>01. NumberPuzzle</h1>
<h2>내용</h2>
<p>
START버튼 클릭 시
랜덤 숫자들이 칸에 배치되고
그 숫자들을 순서대로 빠르게 찾아보는 간단한 게임입니다.
</p>
<h2>참여인원</h2>
<p>1 명</p>
<h2>개발기간</h2>
<p>22.10.22 ~ 22.10.23</p>
<div class="Link"><a href="#">LINK</a></div>
</div>
</div>
<div class="container">
<div><img src="../Resource/PORTFOLIO.gif" class="Img"></div>
<div class="Project">
<h1>02. PORTFOLIO</h1>
<h2>내용</h2>
<p>
포트폴리오 입니다.
</p>
<h2>참여인원</h2>
<p>1 명</p>
<h2>개발기간</h2>
<p>22.10.29 ~ 22.10.30</p>
<div class="Link"><a href="#">LINK</a></div>
</div>
</div>
<div class="container">
<div><img src="../Resource/1.jpg" class="Img"></div>
<div class="Project">
<h1>03. 준비중</h1>
<h2>내용</h2>
<p>
-
</p>
<h2>참여인원</h2>
<p>-</p>
<h2>개발기간</h2>
<p>-</p>
<div class="Link"><a href="#">LINK</a></div>
</div>
</div>
</section>
<!--연락처-->
<nav class="footA">
<div class="CONTACT">CONTACT</div>
<div class="tel">
<ul>
<li><i class="fa-solid fa-envelope"></i> 이메일</li>
<li><i class="fa-solid fa-phone"></i> 폰번호</li>
</ul>
</div>
</nav>
<div class="footD">©2022 본인이름. All rights reserved.</div>
<div id="a4"></div>
</body>
</html> CSS 코드
@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Hahmlet:wght@500&display=swap');
/* 기본 설정: 페이지 전체 */
body {
margin: 0;
}
/*-----------------------------------------------------------------*/
/*------------------------ 메뉴칸 -------------------------*/
/*-----------------------------------------------------------------*/
.headA {
width: 400px;
justify-content: center;
top: -145px;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
background-color: rgba(235, 246, 255, 0.72);
position: fixed;
display: block;
border-radius: 15px;
transition-duration: 0.7s;
cursor : pointer;
font-family: 'Cinzel', serif;
z-index: 99;
}
.headA:hover {
transition-duration: 0.7s;
top: 190px;
display: block;
}
.headA > span > a {
font-weight: 1000;
font-size: 1.8rem;
border-radius: 15px;
transition-duration: 0.5s;
display: block;
color: #000000;
}
.headA > span > a:hover{
text-align: center;
color: #ffffff;
cursor : pointer;
border-radius: 15px;
box-shadow: 1px 1px 5px 1px black;
letter-spacing: 1rem;
background-color: rgb(0, 0, 0);
transition-duration: 0.5s;
animation: Line 0.8s infinite;
}
.headA a {
display: block;
padding: 15px;
color: inherit;
font-size: 14px;
text-decoration: none;
}
.headA i{
animation: flash 3s infinite;
}
.conA > .container{
left: 100px;
/*display: flex;*/
}
/*-----------------------------------------------------------------*/
/*------------------------ 메인 -------------------------*/
/*-----------------------------------------------------------------*/
.conA {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url(../Resource/2-1.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
min-width: 450px;
color: #FFF;
}
.conA > .container {
width: 100%;
height: 600px;
text-align: center;
justify-content: center;
display: inline-block;
box-shadow: 10px 10px 20px black;
text-shadow: 3px 3px 20px rgba(59, 59, 59, 0.8);
background-color: rgba(206, 206, 206, 0.84);
animation: Line 2s infinite;
}
.conA > .container > h1 {
color: #20273b;
font-size: 10rem;
margin-bottom: -1px;
font-family: 'Cinzel', serif;
}
.conA > .container > p{
margin-bottom: -50px;
color: #20273b;
font-size: 2.5rem;
font-weight: 1000;
font-family: 'Hahmlet', serif;
}
/*-----------------------------------------------------------------*/
/*------------------------ 소개 -------------------------*/
/*-----------------------------------------------------------------*/
.conB {
background-color: #dbe3e7;
border-top: 5px solid #99b5b9;
}
.conB > .ABOUT {
padding-top: 2%;
position: relative;
font-size: 2rem;
border-bottom: 2px solid black;
text-align: center;
font-family: 'Cinzel', serif;
}
.conB > .container {
padding: 10%;
display: flex;
justify-content: center;
}
.conB > .container > .Img {
position: relative;
width: 600px;
height: 400px;
margin-right: 5%;
display: inline-block;
border-radius: 5px;
background-position: center;
background-size: cover;
background-image: url(../Resource/1.jpg);
}
.conB > .container > .cover{
width: 500px;
display: inline-block;
font-size: 25px;
font-family: 'Hahmlet', serif;
}
/*-----------------------------------------------------------------*/
/*------------------------ 기술 -------------------------*/
/*-----------------------------------------------------------------*/
.conC {
background-color: #bcc6cb;
}
.conC > .SKILL {
padding-top: 2%;
position: relative;
font-size: 2rem;
border-bottom: 2px solid black;
text-align: center;
font-family: 'Cinzel', serif;
}
.conC > .container{
padding: 15%;
justify-content: center;
gap: 1rem;
display: flex;
flex-wrap: wrap;
}
.conC > .container > .text > div{
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 15rem;
height: 15rem;
border: 0.3rem solid #dbe3e7;
transition-duration: 0.3s;
opacity: 0.5;
}
.conC > .container > .text > div:hover{
transition-duration: 0.5s;
animation: Line 2s infinite;
opacity: 1;
}
.conC > .container > div > h1{
color: #bbc4ca;
text-align: center;
font-size: 1.7rem;
width: 15.5rem;
height: 2rem;
border-radius: 5px;
background-color: #4b5e6e;
font-family: 'Cinzel', serif;
}
.conC > .container > .text > div > p {
font-family: 'Hahmlet', serif;
}
.conC > .container > div > .HTMLImg{
background-image: url(../Resource/HTML.png);
}
.conC > .container > div > .JavaImg{
background-image: url(../Resource/Java.png);
}
.conC > .container > div > .PythonImg{
background-image: url(../Resource/Python.png);
}
.conC > .container > div > .SQLImg{
background-image: url(../Resource/MySQL.png);
}
.conC > .container > div > .CSSImg{
background-image: url(../Resource/CSS.png);
}
.conC > .container > div > .JavaScriptImg{
background-image: url(../Resource/JavaScript.png);
}
/*-----------------------------------------------------------------*/
/*------------------------ 작업 -------------------------*/
/*-----------------------------------------------------------------*/
.conD {
background-color: #d9e1e6;
}
.conD > .PROJECTS {
padding-top: 2%;
position: relative;
font-size: 2rem;
border-bottom: 2px solid black;
text-align: center;
font-family: 'Cinzel', serif;
}
.conD > .container{
padding: 10%;
display: flex;
justify-content: center;
gap: 10rem;
}
.conD > .container > .Project {
position: relative;
width: 35rem;
display: grid;
font-family: 'Hahmlet', serif;
grid-template-columns: repeat(1, 1fr);
overflow: hidden;
}
.conD > .container > div > .Img {
box-shadow: 3px 3px 20px black;
position: relative;
width: 40rem;
height: 30rem;
display: inline-block;
border-radius: 5px;
background-position: center;
background-size: cover;
}
.conD > .container > .Project > div {
height: 35px;
padding-top: 10px;
text-align: center;
border-radius: 5px;
color: white;
background-color: rgba(32, 39, 60, 0.59);
transition-duration: 0.5s;
}
.conD > .container > .Project > div:hover {
background-color: #20273b;
transition-duration: 0.5s;
cursor: pointer;
}
.conD > .container > .Project > h1 {
display: block;
margin-top: 0;
margin-bottom: 5px;
font-size: 3rem;
}
.conD > .container > .Project > h2 {
display: inline-block;
margin-bottom: 5px;
margin-top: 0;
}
.conD > .container > .Project > p{
display: block;
margin-top: 0;
}
.conD > .container > .Project > .Link > a {
letter-spacing: 0.5rem;
font-weight: 1000;
font-size: 1.5rem;
color: #d7dfe5;
font-family: 'Cinzel', serif;
text-decoration: none;
}
/*-----------------------------------------------------------------*/
/*------------------------ 연락 -------------------------*/
/*-----------------------------------------------------------------*/
.footA {
background-color: #20273b;
}
.footA > .CONTACT {
color: white;
padding-top: 2%;
position: relative;
font-size: 2rem;
border-bottom: 2px solid #ffffff;
text-align: center;
font-family: 'Cinzel', serif;
}
.footA > .tel {
display: flex;
justify-content: center;
padding: 7%;
}
.footA > .tel > ul {
justify-content: center;
list-style: none;
}
.footA > .tel > ul > li {
color: white;
font-weight: 1000;
font-size: 1.7rem;
font-family: 'Cinzel', serif;
}
.footD {
color: white;
font-size: 0.8rem;
text-align: center;
background-color: #20273c;
padding-bottom: 3%;
}
@media (max-width: 767px){
.conA > .container > h1 {
font-size: 4rem;
padding-top: 30%;
}
.conA > .container > p{
font-size: 1.5rem;
margin-bottom: 0px;
}
.conB > .container > .Img {
width: 300px;
height: 200px;
}
.conB > .container > .cover{
font-size: 1rem ;
}
.conC > .container > .text > div{
width: 7rem;
height: 7rem;
}
.conC > .container > div > h1{
font-size: 1.5rem;
width: 7rem;
height: 1.7rem;
}
.conC > .container{
display: grid;
gap: 0.5rem;
grid-template-columns: repeat(3, 1fr);
}
.conD > .container{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
}
.conD > .container > div > .Img {
width: 25rem;
height: 18rem;
}
.conD > .container > .Project > div:hover {
background-color: #20273b;
transition-duration: 0.5s;
cursor: pointer;
}
.conD > .container > .Project > h1 {
font-size: 1.5rem;
}
.conD > .container > .Project > h2 {
font-size: 1rem;
}
.conD > .container > .Project > p{
font-size: 0.8rem;
}
.conD > .container > .Project > .Link > a {
font-size: 1rem;
}
.footA > .tel > ul > li {
font-size: 1.3rem;
}
}
/*-----------------------------------------------------------------*/
/*------------------------ 애니메이션 ----------------------*/
/*-----------------------------------------------------------------*/
@keyframes Line {
from{
border: 0.3rem solid rgb(153, 181, 185);
}
70%{
border: 0.3rem solid rgb(76, 95, 110);
}
30%{
border: 0.3rem solid rgb(153, 181, 185);
}
to{
border: 0.3rem solid rgb(188, 198, 203);
}
}
@keyframes flash {
from{
color: black;
}
50%{
color: white;
}
to{
color: #000000;
}
} 포트폴리오 설명 1. 배치는 홈 > 소개 > 기술 > 작업 > 연락 순으로 배치 해봤구요 2. 또 위에 숨겨진 메뉴버튼을 만들어서 마우스 이동시 튀어나오게 만들었고, 메뉴 클릭 시 그 위치로 이동(링크로 해서 약간 어색..자연스럽게 이동하는걸 아직 몰라서..)합니다ㅎㅎ 3. 모바일 반응형으로 만들어 보긴 했는데 .. 어색.. 4. 작업 한것들을 gif로 추가해서 프로젝트 목록에 배치
질문과 지적 환영합니다!!~!~!~! 혹시나 필요하신거 있시면 댓글남겨주세용~
