팀 소개 페이지 만들기

목표

1.게임 테마 디자인
2.모바일 반응형 HTML
3.배경음악재생, 애니메이팅 효과 JS
4.팀원소개 모달창
5.메인으로 돌아갈 때, 간단한 퀴즈(혹은 미니게임)

• 역할분담
  • 하단 배너 고정
    하단 배너를 고정하는 역할을 처음으로 맡아서 했다.
    -백그라운드 이미지를 이미지로 바꿔서 작업을 진행했어야 하는데
    -이미지 위치 맞추기가 잘 안되었다. 민기 님이 도와주셔서
    -이미지 위치를 잡아주셨다. 다시 이미지로 잡아서 작업하였다.
• 하단고정은 fixed를 이용해서 하단배너로 고정하였다.
  • 스크롤 위치 이동
    이미지 클릭시 스크롤 이동을 진행하였다.
    처음 window.scrollTo({top:0, left:0, behavior:'auto'}); 을
    이용해서 진행하려 했으나 , 과감히 실패 하였다.
    좌표위치를 알아야 하는데 좌표위치 찾기 실패.
    후에 <a>태그를 이용 target 으로 스크롤 이동은 성공 하였지만,
    매끄럽게 진행 하지는 못했다.
    이후 영상님이 도와주셔서 작업을 진행 하였다.

 <img onclick="goToScroll_joo()" class="charimg" src="../static/image/iori.png">

 function goToScroll_joo() {
        var location = document.querySelector("#joo").offsetTop;
        console.log(location)
        window.scrollTo({top: location, behavior: 'smooth'});
    }

id 값을 이용해 좌표를 구하고 스크롤을 진행 하였다.

1. 현재페이지에 부를때
   onclick="location.href='목적지 링크주소(URL)'"

2. 새 창에 열때
   onclick="window.open('목적지 링크주소(URL)')"
   을 이용 하였다가 다시 코드를 수정하였다.

<a href = "https://medium.com/@about.joo91" target='_blank'><img class="blog_link" src="../static/image/phantom.png"> </a>

<a>태그를 이용해서 div부모자식 구조로 안에 이미지 값을 넣어주었다.
이미지를 넣어주니 div 밖으로 튀어나가는 현상 발생.
구글링 해본 결과 새롭게 css로 wedith 갑과 height 값을 주니 해결되었다.

.blog_link {
        width: 200%;
        height: 130%;
    }

물론 이거보다 간결하게 하는 방법이 있을 것 같다. 그 부분에 대해선 더 공부를 해봐야겠다
개인 블로그 링크를 새 창으로 여는 것 까지 오늘 개발일지는 마무리.