position - 2중 서브메뉴 만들기

yricog·2021년 10월 12일

position은 마치 '포스트잇'을 떼어서 원하는 위치에 붙이는 것과 같다.
그래서 position을 적용하는 순간 해당 요소는 위치(0,0)에 홀로 가서 붙는다.

position의 속성

position : static (기본값) - 다른 대부분의 요소의 디폴트값이기도 하다.
relative : 이동할 요소의 부모에 적용 - 기준점 잡기
absolute : 이동할 요소에 적용
- 이동할 거리 설정
  - left : 왼쪽 기준 (오른쪽으로 이동)
  - right : 오른쪽 기준
  - top : 위쪽 기준 (아래로 이동)
  - bottom : 아래 기준
fixed : 화면을 내려도 그대로 고정되어 보여지는 상태

<style>
  ul{ position : relative; } /*부모 요소*/
  li{ position : absolute; left:180px; top:50px } /*움직일 요소*/
</style>

z-index 함께 알아두기

z-index는 position을 적용하여 어떠한 요소를 위치시킨 상황에서,
두개 이상의 요소가 서로 겹치거나 한 요소가 다른 요소를 덮으려는 상황에서 사용한다. z-index속성이 없을 땐 기본값으로 0이 들어가며 큰 숫자가 작은 숫자를 덮는다. 확실히 하기 위해 100정도의 숫자를 사용하기도.
값이 서로 같을경우 나중에 오는 태그가 더 높게 출력된다.

{ z-index : 2; } / { z-index : 1; }

position을 이용한 서브메뉴 만들기

html

<body>
  <div id="wrap">
    <header>
      <h1 class="text-center">서브메뉴 만들기</h1>
        <nav>
          <ul class="gnb">
            <li>
              <a href="#">main1</a>
              <ol class="lnb">
                <li><a href="#">submenu1</a></li>
                <li><a href="#">submenu2</a></li>
                <li><a href="#">submenu3</a></li>
              </ol>
            </li>
              
            <li>
              <a href="#">main2</a>
              <ol class="lnb">
                <li><a href="#">submenu1</a></li>
                <li><a href="#">submenu2</a></li>
                <li><a href="#">submenu3</a></li>
              </ol>
            </li>

            <li>
              <a href="#">main3</a>
              <ol class="lnb">
                <li><a href="#">submenu1</a></li>
                <li><a href="#">submenu2</a></li>
                <li><a href="#">submenu3</a></li>
                <li><a href="#">submenu4</a></li>
              </ol>
            </li>
            
            <li>
              <a href="#">main4</a>
              <ol class="lnb">
                <li><a href="#">submenu1</a></li>
                <li><a href="#">submenu2</a></li>
                <li><a href="#">submenu3</a></li>
                <li><a href="#">submenu4</a></li>
              </ol>
            </li>
          </ul>
        </nav>
    </header>

    <section>이미지</section>

    <footer>
      <address>&copy;Designde by Roong</address>
    </footer>
  </div>
</body>

메인메뉴 안에 들어갈 서브메뉴들을 각각 작성해준다.

css

☝🏻 메인메뉴 설정

먼저, 각 메인메뉴의 크기를 150px로 정한 후 사이 간격을 10px씩 주기로 한다.
총 width값 = 630px
메인 메뉴를 가로로 정렬 .gnb {display : flex;}
메인 메뉴 사이 간격 설정 .gnb {justify-content:space-between;}
border로 인해 가로 사이즈가 늘어나지 않도록 li{box-sizing : border-box;}를 함께 적용
메인메뉴 컨텐츠영역 전체에 anchor 태그가 적용되도록 height 넣어주기
a{display:block; height:50px; line-height:50px; text-align:center;}
서브메뉴 위치의 기준점이 될 메인메뉴에 position 적용 .gnb> li{position:relative;}
메인메뉴에 커서를 올렸을 때 색상변경 li:hover> a{background-color:seagreen;}

☝🏻 서브메뉴 설정 (중요!!)

서브메뉴 list를 포함하는 ol class="lnb" - 화면안보이게, 포지션, 보더 설정

.lnb { display:none; //커서를 올렸을 때 보이기 위해//
       position:absolute; 
       lift:-1px; //상위메뉴에 설정한 border:1px 때문에 자식요소가 밀려나서//
       top:50px; //li 높이만큼 설정//
       width:100%; //absolute를 적용하면 width가 컨텐츠 양만큼 작아지기 때문에//
       border:1px solid black; }

이제 드디어 서브메뉴가 나오게 해보자!!
li:hover> .lnb{ display : block; }
- 메인메뉴 list에 커서를 올리면 서브메뉴 덩어리 .lnb가 보이게 하는 기능
마지막으로 각 리스트에 보더를 알맞게 주고 가세정렬을 한다.

yricog

의미와 가치를 쫓는 개발자 ✨

이전 포스트

CSS "overflow"

다음 포스트