자기소개 페이지에 있는 기능을 간단하게 설명해보고자 합니다! 일단 결과물 먼저
보여드리자면 일단 [링크] 입니다!(https://dlsxody1.github.io/dlsxody1.wecodeAssignment.io/study.html)
화면은
오른쪽 상단의 자기소개를 클릭하면
이런 페이지를 첫째주에 만들었습니다.
<!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>Introduction</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Gothic+A1:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<div class="frame">
<nav class="navigator">
<h3 class="introduce">KIM IN TAE</h3>
<ul>
<li class="nav_menu"><a href="recent.html">자기소개</a></li>
</ul>
</nav>
<div class="dashboard">
<h1>안녕하십니까 ! 제이름은<a class="highlight"> 김인태</a> 입니다!
이번 과정으로 문제 해결 방법과 끈기를 길러서 좋은 프론트엔드
엔지니어가 되는 것을 꿈꿉니다. </h1>
</div>
<footer class="work_footer">
<h3 class="contact">CONTACT</h3>
<div class="links">
<a class="instagram" href="http://www.instagram.com/intarrrrrrr/"><i class="fa-brands fa-instagram fa-4x"></i></a>
<a class="github" href="http://github.com/dlsxody1"><i class="fa-brands fa-github fa-4x"></i></a>
</div>
</footer>
</div>
</body>
</html>
페이지의 html 전문이고 , fontawesome에서 이미지를 받아온후 a 태그 안에 넣었습니다.
body{
background-color : #F8ECD1;
font-family: 'Bebas Neue', cursive;
font-family: 'Gothic A1', sans-serif;
}
.frame{
margin : 30px 150px;
display : flex;
flex-direction: column;
}
.navigator{
display: flex;
flex-direction: row;
justify-content: space-between;
}
li{
display : inline;
list-style: none;
margin: 0;
}
ul{
margin : 0;
}
.introduce{
margin : 0;
font-size: 35px;
color : #DEB6AB;
}
.nav_menu{
font-size: 35px;
}
.introduce:hover, .nav_menu:hover
.instagram:hover, .github:hover{
color : white;
transition: 0.3s;
}
a{
color : black;
text-decoration: none;
}
/* }:hover{
color : white;
transition: 0.25s;
} */
.dashboard{
display : flex;
flex-direction: column;
margin-top: 75px;
font-size: 30px;
}
.highlight{
background-color: #AC7D88;
}
.highlight:hover{
background-color: transparent;
color : white;
}
.work_footer{
display : flex;
flex-direction: column;
align-items: center;
}
.contact{
border-bottom: 3px solid #000;
font-size: 40px;
font-weight: 700;
}
.links{
justify-content: space-between;
}
.links>a{
margin-right: 20px;
}
/*profile */
.profile_section{
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-start;
margin: 100px 100px;
}
#profile_picture{
border-radius: 30px;
width:450px;
margin-right: 60px;
}
intro_recent h1{
font-weight: 799;
}
.intro_recent p{
font-size: 25px;
font-weight: 550;
}
.hobby_section{
display : flex;
flex-direction: row;
justify-content: center;
align-items: flex-start;
}
.hobby_image{
border-radius: 30px;
width:600px;
}
.hobby_hobby p{
margin-right: 200px;
font-size: 25px;
font-weight : 550;
} css 전문입니다. 첫번째 페이지에 있는 김인태에 마우스 커서를 올리면 하얀색 글씨로 변할 수 있도록 hover 기능을 추가하였고, hover에는 transition 애니메이션을 주어서 조금 더 동적으로 보일 수 있도록 하였습니다!
새로운 걸 배우는 것을 좋아하는 프론트엔드 개발자입니다!