프로그래밍 공부 일기

2020년 6월 27일 Progate Lv.148
포트폴리오 작성 중
마지막으로 만든 웹 페이지를 조정했습니다.

인페이지 링크 만들기

<nav> 를 이용해 네비게이션을 작성한다. 네비게이션은 페이지 안팎의 링크입니다.

<nav>
  <ul>
    <li><a href="#iceland">Iceland</a></li>
    <li><a href="#aurora">Aurora</a></li>
    <li><a href="#blueLagoon">BLUE LAGOON</a></li>
  </ul>
</nav>

<h1 id=aurora>Aurora in Iceland</h1>
<h1 id=iceland>Iceland</h1>
<h1 id=blueLagoon>BLUE LAGOON</h1>

하지만, 이대로라면 사진 위에 쓰여져 있는 문자가 헤더와 겹쳐져 보이지 않게 되어 버리고 있다. 그래서 링크처를 좀 더 아래로 지정하고 싶다.

페이지 내 링크의 위치 변경

CSS로 padding이나 margin을 지정하는 것으로 링크처의 위치를 ​​바꿀 수 있다.

#iceland, #aurora, #blueLagoon{
    padding-top:100px;
}

이와 같이 지정함으로써 링크처의 위치를 ​​조정할 수 있었다.