[0422] TIL 5일차

nikevapormax·2022년 4월 22일

목록 보기

5/116

😂 미니 프로젝트 수정 및 발표

😭 기능 추가

- 홈페이지의 스크롤바를 숨긴 채로 스크롤 진행

처음 시도로는 html{overflow:hidden;}으로 스크롤바를 숨기고 전날에 사용했던 자동 스크롤 자바스크립트 코드 사용
- 스크롤이 너무 자동으로 내려가거나 끝까지 내리면 아예 올라가지 않는 경우 생김
따라서 아래의 기능을 찾아 수정

<head>
  <style>
        * {
            -ms-overflow-style: none; /* IE and Edge */
            scrollbar-width: none; /* Firefox */
        }
        *::-webkit-scrollbar {
             display: none; /* Chrome, Safari, Opera*/}

  </style>
</head>

- 첫 페이지 팀 소개 팝업 새로고침 기능

처음에는 사용자가 손수 새로고침을 해야 팀 소개를 다시 볼 수 있었음
location.reload() 함수를 사용해 새로고침을 닫기 버튼을 누르면 자동적으로 새로고침이 되도록 조정

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

😂고치지 못한 점(+ 보완점)

😭 동일한 jqeury 함수 여러 번 사용

뭔가 느낌상으로 for문을 사용하면 될거같기도 하면서 말이 안된다는 생각도 들어서 기능은 잘 굴러가니 그대로 가자는 협의 하에 놔둠
오늘 발표를 하며 js의 객체지향을 배우면 바로 보자마자 고칠 수 있을 것이라는 피드백을 들어 그 전에도 노력하겠지만, 배우게 되면 고치기로 함

😭 carousel 적용

목업을 만들었을 때는 캐러셀 사용에 다들 목말라있었음
bootstrap에서 탬플릿을 긁어왔고 우리 html에 적용을 해보았는데, 아무리 적용을 해도 사진이 넘어가지 않음
해당 문제에서 시간도 많이 들고 디자인을 하던 성신누나도 힘들어했고 하던 도중 슬기누나의 아이디어로 캐러셀을 삭제
다음에도 하게 된다면 해당 기능을 틀부터 구현하고 기능을 넣는 식으로 진행해 꼭 달성할 것임

😭 주석처리(제일 중요한데 개멍청했음)

조금씩 하겠다고 맨날 다짐하고 들어가서 팀플할 때 떠들고 상의하는게 너무 재미있어서 망각했음
한창 하다가 아 맞다 주석 ㅅㅂ 했을 때는 늦지 않았었는데 나 스스로 늦었다고 확신해버림
포기하지말고 꼭 해야겠다고 생각함 무조건!!!!!!

😭 반응형 웹

너무 아쉬운 부분(너무 홈페이지에만 치중했음)
튜터님께 여쭤보고 구현하여 했다가(부트스트랩 그리드) 결국은 못했음
꼭 연구해서 해보도록 해 우리의 멤버 페이지는 내 핸드폰에서도 보고 싶음

😭 디자인적인 부분 생각을 거의 안함

우리 팀원들이 아이디어를 많이 내줬음
너무 한 가지에만 몰두했다고 생각하며, 하나의 홈페이지를 만들겠다고 한건데 여러 방면으로 생각하지 못한 부분이 많이 아쉬움
항상 시야를 넓게 잡자 했으면서 또 안했음 개멍청
아이디어를 낼 수 있도록 레퍼런스 참조를 많이 해야겠다고도 생각
- 두나무 홈페이지를 따서 만드려 했으나 느낌밖에 못살림
- 어떻게 하면 클론코딩을 잘 할까 고민해봐야 겠으며, 우리 교육과정에 클론코딩이 있던걸로 봤는데 그거 하고나서 더 해볼거라고 다짐!
- 그리고 튜터님도 하려고 하셨다던 지금의 나로썬 넘사벽인 애플도,,,

😭 코드를 많이 뜯어보는 것

아래 코드를 발표땜에 혹시나 해서 구글링을 해서 해석(ㅋ)을 해봄
- 우선 해당 코드에서 사용된 기능들을 뜯어보겠음
- offset( ) : 문서 안의 상대적인 현재 위치값을 반환해줌
  단, top과 left 값만 반환가능
- animate( ) : 주어진 속성에 대한 애니메이션 효과 줌
  duration 값을 줄 수 있으며, 기본값은(400) / fast(200) / slow(600) 정도 안에서 줄 수 있음(애니메이션이 끝날 때까지 걸리는 시간)
- scrollTop( ) : 선택한 요소의 스크롤바의 수직 위치를 반환하거나 스크롤바 수직 위치를 정해줌

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

위의 내용을 통해 해석을 하자면 offset이라는 변수를 설정해 people을 id로 갖고 있는 멤버 소개카드의 offset값(현재 위치값)을 부여하였다. 해당 값의 top(즉 페이지의 맨 위)을 scrollTop에 부여해준 것이다. 그래서 이 값으로 주어진 시간인 400동안 이동하도록 animate 해준 것임