[ CSS / display : flex] hover가 적용되지 않는 것 처럼 보이는 이유

이 글은 Chat ai와 질문을 통해서 결론에 도달한 글을 정리한 글입니다. 따라서 일정 부분 내용이 잘못됐을 수 있다는 것을 이해해 주시기 발랍니다.

 

나는 Header을 만들고 있다. Header는 보통 1depth에 마우스가 hover되면 2depth가 노출되는 구조를 가지고 있다.

그래서 관성적으로 고민없이 1depth <ul >에 display : flex 를 걸고  hover 효과를 넣은 다음에 2depth를 block으로 바뀌게 해 봤는데 작동이 안 된다. 왜 일까?

 

결론부터 말하면 display :flex의 속성 때문이다.

 

display : flex의 속성

flex는 display : block과 달리 자식 요소들의 크기에 따라 부모의 배치와 크기가 결정된다.

flex는 기본적으로 자식 요소들이 자동으로 정렬된다. 자식 요소들의 크기에 맞춰 부모의 크기가 생겨난다. 따라서 자식 요소들이 명시적인 크기를 갖지 않으면 부모 요소의 크기가 0이 되거나, 크기를 가지지 않는 것 처럼 보일 수 있다.

 

 

내 코드의 <nav >는 hover가 되고 <ul class="header-menu-parents-container">는 안되는 이유

 

dislpay : flex 속성 때문이다. 왜냐하면 아래 CSS를 보면 내가 <ul class="header-menu-parents-container">의 자식인 <li >에 명시적으로 코드를 작성하지 않았기 때문이다.

<li >는 요소들이 명시적으로 크기를 갖지 않았기 때문에 기본적으론 콘텐츠에 맞춰 크기가 결정된다. 만약 <li> 요소들에 콘텐츠가 부족하거나 크기가 없다면, 부모인 <ul> 역시 크기를 제대로 가지지 못할 수 있다. 특히 Flexbox는 자식 요소들의 크기에 의존하기 때문에, 자식의 크기가 없으면 부모의 크기도 작아지거나 없어 보일 수 있다.

결과적으로, <ul>이 자식 요소들의 크기에 따라 크기를 가지지 않으니 부모 요소가 화면 상에 가시적인 크기를 갖지 않고, hover 이벤트가 적용되지 않는 것처럼 보일 수 있다.

 

 

 

내 경우 ᅟheader를 HTML으로 아래와 같이 제작.

     

     <nav>

        <ul

          className="header-menu-parents-container"

        >

        {

          menuList.map((menu, list) =>(

            <li

              key={list}

            >

              <Link

                href={menu.url}

              >

              {menu.name}

              </Link>

            </li>

          ))

        }

        </ul>

        {

            <div

              className="header-menu-child-background"

            >

              <div>

                {

                  menuList.map((menu, index) => (

                    menu.children.length > 0 &&

                    <ul

                      className={`header-menu-child-children-${index}`}

                    >

                      {

                         (

                        menu.children.map((child, index) =>(

                          <li key={index}>

                            <Link

                              href={child.url}

                            >

                              {child.name}

                            </Link>

                          </li>

                        ))

                      )

                      }

                    </ul>

                  ))

                }

              </div>

            </div>

        }

      </nav>

 

 

css

 

header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding:0  3rem;

  border-bottom: 1px solid #ededed;

  width: 100%;

}

.header-menu-parents-container {

  display: flex;

  gap: 3rem;

  position: relative;

}

.header-menu-child-background {

  display: none;

  position: absolute;

  left: 0;

  width: 100%;

  height: 120px;

  background-color: var(--color-light);

  padding: 6px;

  border-radius: 6px;

}

 // <nav >는 hover 가 작동됨

nav:hover .header-menu-child-background{

  display: block;

}

 

  // <ul >는 hover가 작동이 안 됨.

.header-menu-parents-container:hover .header-menu-child-background{

  display: block;

}

.header-menu-child-background > div{

  display: grid;

  grid-auto-flow: column;

  max-width: 500px;

  margin-inline: auto;

}

.header-menu-child-background li{

  width: 100%;

}

.header-menu-child-background li a{

  display: block;

  width: 100%;

}

.header-menu-child-background li:not(:nth-last-of-type(1)){

  margin-bottom: 10px;

}

 

결론

display :flex (아마도 grid 포함)는 자식에 의해 크기가 결정되기 때문에 효과가 필요시에는 사이즈를 넣는기 좋다.