[책] 자바스크립트 코드 레시피 278 - 86일차

페이지 이동하기

• a 태그 이외의 방법으로 페이지를 이동하고 싶을 때

구문

location.href // 현재 url

실습

location.href 속성에 URL을 문자열로 대입합니다. 대입한 타이밍에 맞춰 페이지 이동이 이루어집니다. 상대 경로는 현재 페이지의 URL 주소가 기준점이 됩니다. a 태그의 href 속성과 비슷하다고 생각 하면 이해하기 쉬우며, 해당 속성은 읽기와 쓰기가 모두 가능합니다. 읽기는 현재 페이지의 주소를 가져오며, 쓰기는 해당 페이지로 이동하는 작업을 실행합니다.

---

index.html

<a href="#">네이버로 이동하기</a>

---

style.css

a {
  display: block;
  padding: 10px 20px;
  margin: 20px 0 0 0; /* hr 마진이랑 a 마진이랑 병합되었습니다. */
  font-size: 20px;
  border: 1px solid #000;
  color: #000;
  text-decoration: none;
}

---

script.js

window.onload = () => {
  const location = document.querySelector('a');
  console.log(location.href = 'https://www.naver.com/'); // url, 파일명 등 넣을 수 있습니다.
}