172만명의 커뮤니티!! 함께 토론해봐요.
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.01
Q. FOUC에 대한 보완으로 autoAlpha 를 사용하면 효율적 인 이유가 뭘까요? FOUC 강의에서 authAlpha를 사용함으로써 GSAP가 효율적으로 visibility를 visible로 바꿀 수 있다 라고 말씀하셨습니다. 그런데 생각해보니 GSAP 객체도 해당 Element의 style에 접근해서 attribute 값을 바꾸는게 아닌가? 하는 생각이 들어서 질문드려봅니다. 이렇게 되면 사실 문법적인 설탕(syntatic sugar) 같은게 아닌가요? 🤔
해결됨
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
본 강의 중 로그가 나오지 않는 이슈에 관하여 경로 설정에 문제가 있다고 하셨고, grab_market_web/src/App.js의 내용 중 로그 src의 경로를 "./imgages/icons/log.png"에서 -> "/imgages/icons/log.png"으로 변경하라고 하였습니다. 작동은 잘 되는데, 작동 원리가 궁금합니다. / 절대값 root경로의 시작은 어디로 설정되어 있나요? 이전에는 메인 화면에서는 ./ 상대 경로 중, 현재 경로로 설정되어 있었는데 잘 작동했던 이유도 궁금합니다. App.js파일의 내용이니까 App.js가 존재하는 grab_market_web/src 디렉토리가 현재 경로라고 이해되는데, 그보다 상위 디렉토리에 존재하는 grab_market_web/public이 ./ 현재 경로로 인식되어 grab_market_web/public/images가 호출 되는 것도 이해가 잘 되지 않으며 / 절대 경로로 설정시에도 grab_market_web/public/images가 호출되는 것이 잘 이해가 되지 않습니다.
해결됨
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
그 포토샵으로 이미지 사이즈 조절할때 a,b,c유형은 픽셀이 정해져있어서 문제가 없긴한데 d,e유형에선 가로 혹은 세로 사이즈가 100%다보니 임의로 지정한 상태에서 늘리면 되긴할텐데 d,e유형에서 이미지를 적당히 얼마정도로 세팅하면 좋을까요..??
미해결
풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
- 본 강의 영상 학습 관련 문의에 대해 답변을 드립니다. (어떤 챕터 몇분 몇초를 꼭 기재부탁드립니다) - 이외의 문의등은 평생강의이므로 양해를 부탁드립니다 - 현업과 병행하는 관계로 주말/휴가 제외 최대한 3일내로 답변을 드리려 노력하고 있습니다 - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 자료이메일 요청에 대한 답변이 없어서 두번 요청드렸는데요! 드라이브 승인이 된걸까요? 인프런아이디 el입니다.
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
선생님 안녕하세요. 탭 메뉴를 만들고 있는데 공지사항에서는 보더가 없어지는데 갤러리는 보더가 안없어집니다ㅠㅠ 왜이러는걸까요? 알려주시면 감사하겠습니다. html 입니다. <!DOCTYPE html> <html lang="kr"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/style.css"> <title>D-1 실전연습</title> </head> <body> <div class="container"> <div class="container-inner"> <div class="left"> <div class="header"> <div class="logo"><img src="images/header-logo.png"></div> <div class="navi"> <ul class="menu"> <li> <a href="#none">메뉴</a> <div class="sub-menu"> <a href="#none">서브메뉴-1</a> <a href="#none">서브메뉴-2</a> <a href="#none">서브메뉴-3</a> <a href="#none">서브메뉴-4</a> </div> </li> <li> <a href="#none">메뉴</a> <div class="sub-menu"> <a href="#none">서브메뉴-1</a> <a href="#none">서브메뉴-2</a> <a href="#none">서브메뉴-3</a> <a href="#none">서브메뉴-4</a> </div> </li> <li> <a href="#none">메뉴</a> <div class="sub-menu"> <a href="#none">서브메뉴-1</a> <a href="#none">서브메뉴-2</a> <a href="#none">서브메뉴-3</a> <a href="#none">서브메뉴-4</a> </div> </li> <li> <a href="#none">메뉴</a> <div class="sub-menu"> <a href="#none">서브메뉴-1</a> <a href="#none">서브메뉴-2</a> <a href="#none">서브메뉴-3</a> <a href="#none">서브메뉴-4</a> </div> </li> <li> <a href="#none">메뉴</a> <div class="sub-menu"> <a href="#none">서브메뉴-1</a> <a href="#none">서브메뉴-2</a> <a href="#none">서브메뉴-3</a> <a href="#none">서브메뉴-4</a> </div> </li> </ul> </div> <div class="login"> <a href="#none">Login</a> <b>l</b> <a href="#none">Logout</a> </div> </div> </div> <div class="right"> <div class="banner"> <div class="image-slide"> <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 class="image-banner"> <a href="#none"><img src="images/banner-01.png"></a> <a href="#none"><img src="images/banner-02.png"></a> <a href="#none"><img src="images/banner-03.png"></a> </div> </div> <div class="shortcut"> <div class="shortcut-inner"> <a href="#none" class="shortcut-left"><img src="images/shortcut-01.png" alt="shortcut"></a> <div class="shortcut-center"> <h2>얼리버드 선착순 할인 이벤트, 신규강의 최대 30% 할인</h2> <p>12월은 사랑의 달~ 코딩웍스에서 여러분께 사랑을 뿌려요~ 12월 개강반을 12월 06일까지 접수하는 분들께는 15%~ 20% 의 얼리버드 할인을 제공합니다.더불어 소중한 리뷰를 꼼꼼히 남겨주시는 분들을 뽑아 더 큰 적립금을 추가지급해 드릴 예정이오니 리뷰도 놓치지 마시고 작성해주세요~^^</p> <em>기간: 2022년 12월 18일 ~ 12월 25일</em> </div> <div class="shortcut-right"> <a href="#none"><img src="images/shortcut-02.png" alt="shortcut arrow"></a> </div> </div> </div> <div class="items"> <div class="items-inner"> <div class="tab"> <a href="#none">공지사항</a> <a href="#none">갤러리</a> </div> <div class="content1"> <a href="#none" class="open-modal"><em>스트리밍 서버 이전 작업으로 2시간 서비스 중지</em><b>2012.12.20</b></a> <a href="#none"><em>스트리밍 서버 이전 작업으로 2시간 서비스 중지</em><b>2012.12.20</b></a> <a href="#none"><em>스트리밍 서버 이전 작업으로 2시간 서비스 중지</em><b>2012.12.20</b></a> <a href="#none"><em>스트리밍 서버 이전 작업으로 2시간 서비스 중지</em><b>2012.12.20</b></a> <a href="#none"><em>스트리밍 서버 이전 작업으로 2시간 서비스 중지</em><b>2012.12.20</b></a> </div> <div class="content2"> <a href="#none"><img src="images/gallery-01.png" alt="gallery"><span>안녕하세요</span></a> <a href="#none"><img src="images/gallery-02.png" alt="gallery"><span>안녕하세요</span></a> <a href="#none"><img src="images/gallery-03.png" alt="gallery"><span>안녕하세요</span></a> <a href="#none"><img src="images/gallery-04.png" alt="gallery"><span>안녕하세요</span></a> <a href="#none"><img src="images/gallery-05.png" alt="gallery"><span>안녕하세요</span></a> <a href="#none"><img src="images/gallery-06.png" alt="gallery"><span>안녕하세요</span></a> <a href="#none"><img src="images/gallery-07.png" alt="gallery"><span>안녕하세요</span></a> </div> </div> </div> </div> </div> </div> <div class="footer"> <div class="logo"><a href="#none"><img src="images/footer-logo.png" alt="footer-logo"></a></div> <div class="copy"> <b><a href="#none">기업소개 제휴 및 입점 문의, </a> <a href="#none">이용약관, </a> <a href="#none">개인정보처리방침, </a> <a href="#none">이메일무단수집거부, </a> <a href="#none">사이트맵, </a> <a href="#none">인재채용, </a> </b> <p>상호 : (주)코딩웍스 | 대표자 : 홍길동 | 개인정보관리책임자 : 성춘향 부장 사업장주소 : 경기도 남양주시 별내동 1234 코딩웍스 빌딩 6층 (주)코딩웍스</p> </div> <div class="sns"> <a href="#none"><img src="images/sns-01.png" alt="twitter"></a> <a href="#none"><img src="images/sns-02.png" alt="facebook"></a> <a href="#none"><img src="images/sns-03.png" alt="kakaostory"></a> </div> </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로 접속하셨을 경우 일부 문제은행 목차가 출력되지 않았을 수도 있습니다. 서버 이전 작업으로 고객님들께 불편을 드려서 대단히 죄송합니다. 정상 운영되도록 최선을 다하겠습니다. 감사합니다.</p> <a href="#none" class="close-modal">X 닫기</a> </div> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> css 입니다. @charset "utf-8"; * {margin: 0; padding: 0;} a {text-decoration: none; color: #333;} li,ul {list-style: none;} .container .container-inner {width: 100%; display: flex;} .left { width: 200px; flex: 1;} .right {width: calc(100vw - 200px); padding-right: 20px;} .header .logo {width: 200px; height: 100px;} .header .navi {width: 90%; margin: auto; } .menu {position: relative; z-index: 1000;} .menu > li > a { padding: 10px; display: block; text-align: center; border: 1px solid #000; transition: 0.5s;} .menu > li:hover > a { background-color: rgba(0, 0, 0, 0.5);} .sub-menu {display: none; border: 1px solid #000;} .sub-menu > a { padding: 5px; display: block; text-align: center; transition: 0.5s;} .sub-menu > a:hover { background-color: rgba(0, 0, 0, 0.5);} .login {text-align: center; margin-top: 20px;} .login a:hover {text-decoration: underline;} .login b {color: #ddd;} /* 슬라이드 배너 */ .banner { width: inherit; height: 400px; overflow: hidden; } .banner .image-slide {width: inherit; height: 3600px; font-size: 0; animation: slide 10s linear infinite; } .banner .image-slide a:nth-child(1) {animation-delay: 0s;} .banner .image-slide a:nth-child(2) {animation-delay: 3.5s;} .banner .image-slide a:nth-child(3) {animation-delay: 0s;} @keyframes slide { 0% {top: 0px;} 5% {top: -1200px;} 35% {top: -1200px;} 40% {top: -2400px} 70% {top: -2400px;} 100% {top: 0px;} } .image-banner {position: absolute; right: 0; top: 0; width: 200px} .image-banner a img { width: 180px; margin-top: 7px;} /* 바로가기 */ .shortcut {width: inherit; height: 200px; margin-top: 13px; margin-left: 20px;} .shortcut-inner { border: 1px solid #000; display: flex; height:calc(100% - 20px);} .shortcut-left {float: left; width:400px; padding-top: 10px; text-align: center;} .shortcut-center {float: left; margin-left: 20px;} .shortcut-center h2 {margin-top: 40px} .shortcut-center p {margin-top: 10px; margin-bottom: 5px;} .shortcut-center em { font-style: normal; color: #bbb;} .shortcut-right { margin-top: 75px; margin-right: 50px; padding-left: 30px; } /* 아이템 */ .items {width: inherit; height: 250px; margin-left: 20px;} .itmes-inner {} .tab {} .tab a { display: inline-block; margin-right: -5px; width: 180px; border: 1px solid #000; text-align: center; padding: 10px; border-radius: 10px 10px 0 0; background-color: #ddd; border-bottom: none; margin-bottom: -1px;} .tab a:active {background-color: #fff;} .content1 {border: 1px solid #000; box-sizing: border-box;} .content1 a {display: block; padding: 10px; border-bottom: 1px solid #000; } .content1 a:last-child {border-bottom: none;} .content1 em {overflow: hidden; text-overflow: ellipsis; font-style: normal; } .content1 b {float: right; margin-right: 20px;} .content2 {height: 200px; border: 1px solid #000; position: relative; text-align: center; display: none; z-index: 0; box-sizing: border-box; background-color: #fff;} .content2 a {display: inline-block;} .content2 a > img {width: 200px; margin-top: 20px; padding: 5px;} .content2 a > span {display: block; margin-top: -5px;} /* 푸터 */ .footer {width: 100%; height: 100px;display: flex;} .footer .logo {width: 200px;} .footer .logo a img{margin-top: 10px;} .footer .copy {width: calc(100vw - 400px); text-align: left; padding: 30px;} .footer .copy p {margin-top: 5px;} .footer .sns {width: 200px;} .footer .sns a img {width: 50px; border-radius: 5px; margin-top: 20px;} .modal { display: none; position: absolute; top: 0; left: 0; background-color:rgba(0, 0, 0, 0.5); width: 100%; height: 100%; text-align: left;} .modal-content {border-radius: 20px; margin-top: -350px; margin-left: -300px; position: absolute; top: 50%; left: 50%; width: 600px; height: 320px; background-color: #fff; padding: 40px;} .modal-content h2 {padding-bottom: 20px;} .modal-content a {border: 1px solid #000; padding: 5px 10px; float: right; margin-top: 20px;}
미해결
실전! 스프링 부트와 JPA 활용2 - API 개발과 성능 최적화
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] plugins { id 'org.springframework.boot' version '2.6.5' id 'io.spring.dependency-management' version '1.0.11.RELEASE' id 'java' id "com.ewerk.gradle.plugins.querydsl" version "1.0.10" } group = 'com.example' version = '0.0.1-SNAPSHOT' sourceCompatibility = '11' ext["hibernate.version"] = " 5.6.5.Final " configurations { compileOnly { extendsFrom annotationProcessor } } repositories { mavenCentral() } dependencies { implementation 'org.springframework.boot:spring-boot-starter-thymeleaf' implementation 'org.springframework.boot:spring-boot-starter-web' implementation 'javax.validation:validation-api' implementation 'com.fasterxml.jackson.datatype:jackson-datatype-hibernate5' //JdbcTemplate 추가 //implementation 'org.springframework.boot:spring-boot-starter-jdbc' //MyBatis 추가 implementation 'org.mybatis.spring.boot:mybatis-spring-boot-starter:2.2.0' //JPA, 스프링 데이터 JPA 추가 implementation 'org.springframework.boot:spring-boot-starter-data-jpa' //Querydsl 추가 implementation 'com.querydsl:querydsl-jpa' annotationProcessor "com.querydsl:querydsl-apt:$ { dependencyManagement.importedProperties['querydsl.version'] } :jpa" annotationProcessor "jakarta.annotation:jakarta.annotation-api" annotationProcessor "jakarta.persistence:jakarta.persistence-api" //H2 데이터베이스 추가 runtimeOnly 'com.h2database:h2' compileOnly 'org.projectlombok:lombok' annotationProcessor 'org.projectlombok:lombok' testImplementation 'org.springframework.boot:spring-boot-starter-test' //테스트에서 lombok 사용 testCompileOnly 'org.projectlombok:lombok' testAnnotationProcessor 'org.projectlombok:lombok' } tasks.named('test') { useJUnitPlatform() } //querydsl 추가 //def querydslDir = '$buildDir/generated' def querydslDir = "src/main/generated" //clean { // delete file(generated) //} querydsl { library = "com.querydsl:querydsl-apt" jpa = true querydslSourcesDir = querydslDir } sourceSets { main { java { srcDirs = ['src/main/java', querydslDir] } } } compileQuerydsl { options.annotationProcessorPath = configurations.querydsl } configurations { querydsl.extendsFrom compileClasspath } 강사님이 올려주신 내용 + 구글링 + 직접 수정했습니다. 간혹, 빌드는 되는데 generated 파일에 QClass 안보이시는 분들은 queryDsl 저장되는 경로에 $buildDir 대신 'src/main/'으로 해보세요
미해결
모바일 웹 퍼블리싱 포트폴리오 with Figma
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요 선생님! 강의 잘 보고 있습니다! 모바일 웹 강의 중에 스타일 가이드는 실무에서 디자이너와 퍼블리셔 중 누가 주로 맡아서 작업을 하는지가 궁금합니다! 답변 미리 감사합니다.
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
안녕하세요 그랩님! 혹시 영상 4:56쯤 단계부터 오류가 떠 다른 분들의 질문과 그랩님 답변도 보고 이것저것 시도해 보았으나 해결이 안되어 질문드립니다ㅜㅜ 혹시 아래의 오류가 제가 지금 사용하는 맥북이 2017년 버전(10.13.1)으로 시스템 업그레이드를 한지 오래되었기 때문에 뜨는걸까요..? 맥에서 지원하는 최신 시스템 업그레이드를 하려면 외장하드 구입 후 컴퓨터 내 백업을 준비 후에 OS 삭제>재설치>백업복원 까지 진행해야 하기에 하기 오류가 컴퓨터 백업과 OS 재설치 없이도 해결이 가능할지 혹시 아실까 하여 문의드립니다ㅜㅜ
해결됨
[코드캠프] 강력한 CSS
구체적으로 :after 를 사용하는 이유는 이미 만들어놓은 item 바로 위에 딱 그 사이즈만큼 쉽게 덮기위해서 인걸까요? :before 가 아닌 :after를 사용한 이유가 궁금합니다.
미해결
웹 애니메이션의 새로운 표준, Web Animations API
(사진)
미해결
실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발
주문 서비스 개발 부분 강의를 듣다가 궁금한 점이 있어 질문드립니다. 주문 취소(OrderService.cancelOrder) 부분에서order.cancel() 만 작성하면 JPA 특징으로 인해, 데이터 업데이트 관련 쿼리 로직 없이 자동으로 업데이트 된다고 하셨는데요. 주문 생성(OrderService.order)의 EntityManager 가 사용된 orderRepository.save (order); 와 혼동이 와서 질문 남깁니다. 주문 취소 order.cancel() 메서드를 타면서 엔티티의 값(status, count 등) 변경 내역이 자동으로 업데이트 되는 것이라고 하면, 주문 생성도 Order.createOrder(member, delivery, orderItem); 를 타면서 엔티티의 값들을 설정하기 때문에 orderRepository.save (order); 를 사용하지 않아도 되는게 아닌가 라는 생각이 듭니다. 제가 JPA 를 잘 몰라서 혼란이 오는 것 같은데.. 쿼리는 직접 작성하지 않아도 업데이트/저장/삭제 등 DB 조작이 일어나려면 EntityManager 를 통해야 된다고 생각하고 있었습니다. 주문 취소는 EntityManager 없이 업데이트 되고, 주문 생성은 EntityManager의 persist() 를 사용해서 저장하는 것 이 2가지 차이점에 대해서 설명 부탁드립니다! 감사합니다 :)
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
B4 최종본 작성중인데 영상에 나온대로 따라했는데 네비 메뉴와 서브메뉴가 엄청 크게 출력됩니다 ㅠㅠ 왜 이럴까요..
미해결
애플 웹사이트 인터랙션 클론!
안녕하세요!! 강의를 전부 듣고 코드를 뜯어보며 복습중에 있습니다. section-0에서 사용한 것을 이용해 스크롤 될 때 matrix로 Text에 scale(80)정도로 주려고 코드를 입력해보니 적용은 되었으나 스크롤을 빠르게 올릴시에 정상적으로 사이즈가 줄어들지 않고 줄어들다 말거나 그러더라구요...ㅠㅠ 폰트 픽셀도 많이 깨지는 현상이 발생하구요. 혹시 해결하려면 어떤식으로 접근해야 할까요? 해당 코드 첨부드립니다. const sectionInfo = [ { // section-0 type: "sticky", heightNum: 5, scrollHeight: 0, objs: { container: document.querySelector("#scroll-section-0"), messageA: document.querySelector("#scroll-section-0 .main-message.a"), messageB: document.querySelector("#scroll-section-0 .main-message.b"), messageC: document.querySelector("#scroll-section-0 .main-message.c"), messageD: document.querySelector("#scroll-section-0 .main-message.d"), }, values: { messageA_opacity_in: [0.4, 1, { start: 0, end: 0.05 }], messageA_opacity_out: [1, 0, { start: 0.15, end: 0.2 }], messageA_scale_in: [1, 80, { start: 0.05, end: 0.25 }], messageA_scale_out: [80, 1, { start: 0.25, end: 0.05 }], messageB_opacity_in: [0, 1, { start: 0.2, end: 0.25 }], messageB_opacity_out: [1, 0, { start: 0.35, end: 0.4 }], messageB_translateY_in: [50, 0, { start: 0.2, end: 0.25 }], messageB_translateY_out: [0, -50, { start: 0.35, end: 0.4 }], messageC_opacity_in: [0, 1, { start: 0.4, end: 0.45 }], messageC_opacity_out: [1, 0, { start: 0.55, end: 0.6 }], messageC_translateY_in: [50, 0, { start: 0.4, end: 0.45 }], messageC_translateY_out: [0, -50, { start: 0.55, end: 0.6 }], messageD_opacity_in: [0, 1, { start: 0.6, end: 0.65 }], messageD_opacity_out: [1, 0, { start: 0.75, end: 0.8 }], messageD_translateY_in: [50, 0, { start: 0.6, end: 0.65 }], messageD_translateY_out: [0, -50, { start: 0.75, end: 0.8 }], }, }, ]; function calcValues(values, currentScrollY) { let returnValue; const currentSectionHeight = sectionInfo[currentSection].scrollHeight; // 현재 스크롤 섹션에서 스크롤 된 범위를 비율로 구하는 식 const scrollRatio = currentScrollY / currentSectionHeight; if (values.length === 3) { const scrollAniStart = values[2].start * currentSectionHeight; const scrollAniEnd = values[2].end * currentSectionHeight; const scrollAniHeight = scrollAniEnd - scrollAniStart; if (currentScrollY >= scrollAniStart && currentScrollY <= scrollAniEnd) { returnValue = ((currentScrollY - scrollAniStart) / scrollAniHeight) * (values[1] - values[0]) + values[0]; } else if (currentScrollY < scrollAniStart) { returnValue = values[0]; } else if (currentScrollY > scrollAniEnd) { returnValue = values[1]; } } else { returnValue = scrollRatio * (values[1] - values[0]) + values[0]; } return returnValue; } function playAnimation() { const objs = sectionInfo[currentSection].objs; const values = sectionInfo[currentSection].values; const currentScrollY = scrollY - prevScrollHeight; const currentSectionHeight = sectionInfo[currentSection].scrollHeight; const scrollRatio = currentScrollY / currentSectionHeight; switch (currentSection) { case 0: // message if (scrollRatio <= 0.05) { objs.messageA.style.opacity = calcValues( values.messageA_opacity_in, currentScrollY ); } else { objs.messageA.style.opacity = calcValues( values.messageA_opacity_out, currentScrollY ); objs.messageA.style.transform = `matrix(${calcValues( values.messageA_scale_in, currentScrollY )}, 0, 0, ${calcValues( values.messageA_scale_in, currentScrollY )}, 0, 0)`; }
해결됨
Do It! 장고+부트스트랩: 파이썬 웹개발의 정석
26:27초 쯤에 tests.py의 test_update_post() 함수에서 카테고리의 pk를 적어줘야하는지 이해가 잘 되지 않습니다. 앞서 setUp() 함수에서 post_001과 post_002를 생성할 때는 category를 입력할 때 pk 는 사용하지 않고 진행했습니다. 하지만 왜 포스트 수정을 핱때는 category를 입력할 때 pk 를 사용해야 하는지 잘 모르겠습니다.
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
범위가 넓어지면서 슬라이드가 오른쪽으로 빗겨나갑니다.. 왜일까요..ㅠㅠ <!DOCTYPE html> <html lang="kr"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/style.css"> <title>B-4 강의들으면서 만들기</title> </head> <body> <div class="container"> <div class="header-inner"> <div class="header"> <div class="logo"><a href="#none"><img src="image/logo.png" 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> <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> <a href="#none">캠퍼스안내</a> </div> </li> </ul> <div class="sub-back"></div> </div> </div> </div> <div class="content-inner"> <div class="slide"> <div> <a href="#none"><img src="image/slide_1.jpg" alt="slide1"></a> <a href="#none"><img src="image/slide_2.jpg" alt="slide2"></a> <a href="#none"><img src="image/slide_3.jpg" alt="slide3"></a> </div> </div> <div class="items"> <div class="notice"> <div class="tab-inner"> <div class="btn"> <a href="#none">공지사항</a> </div> <div class="tab1"> <a href="#none"><em>SMS 발송 모바일 서비스 개선작업 안내입니다.</em><b>2020.01.09</b></a> <a href="#none"><em>SMS 발송 모바일 서비스 개선작업 안내입니다.</em><b>2020.01.09</b></a> <a href="#none"><em>SMS 발송 모바일 서비스 개선작업 안내입니다.</em><b>2020.01.09</b></a> <a href="#none"><em>SMS 발송 모바일 서비스 개선작업 안내입니다.</em><b>2020.01.09</b></a> <a href="#none"><em>SMS 발송 모바일 서비스 개선작업 안내입니다.</em><b>2020.01.09</b></a> </div> </div> </div> <div class="gallery"> <div class="tab-inner"> <div class="btn"> <a href="#none">갤러리</a> </div> <div class="tab2"> <a href="#none"><img src="image/gallery1.jpg" alt="gallery1"> </a> <a href="#none"><img src="image/gallery2.jpg" alt="gallery2"> </a> <a href="#none"><img src="image/gallery3.jpg" alt="gallery3"> </a> </div> </div> </div> <div class="banner"><a href="#none"><img src="image/shortcut.jpg"></a></div> </div> </div> <div class="footer-inner"> <div class="footer"> <div class="copyright"> <div>법적고지 개인정보취급방침 개인정보처리방침</div> <div>상호 : 엣지컴퍼니 | 대표자 : 홍길동 | 개인정보관리책임자 : 장길산 차장 사업장주소 : 서울특별시 강남구 테헤란로 123-56</div> </div> <div class="site"></div> </div> </div> <div class="modal"> <div class="modal-content"> <h2>SNS비회원주문하기 종료 안내</h2> <p>안녕하세요, JUST 쇼핑몰 MD 홍길동입니다. 안타깝게도 SNS비회원 주문하기 서비스가 한달 뒤 종료될 예정입니다. <br> 회원가입없이 SNS계정을 이용해 그동안 제품주문을 하실수 있었는데, 금번 강화된 개인정보보호법 시행령 제 9조 (부칙 3조 3항)에 의거, SNS를 이용한 상품 주문/결제등이 근래에 많은 보안잇슈로 문제가 되고 있음에 다라 KISA의 권고조치의 일환으로 했습니다. 따라서, 한달뒤인 2019.03.10 이후 모든 비회원 고객님들께서는 회원가입으로 전환 후 실명인증이 되어야 하며, 이는 모든 쇼핑몰/오픈마켓등의 전자상거래서비스의 공통된 사항이라는 점을 안내해드립니다.</p> <a 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 {margin: 0; background-color: #fff; color: #222328; font-size: 15px;} a {color: #222328; text-decoration: none;} ul, li {list-style: none; padding: 0; margin: 0;} .container {width: 100%; height: 1000px;} .header-inner {background-color: #ddd; } .header { width: 1200px; height: 100px; margin: auto; position: relative; z-index: 9999;} .header > div {} .header .logo {width: 200px; float: left;} .header .navi {width: 600px; float: right;} /* 네비게이션 */ .menu {margin-top: 60px; position: absolute;} .menu li {float: left; width: 150px; box-sizing: border-box; text-align: center; ;} .menu li > a {display: block; padding: 10px; border: 1px solid #000; transition: 0.5s; background-color: #fff;} .menu li:hover > a {background-color: #000; color: #fff;} .sub-menu {border: 1px solid #000; display: none;} .sub-menu a {display:block; padding: 5px; transition: 0.5s; color: #fff; background-color: #000; } .sub-menu a:hover { background: #fff; color: #000;} .sub-back { display: none; width: 1200px; height: 120px; background-color: #000; position: absolute; top: 98px; left: 0; z-index: -1; } /* 아이템 */ .content-inner { width: 100%; } /* 슬라이드 */ .slide { width: 1200px; height: 300px; border: 1px solid #000; position: relative; overflow: hidden;} .slide > div { width: 3600px; font-size: 0; animation: slide 10s linear infinite; top: 0; left: 0; position: absolute;} .slide > div > a:nth-child(1) {animation-delay: 0s;} .slide > div > a:nth-child(2) {animation-delay: 3.5s;} .slide > div > a:nth-child(3) {animation-delay: 7s;} @keyframes slide { 0% {left:0px} 30% {left:0px} 35% {left:-1200px} 65% {left:-1200px} 70% {left:-2400px} 95% {left:-2400px} 100% {left:0px} } /* 아이템 */ .items {width: 1200px; margin: auto; overflow: hidden;;} .items > div { height: 200px; box-sizing: border-box;} .notice {width: 400px; float: left;} .notice .tab-inner {width: 95%; margin: auto; margin-top: 10px;} .notice .tab-inner .btn {display: inline-block; border: 1px solid #000; text-align: center; width: 100px; border-radius: 5px 5px 0 0; border-bottom: none; padding: 5px; background-color: #fff; margin-bottom: -1px;} .notice .tab-inner .btn a {} .notice .tab-inner .tab1 {border: 1px solid #000;} .notice .tab-inner .tab1 a {padding: 5px; display: block; border-bottom: 1px solid #000;} .notice .tab-inner .tab1 a:last-child {border-bottom: none;} .notice .tab-inner .tab1 a b{ float: right; font-weight: normal;} .notice .tab-inner .tab1 a em {font-style: normal;} .gallery {width: 400px; float: left;} .gallery .tab-inner {width: 95%; margin: auto; margin-top: 10px;} .gallery .tab-inner .btn {display: inline-block; border: 1px solid #000; text-align: center; width: 100px; border-radius: 5px 5px 0 0; border-bottom: none; padding: 5px; background-color: #fff; margin-bottom: -1px;} .gallery .tab-inner .btn a {} .gallery .tab-inner .tab2 { text-align: center; border: 1px solid #000;} .gallery .tab-inner .tab2 img {width: 110px; padding-top:20px ; padding-bottom: 15px;} .banner {width: 400px; float: left; } /*푸터*/ .footer-inner {width: 100%; height: 100px; background-color: #ddd; overflow: hidden;} .footer {width: 1200px; margin: auto; overflow: hidden;} .footer > div { float: left; box-sizing: border-box; height: 100px;} .copyright {width: 1000px;} .copyright div {; height: 50%;} .site {width: 200px;} .modal {display: none;}
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
안녕하세요 그랩님! 처음 질문드려봅니다ㅜㅜ 혹시 하기와 같이 코드를 작성했는데 결과값이 계속 농구공 배열 한개로만 나와서.. 다른분들 질문해주신 부분을 살펴봐도 동일한 질문이 없어 문의드립니다! 어떤부분 수정이 필요할지 피드백 부탁드려도 될까요ㅠㅠ
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.02
안녕하세요 part.02 강의 완강했습니다👍 너무 좋은 강의라 다음 강의 스크롤트리거 관련 질문겸 반영됐으면 하는 부분이 있어서 질문을 올립니다 part.03 강의에서 스크롤트리거 강의시 반응형으로 제작하는 강의도 포함되어있을까요? 예를 들어 pc에서는 스크롤시 위에서 아래로 내려가는 모션이 모바일에선 좌에서 우로 가는것모션처럼 코드자체는 여기저기 검색해서 구현은 가능하지만 선생님강의처럼 효율적으로 작성하는 방법이 있을까 하는 궁금에서 질문드립니다 이번강의에서 타임라인을 효율적으로 관리하시는거보고 꼭 포함되면 좋을것 같아서 없다면 포함해주시면 감사합니다ㅠㅠ
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
강의에서는 레코드삭제 버튼이 생겨서 데이터를 지울 수 있었는데, 제가 할 때는 생성되지 않아 지울 수가 없었습니다. SQL 실행에서 명령어를 넣어보려 해도 에러가 뜹니다. 어떻게 하면 데이터를 지울 수 있나요?
미해결
ChatGPT API 입문 강의 - 30분 만에 다국어 번역기 웹 풀스택 개발하기
안녕하세요! 우선 좋은 강의 정말 감사드립니다. 강의를 듣고 직접 따라해 보다 아래와 같은 에러가 발생하여 문의 드립니다. 혹시 이 에러의 해결 법을 아신다면 공유해주시면 정말 감사드리겠습니다.
해결됨
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
수험자 제공파일에 있는 원본이미지를 편집해서 images 폴더에 png 혹은 jpg파일로 저장하잖아요 근데 영상보면 원본이미지도 따로 저장하시던데 이 원본이미지 저장도 필수인걸까요?
