묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결실전! 웹사이트제작! Step by Step! (대방산업_InteractiveWeb)
Splitting / 텍스트가 빠르게 올라는게 아니라 천천히 느리게 올라오게 하려면 어떻게 수정하면 될까요?
Splitting / 텍스트가 빠르게 올라는게 아니라 천천히 느리게 올라오게 하려면 어떻게 수정하면 될까요?
-
미해결Do It! 장고+부트스트랩: 파이썬 웹개발의 정석
배포용 도커 컨테이너 실행이 안됩니다
docker-compose exec web python manage.py migrate를 했는데도 웹에 Bad Request (400) 라고 나옵니다docker-compose logs 내용인데 오류메시지가 어디있는지 모르겠어요
-
미해결웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT
수리검 방지턱(?) 현상
안녕하세요 코딩 1달차 뉴비입니다... 선생님의 지도에 따라 수리검 만들고 화면 밖을 벗어나면 수리검이 없어지는 효과까지 구현을 하였습니다만... 화면밖에서 사라질때 스크롤바가 뜬금없이 나와 방지턱에 걸린 마냥 hero가 올라갔다 내려갔다 합니다... 아래 그림처럼 말이죠... 브라우저 문제일까요?? 구글크롬 사용하고 있습니당..
-
해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
공지사항 날짜부분이 float:right 하면 뒤죽박죽 이상해집니다ㅠㅠ
공지사항에서 날짜부분 float: right 하면 정렬이 이렇게 이상해집니다.혹시 몰라서 글자 넘칠때 쓰는 html 태그를 써보기도 했지만 고쳐지지 않았습니다..ㅠㅠhtml css 너무 길어서 댓글로 첨부드리겠습니다.
-
해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
transition transition-delay속성 질문드립니다.
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- 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 <<이런 식으로 이미지가 연결되어 있는지 확인하면 해당 이미지가 뜨긴 합니다.실제 포트폴리오 사이트를 만들어보고 싶어서 맨 땅에 헤딩 중입니다. 디자이너라서 퍼블 이후 개념들은 잘 모르기도 하고요ㅠㅜ 근데 작업한 게 아까워서라도 제대로 구현되도록 만들고 싶습니다...이런 경우의 문제 아시는 분은 제발 알려주시면 감사하겠습니다.
-
미해결Do It! 장고+부트스트랩: 파이썬 웹개발의 정석
docker-compose exec web manage.py migrate
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/여기에 가보면 저 명령어 두개 입력해도 안된다고 하는데 어떡해야 하나요??
-
미해결코알못에서 웹서비스 런칭까지 : 2021 제주 코딩 베이스캠프(Django)
atom 실행 안됨
안녕하세요. atom 프로그램이 실행되지 않아 문의드립니다. 재설치/재부팅을 여러번 시도해봤으나 실행이 되지 않네요.22년에 지원도 중단된 것 같은데 맞나요?VSC기준으로 강의를 따라가기에 어려움은 없을지 궁금합니다.
-
미해결Do It! 장고+부트스트랩: 파이썬 웹개발의 정석
search_info가 안나옵니다..
(사진)
-
미해결SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱
맥북에서 scss 설치
맥북에서 vscode에 live sass compiler 설치하려고하니 setting docs가 없을때는 어떻게 해야하나요?
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
D타입 메가메뉴 ul 밑에 div 유효성검사 오류
유효성 검사에서 오류가 나옵니다 왜그런걸까요?ㅠ<!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! 장고+부트스트랩: 파이썬 웹개발의 정석
docker-compose build가 안돼요
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 확장자가 더이상 관리되지 않다고 해서beautify css/sass/scss/less 확장자를 다운받았는데괜찮을까요??
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
웹페이지 여는 법
안녕하세요.현재 사이트에 올라와있는 홈페이지 예제를 참고하여 홈페이지 레이아웃을 만들고자 합니다.크롬에서 f12 단축키를 통해 코딩코드를 확인하고 있는데F12로 확인하는 방법 말고 사이트의 코딩을 여는 방법이 있나요?
-
미해결애플 웹사이트 인터랙션 클론!
load 이벤트시 첫 비디오 이미지가 뜨네요.
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
hover했을 때 margin top 설정 시에 왜 hover 전에도 margin top을 써야하죠?
transform강의 4분 13초쯤 보면 hover했을 때 margin top을 50px로 주고 img{} 에도 margin top을 0으로 써주라고 하셨는데 왜 그래야하는거죠? hover 전에 0인거 안 써줘도 잘 작동하던데 이유가 있나요?
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
D2 슬라이드 배너 내용이 보이지 않습니다.
<!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 커버도 똑바로 준건지 궁금합니다그외에 또 문제사항은 없을까요??
-
해결됨[코드캠프] 시작은 프리캠프
실습4 함수작성방법 예제
const sendVerificationCode = () => { const token = String(Math.floor(Math.random() * 1000000)).padStart(6, "0") document.getElementById("verification__code").innerText = token document.getElementById("verification__code").style.color = "#" + token } const sendVerificationCode = () => { document.getElementById("verification__code").innerText = String(Math.floor(Math.random() * 1000000)).padStart(6, "0") document.getElementById("verification__code").style.color = "#" + String(Math.floor(Math.random() * 1000000).padStart(6, "0")) }상단의 코드와 하단의 코드 중 저는 하단의 코드로 작성했었는데, 이 경우 랜덤한 숫자는 나오는데 색은 변화가 없었습니다. 해당 이유를 알고 싶습니다!
