13,200원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨문과생이 가르쳐 주는 퍼블리싱 - 클론코딩
.col_b.tabs 부분 질문드립니다!!
.col_b .tabs 강의에서 위 사진에서 잡히는 작은 여백을 없애기 위해서.dm_body .col_b .tabs { text-align: center;font-size: 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>
- 해결됨문과생이 가르쳐 주는 퍼블리싱 - 클론코딩
background 질문입니다
<div class="item"style="background: url(./resources/images/tmp/visual1.jpg) no-repeat 50% 0; background-size: cover;"> 사진을 가운데 설정하기 위해서 no=repeat으로 반복되지 않게 설저을 하고 50% 0을 설정했는데 이거는 어떤 속성인지 알 수 있을까요? 위치를 잡아주는 건가요?