내부링크와 target 가상 선택자 사용하기

developsy·2022년 5월 20일
0

햄버거 아이콘은 스마트폰에서 흔히 보이는 가로줄 세 개가 세로로 쌓여 있는 아이콘을 말한다.

https://ko.wikipedia.org/wiki/%ED%96%84%EB%B2%84%EA%B1%B0_%EB%B2%84%ED%8A%BC

목표는 미디어 쿼리를 사용하여 페이지 너비가 일정 이상으로 줄어들면 햄버거 버튼이 나타나고, 이를 클릭하면 사이드바가 나타나도록 하는 것이다. 다시 햄버거 버튼을 누르면 원래의 페이지로 돌아간다.

사이드바는 웹사이트 문맥에서 벗어난 사이드 컨텐츠이고, 모바일 화면을 위해 디자인된 네비게이션과 같다.

출처 - 100일 코딩 챌린지 - 2022 Web Development 부트캠프

햄버거 아이콘을 클릭했을 때 사이드 바가 나오게 하려면 내부 링크와 타겟 선택자에 대한 이해가 필요하다. 문법은 오른쪽 아래와 같다.

  1. 내부링크: 웹페이지의 책갈피와 같다. href에 지정한 id를 가진 요소로 이동시켜 주는 기능을 한다. 정의된 ID를 URL에 더해주는 것이다. 이때 반드시 #를 id앞에 써준다.

http://127.0.0.1:5500/index.html#side-drawer. side-drawer라는 id가 URL에 추가되었다.

  1. 타겟 가상 선택자: a:hover와 같은 가상선택자이다. 이는 특정 ID가 URL에 추가되었는지 확인하여 특정 CSS스타일을 적용한다.

햄버거 버튼 만들기

이는 현재의 웹페이지이고, 너비가 768px이하로 떨어지면 맨 위 header태그의 nav태그인 Browse Meals와 My Orders가 사라지도록 미디어 쿼리를 설정했다.

이제 사라진 자리에다 햄버거 아이콘을 넣어야 한다.

   <header id="main-header">
      <a href="index.html" id="logo">WebFood</a>
      <nav>
        <ul>
          <li>
            <a href="">Browse Meals</a>
          </li>
          <li>
            <a href="">My Orders</a>
          </li>
        </ul>
      </nav>
    </header>

코드를 보면 구조적으로 햄버거 아이콘이 nav요소의 밑에 존재해야 nav가 미디어 쿼리에 의해 안보이게 되었을 때 아이콘이 나타나게 된다. 물론 데스크탑 화면에서는 아이콘이 보이지 않도록 설정한다,

</nav>
   <a href="" class="menu-btn">
     <span></span>
     <span></span>
     <span></span>
   </a>
</header>

클릭하여 사이드바로 이동하는 형식이므로 앵커 태그를 사용하고, 빈 인라인 요소인 span요소를 세 개 넣어준다. span말고 들어있는게 없으므로 아직 햄버거 아이콘은 표시되지 않는다. 이제 CSS에서 스타일링을 해주면 된다. href의 비어 있는 부분은 사이드바를 만든 후 내부 링크를 넣는 부분이다.

.menu-btn{
    width: 3rem;
    height: 3rem;
}

.menu-btn span{
    width: 100%;
    height: 3px;
    background-color: white;
}

그러나 이렇게 스타일링 해줘도 인라인 요소인 span은 필요한 만큼만 공간을 차지하고, 콘텐츠가 없으므로 아무것도 표시되지 않는다. 그러므로 각 요소를 전부 블록 요소로 바꾸는 방법도 있지만 플렉스 박스로 만들어버리면 스타일링하기 훨씬 용이해진다.

