🔥ABOUT ME🔥

We code 1주차 미션으로 만든 자기소개 웹사이트에 구현한 기능 한가지 코드리뷰!!

---

마우스 호버 효과

처음으로 만들어본 웹사이트지만 이왕 만드는거 기능은 많이 없더라도 이쁘게라도 만들어보자! 해서 추가해본 아이콘들.. 처음엔 아이콘만 달랑있어서 많이 어색했지만 마우스를 올리면 아이콘 이미지, 크기가 바뀌게끔 유튜브, 구글링을 통해 간단한 코드를 추가해 보았다.

#1 아이콘 만들기

  <li class="icons">
    <a href="https://github.com/sumin0725/my-first-website" target="_blank"><img src="images/아이콘 사진/github.png" class="github" width="75px" height="75px"></a>
    <a href="https://www.instagram.com/yunsumin725/" target="_blank"><img src="images/아이콘 사진/instaglam.png" class="insta" width="75px" height="75px"></a>
    <a href="https://www.facebook.com/profile.php?id=100010453546853" target="_blank"><img src="images/아이콘 사진/facebook.png" class="face" width="75px" height="75px"></a>
    <a href="#"><img src="images/아이콘 사진/blog.png" class="blog" width="75px" height="75px"></a>
  </li>

<li>태그와 <a>태그를 사용하였다, <li>와 <a>태그를 사용하여 리스트를 만들어준후 <a>태그에 SNS링크를 달아주었다, <img src>태그를 이용해서 아이콘 이미지를 할당하였고 width, height속성을 사용하여 아이콘 크기를 조정해 주었다.

#2 마우스 호버 효과 구현

<link rel="stylesheet" href="style.css">

본격적인 스타일 작업에 앞서 html에서 스타일시트를 따로 구현해놓았다 html파일이 들어있는 폴더안에 style.css이라는 파일을 자동으로 연결해주는 코드다, 이렇게 하면 굳이 html에서 <style>태그를 사용하지 않고 css파일에서 스타일을 따로 작업할수있어서 편하다.

---

.icons img:hover {
  transition: 0.3s;
  transform: scale(1.2);
  filter: invert(100%);
}

• :hover메소드를 사용하여 작성하였다, :hover메소드의 기능은, 마우스가 가리킬때 요소에 특별한 스타일을 적용할수있다.
  
• transform: scale(값);속성을 추가해서 마우스가 가리킬때 (소괄호 안의숫자) 만큼 이미지를 확대한다.
  
• filter: invert(값%);마우스가 가리킬때 (소괄호 안의숫자%) 만큼 이미지의 색상을 반전 시킨다.
• transition: 값s;위의 속성들이 동작하고 끝나기까지 걸리는 시간(초) 을 설정할수있다, 이 속성을 사용하여 이미지가 자연스럽게 변하는 효과를 연출할수있었다.

---

리뷰를 마치며...

처음엔 어떻게 만들어야할지 고민도 많았고 막막했지만 막상 만들고나니 생각보다 잘만든거 같아서 뿌듯했다 .사실 기능을 추가하고싶었지만 전혀 이해를못하겠어서 포기.. 그래도 앞으로 어떤식으로 웹사이트를 만들어야할지 어느정도 감은 잡힌거같아서 좋은거같다. 아직 갈길이 멀지만 개발자가 되기위한 한발자국을 무사히 내딛은거 같아서 뿌듯하다.