TIL 1. HTML & CSS로 자기소개 페이지 제작

웹 개발을 공부하고 처음으로 나의 소개 페이지를 제작하였습니다. 확실히 공부만 하는 것보다 직접 제작하면서 공부하니 필요한 부분은 더 찾아보게 되고, 지금 무엇이 부족한 지 한눈에 알 수 있었습니다.

1. 레이아웃 구성

저는 웹 페이지를 처음 만들어봐서 레이아웃의 중요성을 모르고 무작정 코드를 작성하여 구성이 엉망이 되어버렸습니다... 이렇게 될 경우 추후 다른 코드를 수정하기 쉽지 않기 때문에 시작부터 레이아웃을 명확히 구성하고 페이지 작성을 시작하는 것이 좋다는 것을 깨닫게 되었습니다.

처음에는 왼쪽 사진과 같이 작성하고 싶었으나, 사이드 바를 구성하였을 때 오른쪽의 구성이 자꾸 틀어져서 오른쪽 사진과 같이 레이아웃 수정하고 작성하였습니다.
앞으로는 페이지를 작성하기 전에 항상 레이아웃을 먼저 작성하고 그에 따라 만들 수 있도록 해야겠습니다.
그래야 구성의 경계도 명확하게 보이고 수정도 훨씬 수월하게 진행할 수 있을 것 같습니다.

2. 나의 소개 페이지

**-. 상단 네비게이션 바

 <div class="header">
      <img class='img' src="images/logo.jpg" alt="상단 작은 사진">
      <h1>HyeonMuk</h1>
      <div class="nav">
        <ul>
          <li><a href="#context1">Profile</a></li>
          <li><a href="#context2">About me</a></li>
          <li><a href="#context4">Interest</a></li>
        </ul>       
      </div>
      <div class="contact">
        <a href="tel:01071910833"><i class="fas fa-mobile-alt"></i></a>
        <a href="mailto:fall900802@gmail.com"><i class="fas fa-envelope"></i></a>
        <a href="https://github.com/fall031-muk/fall031-muk.github.io-index.io" target="_blank"><i class="fab fa-github"></i></a>
      </div>
    </div>

위와 같이 a 태그를 사용하여 클릭 시 각 영역에 해당하는 곳으로 이동하게 하였습니다.
또한 아이콘에도 a 태그를 사용하여 자동전화, 메일보내기, 깃허브 사이트로 이동하는 기능을 구현하였습니다.
CSS의 경우 대부분 마진 및 정렬이었고, border-radius를 사용하여 이미지를 둥글게 만들 수 있었습니다.

-. 배경음악 설정

 <audio controls autoplay loop id="myaudio">
        <source src="audio/BGM.mp3">
      </audio>
      <script>
        var audio = document.getElementById("myaudio");
        audio.volume = 0.3;
      </script>

배경음악의 경우 bgsound, embed 태그를 사용하는 방법도 있으나, bgsound는 익스플로러에서만 작동하고, embed로는 볼륨설정이 잘 안되어😢 audio 태그를 사용하였습니다. 볼륨설정은 0~1까지 있으며, 속성으로는 controls(컨트롤러 표시), autoplay(자동 재생), loop(반복 재생), muted(음소거) 등이 있고 autoplay의 경우 웹브라우저에 따라 작동이 안되는 경우도 있습니다.

-. 아이콘 사용 및 호버 효과

<div>◈ 나의 관심사 </div>
      <div class="interest">
        <i class="fas fa-laptop"></i>
        <i class="fas fa-basketball-ball"></i>
        <i class="fas fa-book"></i>
        <i class="fas fa-snowboarding"></i>      
        <i class="fas fa-hand-holding-usd"></i>
      </div>
      
/* CSS */
.container .context4 .interest i{
  font-size: 200px;
  margin: 30px;
  margin-top: 100px;
  display: inline-block;
  padding: 40px;
  background: gray;
  opacity: 0.3;
}
.container .context4 .interest i:hover{
opacity: 1;
transition-duration: 0.5s;
}
}

나의 관심사는 아이콘을 사용하였습니다. 위와 같이 관련 아이콘을 불러오고 CSS에서 opacity를 활용하여 투명도를 주었습니다.(0~1) 이후 hover를 사용하여 마우스를 올려놓으면 opacity가 1이 되어 선명하게 나오는 효과를 주었고, duration을 주어 0.5초 후에 바뀌도록 설정하여 보다 동적은 효과를 주었습니다.

3. 부족한 점

1) 레이아웃에 대한 이해도
2) 각 태그의 구분 및 속성 활용도
3) CSS 사용 시 적용 범위 및 구성 이해도 부족

아직 부족한 점이 너무 많았습니다. 전체적으로 태그나 CSS 활용법이 많이 미숙하여 기존에 구상했던 효과를 줄 수 없어 안타까웠습니다..ㅠㅠ
⇒ HTML&CSS 기본 강의를 더 듣고 나중에 페이지를 다시 만들어 보도록 하겠습니다!!
("김버그의 HTML&CSS는 재밌다"라는 강의 바로 결제해서 듣고있습니다😃)