.menu-btn{
    width: 3rem;
    height: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

햄버거가 추가되었다.

사이드바 만들기

이제 햄버거 아이콘을 클릭하면 사이드바가 나타나서 페이지의 다른 콘텐츠는 모두 가려지고, header의 nav요소의 콘텐츠만 중앙에 보이도록 만들려고 한다. 이 때 사이드바는 햄버거 아이콘이 클릭되었을 때 페이지의 메인 컨텐츠가 되어야 한다.

의미론적으로 사이드바는 header와 main 어디 쯤에 있는 요소라고 한다. 또한 사이드바는 aside태그로 만들 수 있다.

    </header>

    <aside id="side-drawer">
      <ul>
        <li>
          <a href="">Browse Meals</a>
        </li>
        <li>
          <a href="">My Orders</a>
        </li>
      </ul>
    </aside>

    <main>

aside태그를 추가한 후 사이드바의 콘텐츠로 header부분과 동일한 ul요소를 주었다.

+header와 main 어디 쯤이라는 것이 애매하긴 한데, mdn에서 aside태그를 찾아보니 문서의 주요 내용과 간접적으로만 연관된 부분을 나타낸다고 한다.

이제 사이드바가 전체 페이지를 차지하도록 변경하려면 배경 이미지를 header뒤로 보낼 때와 마찬가지로 position: absolute 혹은 position: fixed를 사용하여 문서 흐름에서 벗어나게 만들어야 한다.

#side-drwaer{
    width: 100%;  /* 전체 높이와 너비를 차지함  */
    height: 100%;
    background-color: rgb(29, 26, 27);
    position: fixed;
    top: 0;
    left: 0;
}

웹페이지의 상단과 좌측에 간격 없이 표시되도록 top과 left속성을 추가했다.

그 후

#side-drawer ul{
    list-style: none;
    display: flex;
    margin: 0;
    padding: 4rem 1rem;
    align-items: center;
    flex-direction: column;
}

#side-drawer li{
    margin: 1rem 0;
}

#side-drawer a{
    color: rbg(253, 239, 213);
    font-size: 2rem;
}

원하는 대로 스타일링을 해주면

사이드바가 성공적으로 만들어졌다. 하지만 햄버거 아이콘을 클릭했을 때 사이드바가 나타나고 다시 클릭하면 사라지게 만들어야 한다.

이를 위해서는 내부 링크와 타겟 선택자를 사용한다. 먼저 내부링크를 통해 사이드바를 명시해준다.

<a href="#side-drawer" class="menu-btn">
   <span></span>
   <span></span>
   <span></span>
</a>

이제 햄버거 아이콘을 클릭하면 사이드바로 이동하게 된다. 페이지의 URL을 보면

http://127.0.0.1:5500/index.html#side-drawer

페이지의 URL을 보면 ID가 URL에 추가되었음을 볼 수 있다.

다음으로 타겟 선택자를 사용한다.

#side-drawer{
    width: 100%;  /* 전체 높이와 너비를 차지함  */
    height: 100%;
    background-color: rgb(29, 26, 27);
    position: fixed;
    top: 0;
    left: 0;
    display: none;
}

#side-drawer:target{
    display: block;
}

사이드바의 기본 display를 none으로 설정해놓고, 타겟 선택자로 ID인 side-drawer가 URL에 추가되었을 시 display:block;을 적용하여 사이드바가 나타나도록 했다. 이제 햄버거 아이콘을 클릭하면 사이드바가 성공적으로 나타난다.

그런데 사이드바가 나타나면 햄버거 아이콘이 사라지므로 원래의 페이지로 돌아갈 수가 없다. 그러므로 사이드바에 header태그를 추가한 후 다시 햄버거 아이콘을 추가하여 같은 방식으로 진행하면 된다.

<aside id="side-drawer">
      <header>
        <a href="#" class="menu-btn">
          <span></span>
          <span></span>
          <span></span>
        </a>
      </header>
      <ul>
        <li>
          <a href="">Browse Meals</a>
        </li>
        <li>
          <a href="">My Orders</a>
        </li>
      </ul>
</aside>

참조를 #로 하게 되면 시작 페이지의 맨 위로 가라는 명령이라고 한다.

이제 새로 만든 햄버거 아이콘의 스타일을 원래 페이지의 스타일과 동일하게 맞춰 놓으면

원하던 목표를 이루게 된다

+모바일 페이지에만 나타나야 하므로 햄버거 아이콘의 기본 display를 none으로 설정 해놓고 미디어 태그에서 display: flex;로 나타나도록 설정하면 모바일에서만 햄버거 아이콘이 보이게 된다. 무지성으로 block으로 설정하지 않도록 주의하자.

profile
공부 정리용 블로그

0개의 댓글