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

박종규님의 프로필 이미지
박종규

작성한 질문수

문과생이 가르쳐 주는 퍼블리싱 - 클론코딩

상단 공통 영역 스타일 1

제이쿼리 연결 질문드립니다.

해결된 질문

작성

·

241

0

HTML 구조설계까지 끝내고 css 스타일 입히기 과정을 듣고 있는데 선생님 강의를 보면 슬라이드 자동 효과가 적용되고 .gnb 호버하면 서브메뉴가 내려오는데 저는 적용이 안되서 질문드립니다.

@charset "utf-8";

@import url("./common.css");

/* layout */
header {
  position: relative;
  z-index: 9;
  height: 156px;
}
header .header {
  position: relative;
  z-index: 1;
  width: 1200px;
  margin: 0 auto;
}
header h1 {
  position: absolute;
  left: 0;
  top: 17px;
  width: 194px;
  height: 45px;
}
header h1 a {
  display: block;
  height: 45px;
  font-size: 0 !important;
  background: url(../images/logo.png) no-repeat 0;
}
header .util {
  position: absolute;
  right: 0;
  top: 39px;
}
header .util .btn_menu {
  position: relative;
  width: 20px;
  height: 16px;
  /* background-color: red; */
}
header .util .btn_menu span {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  left: 0;
  width: 20px;
  height: 2px;
  background-color: #666;
  font-size: 0;
}
header .util .btn_menu:before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 20px;
  height: 2px;
  background-color: #666;
  font-size: 0;
}
header .util .btn_menu:after {
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  width: 20px;
  height: 2px;
  background-color: #666;
  font-size: 0;
}
header .util button ~ button {
  margin-left: 31px;
}
header .util .btn_login {
  background: url(../images/ic_login.png) no-repeat 0 50%;
  padding-left: 29px;
}
header .util .btn_logout {
  background: url(../images/ic_login.png) no-repeat 0 50%;
  padding-left: 29px;
}
header h2 {
  font-size: 0;
}
header .gnb {
  margin-top: 104px;
}
/* gnb 메뉴 */
header .gnb > ul {
  display: flex;
  justify-content: space-between;
  font-size: 20px;
  font-family: "nanums";
}
header .gnb ul ul {
  overflow: hidden;
  height: 0;
  margin-top: 20px;
  font-size: 17px;
}
header .gnb ul ul a:hover {
  color: #f68b12;
}
header .gnb ul ul a {
  transition: all 0.2s ease-in-out;
}
header .gnb ul ul li ~ li {
  margin-top: 16px;
}
header::after {
  content: "";
  position: absolute;
  top: 156px;
  width: 100%;
  height: 0;
  background-color: white;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 10%);
  transition: all 0.2s ease-in-out;
}
header .openGnb::after {
  height: 180px;
}
header .openGnb .gnb ul ul {
  height: auto;
  overflow: visible;
}
header .openGnb .over > a:before {
  width: 100%;
}
header .gnb .depth1 > a {
  position: relative;
  text-align: center;
  display: block;
  height: 51px;
  /* background-color: red; */
}
header .gnb .depth1 > a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  width: 0%;
  height: 3px;
  background-color: #f68b12;
  transition: all 0.2s ease-in-out;
}

