173만명의 커뮤니티!! 함께 토론해봐요.
미해결
애플 웹사이트 인터랙션 클론!
안녕하세요. 알려주신 인강 내용을 토대로 메인 화면을 만들었고 html 로컬 화면에서는 제대로 작동하는 것을 확인했습니다. 그런데 실제로 도메인을 사고 웹호스팅 하는 방법을 찾아서 연결했더니 js에 적용된 이미지들과 텍스트가 나타나질 않습니다.ㅠㅜ html과 css에 연결된 내용은 큰 덩어리들은 뜨는 것 같은데 왜 js에 연결된 인터랙션과 이미지, 콘텐츠 내용은 나타나질 않는 것일까요? 도메인/images/이미지이름.png <<이런 식으로 이미지가 연결되어 있는지 확인하면 해당 이미지가 뜨긴 합니다. 실제 포트폴리오 사이트를 만들어보고 싶어서 맨 땅에 헤딩 중입니다. 디자이너라서 퍼블 이후 개념들은 잘 모르기도 하고요ㅠㅜ 근데 작업한 게 아까워서라도 제대로 구현되도록 만들고 싶습니다...이런 경우의 문제 아시는 분은 제발 알려주시면 감사하겠습니다.
HTML/CSS javascript 웹-디자인 인터랙티브-웹 클론코딩 웹호스팅 도메인
qwd3681
2023-04-10T10:57:42.670Z
댓글 2
좋아요 0
조회수 1261
미해결
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/ 여기에 가보면 저 명령어 두개 입력해도 안된다고 하는데 어떡해야 하나요??
HTML/CSS javascript python django bootstrap aws docker tdd
djup1234
2023-04-09T13:12:28.492Z
댓글 1
좋아요 0
조회수 567
미해결
코알못에서 웹서비스 런칭까지 : 2021 제주 코딩 베이스캠프(Django)
안녕하세요. atom 프로그램이 실행되지 않아 문의드립니다. 재설치/재부팅을 여러번 시도해봤으나 실행이 되지 않네요. 22년에 지원도 중단된 것 같은데 맞나요? VSC기준으로 강의를 따라가기에 어려움은 없을지 궁금합니다.
쿠마몽
2023-04-09T04:31:49.935Z
댓글 1
좋아요 0
조회수 408
미해결
Do It! 장고+부트스트랩: 파이썬 웹개발의 정석
(사진)
HTML/CSS javascript python django bootstrap aws docker tdd
djup1234
2023-04-08T03:38:52.449Z
댓글 2
좋아요 0
조회수 375
미해결
SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱
맥북에서 vscode에 live sass compiler 설치하려고하니 setting docs가 없을때는 어떻게 해야하나요?
2023-04-07T23:51:32.004Z
댓글 1
좋아요 1
조회수 583
미해결
[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() })
박수빈
2023-04-07T07:36:30.630Z
댓글 1
좋아요 1
조회수 805
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
도커 다운받는 링크 복사 할때 공백 생겨서 필요 하신분 쓰시라고 링크 올려 두겠습니다. https://www.digitalocean.com/community/tutorials/how-to-install-and-use-docker-on-ubuntu-22-04
react node.js postgresql docker typescript 클론코딩 next.js
rhkdtjd_12
2023-04-07T07:36:17.230Z
댓글 2
좋아요 2
조회수 1163
미해결
Do It! 장고+부트스트랩: 파이썬 웹개발의 정석
cmder에 docker-compose build 입력했더니 no configuration file provided: not found 라는 문구가 나오면서 안됩니다.
HTML/CSS javascript python django bootstrap aws docker tdd
djup1234
2023-04-07T04:35:34.058Z
댓글 1
좋아요 0
조회수 1614
미해결
[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
혹시 2번페이지로 갔을 경우 뒤로가기 버튼을 추가하여 1번페이지로 가고 싶은데 onclick: history.back();코드만 추가하면 되는 건가요?
HTML/CSS javascript bootstrap
CHOIᅵ
2023-04-06T17:33:50.849Z
댓글 1
좋아요 0
조회수 446
미해결
Do It! 장고+부트스트랩: 파이썬 웹개발의 정석
검색어를 입력하고 go버튼을 눌러도 작동하지 않고Uncaught ReferenceError: searchPost is not defined at HTMLButtonElement.onclick 라고 메시지가 뜹니다.
HTML/CSS javascript python django bootstrap aws docker tdd
2023-04-06T15:25:59.879Z
댓글 1
좋아요 0
조회수 320
미해결
SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱
beautify 확장자가 더이상 관리되지 않다고 해서 beautify css/sass/scss/less 확장자를 다운받았는데 괜찮을까요??
hrk
2023-04-06T12:42:01.527Z
댓글 1
좋아요 1
조회수 579
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
안녕하세요. 현재 사이트에 올라와있는 홈페이지 예제를 참고하여 홈페이지 레이아웃을 만들고자 합니다. 크롬에서 f12 단축키를 통해 코딩코드를 확인하고 있는데 F12로 확인하는 방법 말고 사이트의 코딩을 여는 방법이 있나요?
lek7248
2023-04-06T09:19:09.042Z
댓글 3
좋아요 1
조회수 438
미해결
애플 웹사이트 인터랙션 클론!
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); } 이렇게 처리하니 문제가 없는 듯 한데, 이게 저한테만 생기는 문제인지, 아니라면 제가 위와 같이 처리한 방법이 맞는것인지 궁금합니다.
HTML/CSS javascript 웹-디자인 svg 인터랙티브-웹 클론코딩
Good9moon
2023-04-06T08:46:28.267Z
댓글 2
좋아요 0
조회수 541
해결됨
코딩은 처음이라 with 웹 퍼블리싱 - CSS
transform강의 4분 13초쯤 보면 hover했을 때 margin top을 50px로 주고 img{} 에도 margin top을 0으로 써주라고 하셨는데 왜 그래야하는거죠? hover 전에 0인거 안 써줘도 잘 작동하던데 이유가 있나요?
seung lee
2023-04-06T08:30:50.223Z
댓글 1
좋아요 0
조회수 403
미해결
[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 커버도 똑바로 준건지 궁금합니다 그외에 또 문제사항은 없을까요??
박수빈
2023-04-06T08:03:56.026Z
댓글 1
좋아요 1
조회수 498
해결됨
[코드캠프] 시작은 프리캠프
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")) } 상단의 코드와 하단의 코드 중 저는 하단의 코드로 작성했었는데, 이 경우 랜덤한 숫자는 나오는데 색은 변화가 없었습니다. 해당 이유를 알고 싶습니다!
권정훈
2023-04-06T07:16:54.714Z
댓글 1
좋아요 0
조회수 322
해결됨
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
선생님~ padding-left:30px; 이 부분이 placeholder 블럭안으로 가야할 거같아요 input[type="email"], input[type="password"] {} 이 블럭안에 있으면 밑에 이미지처럼 중앙에 안맞더라고요~
위니
2023-04-06T06:23:59.179Z
댓글 1
좋아요 2
조회수 429
해결됨
[개념반] 배워서 바로 쓰는 Pandas
section1. where 강의자료 문제 16번 풀이에서 첫번째 파라미터에 ':'을 입력해주셨는데 어떤 의미인가요?
까망
2023-04-06T03:06:54.246Z
댓글 1
좋아요 0
조회수 457
미해결
처음 만난 리액트(React)
안녕하세요 소플님!! 좋은 강의 너무 잘 듣고 있습니다. 다름이 아니라 chapter_5에서 npm start 를 하면 다음과 같이 실행이 되고 빈 화면이 뜹니다... 어떤 오류인지 찾지 못해서 질문 드립니다..!!
bjo0105
2023-04-06T00:21:31.596Z
댓글 1
좋아요 0
조회수 403
미해결
[개정판] 파이썬 머신러닝 완벽 가이드
안녕하세요, 강의 내용을 Colab를 통해서 실습을 하고 있습니다. 다른 코드를 실행 할때는 별 문제가 없었지만, 산탄데르 은행 데이터셋과 사기검출 데이터셋을 실행할때 read_csv를 통해 csv파일을 읽어오면 실행 할때마다(런타임이 바뀔때 마다) read된 결과가 다른데 왜 그런지 알 수 있을까요? 사기검출 데이터의 경우 25838 rows × 31 columns 로 읽히는 경우도 있고, 39702 rows × 31 columns로 읽어지는 경우도 있습니다. 두 데이터셋다 공통적으로 Nan 값도 생기기도 하네요. 런타임을 몇번 초기화 하다보면 운좋게(?) 정상적으로 읽어지는 경우도 있습니다. 왜 실행할때마다 결과가 다르게 나오는지 궁금합니다!
2023-04-05T11:41:01.814Z
댓글 1
좋아요 0
조회수 413
