[2024.04.18] TIL 4일차

[ 본캠프 3일차 기록 ]

🖥️ 오늘 공부한 내용 🖥️

팀페이지 프로젝트 기획서

와이어프레임

메인 페이지

1. 헤더 홈 버튼 : 메인 페이지로 이동
2. 문 이미지에 마우스 올리면 문이 열리는 애니메이션
3. 팀원 이미지 클릭하면 해당 팀원 페이지로 이동
4. 방명록 미리보기 창
5. 방명록 글쓰기

개인 페이지

1. 파일 다운로드 기능

1. 사진 업로드 기능 (firebase storage 사용)

1. 애니메이션 기능

방명록 페이지

1. 방명록 작성 (firestore 사용)

1. 작성한 방명록 데이터 불러오기

1. 더보기 기능 ( 한페이지에 보여주는 요소 개수 제한)

문제해결

페이지 합치기

<div>
    <iframe class="iframe" src="../Member2/Member2.html" width="100%"></iframe>
    <iframe class="iframe" src="../Member4/Member4.html" width="100%" height="600px"></iframe>
    <iframe class="iframe" src="../Member1/Member1.html" width="100%" height="400px"></iframe>
    <iframe class="iframe" src="../Member3/Member3.html" width="100%" height="600px"></iframe>
</div>

• iframe 태그 이용해서 각 팀원이 만든 섹션 및 기능 합치기
• 단, iframe 사용하면 페이지 이동 기능 구현이 조금 다름

  function goToParentFolder() {
      window.parent.location.href = '../../PR/Sunminpr/Sunminpr.html';
  }

  • 일반적인 방법으로는 해당하는 iframe 구역만 페이지 이동이 됨
  • window.parent.location.href로 현재 iframe이 속한 창의 부모창 자체의 url을 바꿔줌

클릭 시 노크소리 들리면서 페이지 이동

function button_click() {
  var audio = new Audio('knock.mp3');
  audio.play();
  audio.onended = function() {
      goToParentFolder();
  };
}

function goToParentFolder() {
  window.parent.location.href = '../../PR/Sunminpr/Sunminpr.html';
}

• 버튼을 클릭하면 오디오가 들리기 전에 페이지 이동 속도가 더 빨라서 들리지 않음
• “oneded” 속성을 이용해 audio 재생이 끝난 후에 페이지 이동 함수 “goToParentFolder”를 실행하게 함