작성 규칙

1. 🟠 작성 상태
   ✅ 작성한 날짜를 기록함으로써 리마인드
   ✅ 작성한 프로젝트를 기록함으로써 프로젝트를 찾아볼 수 있음
   ✅ 작성 상태를 기술함으로써 수정된 이력 버전과 완성여부를 확인
2. 🖋 기능 설명
   ✅ 레퍼런스 링크
   ✅ 사용된 기술에 대해 스스로 설명
3. 🔨 프로젝트 적용
   ✅ 기획내용 작성, 작성한 계기를 기술
   ✅ 프로젝트에 사용한 코드를 한 줄씩 리뷰하는 것으로 코드 전체 이해 증명
   ✅ 코드를 설계한 내용과 왜 이렇게 작성했는지
   ✅ 완성 코드를 코드펜으로 보여주기

🟠 작성 상태

---

🟠 작성 날짜 : 0421, 2022

🟠 적용 프로젝트 : Team Oldboy - Team Intro Web

🟠 작성 상태 : 수정됨 (0422, 2022)

🖋 기능 설명

---

🖋 레퍼런스 링크

🖋 기능에 대해 설명

▶ querySelector().offsetTop 활용

• querySelector()로 특정 선택자를 선택한뒤, offsetTop으로 위쪽 좌표를 받아옴

  var location = document.querySelector('#joo').offsetTop;

▶ window.scrollTo() 활용

• scrollTo() 로 top 값으로 이동하고, 부드럽게 이동할지 까지 결정한다

  window.scrollTo({top:location, behavior: 'smooth'});

🔨 프로젝트 적용

---

🔨 프로젝트 기획, 작성 계기

• 팀 소개 페이지를 제작하던 도중 길어진 내용을 쉽게 이동할 수 있도록 하는 기능이 필요하지 않을까? 하는 생각이 들었음
• 해당 기능을 수행하기 위해서는 특정 위치의 좌표 값을 받아 자연스럽게 이동할 수 있는 기능을 탐색하기

🔨 코드 리뷰

👁‍🗨 ver.1.0

function goToScroll_hwang() {
    var location = document.querySelector("#hwang").offsetTop;
    window.scrollTo({top: location - 100, behavior: 'smooth'});

1. 함수 이름
2. querySelector 로 특정 아이디 선택, 위치 좌표를 offsetTop 값으로 위쪽 좌표를 받아옴
3. 좌표를 넣은 변수에서 100 만큼 뺀 값으로 부드럽게 스크롤 이동 명령

👁‍🗨 ver.1.1

function goToScroll(name) {
    var location = document.querySelector("#" + name).offsetTop;
    window.scrollTo({top: location - 100, behavior: 'smooth'});
}

1. 함수 이름(인자값)
2. 인자값으로 받은 이름과 #을 더해 문자열로 만들어 특정 아이디 선택, offsetTop 값으로 위쪽 좌표를 받아옴
3. 좌표를 넣은 변수에서 100 만큼 뺀 값으로 부드럽게 스크롤 이동 명령

⚙ 수정하게 된 이유

• ver.1.0과 같이 코드를 작성할 경우 ID, CLASS 값의 개수만큼 함수를 만들어야함.
• 위와 같은 코드 작성방식에서 벗어나야 다른 코드 또한 줄일 수가 있다는 점을 알게 됨
  

🔨 완성 코드(CodePen)