자기소개 페이지(HTML,CSS)

아직 손봐야할 부분이 많지만 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 링크 첨부

각 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;
}

🍰 보안해야할 부분

1. 페이지 열리면 BGM자동재생되게하기
2. profile 페이지 보여지면 이미지 슬라이드 되게하기
   ( 지금은 페이지열릴 때만 슬라이드를 함)
3. 빈 페이지 채우기