172만명의 커뮤니티!! 함께 토론해봐요.
해결됨
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
공지사항에서 날짜부분 float: right 하면 정렬이 이렇게 이상해집니다. 혹시 몰라서 글자 넘칠때 쓰는 html 태그를 써보기도 했지만 고쳐지지 않았습니다..ㅠㅠ html css 너무 길어서 댓글로 첨부드리겠습니다.
해결됨
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
■ 질문 남기실 때 꼭! 참고해주세요. - 먼저 유사한 질문이 있었는지 검색해주세요. - 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다. - HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요. - 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다. 강의 21:35초 경에서 .content{ position: absolute; text-align: center; background-color: #000; color:#fff; height:300px; bottom:-300px; } .gallery li:hover .content{ bottom: 0; transition: 0.5s ; transition-delay: 0.5s; } tranisiton:0.5s 와 tranistion-delay:0.5s를 .content나 .gallery li:hover .content 어느곳에 넣어도 똑같이 동작하는데요. 어디에 넣어야 올바른 건가요 아니면 어느곳에 넣어도 상관이 없나요?ㅠ미리 답변 감사합니다 독학하는 중에 굉장히 도움이 많이 되고 있습니다!!
미해결
애플 웹사이트 인터랙션 클론!
안녕하세요. 알려주신 인강 내용을 토대로 메인 화면을 만들었고 html 로컬 화면에서는 제대로 작동하는 것을 확인했습니다. 그런데 실제로 도메인을 사고 웹호스팅 하는 방법을 찾아서 연결했더니 js에 적용된 이미지들과 텍스트가 나타나질 않습니다.ㅠㅜ html과 css에 연결된 내용은 큰 덩어리들은 뜨는 것 같은데 왜 js에 연결된 인터랙션과 이미지, 콘텐츠 내용은 나타나질 않는 것일까요? 도메인/images/이미지이름.png <<이런 식으로 이미지가 연결되어 있는지 확인하면 해당 이미지가 뜨긴 합니다. 실제 포트폴리오 사이트를 만들어보고 싶어서 맨 땅에 헤딩 중입니다. 디자이너라서 퍼블 이후 개념들은 잘 모르기도 하고요ㅠㅜ 근데 작업한 게 아까워서라도 제대로 구현되도록 만들고 싶습니다...이런 경우의 문제 아시는 분은 제발 알려주시면 감사하겠습니다.
미해결
실전! 스프링 부트와 JPA 활용2 - API 개발과 성능 최적화
OrderQueryRepository 에 findAllByDto_flat 보면 다 join 으로 되어있는데 join과 join fetch (페치 조인)의 차이점은 뭔가요 ..? join도 lazy 로 되어있는거 한번에 끌고오는 건 비슷한 거 같은데 .. ㅜ
미해결
Do It! 장고+부트스트랩: 파이썬 웹개발의 정석
docker-compose exec web manage.py migrate를 입력했는데 django.db.utils.OperationalError: connection to server at "db" (172.18.0.2), port 5432 failed: FATAL: password authentication failed for user "do_it_django_db_user"라는 오류가 나서 검색을 해보니 docker-compose down -v와 docker volume prune을 입력해서 볼륨을 지워야 한다고 하는데 괜찮은건가요?? https://www.doitdjango.com/board/qna/338/ 여기에 가보면 저 명령어 두개 입력해도 안된다고 하는데 어떡해야 하나요??
미해결
실전! 스프링 부트와 JPA 활용2 - API 개발과 성능 최적화
author이랑 isbn이 null로 나와있는데 싱글테이블에서 Album이랑 Movie에 관련된 컬럼은 안나오고 딱 Book이랑만 관련된 author이랑 isbn 만 null로 표시됐는데 이건 JPA가 Book인 걸 알아서 그것만 표시해주는건가요 ?? 어떻게 author이랑 isbn만 표시해주게 되는건지 궁금합니다 ..
미해결
코알못에서 웹서비스 런칭까지 : 2021 제주 코딩 베이스캠프(Django)
안녕하세요. atom 프로그램이 실행되지 않아 문의드립니다. 재설치/재부팅을 여러번 시도해봤으나 실행이 되지 않네요. 22년에 지원도 중단된 것 같은데 맞나요? VSC기준으로 강의를 따라가기에 어려움은 없을지 궁금합니다.
미해결
나도코딩의 자바 기본편 - 풀코스 (20시간)
안녕하세요 나도코딩님 오늘도 열심히 공부중인 학생입니다 ㅠㅠㅠ 복수전공 과목 중 자바로 배우는 자료구조를 수강중인데 사전에 자바 공부도 없이 듣는 수업이라 도통 무슨 소린지 이해가 가질 않네요.. 그래서 현재 고급편 결제하고 섹션9 추상클래스 까지 들은 상태인데 뒤로 갈수록 내용이 어려워져서 복습한다고 속도가 너무 늦어지는 상태에요.. 자료구조 내용을 이해하려면 일단 어떤 파트를 필수적으로 빨리 들어야 하고 어떤 파트는 빼도 되는지 알려주실 수 있을까요??ㅜ 답변 주시는데 도움이 될 지 모르겠지만 교재 한 챕터에 {자바 데이터 타입(기본타입, 참조타입), 제어문(조건문,반복문), 메소드(호출문,메인), try문} 이렇게만 존재하긴 하는데 중간중간 책에는 없는 추상클래스, 입력문 같은 파트도 보여서 감이 안잡히네요..
미해결
나도코딩의 자바 기본편 - 풀코스 (20시간)
안녕하세요~ 강사님, 인터페이스(후반전) 강의를 듣고 있는데, 왜 인터페이스 변수를 만드는지 이해가 가지 않습니다. 수업 내용에서 FactoryCam이 인터페이스 Detectable과 Reportable을 구현하여 인터페이스에 있는 메소드를 FacstoryCam에서 구현해야한다는 것은 이해했습니다. 그리고 다른 클래스의 detect 메소드와 report 메소드를 호출하는것이라서 public void detect(){detecter.detect();} 이고, detecter은 객체이잖아요. 여기서 막힙니다. 이 객체랑 인터페이스 변수랑 무슨 상관인지? FactoryCam 의 인터페이스 변수를 생성해서 변수에 값 저장하는 걸로 하면 되지 않는지? 왜 인터페이스 변수를 선언해서 거기다가 값을 저장하는지, 잘 이해가 안 됩니다.... ㅠㅠ 그리고 추가로, 인터페이스로 다중 상속이 가능하다고 하셨는데, 수업 내용 중 어떤 것이 다중 상속이 되고 있는지 파악하기가 어렵습니다. 혹시, 다른 클래스의 메소드를 호출할 수 있는 부분때문에 다중 상속이 가능한 것인가요? 후반부로 갈수록 어렵네요 ㅠㅠ
미해결
Do It! 장고+부트스트랩: 파이썬 웹개발의 정석
(사진)
미해결
SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱
맥북에서 vscode에 live sass compiler 설치하려고하니 setting docs가 없을때는 어떻게 해야하나요?
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
유효성 검사에서 오류가 나옵니다 왜그런걸까요?ㅠ <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>푸른마을</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"><a href="#none"><img src="images/header-logo.jpg" alt="header-logo"></a></div> <div class="navi"> <ul class="menu"> <li> <a href="#none">Onsale</a> </li> <li> <a href="#none">기획전</a> </li> <li> <a href="#none">푸른마을 레시피</a> </li> <li> <a href="#none">매장안내</a> </li> <div class="sub-back"> <div class="sub-menu"> <a href="#none">할인행사</a> <a href="#none">덤증정</a> </div> <div class="sub-menu"> <a href="#none">봄 먹거리</a> <a href="#none">여름 먹거리</a> <a href="#none">가을 먹거리</a> <a href="#none">겨울 먹거리</a> </div> <div class="sub-menu"> <a href="#none">메인요리</a> <a href="#none">밑반찬</a> <a href="#none">간식</a> <a href="#none">브런치</a> </div> <div class="sub-menu"> <a href="#none">신규매장</a> <a href="#none">추천매장</a> <a href="#none">공지사항</a> </div> </div> </ul> </div> <div class="spot-menu"> <a href="#none">로그인</a> <a href="#none">공지사항</a> </div> </header> </div> <div class="right"> <div class="slide"> <div class="slide-inner"> <div class="slide-items"> <a class="slide-item" href="#none"><img src="images/slide-01.jpg" alt="slide-01"></a> <a class="slide-item" href="#none"><img src="images/slide-02.jpg" alt="slide-02"></a> <a class="slide-item" href="#none"><img src="images/slide-03.jpg" alt="slide-03"></a> </div> </div> <div class="slide-banner"> <a href="#none"><img src="images/slide-banner-01.jpg" alt="slide-banner-01"></a> <a href="#none"><img src="images/slide-banner-02.jpg" alt="slide-banner-02"></a> <a href="#none"><img src="images/slide-banner-03.jpg" alt="slide-banner-03"></a> </div> </div> <div class="items"> <div class="shortcut"> <a href="#none"><img src="images/shortcut-01.jpg" alt="shortcut-01"></a> <div> <br> <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 class="btn"> <a class="active" href="#none">공지사항</a> <a href="#none">갤러리</a> </div> <div class="tabs"> <div class="tab1"> <a class="open-modal" href="#none">스트리밍 서버 이전 작업으로 2시간 서비스 중지<b>2022.12.20</b></a> <a href="#none">얼리버드 선착순 할인 이벤트 최대 50% 할인<b>2022.10.13</b></a> <a href="#none">내 집 마련의 꿈을 꿈이 아닌 현실로 만드는 진짜 방법<b>2022.11.31</b></a> <a href="#none">외국인과 영어로 네이티브처럼 대화하는 노하우! <b>2022.08.09</b></a> <a href="#none">월 500만원 매출을 내는 블로그 운영하는 노하우<b>2022.07.07</b></a> </div> <div class="tab2"> <a href="#none"><img src="images/gallery-01.jpg" alt="gallery-01"></a> <a href="#none"><img src="images/gallery-02.jpg" alt="gallery-02"></a> <a href="#none"><img src="images/gallery-03.jpg" alt="gallery-03"></a> <a href="#none"><img src="images/gallery-01.jpg" alt="gallery-01"></a> <a href="#none"><img src="images/gallery-02.jpg" alt="gallery-02"></a> <a href="#none"><img src="images/gallery-03.jpg" alt="gallery-03"></a> <a href="#none"><img src="images/gallery-01.jpg" alt="gallery-01"></a> </div> </div> </div> </div> </div> </div> <footer> <div class="footer-logo"><a href="#none"><img src="images/footer-logo.png" alt="footer-logo"></a></div> <div class="footer-content"> <div class="footer-shortcut" > <a href="#none">기업소개 제휴 및 입점 문의</a> <a href="#none">이용약관</a> <a href="#none">개인정보처리방침</a> <a href="#none">이메일무단수집거부</a> <a href="#none">사이트맵</a> <a href="#none">인재채용</a> </div> <div> 상호 : (주)코딩웍스 | 대표자 : 홍길동 | 개인정보관리책임자 : 성춘향 부장 <br> 사업장주소 : 경기도 남양주시 별내동 1234 코딩웍스 빌딩 6층 (주)코딩웍스 </div> </div> </footer> </div> <div class="modal"> <div class="modal-content"> <h3>스트리밍 서버 이전으로 서비스 장애</h3> <p>서버 이전 작업으로 고객님들께 불편을 드려서 대단히 죄송합니다. 정상 운영되도록 최선을 다하겠습니다. 감사합니다.</p> <br><br><br><a class="close-modal" href="#none">X 닫기</a> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html>@charset "utf-8"; body { background-color: #fff; color: #333; margin: 0; font-size: 15px; position: relative; } a { text-decoration: none; color: inherit; } .container {} .main-content { display: flex; } .main-content>div { } .left { width: 200px; } .right { flex: 1; } /* header */ header { position: relative; z-index: 10; } header>div { } .header-logo { height: 100px; } .navi { height: 300px; position: relative; } /* navi */ .menu{ list-style: none; padding: 0; margin: 10px; } .menu li{} .menu li > a{ border: #000 1px solid; display: block; padding: 5px; text-align: center; transition: 0.5s; } .menu li:hover > a{ background-color: #333; color: #fff; } .sub-back{ position: absolute; top:0; left: 180px; background-color: #0b042ec0; color: #fff; width: calc(100vw - 180px); height: 130px; display: none; } .sub-menu{ padding-left: 20px; padding-top: 10px; display: flex; align-items: center; gap: 20px; } .sub-menu >a{ text-align: center; display: block; width: 120px; } .sub-menu >a:hover{ background-color: #fff; color: #000; } .spot-menu { height: 50px; display: flex; align-items: center; justify-content: center; } .spot-menu>a::after { content: '|'; padding: 7px; } .spot-menu>a:last-child::after { content: none; } .spot-menu>a:hover { color: blue; text-decoration: underline; } /* slide */ .slide { position: relative; height: 400px; /* overflow: hidden; */ } .slide-inner { position: absolute; height: 400px; font-size: 0; object-fit: cover; width: 100%; top:0; left:0; height: 400px; } .slide-items { height: 400px; } .slide-item{ position: absolute; top:0; left: 0; } .slide-banner { width: 150px; height: 300px; position: absolute; top: 0; right: 0; padding-right: 10px; } .slide-banner a img { border-radius: 5px; } /* items */ .items {} .items>div { } .shortcut { height: 200px; display: flex; } .shortcut a {} .shortcut a img { border-radius: 10px; width: 180px; margin: 10px; } .news-gallery { height: 250px; } .btn { margin: 0 20px; margin-top: 20px; } .btn>a { display: inline-block; width: 100px; border: #333 1px solid; text-align: center; padding: 5px; border-radius: 5px 5px 0 0; background-color: rgb(203, 228, 255); color: #000; margin-bottom: -2px; border-bottom: none; } .btn >.active { background-color: #fff; } .tab1 { margin: 0 20px; padding: 10px; border: #333 1px solid; height: 150px; } .tab1 a { display: block; padding: 5px; border-bottom: #333 1px dashed; } .tab1 a:last-child { border-bottom: none; } .tab1 a b { float: right; font-weight: normal; } .tab2 { margin: 0 20px; border: #333 1px solid; height: 150px; background-color: #fff; display: none; padding: 0 50px; padding-top: 20px; } .tab2 a { padding-left: 10px; } .tab2 a img { width: 150px; } /* footer */ footer { display: flex; } footer>div { height: 120px; } .footer-logo { width: 200px; } .footer-content { flex: 1; } .footer-content>div { height: 60px; padding-left: 20px; box-sizing: border-box; padding-top: 20px; } .footer-shortcut { padding-top: 20px; box-sizing: border-box; } .footer-shortcut>a::after { content: '|'; padding: 7px; } .footer-shortcut>a:last-child::after { content: none; } .footer-shortcut>a:hover { color: blue; text-decoration: underline; } /* modal */ .modal { background-color: #33333328; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; } .modal-content { width: 300px; height: 300px; background-color: #fff; padding: 20px; border-radius: 10px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .close-modal { float: right; border: 1px solid; padding: 5px 15px; } /* tab */ $('.btn> a:first-child').click(function(){ $('.tab1').show() $('.tab2').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) $('.btn> a:last-child').click(function(){ $('.tab2').show() $('.tab1').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) /* modal */ $('.open-modal').click(function(){ $('.modal').fadeIn(500) }) $('.close-modal').click(function(){ $('.modal').fadeOut(500) }) /* slide 가로 또는 세로 슬라이드 제이쿼리 css 수정필요 setInterval(function(){ $('.slide-inner').animate({top:'-100%'},function(){ $('.slide-inner').css({top:0}) $('.slide-item:first-child').appendTo('.slide-items') }) },3500) */ /* 크로스페이드 슬라이드 */ $('.slide-item:gt(0)').hide() setInterval(function(){ $('.slide-item:first-child').fadeOut().next().fadeIn() $('.slide-item:first-child').appendTo('.slide-items') },3500) /* navi */ $('.menu').mouseenter(function(){ $('.sub-back').fadeIn() }) $('.menu').mouseleave(function(){ $('.sub-back').fadeOut() })
미해결
Do It! 장고+부트스트랩: 파이썬 웹개발의 정석
cmder에 docker-compose build 입력했더니 no configuration file provided: not found 라는 문구가 나오면서 안됩니다.
미해결
[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
혹시 2번페이지로 갔을 경우 뒤로가기 버튼을 추가하여 1번페이지로 가고 싶은데 onclick: history.back();코드만 추가하면 되는 건가요?
미해결
Do It! 장고+부트스트랩: 파이썬 웹개발의 정석
검색어를 입력하고 go버튼을 눌러도 작동하지 않고Uncaught ReferenceError: searchPost is not defined at HTMLButtonElement.onclick 라고 메시지가 뜹니다.
미해결
SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱
beautify 확장자가 더이상 관리되지 않다고 해서 beautify css/sass/scss/less 확장자를 다운받았는데 괜찮을까요??
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
안녕하세요. 현재 사이트에 올라와있는 홈페이지 예제를 참고하여 홈페이지 레이아웃을 만들고자 합니다. 크롬에서 f12 단축키를 통해 코딩코드를 확인하고 있는데 F12로 확인하는 방법 말고 사이트의 코딩을 여는 방법이 있나요?
미해결
애플 웹사이트 인터랙션 클론!
window.addEventListener('load' ... 중략sceneInfo[0].objs.context.drawImage(sceneInfo[0].objs.videoImages[0], 0, 0); 안녕하세요. 작업하다 이상해서, 강의자료도 같이 확인해보니 중간에 새로고침시 videoImages의 첫 이미지가 잠시 뜨는데, 아마 위의 코드 때문이 아닌가 합니다. 저 부분은 첫 scene의 장면임에도 불구하고, 뜬다는 것은 찰나이긴 하지만, 첫영역부터 순간적으로 중간으로 이동하면서 나타나는 현상같기도 한데, 이게 컴퓨터의 성능차이일수도 있다는 생각이 들기도 합니다. 저만 이런건지 모르겠습니다만.. 저 코드를 제거하고 중간에서 새로고침해보니 안보여서 문제가 없지만, 최상단 첫화면에서 새로고침하면 이미지가 안보이니 또 문제더군요. 그래서 위 코드를 제거후, 새로고침시 조금 스크롤되는 코드에서 추가 조건문(else)를 붙여서 아래와 같이 수정해보았습니다. if (tempYOffset > 0) { let siId = setInterval(() => { scrollTo(0, tempYOffset); tempYOffset += 5; if (tempScrollCount > 20) { clearInterval(siId); } tempScrollCount++; }, 20); } else { sceneInfo[0].objs.context.drawImage(sceneInfo[0].objs.videoImages[0], 0, 0); } 이렇게 처리하니 문제가 없는 듯 한데, 이게 저한테만 생기는 문제인지, 아니라면 제가 위와 같이 처리한 방법이 맞는것인지 궁금합니다.
해결됨
코딩은 처음이라 with 웹 퍼블리싱 - CSS
transform강의 4분 13초쯤 보면 hover했을 때 margin top을 50px로 주고 img{} 에도 margin top을 0으로 써주라고 하셨는데 왜 그래야하는거죠? hover 전에 0인거 안 써줘도 잘 작동하던데 이유가 있나요?
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>서울구석구석</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"> <a href="#none"><img src="images/header-logo.jpg" alt="header-logo"></a> </div> <div class="navi"> <ul class="menu"> <li> <a href="#none">지금의 서울</a> <div class="sub-menu"> <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> </div> </li> </ul> </div> </header> </div> <div class="right"> <div class="slide"> <div class="slide-inner"> <div class="slide-items"> <a class="slide-item" href="#none"><img src="images/slide-01.jpg" alt="slide-01"></a> <a class="slide-item" href="#none"><img src="images/slide-02.jpg" alt="slide-02"></a> <a class="slide-item" href="#none"><img src="images/slide-03.jpg" alt="slide-03"></a> </div> </div> <div class="slide-banner"> <a href="#none"><img src="images/slide-banner.png" alt="slide-banner"></a> <h3> 얼리버드 할인, <br> 신규강의 최대 30% 할인 </h3> 12월 개강반을 12월 06일까지 접수하는 분들께는 15%~ 20% 의 얼리버드 할인을 제공합니다. 더불어 소중한 리뷰를 꼼꼼히 남겨주시는 분들을 뽑아 더 큰 적립금을 추가지급! 리뷰도 놓치지 마시고 작성해주세요~^^ <br><br> 기간: 12월 18일~ 12월 25일</p> </div> </div> <div class="news-gallery"> <div class="news"> <div class="btn"> <a href="#none">공지사항</a> </div> <div class="tab1"> <a class="open-modal" href="#none">스트리밍 서버 이전 작업으로 2시간 서비스 중지<b>2022.12.20</b></a> <a href="#none">얼리버드 선착순 할인 이벤트 최대 50% 할인<b>2022.10.13</b></a> <a href="#none">내 집 마련의 꿈을 꿈이 아닌 현실로 만드는 진짜 방법<b>2022.11.31</b></a> <a href="#none">외국인과 영어로 네이티브처럼 대화하는 노하우! <b>2022.08.09</b></a> <a href="#none">외국인과 영어로 네이티브처럼 대화하는 노하우! <b>2022.07.07</b></a> </div> </div> <div class="gallery"> <div class="btn"> <a href="#none">갤러리</a> </div> <div class="tab2"> <a href="#none"><img src="images/gallery-01.jpg" alt="gallery-01"><span>퍼블리셔 <br> 취업 진짜 가이드 </span></a> <a href="#none"><img src="images/gallery-02.jpg" alt="gallery-02"><span>초보자가 전문가가 <br> 되는 사진촬영</span></a> <a href="#none"><img src="images/gallery-03.jpg" alt="gallery-03"><span>탄탄한 라인을 <br> 만드는 필라테스</span></a> </div> </div> </div> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="images/footer-logo.png" alt="footer-logo"></a> </div> <div class="copyright"> <p>상호 : (주)코딩웍스 | 대표자 : 홍길동 | 개인정보관리책임자 : 성춘향 부장 <br> 사업장주소 : 경기도 남양주시 별내동 1234 코딩웍스 빌딩 6층 (주)코딩웍스 </p> </div> <div class="family-site"> <select> <option value="family-site-01">Family Site</option> <option value="family-site-01">Family Site</option> <option value="family-site-01">Family Site</option> <option value="family-site-01">Family Site</option> </select> </div> </footer> <div class="modal"> <div class="modal-content"> <h3>스트리밍 서버 이전으로 서비스 장애</h3> <p> 문자셋의 변경에 따라 기존의 DB, data, 웹사이트 솔루션 등의 커스트마이징 등에 상당한 어려움이 있었고, 이에 따른 일부 접속 오류가 있을 수 있었음에 양해를 구합니다. 특히 인터넷익스플로러 11로 접속하셨을 경우 일부 문제은행 목차가 출력되지 않았을 수도 있습니다. 서버 이전 작업으로 고객님들께 불편을 드려서 대단히 죄송합니다. 정상 운영되도록 최선을 다하겠습니다 <br> 감사합니다.</p> <a class="close-modal" href="#none"> X 닫기</a> </div> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> @charset "utf-8"; body{ background-color: #fff; color: #333; position: relative; margin: 0; } a{ text-decoration: none; color: inherit; } .container{ } .main-content{ display: flex; } .main-content > div{ /* border: 1px solid; */ } .left{ width: 200px; } .right{ flex:1; } /* header */ header{} header > div{ } .header-logo{ height: 100px; } .navi{ height: 400px; } .menu{ list-style: none; padding: 0; } .menu li{ display: flex; flex-direction: column; align-items: center; } .menu li > a{ text-align: center; display: block; border: #333 1px solid; width: 180px; padding: 5px; transition: 0.5s; } .menu li:hover > a{ background-color: #333; color: #fff; } .sub-menu{ border: 1px solid #333; background-color: #fff; display: none; } .sub-menu a{ width: 180px; display: block; padding: 5px; text-align: center; } .sub-menu a:hover{ background-color: #3333336c; color: #fff; } /* slide */ .slide{ display: flex; font-size: 0; height: 400px; } .slide-inner{ overflow: hidden; flex: 1; height: 400px; position: relative; } .slide > div{ height: 400px; border: #333 1px solid; } .slide-banner{ width: 230px; text-align: center; } .slide-items{ flex:1; width: 300%; position: absolute; height: inherit; object-fit: cover; } .slide-items{ } .news-gallery{ display: flex; } .news-gallery > div{ height: 250px; } .news{ flex: 1; } .gallery{ flex: 1; } .btn{} .btn > a{ display: block; border: #333 1px solid; padding: 5px; width: 100px; text-align: center; margin: 0 10px; margin-top: 10px; border-radius: 5px 5px 0 0; background-color: #333; border-bottom: none; color: #fff; } .tab1 , .tab2{ margin: 0 10px; border: #333 1px solid; height: 190px; } .tab1 a{ display: block; padding: 5px 15px; border-bottom: #333 1px dashed; padding-top: 10px; } .tab1 a:last-child{ border-bottom: none; } .tab1 a b { float: right; font-weight: normal; } .tab2{ display: flex; justify-content: center; align-items: center; gap: 30px; } .tab2 a span{ display: block; font-size: 14px; text-align: center; } .tab2 a img{ width: 180px; border-radius: 5px; } footer{ display: flex; text-align: center; } footer > div{ height: 100px; } .footer-logo{ width: 200px; } .copyright{ flex: 1; padding-top: 10px; box-sizing: border-box; } .family-site{ width: 230px; padding-top: 30px; box-sizing: border-box; } .modal{ position: absolute; background-color: #3333332c; top:0; left: 0; width: 100%; height: 100%; display: none; } .madal > div{} .modal-content{ text-align: center; padding: 15px; border-radius: 10px; width: 350px; height: 300px; background-color: #fff; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); } .close-modal{ float: right; display: block; border: #333 1px solid; padding: 5px 10px; border-radius: 5px; } $('.menu li').mouseenter(function(){ $(this).children('.sub-menu').stop().slideDown() }) $('.menu li').mouseleave(function(){ $(this).children('.sub-menu').stop().slideUp() }) $('.open-modal').click(function(){ $('.modal').fadeIn(500) }) $('.close-modal').click(function(){ $('.modal').fadeOut(500) }) setInterval(function(){ $('.slide-items').animate({left:'-100%'},function(){ $('.slide-items').css({left:0}) $('.slide-item:first-child').appendTo('.slide-items') }) },3500) 슬라이드 배너밑에 요소가 보이지 않습니다 ㅠ object-fit 커버도 똑바로 준건지 궁금합니다 그외에 또 문제사항은 없을까요??
