inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

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

D유형 E유형 네비게이션 제작 01(왼쪽 개별 아래, 왼쪽 개별 오른쪽)

d,e유형 네비게이션 제작시 서브메뉴가 고정이 안됩니다

해결된 질문

296

양신영

작성한 질문수 1

1

강의 de유형 네비게이션 7:55분초를 보면 선생님 서브메뉴는 고정되어서 잘 나오는데 제꺼는 고정이 안되고 자꾸 슬라이드 업 되어서 서브메뉴에 호버를 할수가 없습니다

 

제생각에는 엡솔루트 준 뒤로 이러는것 같은데..ㅠ

코드올려드립니다 왜이러는걸까요 ㅠㅜ

html

         <!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>D-1</title>
  </head>
  <link rel="stylesheet" href="./css/style.css" />
  <body>
    <div class="container">
      <div class="main-content">
        <div class="left">
          <div class="header">
            <div class="header-logo"></div>
            <div class="menu">
              <ul class="menu1">
                <li>
                  <a href="#none"> meun-1</a>
                  <div class="sub-menu">
                    <a href="#none">meun-2</a>
                    <a href="#none">meun-2</a>
                    <a href="#none">meun-2</a>
                    <a href="#none">meun-2</a>
                  </div>
                </li>
                <li>
                  <a href="#none"> meun-1</a>
                  <div class="sub-menu">
                    <a href="#none">meun-2</a>
                    <a href="#none">meun-2</a>
                    <a href="#none">meun-2</a>
                    <a href="#none">meun-2</a>
                  </div>
                </li>
                <li>
                  <a href="#none"> meun-1</a>
                  <div class="sub-menu">
                    <a href="#none">meun-2</a>
                    <a href="#none">meun-2</a>
                    <a href="#none">meun-2</a>
                    <a href="#none">meun-2</a>
                  </div>
                </li>
                <li>
                  <a href="#none"> meun-1</a>
                  <div class="sub-menu">
                    <a href="#none">meun-2</a>
                    <a href="#none">meun-2</a>
                    <a href="#none">meun-2</a>
                    <a href="#none">meun-2</a>
                  </div>
                </li>
              </ul>
            </div>
            <div class="spot-menu"></div>
          </div>
        </div>
        <div class="right">
          <div class="slide">
            <div class="slide-img"></div>
            <div class="slide-banner">
              <a href="#none"><img src="./images/banner-01.png" alt=""></a>
              <a href="#none"><img src="./images/banner-02.png" alt=""></a>
              <a href="#none"><img src="./images/banner-03.png" alt=""></a>
            </div>
          </div>
          <div class="items">
            <div class="shortcut">
              <a href="#none"
                ><img src="./images/shortcut-01.png" alt="shortcut-01"
              /></a>
              <div class="shortcut-content">
                <h3>얼리버드 선착순 할인 이벤트, 신규강의 최대 30% 할인</h3>
                <p>
                  12월은 사랑의 달~ 코딩웍스에서 여러분께 사랑을 뿌려요~ 12월
                  개강반을 12월 06일까지 접수하는 분들께는 15%~ 20% 의 얼리버드
                  할인을 제공합니다. 더불어 소중한 리뷰를 꼼꼼히 남겨주시는
                  분들을 뽑아 더 큰 적립금을 추가지급해 드릴 예정이오니 리뷰도
                  놓치지 마시고 작성해주세요~^^<br />
                  <b>기간:2022년 12월 18일~ 12월 25일</b>
                </p>
              </div>
              <a href="#none"
                ><img src="./images/shortcut-02.png" alt="shortcut-02"
              /></a>
            </div>
            <div class="news-gallery"></div>
          </div>
        </div>
      </div>
      <div class="footer">
        <div class="footer-logo">
          <a href="#none"
            ><img src="./images/footer-logo.png" alt="footer-logo"
          /></a>
        </div>
        <div class="copyright">
          상호 : (주)코딩웍스 | 대표자 : 홍길동 | 개인정보관리책임자 : 성춘향
          부장 사업장주소 : 경기도 남양주시 별내동 1234 코딩웍스 빌딩 6층
          (주)코딩웍스
        </div>
        <div class="sns">
          <a href="#none"><img src="./images/sns-01.png" alt="sns1" /></a>
          <a href="#none"><img src="./images/sns-02.png" alt="sns2" /></a>
          <a href="#none"><img src="./images/sns-03.png" alt="sns3" /></a>
        </div>
      </div>
    </div>
    <script src="./script/jquery-3.7.1.js"></script>
    <script src="./script/custom.js"></script>
  </body>
</html>

 

css

 

@charset "UTF-8";

body {
  margin: 0;
  background-color: #fff;
  color: #333;
}

a {
  text-decoration: none;
  color: inherit;
}

/* 전체레이아웃 */
.container {
  border: 1px solid red;
}
.main-content {
  border: 1px solid black;
  display: flex;
}
.main-content > div {
  border: 1px solid black;
}
.left {
  width: 200px;
}

