다음강의 언제나오나요 다음강의는 인터렉티브한 전체적인 웹사이트였으면 좋겠네요
미해결
초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
(사진)
- HTML/CSS
- javascript
- jquery
- 인터랙티브-웹
foxball
댓글 1
좋아요 0
조회수 246
묻고 답해요
176만명의 커뮤니티!! 함께 토론해봐요.
mongoDB에서의 데이터 중복일 때 1건만 수정되는 이유
미해결
기획자님 이 정도 웹 개발은 배워보면 어떨까요? [이론+실습]
CRUD 실습 - 2 중 문의사항이 있어 작성합니다. 제가 실수로 이전 CREATE 에서 두번 실행하는 바람에 현재 제 DB에 데이터가 중복으로 들어갔습니다. 그리고 현재 UPDATE를 하였을 때 데이터가 한 건만 수정되는 것을 확인하였습니다. 원래대로라면 '김현수'라는 이름을 가진 데이터가 2건이기 때문에 2건 모두 바뀌어야 하는 거 아닐까요? 왜 1건만 변경되는 지 문의드립니다.
- HTML/CSS
- javascript
- vue.js
- node.js
- mongodb
- 소프트스킬
유진용
댓글 1
좋아요 0
조회수 263
GSAP 가이드 Part.02 강의 > 01 > practice html 맨처음 시작시 강의랑 동일하지 않을 경우
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.02
웹 애니메이션을 위한 GSAP 가이드 Part.02에 advence-start > 01.animation-control > pratice의 html을 실행하면 강의랑 다르게 파란색 길이 안나와서 당황했는데 강의를 들으면서 확인해보니까 해당 밑에꺼 3개 주석처리 하니까 시작 할 때랑 똑같이 나옵니다. 혹시 연습으로 먼저 해보실분들은 이거 3개 주석처리 하시고 시작하시면 될것같습니다. #emart .path { stroke-dasharray: 496; stroke-dashoffset: 496; } #medi .path { stroke-dasharray: 604; stroke-dashoffset: 604; } .pick { opacity: 0; }
- HTML/CSS
- javascript
- 인터랙티브-웹
- gsap
Taeyoon
댓글 2
좋아요 1
조회수 280
캐릭터 기본 모션 만들기에서 포토샵에 열라고하는데 포토샵없으면 어떻게하죠? 공짜버전있나요?
미해결
웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT
캐릭터 기본 모션 만들기에서 포토샵에 열라고하는데 포토샵없으면 어떻게하죠? 공짜버전있나요?
- HTML/CSS
- javascript
- 인터랙티브-웹
김태언
댓글 1
좋아요 0
조회수 250
웹디자인과 퍼블리싱
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
안녕하세요 선생님! 웹디자이너로 취업하고 싶어 강의를 생각하다가 예전에 웹디자인기능사 실기도 선생님께 배웠고 해당 강의도 이미 구매했던 것이 기억이 나서 공부하는 중입니다 ㅎㅎ 웹디자이너도 퍼블리싱을 어느정도는 해야한다고 알고 있는데, 시즌1과 시즌2를 공부하면서 웹디자이너의 필수역량을 키울 수 있을까요? 아니면 해당 내용은 부수적인 역량일까요? 고민이 되어 여쭤봅니다!
- HTML/CSS
- jquery
dbskqnsghd
댓글 1
좋아요 1
조회수 245
브라켓 라이브 실행시 실행오류때문에 진도가안나갑니다..ㅠㅠ
미해결
반응형 웹사이트 포트폴리오(Architecture Agency)
■ 질문 남기실 때 꼭! 참고해주세요. 라이브실행시 계속 이렇게뜨는데 어떻게해야할까요 ??,, - 먼저 유사한 질문이 있었는지 검색해주세요. - 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다. - HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요. - 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.
- HTML/CSS
- jquery
- 웹-디자인
- 반응형-웹
upward070
댓글 3
좋아요 1
조회수 390
공지
해결됨
문제해결을 통한 웹프로그래밍 입문
강좌 운영이나 강의 내용에 관해 궁금한 점이 있으면 자유롭게 나누어주세요. 교수자, 수강생 누구나 글쓰기와 댓글 쓰기가 가능합니다.
- HTML/CSS
- javascript
- jquery
부산대학교 AI융합교육원
댓글 1
좋아요 0
조회수 179
퍼블리셔 코딩테스트 질문입니다.
미해결
면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작
퍼블리셔로 면접을 보게 되었는데 면접 끝나고 코딩 테스트를 본다고 연락을 받았습니다. js만 공부하면 될까요? 어떻게 준비하는 게 좋을지 질문드립니다.
- HTML/CSS
- jquery
- 포트폴리오
lllllliilll
댓글 1
좋아요 1
조회수 629
Brackets 다운르도는 했지만, 에밋 설치에서 문제가 발생했습니다.
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
현재 에밋을 설치하려 했지만 지원이 종료가 되서 그런가요? 검색 창이 비활성화가 되어 있고, 파일을 넣으라고 나와있습니다! 하지만 파일이 없어서 현재 강의를 진행하지 못하고 있습니다.
- HTML/CSS
- jquery
nayadatarap
댓글 1
좋아요 1
조회수 215
swiper-slide 적용관련 친절한 설명 감사드립니다. 근대 첫장만 되고 다음장부터
미해결
쉽고 빠르게 만드는 다양한 이미지 이펙트!
ggang_effect.js function ggangImgEffect() { var obj = $(".ggang_effect"); var makeHtml = ""; var row = 4; var columns = 8; var rowHeight = 100 / row + "%"; var columnsWidth = 100 / columns + "%"; var imgWidth = 100 * columns + "%"; var imgHeight = 100 * row + "%"; for (var i = 0; i < row; i++) { // console.log('-행-:'+i); for (var j = 0; j < columns; j++) { var delaySpeed = (columns - j - i * 0.5) * 0.25; var left = -j * 100 + "%"; var top = -i * 100 + "%"; makeHtml += '<div class="img_box" style="width:' + columnsWidth + "; height:" + rowHeight + "; transition-delay:" + delaySpeed + 's; ">'; makeHtml += '<div class="img_position" style="width:' + imgWidth + "; height:" + imgHeight + "; left:" + left + "; top:" + top + ';"></div>'; makeHtml += "</div>"; // console.log('열:'+j); } } $(obj).append(makeHtml); setTimeout(function () { $(obj).find(".img_box").addClass("active"); }, 200); } $(function () { ggangImgEffect(); }); const mySwiper = new Swiper(".swiper-container", { effect: "fade", loop: true, speed: 1500, autoplay: { delay: 5000, disableOnInteraction: false, }, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, on: { slideChange: function () { var thisSlide = $(".swiper-container").find(".swiper-slide").eq(this.activeIndex); ggangImgEffect(thisSlide, this.activeIndex); }, }, });
- HTML/CSS
- javascript
- jquery
- 인터랙티브-웹
foxball
댓글 2
좋아요 0
조회수 324
transition-delay를 어느곳에 주는냐에 따라 차이가 있는데 왜그런걸까요..?
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
■ 질문 남기실 때 꼭! 참고해주세요. - 먼저 유사한 질문이 있었는지 검색해주세요. - 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다. - HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요. - 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다. <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Flex 레이아웃 이미지 어코디언 네비게이션</title> <link rel="stylesheet" href="style.css"> </head> <body> <ul class="gallery"> <li> <div class="content"> <h2>Uploads made easy</h2> <p>Use Spotify for Artists to upload your releases. With previews and simple edits, you can control exactly how your music appears to divsteners. </p> <div class="sns"> <a href="#none"><i class="fa fa-facebook"></i></a> <a href="#none"><i class="fa fa-instagram"></i></a> <a href="#none"><i class="fa fa-linkedin"></i></a> <a href="#none"><i class="fa fa-google-plus"></i></a> </div> </div> </li> <li> <div class="content"> <h2>Uploads made easy</h2> <p>Use Spotify for Artists to upload your releases. With previews and simple edits, you can control exactly how your music appears to divsteners. </p> <div class="sns"> <a href="#none"><i class="fa fa-facebook"></i></a> <a href="#none"><i class="fa fa-instagram"></i></a> <a href="#none"><i class="fa fa-linkedin"></i></a> <a href="#none"><i class="fa fa-google-plus"></i></a> </div> </div> </li> <li> <div class="content"> <h2>Uploads made easy</h2> <p>Use Spotify for Artists to upload your releases. With previews and simple edits, you can control exactly how your music appears to divsteners. </p> <div class="sns"> <a href="#none"><i class="fa fa-facebook"></i></a> <a href="#none"><i class="fa fa-instagram"></i></a> <a href="#none"><i class="fa fa-linkedin"></i></a> <a href="#none"><i class="fa fa-google-plus"></i></a> </div> </div> </li> <li> <div class="content"> <h2>Uploads made easy</h2> <p>Use Spotify for Artists to upload your releases. With previews and simple edits, you can control exactly how your music appears to divsteners. </p> <div class="sns"> <a href="#none"><i class="fa fa-facebook"></i></a> <a href="#none"><i class="fa fa-instagram"></i></a> <a href="#none"><i class="fa fa-linkedin"></i></a> <a href="#none"><i class="fa fa-google-plus"></i></a> </div> </div> </li> <li> <div class="content"> <h2>Uploads made easy</h2> <p>Use Spotify for Artists to upload your releases. With previews and simple edits, you can control exactly how your music appears to divsteners. </p> <div class="sns"> <a href="#none"><i class="fa fa-facebook"></i></a> <a href="#none"><i class="fa fa-instagram"></i></a> <a href="#none"><i class="fa fa-linkedin"></i></a> <a href="#none"><i class="fa fa-google-plus"></i></a> </div> </div> </li> </ul> </body> </html> /* Google Web Font */ @import url('https://fonts.googleapis.com/css?family=Raleway&display=swap'); /* Fontawesome 4.7 */ @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); body { font-family: 'Raleway', sans-serif; line-height: 1.5em; margin: 0; } a { text-decoration: none; color:#fff; } .gallery{ list-style: none; margin:0; padding:0; height: 100vh; display: flex; } .gallery li{ flex:1; background:center no-repeat; border-right:3px solid #000; position:relative; overflow: hidden; transition:0.5s; } .gallery li:last-child{ border-right:none; } .gallery li:nth-of-type(1){background-image: url(images/artistic-image-01.jpg);} .gallery li:nth-of-type(2){background-image: url(images/artistic-image-02.jpg);} .gallery li:nth-of-type(3){background-image: url(images/artistic-image-03.jpg);} .gallery li:nth-of-type(4){background-image: url(images/artistic-image-04.jpg);} .gallery li:nth-of-type(5){background-image: url(images/artistic-image-05.jpg);} .gallery li .content{ position:absolute; width: 100%; background-color:#000; height: 250px; left:0; bottom:-300px; color:#fff; text-align: center; padding:20px; padding-top: 40px; box-sizing: border-box; transition:0.5s; } .gallery li .content:before{ content:''; position:absolute; width: 100%; height: 50px; top:0; left:0; background-color:#000; transform: rotate(-3deg) scale(1.3); transform-origin: left bottom; } .gallery li:hover{ flex:3; filter: grayscale(1); } .gallery li:hover .content{ bottom:0; transition-delay: 0.5s; } transition-delay:0.5s를 .gallery li .content와 .gallery li:hover .content 중 어느쪽에 주느냐에 따라 차이가 있는데 왜 그런걸까요...ㅠㅠ .gallery li .content에 주면 li에 마우스가 벗어날때 .content박스가 사라지는것까지 보여버리는데 (.gallery li:hover .content에 주면 문제없이 잘 작동됩니다.) .gallery li .content와 .gallery li:hover .content에 각각 transition-delay를 주는게 어떤 차이때문에 다르게 보이는지 알고싶습니다.
- HTML/CSS
- jquery
준쮸넛
댓글 2
좋아요 1
조회수 164
워드프레스 설치시 사이트 주소를 https://itdjango.com/wp/ 로 뒤에 wp를 붙여서 생성하였습니다. 변경가능한가요?
해결됨
구글 애드센스 수익형 워드프레스 블로그 만들기
워드프레스를 설치할 때 사이트 주소를 원래 https://itdjango.com으로 설정하려고 했는데, wp를 지우는 것을 깜박하여서 https://itdjango.com/wp로 설정이 되어버렸습니다. 뒤에 wp를 지우고 싶습니다. 방법이 없을까요?
- HTML/CSS
- wordpress
- php
- 웹-디자인
- 반응형-웹
solim5351
댓글 1
좋아요 0
조회수 237
깃허브 링크 주소
미해결
입문자를 위한, HTML&CSS 웹 개발 입문
안녕하세요 강의 감사드립니다 깃허브 주소를 못찾아서 링크를 받을 수 있을까요?
- HTML/CSS
1009totoro
댓글 2
좋아요 0
조회수 387
footer
미해결
포트폴리오 사이트 만들고 배포까지! : 웹 개발 입문 활용편
수업을 따라하다 보니 footer 부분에서 footer 윗 부분에 살짝 파랑색 라인이 보입니다. 이걸 없애고 싶으면 어떻게 해야하는 건가요 ?
- HTML/CSS
- javascript
- 포트폴리오
- github-pages
디디
댓글 1
좋아요 0
조회수 276
body 태그 margin: 0;
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
안녕하세요. flex 이용하여 레이아웃 제작 시 body태그에 margin: 0;을 주라고 강의에 나와 있는데, 혹시 보더나 배경색 사용하여 제작할 때도 body 태그에 margin: 0;을 주면 되는걸까요?
- HTML/CSS
- 웹-디자인
면정
댓글 2
좋아요 1
조회수 189
advanced 수업자료 문의
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.02
Deep Dive섹션 공부할 차례인데, 쌤이 설명해주시는 강의에서의 수업폴더와 제가 다운받은 폴더(파일)이 다릅니다. 제가 다운받은 자료입니다. 전체 다운받아 압축푼 상태인데, deep dive 폴더안에는 이게 전부입니다. 확인 부탁드립니다.
- HTML/CSS
- javascript
- 인터랙티브-웹
- gsap
tax
댓글 1
좋아요 2
조회수 257
사이트 접속이 안돼요
미해결
<M.B.I.T> 테스트 페이지 만들기! with Django
http://mbit.weniv.co.kr/ 사이트 접속이 안돼요
- HTML/CSS
- javascript
- django
이유정
댓글 1
좋아요 0
조회수 290
css full reload 문제가 발생하여 질문드립니다!
미해결
반응형 웹사이트 포트폴리오(Architecture Agency)
<!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DesignWorks Architecture Agency</title> <script src="js/jquery-2.1.4.js"></script> <!-- Page Scroll Effects JS & CSS --> <script src="js/velocity/modernizr.js"></script> <script src="js/velocity/velocity.min.js"></script> <script src="js/velocity/velocity.ui.min.js"></script> <script src="js/velocity/main.js"></script> <link rel="stylesheet" href="js/velocity/velocity.css"> <!-- Smooth Scrolling --> <script src="js/jquery.scrollTo.min.js"></script> <!-- Custom JS & CSS --> <script src="custom.js"></script> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="responsive.css"> </head> <!-- hijacking: on/off - animation: none/scaleDown/rotate/gallery/catch/opacity/fixed/parallax --> <body data-hijacking="on" data-animation="rotate"> <div class="container"> <section class="cd-section visible" id="home"> <div> <div class="content"> <img src="images/temp-section-01.jpg"> </div> </div> </section> <section class="cd-section" id="about"> <div> <div class="content"> <img src="images/temp-section-02.jpg"> </div> </div> </section> <section class="cd-section" id="project"> <div> <div class="content"> <img src="images/temp-section-03.jpg"> </div> </div> </section> <section class="cd-section" id="plan"> <div> <div class="content"> <img src="images/temp-section-04.jpg"> </div> </div> </section> <section class="cd-section" id="awards"> <div> <div class="content"> <div class="awards-inner"> <div class="about-awards"> <div class="about-heading"> <!-- 이런식으로 부모요소로 묶기 --> <h2>2024 <br>Architecture Awards <br>Winner</h2> <hr class="bar"> <p> The mission of the Architecture MasterPrize (AMP) is to advance the appreciation and exposure of quality architectural design worldwide. The AMP architecture award celebrates creativity and innovation in the fields of architectural design, landscape architecture, and interior design. Submissions from architects all around the world are welcome. </p> <!-- 새창에서 띄우기 타겟 블랭크 --> <a href="https://architectureprize.com/" target="_blank">View the awards</a> </div> </div> <div class="victory-jump"> <img src="/images/victory-jump.png"> </div> </div> </div> </div> </div> </section> <section class="cd-section" id="location"> <div> <div class="content"> <div class="location-inner"></div> </div> </div> </section> <section class="cd-section" id="contact"> <div> <div class="content"> <img src="images/temp-section-07.jpg"> </div> </div> </section> <header> <div class="gnb-inner"> <div class="logo"> <a href="#none"><img src="images/logo.png"></a> </div> <div class="gnb"> <div class="menu"> <a href="#home">Home</a> <a href="#about">About</a> <a href="#project">Project</a> <a href="#plan">Plan & History</a> <a href="#awards">Awards</a> <a href="#location">Location</a> <a href="#contact">Contact</a> </div> <div class="slogan">We design places, not projects.</div> </div> <div class="trigger"> <span></span> <span></span> <span></span> </div> </div> </header> </div> <!-- 스크롤 부분 --> <a href="#" class="gototop"><img src="images/gototop.png"></a> <!-- 폰트어썸 아이콘부분 --> <a href="#" class="btn-hiring"><i class="fa fa-commenting"></i> Hiring</a> <nav> <ul class="cd-vertical-nav"> <li><a href="#0" class="cd-prev inactive">Next</a></li> <li><a href="#0" class="cd-next">Prev</a></li> </ul> </nav> </body> </html> * pc버전 */ /* Google Web Font : Montserrat */ @import url('https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500&display=swap'); @import url('https://fonts.googleapis.com/css?family=Manrope:300,400,500,600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Overpass&display=swap'); /* FontAwesome CDN 4.7 */ @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); /* Reset CSS */ * { box-sizing: border-box; } ul { list-style: none; } a { text-decoration: none; } /* Default CSS */ body { font-family: 'Montserrat', sans-serif; color: #222; font-size: 15px; margin: 0; height: 100vh; background-color: #fff; } /* Entire Layout */ .cd-section { height: 100vh; } .cd-section > div { height: 100%; position: relative; } .content { background-color: #ddd; position: absolute; width: calc(100% - 40px); height: calc(100% - 80px); left: 20px; bottom: 20px; overflow: hidden; } /* Header */ header { position: fixed; top: 0; left: 0; width: 100%; } .gnb-inner { /*border: 1px solid #000;*/ width: calc(100% - 40px); margin: auto; height: 60px; line-height: 60px; } .logo { float: left; } .logo img { padding-top: 17px; } .gnb { float: right; } .menu { display: none; } .menu a {} .slogan { font-size: 16px; font-style: italic; } .trigger { display: none; } /* Hiring Button */ .btn-hiring { position: fixed; right: 50px; bottom: 50px; color: #fff; background-color: #000; /* 앞 px상하,뒤 px좌우 */ padding: 10px 20px; border-radius: 20px; /* 가로,세로,퍼짐정도 */ box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.38); transition: 0.5s; } .btn-hiring .fa { transform: rotateY(180deg); margin-right: 5px; } /* 버튼이 눌리는 느낌 */ .btn-hiring:active { transform: scale(0) } /* ################### Section : awards-winner ################### */ .awards-inner { height: 100%; border: 1px solid #ddd; } .awards-inner > div { border: 1px solid #000; float: left; width: 50%; height: 100%; position: relative; } .about-awards { background-color: #1a1f24; color: #fff; } .about-heading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: 70%; } .victory-jump { background-color: #fff; } .victory-jump img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 80%; } 선생님께서 올려주신 비쥬얼스튜디오 full reload 해결 방법 강의를 듣고 적용시킨 후 작업 중이였는데 갑자기 코딩 시 최상단으로 올라가는 현상이 발생합니다.설정을 다시 확인하고 익스텐션에서 open sever를 재설치하였음에도 해결되지 않아서 질문드립니다!
- HTML/CSS
- jquery
- 웹-디자인
- 반응형-웹
ckrnckr12
댓글 3
좋아요 1
조회수 391
태그는 어떻게 골라서 사용하나요?
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
<ul class="menu"> <li> <a href=""></a> <div class="sub-menu"> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <div> <li> <li> <a href=""></a> <div class="sub-menu"> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <div> <li> </ul> 이런 태그는 어떤기준으로 선택해야할까요?? 직접 만들어보려고 하면 막상 태그를 어떤걸 지정해야할지 모르겠습니다. 서브메뉴 4가지를 저는 한번더 ul 자식요소로 li와 함께 a태그를 같이 쓸줄알았는데 간단하게 div로 묶고 a태그를 사용하시고 상위 메뉴 두개만 li를 사용하셨는데 이런 태그선택의 기준이 궁금합니다. 혼자 만들어도 막상 강의랑 다르니까 헷갈리네요 ㅠ 꼭 리스트목록이라고 ul이나 ol을 사용할 필요가 없는건가요?
- HTML/CSS
- jquery
부드러운 종다리
댓글 1
좋아요 2
조회수 192
settings.json에 올려두신 사진과 동일하게 안뜹니다
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
처음 세팅중인데 읽기전용이라 떠서 커뮤니티에 뜨는대로 따라했는데 올려두신 사진과 같은 내용이 뜨질않아서 어떻게 세틍을 해야하나 질문드려봅니다..
- HTML/CSS
- javascript
- react
- node.js
- react-native
- 머신러닝
- express
- tensorflow
thswnstn9981
댓글 1
좋아요 0
조회수 466
인기 태그
인프런 TOP Writers
- 스위프 9
- clee002 3
- Minkoo Lee 2
- 노재은[ 학부휴학 / 경제학과 2
- dspark 2
- mayvmoring 2
- 5647kr 2