display:none 적용 안됨 문제

[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드

D유형 E유형 네비게이션 제작 02(우측 메가 배경 메뉴)-더 쉽게 제작하기

작성

842

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>index</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="container">
    <div class="main-content">
      <div class="left">
        <header>
          <div class="header-logo"></div>
          <div class="nav">
            <ul class="menu">
              <li>
                <a href="#none">메뉴</a>
                <div class="sub-menu">
                  <a href="#none">서브메뉴</a>
                  <a href="#none">서브메뉴</a>
                  <a href="#none">서브메뉴</a>
                  <a href="#none">서브메뉴</a>
                </div>
              </li>
              <li>
                <a href="#none">메뉴</a>
                <div class="sub-menu">
                  <a href="#none">서브메뉴</a>
                  <a href="#none">서브메뉴</a>
                  <a href="#none">서브메뉴</a>
                  <a href="#none">서브메뉴</a>
                </div>
              </li>
              <li>
                <a href="#none">메뉴</a>
                <div class="sub-menu">
                  <a href="#none">서브메뉴</a>
                  <a href="#none">서브메뉴</a>
                  <a href="#none">서브메뉴</a>
                  <a href="#none">서브메뉴</a>
                </div>
              </li>
              <li>
                <a href="#none">메뉴</a>
                <div class="sub-menu">
                  <a href="#none">서브메뉴</a>
                  <a href="#none">서브메뉴</a>
                  <a href="#none">서브메뉴</a>
                  <a href="#none">서브메뉴</a>
                </div>
              </li>
            </ul>
          </div>
          <div class="spot-menu"></div>
        </header>
      </div>
      <div class="right">
        <div class="slide">
          <div class="slide-image"></div>
          <div class="slide-banner"></div>
        </div>
        <div class="items">
          <div class="shortcut"></div>
          <div class="news-gallery"></div>
        </div>
      </div>
    </div>
    <footer>
      <div class="footer-logo"></div>
      <div class="footer-content">
        <div class="footer-link"></div>
        <div class="copyright"></div>
      </div>
    </footer>
  </div>
  <script src="script/jquery-1.12.4.js"></script>
  <script src="script/custom.js"></script>
</body>
</html>

@charset "utf-8";

body {
  margin: 0;
  background: white;
  color: #333;
}
a {
  text-decoration: none;
  color: inherit;
}

/* entire layout */
.container {}
.main-content {
  display: flex;
}
.main-content > div {
  /* height: 800px; */
  border: 1px solid #000;
}
.left {
  width: 200px;
}
.right {
  flex: 1;
}

/* header */
header {
  z-index: 999;
  position: relative;
}
header > div {
  border: 1px solid #f00;
}
.header-logo {
  height: 100px;
}
/* 네비 */
.nav {
  width: 95%;
  margin: 20px auto;
}
.menu {
  list-style: none;
  padding: 0;
  margin: 0;
}
.menu > li {
  position: relative;
}
.menu div {
  display: inline-block;
}
.menu > li > a {
  transition: 0.5s;
  border: 1px solid #000;
  display: block;
  text-align: center;
  padding: 10px;
}
.menu > li:hover > a {
  background: #00000050;
  color: white;
}
.sub-menu {
  border: 1px solid #000;
  display: none;
  background: #00000050;
  width: calc(100vw - 200px);
  top: 0;
  left: 100%;
  position: absolute;
  padding: 6px;
}
.sub-menu > a {
  transition: 0.5s;
  padding: 5px;
  cursor: pointer;
  text-align: center;
  width: 120px;
  color: white;
  display: inline-block;
}
.sub-menu a:hover {
  color: white;
  background: #00000060;
}


/* 네비 */
.spot-menu {
  height: 50px;
}
/* slide */
.slide {
  position: relative;
  height: 400px;
}
.slide > div {
  border: 1px solid #0f0;
}
.slide-image {
  height: inherit;
}
.slide-banner {
  top: 0;
  right: 0;
  width: 150px;
  height: 300px;
  position: absolute;
}


/* news-gallery */
.items {}
.items > div {
  border: 1px solid #000;
}
.news-gallery {
  height: 250px;
}
/* shortcut */
.shortcut {
  height: 200px;
}

/* footer */
footer {
  display: flex;
}
footer > div {
  height: 120px;
  border: 1px solid #000;
}
.footer-logo {
  width: 200px;
}
.footer-content {
  flex:1;
}

.footer-content > div {
  border: 1px solid #0f0;
  height: 50%;
  box-sizing: border-box;
}

$('menu li').mouseenter(function(){
  $('.sub-menu').stop().fadeIn()
})
$('menu li').mouseleave(function(){
  $('.sub-menu').stop().fadeOut()
})

D유형 메가메뉴 제작중

서브메뉴가 display:none으로 없어지지 않는 문제가 생겼습니다.

!important 로 적용하면 없어지긴 하는데 제이쿼리가 안먹네요 혹시 어떤 부분이 잘못된걸까요?

HTML/CSS jquery 웹-디자인

답변 2

코딩웍스(Coding Works)

지식공유자

아래에 있는 속성이 .sub-menu 를 가르키는 것이되므로 불필요한 속성을 넣었으니 삭제하면 아래에 .sub-menu에 display: none 이 작동합니다.

.menu div {

display: inline-block;

}

아래 코드에서 선택자에 점이 바졌습니다.

.menu li로 점을 추가하세요.

$('menu li').mouseenter(function(){

$('.sub-menu').stop().fadeIn()

})

$('menu li').mouseleave(function(){

$('.sub-menu').stop().fadeOut()

})

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. Cheon님. 서브메뉴가 display: none;으로 없어지지 않는 문제를 이해하는 데 도움이 될 수 있는 몇 가지 점을 설명해드리겠습니다. 이와 비슷한 문제는 css 선택자와 jQuery 선택자 및 코드의 정확성을 확인하는 것이 중요합니다.

CSS 선택자 문제: .menu div와 같이 스타일을 지정하면 모든 서브 요소에 영향을 미칠 수 있습니다. 또는 특정 스타일이 상위 스타일에 의하여 오버라이드될 수 있습니다. 따라서, .sub-menu가 제대로 display: none; 처리되지 않는 것을 막기 위해 스타일의 우선순위와 관련된 문제를 점검하세요.
jQuery 선택자 문제: jQuery 코드에서 $('menu li') 대신 $('.menu li') 처럼 클래스 선택자를 사용해야 jQuery가 올바르게 작동합니다. CSS 선택자와 jQuery 선택자가 일치해야 제 기능을 할 수 있습니다.

이와 관련하여, 아래의 게시물을 참고하면 좋은 아이디어를 얻을 수 있습니다:
- D3 visibility: hidden;을 없애면 슬라이드가 보이는 문제

이 질문은 jQuery를 사용하여 서브메뉴의 fadeIn()과 fadeOut()을 조작하는 방법에 대한 문제점과 해결책을 설명합니다. visibility: hidden;의 상황과도 유사성을 가지고 있어 Cheon님의 상황에 많은 도움이 될 수 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

display:none 적용 안됨 문제