/* main */
.dm_body .visualSlider .item {
  height: 597px;
}
.dm_body .visualSlider .txt_g {
  width: 1200px;
  margin: 170px auto 0;
  line-height: 82px;
  color: #fff;
  font-family: "nanum";
}
.dm_body .visualSlider .txt_g p:nth-child(1) {
  font-size: 36px;
}
.dm_body .visualSlider .txt_g p:nth-child(2) {
  font-size: 72px;
}

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="utf-8" />
  <title>러빙코드 실습 메인 화면</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <script src="./resources/js/jquery.min.js"></script>
  <script src="./resources/js/slick.js"></script>
  <script src="./resources/js/ui.js"></script>
  <link href="./resources/css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div class="skiptoContent">
    <a href="http://#dMbody">본문 바로가기</a>
  </div>
  <header>
    <div class="header">
      <h1><a href="main.html">biensoft</a></h1>
      <div class="util">
        <button class="btn_login">로그인</button>
        <!-- <button class="btn_logout">로그아웃</button> -->
        <button class="btn_menu"><span>전체메뉴</span></button>
      </div>
      <h2>주 메뉴</h2>
      <nav class="gnb">
        <ul>
          <li class="depth1">
            <a href="">교육기관 소개</a>
            <ul>
              <li><a href="">원장 인사말</a></li>
              <li><a href="">교육기관 역사</a></li>
              <li><a href="">교육기관 소개</a></li>
            </ul>
          </li>
          <li class="depth1">
            <a href="">교육시청</a>
            <ul>
              <li><a href="">인기순 강좌 신청</a></li>
              <li><a href="">대상별 강좌 신청</a></li>
              <li><a href="">분야별 강좌 신청</a></li>
              <li><a href="">기간별 강좌 신청</a></li>
            </ul>
          </li>
          <li class="depth1">
            <a href="">강사뱅크</a>
            <ul>
              <li><a href="">강사 보기</a></li>
              <li><a href="">강사 신청</a></li>
            </ul>
          </li>
          <li class="depth1">
            <a href="">알림마당</a>
            <ul>
              <li><a href="">공지사항</a></li>
              <li><a href="">이벤트</a></li>
              <li><a href="">자주하는 질문</a></li>
            </ul>
          </li>
          <li class="depth1">
            <a href="">참여마당</a>
            <ul>
              <li><a href="">강의 리뷰</a></li>
              <li><a href="">묻고 답하기</a></li>
            </ul>
          </li>
          <li class="depth1"><a href="">MY 페이지</a></li>
        </ul>
      </nav>
    </div>
  </header>
  <div id="dMbody" class="dm_body">
    <div class="col_a">
      <div class="visualSlider">
        <div class="item" style="
              background: url(./resources/images/tmp/visual1.jpg) no-repeat 50%
                0;
              background-size: cover;
            ">
          <div class="txt_g">
            <p>살아 있는 배움! 행복학습</p>
            <p>커피바리스타</p>
          </div>
        </div>
        <div class="item" style="
              background: url(./resources/images/tmp/visual2.jpg) no-repeat 50%
                0;
              background-size: cover;
            ">
          <div class="txt_g">
            <p>살아 있는 배움! 행복학습</p>
            <p>요가</p>
          </div>
        </div>
        <div class="item" style="
              background: url(./resources/images/tmp/visual3.jpg) no-repeat 50%
                0;
              background-size: cover;
            ">
          <div class="txt_g">
            <p>살아 있는 배움! 행복학습</p>
            <p>캘리그라피</p>
          </div>
        </div>
      </div>
    </div>
    <!--col_a-->
    <section class="col_b">
      <div class="box">
        <ul class="tabs">
          <li><a href="#view1">인기순 강좌</a></li>
          <li><a href="#view2">대상별 강좌</a></li>
          <li><a href="#view3">분야별 강좌</a></li>
        </ul>
        <div class="views" id="view1">
          <h2>인기순 강좌</h2>
          <ul>
            <li>
              <a href="#"><img src="./resources/images/tmp/thum1.jpg" alt="필라테스" />필라테스</a>
            </li>
            <li>
              <a href="#"><img src="./resources/images/tmp/thum2.jpg" alt="커피바리스타" />커피바리스타</a>
            </li>
            <li>
              <a href="#"><img src="./resources/images/tmp/thum3.jpg" alt="캘리그라피" />캘리그라피</a>
            </li>
            <li>
              <a href="#"><img src="./resources/images/tmp/thum4.jpg" alt="풍경사진" />풍경사진</a>
            </li>
            <li>
              <a href="#"><img src="./resources/images/tmp/thum5.jpg" alt="서양화" />서양화</a>
            </li>
          </ul>
        </div>
        <div class="views" id="view2">
          <h2>대상별 강좌</h2>
          <ul>
            <li>
              <a href="#"><img src="./resources/images/tmp/thum1.jpg" alt="필라테스" />필라테스</a>
            </li>
            <li>
              <a href="#"><img src="./resources/images/tmp/thum2.jpg" alt="커피바리스타" />커피바리스타</a>
            </li>
            <li>
              <a href="#"><img src="./resources/images/tmp/thum3.jpg" alt="캘리그라피" />캘리그라피</a>
            </li>
            <li>
              <a href="#"><img src="./resources/images/tmp/thum4.jpg" alt="풍경사진" />풍경사진</a>
            </li>
            <li>
              <a href="#"><img src="./resources/images/tmp/thum5.jpg" alt="서양화" />서양화</a>
            </li>
          </ul>
        </div>
        <div class="views" id="view3">
          <h2>분야별 강좌</h2>
          <ul>
            <li>
              <a href="#"><img src="./resources/images/tmp/thum1.jpg" alt="필라테스" />필라테스</a>
            </li>
            <li>
              <a href="#"><img src="./resources/images/tmp/thum2.jpg" alt="커피바리스타" />커피바리스타</a>
            </li>
            <li>
              <a href="#"><img src="./resources/images/tmp/thum3.jpg" alt="캘리그라피" />캘리그라피</a>
            </li>
            <li>
              <a href="#"><img src="./resources/images/tmp/thum4.jpg" alt="풍경사진" />풍경사진</a>
            </li>
            <li>
              <a href="#"><img src="./resources/images/tmp/thum5.jpg" alt="서양화" />서양화</a>
            </li>
          </ul>
        </div>
      </div>
    </section>
    <!--col_b-->
    <section class="col_c">
      <div class="colc_a">
        <ul class="tabs">
          <li><a href="">공지사항</a></li>
          <li><a href="">자주하는 질문</a></li>
        </ul>
        <div class="board_list" id="notice">
          <h2>공지사항</h2>
          <ul>
            <li>
              <a href="#"><i>NEW</i>필라테스 12월 프로그램 할인 이벤트!
                모집안내합니다.</a><span>2022.10.01</span>
            </li>
            <li>
              <a href="">국내 국제 바리스타 자격까지 완벽 교육 지원합니다. 하반기
                바리스타 교육생 모집중입니다. 바리스타 교육생 모집
                중입니다.</a><span>2022.10.01</span>
            </li>
            <li>
              <a href="">손글씨를 아름답게! 켈리그라피 수강생 모집 중!</a><span>2022.10.01</span>
            </li>
            <li>
              <a href="">세상의 모든 풍경을 사진속에! 풍경사진 초급과정 모집
                안내합니다.</a><span>2022.10.01</span>
            </li>
            <li>
              <a href="">취미에서 부터 전문 화가 양성까지! 개인별 맞춤 과정 프로그램
                안내합니다.</a><span>2022.10.01</span>
            </li>
          </ul>
        </div>
        <div class="board_list" id="qna">
          <h2>자주하는 질문</h2>
          <ul>
            <li>
              <a href="">온라인 영상이 작동이 잘되요.</a><span>2022.10.01</span>
            </li>
            <li>
              <a href="">결제신청 후 확인은 어디서 하나요?</a><span>2022.10.01</span>
            </li>
            <li>
              <a href="">취소/환불 절차를 알고 싶어요</a><span>2022.10.01</span>
            </li>
            <li>
              <a href="">세상의 모든 풍경을 사진속에! 풍경사진 초급과정 모집
                안내합니다.</a><span>2022.10.01</span>
            </li>
            <li>
              <a href="">취미에서 부터 전문 화가 양성까지! 개인별 맞춤 과정 프로그램
                안내합니다.</a><span>2022.10.01</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="colc_b">
        <div class="event_list">
          <h2>이벤트</h2>
          <div class="eventSlider">
            <div class="item">
              <a href=""><img src="./resources/images/tmp/event1.jpg" alt="2022년 하반기 교육강좌 개설안내 2022.11.4(목)" /></a>
            </div>
            <div class="item">
              <a href=""><img src="./resources/images/tmp/event2.jpg" alt="2022년 하반기 교육강좌 개설안내 2022.11.4(목)" /></a>
            </div>
            <div class="item">
              <a href=""><img src="./resources/images/tmp/event3.jpg" alt="2022년 하반기 교육강좌 개설안내 2022.11.4(목)" /></a>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!--col_c-->
    <section class="col_d">
      <div class="box">
        <h2>바로가기 링크</h2>
        <p class="txt">삶이 있는 배움!<span>행복학습!</span></p>
        <ul>
          <li class="link1">
            <a href="#"><strong>교육신청</strong>
              <p>다양한 교육 프로그램을<br />신청해 보세요.</p>
            </a>
          </li>
          <li class="link2">
            <a href="#"><strong>강사뱅크</strong>
              <p>깅의 중인<br />강사들의 현황파악을 해보세요.</p>
            </a>
          </li>
          <li class="link3">
            <a href="#"><strong>묻고 답하기</strong>
              <p>궁금한 어떤 것이든<br />물어보세요.</p>
            </a>
          </li>
          <li class="link4">
            <a href="#"><strong>온라인 동영상 강좌</strong>
              <p>온라인 비대면 강좌로<br />편하게 교육받으세요.</p>
            </a>
          </li>
        </ul>
      </div>
    </section>
    <!-- col_d-->
  </div>
  <footer>
    <div class="footer">
      <ul class="foot_menu">
        <li><a href="">개인정보 처리방침</a></li>
        <li><a href="">이용약관</a></li>
        <li><a href="">이메일수집거부</a></li>
        <li><a href="">사이트맵</a></li>
      </ul>
      <div class="family_site">
        <button type="button" class="select">패밀리 사이트</button>
        <ul class="option">
          <li><a href="#" target="_blank">사이트1</a></li>
          <li><a href="#" target="_blank">사이트2</a></li>
          <li><a href="#" target="_blank">사이트3</a></li>
          <li><a href="#" target="_blank">사이트4</a></li>
          <li><a href="#" target="_blank">사이트5</a></li>
          <li><a href="#" target="_blank">사이트6</a></li>
        </ul>
      </div>
      <address>
        서울 강남구 학동로<br />
        Tel.02-1234-5678
      </address>
      <p class="copyright">COPYRIGHT(C) ALL RIGHT RESERVED.</p>
    </div>
  </footer>
</body>

</html>
클론코딩클론코딩

답변 1

0

러빙코드님의 프로필 이미지
러빙코드
지식공유자

header.openGnb:after {height: 180px;}

header.openGnb .gnb ul ul {height: auto; overflow: visible;}

header.openGnb .over > a:before {width: 100%;}

header .openGnb => header.openGnb

  • 태그선택자와 클래스선택자 한 칸 띄어져 있네요. 붙여주심 해결 되세요

     

감사합니다 :)

 

박종규님의 프로필 이미지
박종규

작성한 질문수

전체 Q&A
질문하기