.header {
}
.header > div {
  border: 1px solid red;
}
.header-logo {
  height: 100px;
}
.menu {
  height: 400px;
}

.menu1 {
  padding: 0;
}

.menu1 > li {
  position: relative;
}

.menu1 > li > a {
  background-color: #333;
  display: block;
  color: #fff;
  height: 40px;
  line-height: 40px;
  text-align: center;
  transition: 0.5s;
}
.menu1 > li:hover > a {
  border: 1px solid#333;
  background-color: #333;
  color: #fff;
}
.sub-menu {
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  display: none;
}

.sub-menu > a {
  display: block;
  text-align: center;
  height: 35px;
  line-height: 35px;
  background-color: #333;
  color: #fff;
  transition: 0.5s;
}
.sub-menu a:hover {
  background-color: #ffffff;
  color: #333;
}

.spot-menu {
  height: 50px;
}

.right {
  width: calc(100% - 200px);
}

.slide {
  height: 400px;
  position: relative;
}
.slide-img {
  border: 1px solid blue;
  height: 400px;
}

.slide-banner {
  border: 1px solid green;
  position: absolute;
  top: 0;
  right: 0;
}
.slide-banner > a > img {
  width: 180px;
  display: block;
}

.shortcut {
  border: 1px solid black;
  height: 200px;
  display: flex;
  align-items: center;
}
.shortcut-content {
  display: block;
}
.shortcut-content > b {
  font-weight: bold;
}
.news-gallery {
  border: 1px solid red;
  height: 250px;
}

.footer {
  display: flex;
  align-items: center;
  height: 100px;
}
.footer > div {
  text-align: center;
}
.footer-logo {
  width: 200px;
}
.copyright {
  width: calc(100% - 430px);
}
.sns {
  width: 250px;
}

.sns > a > img {
  width: 50px;
  border-radius: 5px;
}

 

js

$(".menu1 li").mouseover(function () {
  $(this).children(".sub-menu").stop().slideDown();
});

$(".menu1 li").mouseleave(function () {
  $(this).children(".sub-menu").stop().slideUp();
});

 

HTML/CSS jquery 웹-디자인

답변 2

2

띵가

도움 되었으면 해서 답변 남겨요..!
문제가 뭘까 하고 궁금해서 같이 찾아 보고 싶어서 해봤는데
.sub-menu 에 z-index:999 했더니 적으신 코드에 잘 됩니다!!
옆 레이아웃 때문에 서브 메뉴가 밑에 깔려서 그런 것 같아요..☞☜..

1

양신영

헉 감사합니다...!!!

0

코딩웍스(Coding Works)

부분 코드로는 문제를 알 수 없으니 html css js 전체 코드를 복사해서 올려주세요~

1

양신영

수정했습니다!

해당 강의 PDF는 어디에 있나요?

1

57

2

2026 웹디자인개발기능사 실기 보는데 필요한 텍스트에디터는 무엇인가요?

1

92

2

예제파일

1

55

1

섹션10-77번강의 내 와이어프레임 pdf 자료 다운로드 어디서 하나요?

1

82

2

보더를 사용해 와이어프레임만드는 강의 html+css소스 다운로드 받을 수 있나요?

1

58

1

시험 시 슬라이드 작성 관련 문의

0

65

1

강의 질문 있습니다

1

69

1

시험 관련 문의

1

61

1

파워포인트 자료 다운로드 버튼 어디에 있나요?

1

55

1

브라우저 화면 줄일 시 빈 공간 발생

0

65

1

서브메뉴가 유지되지 못하고 사라지는데 무엇이 문제 일까요?

1

80

1

슬라이드 및 완성본 관련 사항

1

70

2

D유형 레이아웃 연습중인데 슬라이드 이미지 크기가 변하지 않습니다

1

90

3

B-4연습중인데 네비게이션의 a태그 두께가 이상하고 슬라이드 다운시 문제가 있습니다.

1

50

2

A2 연습중인데 메뉴 배경색과 서브메뉴 크기, 갤러리 그림 정리에 문제가 있습니다

1

69

2

A1 레이아웃 연습중인데 overflow: hidden이나 box-sizing: border-box;가 적용되지 않는 것 같습니다

1

55

2

레이어 팝업 '닫기' 가 안됩니다

1

62

1

공지사항과 갤러리 탭(안)구성 중 마우스 클릭시 색상변경이 안됩니다.

1

84

2

뷰티파이 설치 관련 문의

1

72

3

웹디자인 기능사 웹디자인개발기능사로 개편 되었는데 이 수업만 들어도 가능?

1

87

2

A유형~C유형 수험자 제공파일 어디서

1

74

1

A1 작업하는데 와이어프레임이 무너지고, hover일부가 적용 안되고 메뉴바가 슬라이드를 밀어냅니다. 탭메뉴도 작동하지 않습니다..

0

122

4

footer 높이 값

1

47

2

div 상하분배?가 안돼요

0

72

2