아직 손봐야할 부분이 많지만 HTML,CSS 공부할겸 페이지를 만들어봤다.
HTML의 기본적으로 사용되는 태그조차도 모르는 상태에서 시작했기 때문에 간단한 기능 추가에도 많은 시간이 들어갔지만 새로운 기능을 알게되는 재미가 쏠쏠했다.
HOME
-배경 이미지 삽입
-제목과 글 삽입
-배경 음악 삽입
PROFILE
-이미지 슬라이드
ABOUTME
FAVORITES
-이미지 삽입
-마우스오버 추가
SNS
-깃허브, 인스타그램, 네이버블로그, 유튜브 링크추가
-아이콘 삽입
메뉴바는 한 페이지에 고정되어있는 것이 아니라 y 스크롤 이동에 따라 계속 따라오게 만들기 위해 header 태그 안에 삽입했다.
<header>
<a href="#home">HOME</a>
<a href="#profile">PROFILE</a>
<a href="#aboutme">ABOUTME</a>
<a href="#favorites">FAVORITES</a>
<a href="#sns">SNS</a>
</header>
각 페이지마다 id 태그를 이용하여 이동할 수 있게 하였다.
<section>
<p id="home"></p>
<div class="home">
<div id="lb-audio">
<audio autoplay loop controls>
<source src="you.mp3" type="audio/mpeg">
</audio>
</div>
HOME 화면에서만 오디오 플레이어를 나타낼 것이기 때문에
<div class="home">
안에 넣어서 위치를 고정시켰다.
각 sns의 주소, 아이콘 이미지, 마우스오버 추가하기
<p id="sns"></p>
<div class="sns">
<ul >
<li><style>
.fa-github:before {
content:"";
background-image: url("github.png");
background-size:50px 50px;
background-repeat: no-repeat;
width:100px;
height:100px;
display:inline-block;
margin: 5px 0 0 5px;
}
</style>
<a href="https://github.com/jiminnote" target="blank" >
<i class="fab fa-github" aria-hidden="true"></i>
</a></li>
<li>
<style>
.fa-instagram:before {
content:"";
background-image: url("instagram.png");
background-size:50px;
background-repeat: no-repeat;
width:100px;
height:100px;
display:inline-block;
margin: 5px 0 0 5px;
}
</style>
<a href="https://www.instagram.com/jimny_1102">
<i class="fab fa-instagram"></i>
</a></li>
<li><style>
.fa-naver:before {
content:"";
background-image: url("naver.png");
background-size:50px;
background-repeat: no-repeat;
width:100px;
height:100px;
display:inline-block;
margin: 10px 0 0 6px;
}
</style>
<a href="https://blog.naver.com/wlals3968">
<i class="fab fa-naver"></i>
</a></li>
<li><style>
.fa-youtube:before {
content:"";
background-image: url("youtube.png");
background-size:50px;
background-repeat: no-repeat;
width:100px;
height:100px;
display:inline-block;
margin: 11px 0 0 6px;
}
</style>
<a href="https://www.youtube.com">
<i class="fab fa-youtube"></i>
</a></li>
</ul>
</div>
/* 아이콘 수평정렬 + 가운데정렬 */
.sns ul{
position: relative;
top: 50%;
left: 50%;
padding: 0;
margin: 0;
transform: translate(-50%, -50%);
display: flex; /*가로정렬 */
justify-content: center;
}
/* 아이콘 간에 간격두기 */
.sns li{
list-style: none;
margin: 0 15px;
}
.sns ul li .fab{
font-size: 30px;
line-height: 80px;
transition: .3s;
}
/* 네모박스를 만든후 모서리를 동그랗게 만들어 원형도출/ 그림자가 서서히 생김(6s) */
.sns ul li a{
position: relative;
display: inline-block;
width: 60px;
height: 60px;
border-radius: 50%;
background-color: rgb(255, 255, 255);
transition: .6s;
box-shadow: 0 5px 4px rgba(0,0,0,.5);
}
/*커서를 대면 아이콘이 살짝올라감 */
.sns ul li a:hover{
transform: translate(0%, -10%);
}
/* 커서를 대면 배경색 변함 */
.sns ul li:nth-child(1) a:hover{
background-color: rgba(255, 245, 60);
}
.sns ul li:nth-child(2) a:hover{
background-color: #ffcdd6;
}
.sns ul li:nth-child(3) a:hover{
background-color: #c5f4ff;
}
.sns ul li:nth-child(4) a:hover{
background-color: #000;
}