TIL 14. Java Script UI 및 기능 구현

Mission. Topbt, 상세페이지에서 홈 이동하는 기능 구현

1) 목적

1. 팀 과제 필수 요구사항인 상세페이지에서 홈으로 이동하는 UI 및 기능 구현을 위함
2. 팀 과제 선택 사항인 상단 이동 스크롤 버튼 기능을 구현하기 위함

2) 방법

1. html 파일 body 요소에 구조 생성

    <div class="button">
      <a href="/"><img class="logo" src="style/assets/icon.png" alt="" /></a>
      <a href="/" class="title">Movies Project</a>
    </div>
    <div class="arrow">
      <i class="fa-solid fa-circle-arrow-up topBtn" id="topBtn"></i>
    </div>

2. bts.css 파일 생성

@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;900&display=swap");
/* 1. 웹 문서에서 공통으로 사용될 속성을 미리 변수에 선언 */
:root {
  --primary-color: #000;
  --primary-sub-color: #f2cd5c;
  --body-bg-color: #000;
  --radius-25: 25px;
  --radius-15: 15px;
}
/* 2. 전체선택자를 이용해 아웃라인을 없애고 요소의 너비와 높이를 균일하게 유지, 폰트 적용 */
* {
  outline: none;
  box-sizing: border-box;
  font-family: "Noto Sans KR", sans-serif;
}
body {
  background-color: var(--body-bg-color);
  margin: 0px auto;
  width: 100%;
  height: 100%;
}
/* 3. 배너를 상단에 고정, 자식 요소들 자신이 가진 컨텐츠의 크기만큼만 넓이를 가짐 */
.button {
  position: fixed;
  top: 0;
  width: 100%;
  height: 80px;
  z-index: 999;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background-color: var(--primary-sub-color);
}
/* 4. 폰트 설정 */
.title {
  color: var(--primary-color);
  cursor: pointer;
  font-weight: 600;
  font-size: 35px;
  text-decoration: none;
  text-align: center;
}
/* 5. 폰트 hover 했을 때 */
.title:hover {
  cursor: pointer;
  color: var(--primary-color);
  cursor: pointer;
  font-size: 38px;
  font-weight: 900;
}
/* 6. 로고 설정 */
.logo {
  width: 60px;
  padding-right: 10px;
}
.arrow {
  /* 이동 버튼 위치 고정*/
  position: fixed;
  bottom: 13px;
  right: 10px;
  /* 요소 중 가장 앞쪽에 배치 */
  z-index: 999;
  color: #fff;
  zoom: 2;
}
.topBtn {
  cursor: pointer;
}

3. btn.js 생성

// topBtn 클릭 시 상단 이동
topBtn.onclick = () => {
  window.scrollTo({ top: 0, behavior: "smooth" });
};

3) 문제

topBtn이 화면상으로 보이지 않았다.

4) 시도

팀원이 작성한 코드와 대조하고, HTML 문서에 연결된 파일 체크하기

5) 해결

body에 width와 height를 100%로 주니 topBtn이 보였다.