프로그래밍 공부 일기

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

목표물

아코디언 메뉴로 스크롤을 할 수 있도록 하고 싶다. 메뉴는 z-index로 최전면에 표시되도록 되어 있다.

코드

HTML 파일

<div class="navigation">
  <span class="fas fa-bars naviTop"></span>
    <nav>
      <ul>
        <li><a href="#iceland">Iceland</a></li>
        <li><a href="#aurora">Aurora</a></li>
        <li><a href="#blueLagoon">BLUE LAGOON</a></li>
        <li><a href="#london">London</a></li>
        <li><a href="#paris">Paris</a></li>
        <li><a href="#iceland">Iceland</a></li>
        <li><a href="#spain">Spain</a></li>
        <li><a href="#map">Map</a></li>
        <li><a href="#food">Foods</a></li>
      </ul>
    </nav>
</div>

overflow-y: scroll; 에서 스크롤 기능을 추가할 수 있다. 이 때 height를 지정할 필요가 있다.
하지만, height: 100%; 로 세로폭을 지정해 잘 할 수 없다. 따라서 이번에는 vh라는 단위를 이용했다. (width는 nw로 지정)

vw(viewport width):뷰포트의 폭에 대한 비율
vh(viewport height):뷰포트의 높이에 대한 비율

(뷰포트(viewport)는 표시 영역)

css 파일

nav{
    height:90vh;
    overflow-y: scroll;
    width:70vw;
    display:none;
    background-color:rgba(58, 124, 223,0.7);
    border-radius: 20px;
    margin-top:80px;
}

참고문헌

htps : // 치 ps. 아 dc-에서 pt. 이 m/HTML-cs/208/
htps : //에서 v.ぁsss d. jp / arc c ぇ s / c s ぇ gth ゔ ぃ