혹시 몰라 코드공유를 해본다.
<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
</head>
<style>
body{
margin: 0;
font-family: 'Nanum Pen Script', cursive;
}
ul{
list-style: none;
}
a{
text-decoration: none;
color: black;
}
nav{
position: fixed;
width: 100%;
height: 100px;
background: #acdbc9;
display: flex;
align-items: center;
justify-content: space-between;
top: 0;
left: 0;
right: 0;
}
.logo{
font-size: 40px;
}
.navbar_manu{
display: flex;
padding: 0;
margin-left: 20px;
}
.navbar_manu li{
padding: 8px 25px;
font-size: 30px;
}
.icon{
display: flex;
}
.icon li{
padding: 10px;
font-size: 30px;
}
.logos{
color: white;
}
.navbar_manu li:hover{
background: yellowgreen;
border-radius: 30%;
transition: 0.5s;
}
/* 이미지 */
/* first */
.frist{
padding-top: 150px;
width: 100%;
height: 600px;
}
.img{
background: url(KakaoTalk_20220101_210543362.jpg);
width: 300px;
height: 300px;
background-size: cover;
border-radius: 50%;
margin: 0 auto;
margin-top: 30px;
text-align: center;
}
/* about */
.about{
width: 100%;
height: 900px;
background: #d8e8c2;
}
.about_me h1{
text-align: center;
padding-bottom: 20px;
padding-top: 50px;
font-size: 40px;
}
.about_me p{
text-align: center;
font-size: 20px;
}
.about_me{
width: 600px;
height: 300px;
margin: 0 auto;
padding-bottom: 30px;
}
.about_Skils{
display: flex;
width: 700px;
margin: 0 auto;
}
.about_job2{
margin : 0 auto;
}
.about_img{
margin-top: 30px;
background: white;
width: 150px;
height: 150px;
border-radius: 50%;
text-align: center;
margin-bottom: 30px;
float: left;
}
.about_img i{
padding: 30px;
font-size: 80px;
}
.my_Jobs{
margin-top: 50px;
font-size: 20px;
font-weight: bold;
margin-left: 20px;
}
/* skills */
.skills{
width: 100%;
height: 800px;
background: #fdd2b5;
}
.skills_intro{
width: 600px;
height: 300px;
margin: 0 auto;
}
.skills_intro h1{
padding-top: 60px;
text-align: center;
font-size: 40px;
margin: 0px;
}
.skills_intro h2{
text-align: center;
font-size: 30px;
}
.skills_intro p {
text-align: center;
font-size: 20px;
}
.skillset{
width: 800px;
background: grey;
display: block;
margin: 0 auto;
}
.skillsset__left{
}
/* my work */
.main_box{
width: 100%;
height: 325px;
margin: 0 auto;
border: 3px double black;
}
.frist_box{
width: 100%;
height: 150px;
}
.box {
width: 220px;
height: 140px;
margin: 10px;
margin-right: 18px;
background: url(/CSS/7.배경/images/sky.jpg);
background-size: 100%;
float: left;
border: 1px solid black;
}
.second_box{
width: 100%;
height: 150px;
}
.box2{
width: 220px;
height: 140px;
margin: 10px;
margin-right: 18px;
background: url(/CSS/7.배경/images/sky.jpg);
background-size: 100%;
float: left;
border: 1px solid black;
}
/* footer */
footer{
background: #acdbc9;
width: 100%;
height: 200px;
text-align: center;
}
.name{
display: inline-block;
margin: 0 auto;
}
.name p{
text-align: center;
font-size: 30px;
font-weight: bold;
}
.footer_icon{
}
.footer_icon li{
margin: 0 3px;
font-size: 30px;
}
</style>
<body>
<!-- navbar -->
<nav>
<div class="logo">
<i class="fas fa-dragon logos"></i>
<a href="#">Dargon</a>
</div>
<!-- 일렬 정렬을 위해 div 태그 대신 ul태그 -->
<ul class="navbar_manu">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#"> </a>My Work</li>
<li><a href="#">Content</a></li>
</ul>
<i class="fas fa-caret-square-down"></i>
<ul class="icon">
<li><i class="fab fa-facebook"></i></li>
<li><i class="fab fa-instagram-square"></i></li>
</ul>
</nav>
<!-- home -->
<section id="home">
<div class="frist">
<div class="img">
</div>
<p style="font-weight: bold; font-size: 30px; text-align: center;">Hello I'm SeokHuyn</p>
<p style="font-size: 20px;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor sed id aspernatur ullam deleniti neque ea necessitatibus quos a, ipsum sapiente qui! Cupiditate optio nam, sed ut fugiat numquam perferendis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod beatae at laboriosam officia sint, dolore ipsa eum ipsum voluptate non ex culpa doloribus cum tempore provident illum soluta, architecto magnam.
</p>
</div>
</section>
<!-- about -->
<section class="about" id="about">
<div class="about_me">
<h1>About me</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis aperiam veritatis totam unde beatae quos vel, quo ab obcaecati consectetur hic ipsa culpa repudiandae praesentium sapiente rerum expedita fugit atque?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed nobis reprehenderit delectus a consequuntur dolorem incidunt suscipit quibusdam aperiam omnis vitae ipsa possimus iste, dicta iure asperiores ea, illum deleniti!
</p>
</div>
<div class="about_Skils">
<div class="about_job1">
<div class="about_img">
<i class="fab fa-html5"></i>
</div>
<h3 style="text-align: center;">Front end</h3>
<p style="text-align: center;"> 프론트 엔드 스킬 들어갈꺼임</p>
</div>
<div class="about_job2">
<div class="about_img">
<i class="fas fa-server"></i>
</div>
<h3 style="text-align: center;">Back end</h3>
<p style="text-align: center;"> 프론트 엔드 스킬 들어갈꺼임</p>
</div>
<div class="about_job3">
<div class="about_img">
<i class="fas fa-window-restore"></i>
</div>
<h3 style="text-align: center;">Other</h3>
<p style="text-align: center;"> 프론트 엔드 스킬 들어갈꺼임</p>
</div>
</div>
<div class="my_Jobs">
<div >
<div>학교이미지</div>
<p>전공 컴퓨터 공학 재학기간 2021.08.01 ~ now (3학년)</p>
</div>
<div>
<div>아드리엘 사진</div>
<p>전공 컴퓨터 공학 재학기간 2021.08.01 ~ now (3학년)</p>
</div>
</div>
</section>
<!-- skills -->
<section id="skills" class="skills">
<div class="skills_intro">
<h1>Skills</h1>
<h2>skiils & Attributes</h2>
<p class="skills__discrition">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perspiciatis quasi enim laudantium, sit ea blanditiis officia sequi, delectus eum, reprehenderit hic laborum consectetur velit itaque tempore nulla? Deserunt, incidunt fugiat.
</p>
</div>
<div class="skillset">
<div class="skillsset__left">
<h3 class="skillset__tittle">Skills</h3>
<div class="skill">
<div class="skills__description">
<span>HTML</span>
<span>60%</span>
</div>
<div class="skills__bar">
<div class="skills__value"></div>
</div>
</div>
</div>
<div class="skill">
<div class="skills__description">
<span>css</span>
<span>60%</span>
</div>
<div class="skills__bar">
<div class="skills__value"></div>
</div>
</div>
<div class="skill">
<div class="skills__description">
<span>JavaScript</span>
<span>60%</span>
</div>
<div class="skills__bar">
<div class="skills__value"></div>
</div>
</div>
<div class="skillset__right">
<div class="tools">
<h3 class="skillset__tittle">tools</h3>
<ul class="tools__list">
<li><span>비주얼 스튜디오 코드</span></li>
<li><span>아톰</span></li>
<li><span>이클립스</span></li>
</ul>
</div>
</div>
<div class="etc">
<h3 class="skillset__title">Etc</h3>
<ul class="etc__list">
<li><span>Git</span></li>
<li><span>Git</span></li>
<li><span>Git</span></li>
</ul>
</div>
</div>
</section>
</section>
<section class="my_work">
<h1>My work</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat nisi voluptatibus accusamus labore cumque eos eaque nobis autem impedit magnam, veritatis modi reiciendis accusantium libero error quod, dolor est. Corrupti.</p>
<div class="main_box">
<div class="first_box">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="second_box">
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
</div>
</div>
</section>
<footer>
<div class="name">
<p>mls0000@naver.com</p>
<p>Moon Seok Hyun</p>
<p>2021.12.31 <i class="fab fa-facebook"></i> <i class="fab fa-instagram-square"></i> </p>
</div>
</footer>
</body>
</html>
<script>
$('a').on('click', function(e){
e.preventDefault();
$('html, body').animate({scrollTop:$(this.hash).offset().top}, 300)
})
</script>
