[0421] TIL 4일차

nikevapormax·2022년 4월 21일

TIL

목록 보기

4/116

😂 미니 프로젝트 진행

😭 프로젝트 요소 변경

- 전체적인 구성 변경

총 3 부분의 div 태그로 구성
팀의 이름인 '2정2윤킴'을 보여주는 시작 페이지
팀의 규칙 등을 팝업을 통해 제시
~~팀 소개를 하는 두 번째 페이지~~
팀원들의 사진이 담긴 페이지
해당 페이지에서 팀원들의 소개를 진행

- 팀원의 변경

성신님의 개인적 사정으로 인해 경수님이 들어오게 됨
다행히도 이번 미니 프로젝트는 마무리를 같이 할 수 있어 팀원이 5명이 됨
다들 친화력이 너무 좋아서 금방 친해지고 프로젝트 진행 속도도 전날보다 빨라짐

- 사용 기술 변경

자동 크스롤 기능을 사용하지 않기로 함
- 어떤 분의 블로그에서 보고 코드를 짰는데(누군지 기억이 안납니다. 죄송합니다. ㅠㅠ) 구현을 개떡같이 해서 그런지 스크롤이 내려가다가 올라가기도 하고 아래로 내려가는거는 내려가는데 위로는 절대 안올라가고 해서 그냥 없애기로 결정
전날 내가 구현하려 했던 사진을 왼쪽으로 옮기려던 시도는 하지 않기로 함
팀 소개 페이지를 없애고 팝업창을 만들어 팀 소개를 넣음

대신 사진을 가로로 3개 2개 배열

멤버들의 사진에 마우스를 가져가면 hover 기능으로 인해 사진이 확대됨

멤버들의 이름을 hover 기능을 사용하여 색을 변경함
또한 멤버들의 이름을 클릭하면 멤버들의 개인 소개 페이지로 이동하도록 <a> 태그를 사용

<head>
<style>
  .nameplace {
       margin-left: 200px;
       margin-top: 45px;
       text-shadow: 2px 2px #2D63A7;
       text-decoration-thickness: 2px;
   }

   .nameplace:hover {
       color: #FAECC5;
   }
   .rounded-circle {
       margin-left: 170px;
       margin-top: 80px;
       transition: 0.3s;
   }
   .rounded-circle:hover,
   .rounded-circle:focus img {
         transform: scale(1.5);
   }
</style>
</head>

팀의 규칙, 목표 등을 popup창을 사용해 제시

처음에 내가 찾아봤을 때 안됐는데, 성신님이 찾으셔서 구현함(팀플의 장점ㅋㅋ)

<script>
    $(function () {
       $("#close").on("click", function () {
           $("#modal-wrapper").hide();
       })
   })
</script>

버튼을 눌러 다음 페이지로 자동 스크롤될 수 있도록 구현 +fadeIn 기능

<head>
  <script>
    $('h1.mytitle').fadeIn(2000);
    $('button.btn').fadeIn(4000);
    $('a.btn2').fadeIn(4000);

    $('#mybtn2').click(function () {
        var offset = $('#people').offset(); //선택한 태그의 위치를 반환
        //animate()메서드를 이용해서 선택한 태그의 스크롤 위치를 지정해서 0.4초 동안 부드럽게 해당 위치로 이동함
        $('html').animate({scrollTop: offset.top}, 400);
    });
    $('#mybtn2').click(function () {
        var offset = $('#people').offset(); //선택한 태그의 위치를 반환
        //animate()메서드를 이용해서 선택한 태그의 스크롤 위치를 지정해서 0.4초 동안 부드럽게 해당 위치로 이동함
        $('html').animate({scrollTop: offset.top}, 400);
    });
  </script>
</head>

두 번째 페이지의 멤버들 이름을 누르면 멤버들의 정보를 볼 수 있는 개인 페이지로 이동하며, 개인 페이지의 사진을 누르면 다시 두 번재 페이지로 돌아갈 수 있게 구현

<head>
  <script>
    //멤버들 개인 페이지로 이동
      $('#dg').click(function () {
              var offset = $('#d').offset(); //선택한 태그의 위치를 반환
              //animate()메서드를 이용해서 선택한 태그의 스크롤 위치를 지정해서 0.4초 동안 부드럽게 해당 위치로 이동함
              $('html').animate({scrollTop: offset.top}, 400);
       });
    //멤버 전체의 사진이 있는 페이지로 이동
      $('#d1').click(function () {
          var offset = $('#myteam').offset(); //선택한 태그의 위치를 반환
          //animate()메서드를 이용해서 선택한 태그의 스크롤 위치를 지정해서 0.4초 동안 부드럽게 해당 위치로 이동함
          $('html').animate({scrollTop: offset.top}, 400);
      });
  </script>
</head>