코드가 이상해요 ㅠ
해결됨
[코드캠프] 시작은 프리캠프
영상 보면서 그대로 했는데 9번째 줄부터 이상하게 배열이 됩니다. 그리고 12, 13번째 줄에 따옴표가 생겨요. 인증번호 전송을 눌러도 숫자가 일 바뀝니다. 어떻게 해야 하나요?
- HTML/CSS
- javascript
kbtusno12
댓글 1
좋아요 1
조회수 292
묻고 답해요
172만명의 커뮤니티!! 함께 토론해봐요.
안녕하세요 이렇게 나오는데..
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.02
오늘 강의 시작했는데 실습 예제 다운 받으려고 하니 저렇게 나오고 클릭이 안되네요 ㅜ 해결 방법 있을까요? 엣지 크롬 파이어폭스 셋다 저러네요 브라우저 보안 설정 떄문인가 해서 보안도 끄고 들어가봐도 저래요 아 그리고 실습예제 codepen 링크들어가서 보면 버튼눌러도 애니메이션이 반응이 없던데 .. 왜그런지 이유를 모르겠어요 다 그런건 아닌거같고 처음에 motionpath 예제만 그런거 같더라구요
- HTML/CSS
- javascript
- 인터랙티브-웹
- gsap
웹개바르르
댓글 1
좋아요 1
조회수 441
네비게이션 이 사진처럼 덜올라왓는데 커뮤니티쪽에만저런데 뭐가문제일까요 ㅠㅠㅠ
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>b실전</title> <link rel="stylesheet" href="css/b.css"> </head> <body> <div class="container"> <div class="header-inner"> <header> <div class="header-logo"> <a href="#none"><img src="images/header-logo.png" alt="headerlogo"></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> <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> <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 class="sub-back"></div> </div> </header> </div> <div class="content-inner"> <div class="slide"> <div> <a href="#none"><img src="images/slider01.jpg" alt="slide1"></a> <a href="#none"><img src="images/slider02.jpg" alt="slide2"></a> <a href="#none"><img src="images/slider03.jpg" alt="slide3"></a> </div> </div> <div class="items"> <div class="news"> <div class="tab-inner"> <div class="btn"> <span>공지사항</span> </div> <div class="tab1"> <a href="#none"> SMS 발송 모바일 서비스 개선작업 안내입니다. <b>2020.01.09</b></a> <a href="#none">휴대폰 인증 서비스 개선 작업 기간 연장합니다.<b>2020.01.07</b></a> <a href="#none">카드사 부분 무이자 할부 이벤트 2월 3일까지<b>2019.12.31</b></a> <a href="#none">올앳 시스템 작업 안내<b>2019.12.20</b></a> <a href="#none">휴대폰 결제 시스템 작업이 완료되었습니다. <b>2019.12.20</b></a> </div> </div> </div> <div class="gallery"> <div class="gallery-inner"> <div class="btn"> <span>갤러리</span> </div> <div class="tab2"> <a href="#none"><img src="images/gallery02.jpg" alt="gallery2"></a> <a href="#none"><img src="images/gallery03.jpg" alt="gallery3"></a> <a href="#none"><img src="images/gallery02.jpg" alt="gallery2"></a> </div> </div> </div> <div class="banner"> <a href="#none"><img src="images/banner-1.jpg" alt="banner"></a> </div> </div> </div> <div class="footer-inner"> <footer> <div class="copyright"> <div></div> <div></div> </div> <div class="family-site"></div> </footer> </div> </div> </body> <script src="js/jquery-1.12.4.js"></script> <script src="js/custom.js"></script> </html> @charset "UTF-8"; body{ margin: 0; background-color: #fff; color: #222328; font-size: 15px; } a{ color: #222328; text-decoration: none; } .container{} .header-inner{ border: 1px solid blue; } header{ display: flex; width: 1200px; margin: auto; justify-content: space-between; position: relative; z-index: 10; } header > div{ height: 100px; } .header-logo{ width: 200px; line-height: 130px; } .navi{ width: 600px; } .content-inner{} .slide{ width: 1200px; margin: auto; } .slide > div{ height: 300px; } .items{ display: flex; width: 1200px; margin: auto; margin-top: 20px; box-sizing: border-box; } .items > div{ height: 200px; } .news{ width: 425px; } .gallery{ width: 425px; } .banner{ width: 350px; } .footer-inner{ border: 1px solid blue; } footer{ display: flex; width: 1200px; margin: auto; } footer > div{ height: 100px; border: 1px solid #000; } .copyright{ width: 1000px; } .copyright div{ height: 50px; border: 1px solid #000; } .family-site{ width: 200px; } /*slide*/ .slide{ width: 1200px; height: 300px; position: relative; overflow: hidden; } .slide >div{ width: 3600px; font-size: 0; position: absolute; top: 0; left: 0; animation: slide 10s linear infinite; } @keyframes slide{ 0%{ left: 0; } 30%{ left: 0; } 35%{ left: -1200px; } 65%{ left: -1200px; } 70%{ left: -2400px; } 95%{ left: -2400px; } 100%{ left: 0; } } /*new & gallery*/ .tab-inner, .gallery-inner{ width: 97%; margin: auto; } .btn{} .btn span{ display: inline-block; width: 120px; border: 1px solid #000; text-align: center; padding: 5px; border-radius: 7px 7px 0 0; border-bottom: none; background-color: #fff; margin-bottom: -1px; } .tab1,.tab2{ border: 1px solid #000; padding: 0 4px; height: 155px; } .tab1 a{ display: block; border-bottom: 1px solid #000; padding: 4px; } .tab1 a:last-child{ border-bottom: none; } .tab1 a b{ float: right; font-weight: normal; } .tab2{ text-align: center; } .tab2 img{ width: 120px; padding-top: 18px; } .banner img{ width: 95%; } /*navigation*/ .menu{ list-style: none; padding: 0; padding-top: 53px; } .menu li{ display: block; width: 25%; float: left; box-sizing: border-box; } .menu li > a{ border: 1px solid #000; display: block; text-align: center; padding: 5px; transition: 1; } .menu li:hover > a{ background-color: #000; color: #fff; } .sub-menu{ border: 1px solid #000; } .sub-menu a{ display: block; padding: 5px; text-align: center; color: #fff; transition: 0.5s; } .sub-menu a:hover{ background-color: #fff; color: #222328; } .sub-back{ position: absolute; left: 0; top: 100%; width: 1200px; height: 140px; background-color: #000; z-index: -1; }
- HTML/CSS
- jquery
- 웹-디자인
jkjk7088
댓글 1
좋아요 1
조회수 271
padding 대신 gap을 쓰는게 더 편하지 않나요?
미해결
CSS Flex와 Grid 제대로 익히기
안녕하세요! 강의 재밌게 수강하고 있습니다 :) 해당 카드 리스트를 만들 때는 padding보다 gap을 쓰면 더 간단하게 만들 수 있지 않나요?? 왜 padding을 쓰신 건지 궁금합니다!
- HTML/CSS
- flex
댓글 1
좋아요 2
조회수 633
진짜 객체지향과 테스트하기 쉬운 코드를 위헤서는 jpa가 의미없는게 아닌가하는 생각이 들어요
미해결
Java/Spring 주니어 개발자를 위한 오답노트
이전에 혼자 ddd, 헥사고날 아키텍처를 공부하면서 느꼈던게 객체지향적인 코드 + 테스트하기 용이한 코드를 작성하기 위해서는 결국 domain layer와 persistence layer의 분리가 필수적인데 jpa entity와 domain entity를 완전히 분리했을 때 JPA가 mybatis나 jdbc template를 사용하는 것과 비교해 가지는 강점이 있는지 잘 모르겠습니다.. 그나마 jpa entity와 domain entity를 분리하지 않는다면 어떻게든 온몸 비틀기로 그나마 테스트하기 용이하고 객체지향스러운 코드를 작성해볼 수는 있지만 결국 복잡한 로직에서는 쿼리 때문에 문제가 생기고 ㅜ 지식 공유자님께서는 이 문제에 대해 어떻게 생각하시나요?
- java
- spring
- 객체지향
- 소프트웨어-테스트
euni
댓글 2
좋아요 2
조회수 1879
짤려서 나오는 이유를 모르겠어요
미해결
UIUX 디자이너 취업을 위한 웹 포트폴리오 제작 : 퍼스널 브랜딩 전략
JS 코드 $(function(){ $(".con03 .list").simplyScroll({ speed : 4, pauseOnHover : false, pauseOnTouch : false }) }) CSS 코드 그리고 그림이 글자 위로 보여요 .simply-scroll .simply-scroll-clip { overflow: hidden; transform: rotate(5deg) translate(50%, 400px) scale(1.1); opacity: 0; } .simply-scroll .simply-scroll-clip .simply-scroll-list li { float: left; width: 400px; filter: brightness(50%); } .simply-scroll .simply-scroll-clip .simply-scroll-list li img { width: 100%; } .con03.motion .simply-scroll .simply-scroll-clip { transform: rotate(5deg) translate(0%, 400px) scale(1.1); opacity: 1; transition: 1.2s; transition-delay: 0.3s; }
- HTML/CSS
- 포트폴리오
- 반응형-웹
- gsap
- scrolltrigger
초보개발자
댓글 1
좋아요 0
조회수 437
글로벌속성과 로컬속성_질문추가
미해결
[웹 개발 풀스택 코스] HTML&CSS 기초
학습관련 질문
- HTML/CSS
mebertjiin
댓글 1
좋아요 0
조회수 346
동시성제어
미해결
실습으로 배우는 선착순 이벤트 시스템
안녕하세요 강의를 듣다가 궁금증이 생겼는데요. kafka는 메시지를 하나씩 처리하기 때문에 동시성 제어도 가능할 것이라고 이해했는데 그렇다면 여기서 레디스를 사용하지 않더라도 카프카만 사용해도 동시성과 관련된 데이터 정합성을 보장할 수 있는건가요?
- java
- docker
- spring-boot
- kafka
- redis
봄봄봄
댓글 2
좋아요 0
조회수 922
c. Collection,Map 질문
해결됨
Java/Spring 주니어 개발자를 위한 오답노트
Collection.Map의 Good 케이스를 알 수 있을까요? 맵을 사용할 때 맵 안에 맵이 있고 이런 형태를 사용하지 않는게 좋은건지 아니면 따로 dto로 변환해서 사용해야하는건지 구분이 안 가서 질문 드립니다 ! 지정된 scope를 넘나들지 않는다는 것도 이해가 가지 않습니다 ㅠㅠ 조금만 더 쉽게 설명 붙여주시면 감사드리겠습니다!
- java
- spring
- 객체지향
- 소프트웨어-테스트
HOYA
댓글 2
좋아요 1
조회수 552
img와 video태그를 붙일 때
해결됨
HTML5 & CSS3 기초 문법 올인원
안녕하세요. 이미지와 비디오 src를 깨짐없이 붙이고 싶은데, 링크 주소를 복사하거나 폴더에 저장할 때 링크 주소를 그대로 붙여야 하나요? 제가 지금까지 끝에 jpg나 jpeg를 붙인채로 살짝 수정했는데도 확인하면 깨져있습니다. 무슨 문제일까요?
- HTML/CSS
- 이미지
- 비디오
Jung Ho Park
댓글 2
좋아요 0
조회수 675
select 쿼리없이 dto 만들지 않은 이유
미해결
실전! 스프링 부트와 JPA 활용2 - API 개발과 성능 최적화
강의에서는 아래와 같이 select 쿼리를 이용해 업데이트 된 회원을 조회후 response로 전달해 주었는데 @PutMapping("/api/v2/members/{id}") public UpdateMemberResponse updateMemberV2(@PathVariable("id") Long id, @RequestBody @Valid UpdateMemberRequest request) { memberService.update(id,request.getName()); Member findMember = memberService.findOne(id); return new UpdateMemberResponse(findMember.getId(), findMember.getName()); } 아래와 같이 하지 않은 이유가 있을까요?? @PutMapping("/api/v2/members/{id}") public UpdateMemberResponse updateMemberV2(@PathVariable("id") Long id, @RequestBody @Valid UpdateMemberRequest request) { memberService.update(id, request.getName()); return new UpdateMemberResponse(id, request.getName()); }
- java
- spring
- spring-boot
- jpa
dlwogns3413
댓글 1
좋아요 0
조회수 431
제이쿼리 작성 후 메뉴가 내려 오지 않습니다.
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
A1 [최종본 제작] 가로 고정형(A1타입) – Part1에서 style.css에 .sub-menu{display: none; 후 custom.js에 $('.menu li').mouseenter(function(){ $('.sub-menu').stop().slideDown() }) 하였는데 메뉴가 내려오지 않습니다. index.html style.css custom.js 파일 첨부가 되지 않아 화면 캡처해서 올립니다. 무엇이 잘 못 되었습니까?
- HTML/CSS
- jquery
- 웹-디자인
HL5PFM
댓글 2
좋아요 1
조회수 370
유효성검사에서오류가난거같은데 어떻케 수정을해야하나요 ,,,링크로첨부했습니다 ..
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
텍스트 입력 영역의 내용에 대한 결과 표시 - Nu Html Checker ( w3.org )
- HTML/CSS
- jquery
- 웹-디자인
jkjk7088
댓글 1
좋아요 0
조회수 299
<!DOCTYPE html> 없어도 상관없나요?ㅠㅠ
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
e유형 중인데 html 제일 윗부분 <!DOCTYPE html> 이걸 넣으면 slide 사진이 사라지고 footer가 올라오고 저것만 없애면 완벽하게 잘 작동하는데 없애도 상관없나요? 시험때도 상관없을까요?
- HTML/CSS
- jquery
- 웹-디자인
Droopy
댓글 2
좋아요 0
조회수 386
D3 visibility: hidden; 이걸 없애면 슬라이드가 보이는 문제!...
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
다른건 아니오라 작업하다가 원래 fade in / fade out 슬라이드 형식대로 써봤는데.. visibility: hidden; 을 주석처리 하는순간 슬라이드가 작동되는 현상은 처음이라 적어봅니다!... 제가 뭘 잘못건드렸는지 확인 한번만 부탁드려요! <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Document</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.png" alt="header-logo"></a> </div> <div class="navi"> <ul class="menu"> <li> <a href="#none">MENU-1</a> <div class="sub-menu"> <a href="#none">submenu-1</a> <a href="#none">submenu-2</a> <a href="#none">submenu-3</a> <a href="#none">submenu-4</a> </div> </li> <li> <a href="#none">MENU-1</a> <div class="sub-menu"> <a href="#none">submenu-1</a> <a href="#none">submenu-2</a> <a href="#none">submenu-3</a> <a href="#none">submenu-4</a> </div> </li> <li> <a href="#none">MENU-1</a> <div class="sub-menu"> <a href="#none">submenu-1</a> <a href="#none">submenu-2</a> <a href="#none">submenu-3</a> <a href="#none">submenu-4</a> </div> </li> <li> <a href="#none">MENU-1</a> <div class="sub-menu"> <a href="#none">submenu-1</a> <a href="#none">submenu-2</a> <a href="#none">submenu-3</a> <a href="#none">submenu-4</a> </div> </li> </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-img"> <div class="slide-image-inner"> <a href="#none"><img src="images/slide-d-01.jpg" alt="slide 1"></a> <a href="#none"><img src="images/slide-d-02.jpg" alt="slide 2"></a> <a href="#none"><img src="images/slide-d-03.jpg" alt="slide 3"></a> </div> </div> <div class="slide-banner"> <a href="#none"><img src="images/banner-01.png" alt="banner 1"></a> <a href="#none"><img src="images/banner-02.png" alt="banner 2"></a> <a href="#none"><img src="images/banner-03.png" alt="banner 3"></a> </div> </div> <div class="items"> <div class="shortcut"> <img src="images/shortcut-01.png" alt="shortcut 1"> <div class="shortcut-content"> <h2>얼리버드 선착순 할인 이벤트, 신규강의 최대 30% 할인</h2> <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 2"></a> </div> <div class="news"> <div class="tab-inner"> <div class="btn"> <a class="active" href="#none"><span>공지사항</span></a> <a href="#none"><span>갤러리</span></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.png" alt="gallery 1"><span>퍼블리셔 취업</span></a> <a href="#none"><img src="images/gallery-02.png" alt="gallery 2"><span>퍼블리셔 취업</span></a> <a href="#none"><img src="images/gallery-03.png" alt="gallery 3"><span>퍼블리셔 취업</span></a> <a href="#none"><img src="images/gallery-04.png" alt="gallery 4"><span>퍼블리셔 취업</span></a> <a href="#none"><img src="images/gallery-05.png" alt="gallery 5"><span>퍼블리셔 취업</span></a> <a href="#none"><img src="images/gallery-06.png" alt="gallery 6"><span>퍼블리셔 취업</span></a> <a href="#none"><img src="images/gallery-07.png" alt="gallery 7"><span>퍼블리셔 취업</span></a> </div> </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-link"> <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 class="copyright"> 상호 : (주)코딩웍스 | 대표자 : 홍길동 | 개인정보관리책임자 : 성춘향 부장 br사업장주소 : 경기도 남양주시 별내동 1234 코딩웍스 빌딩 6층 (주)코딩웍스 </div> </div> </footer> </div> <div class="modal"> <div class="modal-content"> <h2>스트리밍 서버 이전으로 서비스 장애</h2> <p> 스트리밍 서버 이전 작업으로 2시간 서비스 중지됩니다. 주요 작업 내용은 아래와 같습니다. <br><br>1. 서버 이전에 따른 DNS 이전으로 기존 호스팅 서비스 대체 <br>2. 문자셋을 utf-8로 변경 후 모바일 등에 대처하기 위해 미리 조치 <br>3. 스트리밍 서버 CDN과 연동 후 멀티미디어 이러닝 서비스가 제공 <br><br>위 내용을 보시면 제법 큰 작업이었음을 알 수 있습니다. 특히 문자셋의 변경에 따라 기존의 DB, data, 웹사이트 솔루션 등의 커스트마이징 등에 상당한 어려움이 있었고, 이에 따른 일부 접속 오류가 있을 수 있었음에 양해를 구합니다. 특히 인터넷익스플로러 11로 접속하셨을 경우 일부 문제은행 목차가 출력되지 않았을 수도 있습니다. <br><br>서버 이전 작업으로 고객님들께 불편을 드려서 대단히 죄송합니다. 정상 운영되도록 최선을 다하겠습니다. 감사합니다. </p> <a href="#none"><div class="close-modal">닫기</div></a> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> @charset "utf-8"; body { margin: 0; background-color: #fff; color: #333333; } a { text-decoration: none; color: inherit; } .container {} .main-content { display: flex; } .main-content > div { /* border: 1px solid red; */ } .left { width: 200px; } header {} header > div { /* border: 1px solid blue; */ } .header-logo { height: 150px; line-height: 170px; } .navi { /* height: 400px; */ } .menu { list-style: none; width: 90%; margin: 20px auto; padding: 0; } .menu li { position: relative; } .menu li > a { padding: 7px; border: 1px solid black; display: block; transition: 0.5s; } .menu li:hover > a { background-color: #00000021; } .sub-menu { position: absolute; left: 100%; top: 0; width: calc(100vw - 209px); padding: 8px; background-color: #00000021; z-index: 10; display: none; } .sub-menu > a { width: 120px; display: inline-block; transition: 0.5s; text-align: center; } .sub-menu > a:hover { background-color: #000; color: #fff; } .spot-menu { height: 50px; text-align: center; } .spot-menu a:after { content: "|"; margin: 8px; } .spot-menu a:last-child:after { content: none; } .right { flex: 1; } .slide { position: relative; height: 400px; } .slide > div { /* border: 1px solid green; */ } .slide-img { height: 400px; } .slide-image-inner { height: inherit; } .slide-image-inner a { visibility: hidden; position: absolute; height: inherit; top: 0; left: 0; width: 100%; animation: slide 10s linear infinite; opacity: 0; } .slide-image-inner a:nth-child(1) { animation-delay: 0s; } .slide-image-inner a:nth-child(2) { animation-delay: 3.5s; } .slide-image-inner a:nth-child(3) { animation-delay: 7s; } .slide-image-inner a img { height: inherit; width: inherit; object-fit: cover; } @keyframes slide { 0% { opacity: 0; } 5% { opacity: 1; } 35% { opacity: 1; } 40% { opacity: 0; } 100% { opacity: 0; } } .slide-banner { top: 0; right: 0; position: absolute; width: 150px; height: 300px; float: right; } .slide-banner a {} .slide-banner a img { width: 150px; display: block; } .items {} .items > div { /* border: 1px solid pink; */ } .shortcut { /* border: 1px solid black; */ height: 200px; display: flex; align-items: center; gap: 25px; margin: 0 20px; } .shortcut > img {} .shortcut > a {} .shortcut h2 {} .shortcut p {} .shortcut p b {} .news { height: 250px; } .tab-inner { width: 95%; margin: auto; margin-top: 25px; } .btn {} .btn a { width: 100px; text-align: center; display: inline-block; border: 1px solid black; margin-right: -6px; border-bottom: none; border-radius: 5px 5px 0 0; background-color: #ddd; margin-bottom: -1px; padding: 4px; } .tabs {} .tabs > div {} .tab1 { background-color: #fff; border: 1px solid black; padding: 6px; } .tab1 a { border-bottom: 1px dashed black; padding: 6px; display: block; } .tab1 a:last-child { border-bottom: none; } .tab1 a b { padding-right: 100px; float: right; font-weight: normal; } .tab2 { display: none; border: 1px solid black; padding: 20px; height: 140px; text-align: center; /* box-sizing: border-box; */ } .tab2 a { display: inline-block; text-align: center; margin: 0 15px; } .tab2 img { width: 200px; } .tab2 a span { display: block; } .btn a.active { background-color: #fff; } footer { display: flex; } footer > div { /* border: 1px solid blue; */ height: 120px; } .footer-logo { width: 200px; line-height: 180px; } .footer-content { flex: 1; } .footer-content > div { /* border: 1px solid green; */ height: 60px; /* box-sizing: border-box; */ /* padding: 0 20px; */ } .footer-link { padding-top: 30px; box-sizing: border-box; } .footer-link > a:hover { text-decoration: underline; color: blue; } .footer-link a::after { content: "|"; margin: 0 8px; color: #ccc; } .footer-link a:last-child:after { content: none; } .copyright { /* padding-top: -100px; */ } .modal { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #0000003b; display: none; } .modal-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background-color: #fff; padding: 20px; width: 500px; } .close-modal { float: right; border: 1px solid black; padding: 2px; } $('.menu li').mouseenter(function(){ $('.sub-menu').stop().fadeIn() }); $('.menu li').mouseleave(function(){ $('.sub-menu').stop().fadeOut() }); $('.btn a:first-child').click(function(){ $('.tab1').show() $('.tab2').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }); $('.btn a:last-child').click(function(){ $('.tab1').hide() $('.tab2').show() $(this).addClass('active') $(this).siblings().removeClass('active') }); $('.open-modal').click(function(){ $('.modal').fadeIn() }); $('.close-modal').click(function(){ $('.modal').fadeOut() });
- HTML/CSS
- jquery
- 웹-디자인
DDD
댓글 1
좋아요 1
조회수 492
Number(activeLi) 형변환을 해야하는 이유?
미해결
풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
if(Number(activeLi) < 0){ activeLi = Number(activeLi) + 260; //왼쪽에 있던 카드가 오른쪽으로 갔다면, 다시 왼쪽으로 갈 수 있도록 PREV 버튼 활성화 slidePrev.style.color = '#2f3059'; slidePrev.classList.add('slide-prev-hover'); slidePrev.addEventListener('click',transformPrev); if(Number(activeLi) === 0){ slideNext.style.color = '#cfd8dc'; slideNext.classList.remove('slide-prev-hover'); //이벤트처리. 클릭을 눌러도 더이상 동작하지 않게. slideNext.removeEventListener('click', transformPrev); } } let activeLi = classList.getAttribute('data-position'); activeLi에 속성을 가져오고 if문에서 Number를 꼭 써야한다는 것이 정확하게 이해가 잘 안가요... Number()로 형변환을 하지 않으면 어떻게 되나요 ? 어차피 index.html에서 data-position의 값으로 숫자를 지정한거 아닌가요? <ul class="class-list" data-position="0"> 쌍따옴표로 감싸면 다 문자로 인식되는건가요? 강의를 띄엄띄엄봐서 ㅠㅠ 헷갈립니다...
- HTML/CSS
- javascript
- es6
hanyn
댓글 1
좋아요 0
조회수 311
실전사이트 따라하고있는데 copyright부분 css에서 padding주면 사진첨부한거처럼 전체로 내려가는데 뭐가 문제일까요 ,,,??
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>a실전연습</title> <link rel="stylesheet" href="css/실전a.css"> </head> <div class="container"> <header> <div class="heder-logo"> <a href="none"><img src="images/header-logo.PNG" alt="header logo"></a> </div> <div class="navi"></div> </header> <div class="slide"> <div></div> </div> <div class="items"> <div class="news"></div> <div class="banner"> <a href="#none"> <img src="images/banner-1.jpg" alt="banner1"> </a> </div> <div class="shortcut"> <a href="#none"><img src="images/banner-2.jpg" alt="banner2"></a> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="images/footer-logo.png" alt="footerlogo"></a> </div> <div class="copyright"> 상호 : 엣지컴퍼니 | 대표자 : 홍길동 | 개인정보관리책임자 : 장길산 차장<br> 사업장주소 : 서울특별시 강남구 테헤란로 123-56 </div> <div class="sns"> <a href="#none"><img src="images/SNS.png" alt=""></a> </div> </footer> </div> <body> <script src="js/jquery-1.12.4.js"></script> <script src="js/custom.js"></script> </body> </html> @charset "UTF-8"; body{ margin: 0; font-size: 15px; background-color: #fff; color: #222328; } a{ color: #222328; text-decoration: none; } .container{ width: 1200px; border: 1px solid #000; margin: auto; } header{ display: flex; justify-content: space-between; } header > div{ height: 100px; border: 1px solid #000; } .heder-logo{ width: 200px; } .navi{ width: 600px; } .slide{} .slide > div{ height: 300px; border: 1px solid #000; } .items{ display: flex; } .items > div{ height: 200px; border: 1px solid #000; } .news{ width: 500px; } .banner{ width: 350px; } .shortcut{ width: 350px; } footer{ display: flex; } footer > div{ height: 100px; border: 1px solid #000; } .footer-logo{ width: 200px; } .copyright{ width: 800px; } .sns{ width: 200px; } /*Image & Text */ .heder-logo,.footer-logo{ line-height: 130px; } .copyright{ text-align: center; margin-top: 30px; line-height: 20px; }
- HTML/CSS
- jquery
- 웹-디자인
jkjk7088
댓글 2
좋아요 1
조회수 432
강의자료 사이트 접근
미해결
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
강의자료 사이트 접속이 안되네요.
- HTML/CSS
- javascript
- aws
- git
- mysql
- rest-api
- github
고예지
댓글 1
좋아요 0
조회수 285
scroll-timeline.js 를 사용한 ScrollTimeline 실행 시, easing 효과?
미해결
웹 애니메이션의 새로운 표준, Web Animations API
안녕하세요. 강의 잘 듣고 있습니다. scroll-timeline.js 를 사용한 ScrollTimeline 실행 시, 부드러운 모션 효과를 위한 옵션이 있을까요? 스크롤 한번 했을 때. 스르륵 멈출 수 있게요.
- HTML/CSS
- javascript
- 인터랙티브-웹
- frontend
- web-animations-api
박은희
댓글 2
좋아요 0
조회수 771
SCSS나 다른 CSS 들도 다루시는지 여쭈어보고 싶습니다.
미해결
제대로 파는 HTML CSS - by 얄코
안녕하세요 강사님 방금 해당 강의를 구매하였는데요 혹시 강의에서 일반적인 CSS 뿐만 아니라 다른 CSS (SCSS나 Tailwind CSS) 도 다루는지 여쭈어보고 싶습니다. 그리고 혹시 추후에 추가할 생각이 있으신지도 여쭈어보고 싶습니다.
- HTML/CSS
yjym33
댓글 1
좋아요 0
조회수 995
인기 태그
인프런 TOP Writers
- 정현섭 8
- eggmun(문성진) 4
- 닉네임 4
- 김보노 3
- 박효정 3
- Like me black 3
- 코코리코코 3
주간 인기글
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🚀 IT 공부는 했는데 왜 아직도 안 될까요? | AI와 함께 실무 중심 IT 모임 🤖 NOESIS
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- [프로젝트] 앱 출시 목표 6개월간 함께할 사이드 프로젝트 팀원 모집 vsvx13
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv