묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
Jquery를 통한 post요청시 CSRF 관련 내용 질문입니다.
강의 잘 듣고 있습니다. 장고폼 강의 중 "Cross Siste Request Forgery" 섹션에서 jquery를 통한 POST요청시 CSRF전달 방법에 대해 장고 공식문서의 방법을 소개해주셨습니다. 현재(21년 9월 20일) 시점에서 장고 문서를 보니 영상으로 설명주신 3.0 버젼이 아닌 3.2 버젼 문서에서는 jquery에 대한 언급이 사라지고 AJAX에 대한 언급만 남았습니다. 궁금한점은 현재 버젼에서는 설명하신 내용을 3.2버젼에서는 반영할 수 없다고 이해하는게 맞나요? 아직도 jquery는 어느 수준에서는 계속활용되고 잇는 것으로 알고 있는데, 그냥 문서에서 거론을 안하는건지 아니면 지원에서 제외하는 건지 궁금합니다. 감사합니다.
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
두가지 오류사항 질문드립니다. (live server Full Reload 오류 / position: relative 관련)
1. 첫번째 질문입니다. (live server Full Reload 스크롤 위로 올라가는 현상) 라이브서버 세팅을 할때 Full Reload 체크를 하고 재시동을 했을 때 문제없이 작동을 했습니다. 그런데 이번 강의[섹션 4. 섹션 상세 퍼블리싱(Awards Section) - PC 레이아웃 섹션 상세 퍼블리싱(Awards Section) - #01 ] 부터 Awards section을 수정하다가 라이브로 확인하려고 했으나 계속해서 상단 부분으로 스크롤이 올라가는 바람에 수정하며 바로확인하는 과정에 불편함을 겪었습니다. 이 부분을 해결하고자, 각 섹션별 display: none; 도 주었지만- 역시나 작동하지 않아서 구글링을 한 끝에 https://github.com/tapio/live-server/issues/273 저와 같은 이슈를 갖고 있는 분들을 발견했음에도 불구- 해결을 하지 못한 상태입니다. 혹시나 싶어서 라이브서버를 unstall 하고 재설치를 한 후에, 다시 세팅을 하고 재시동을 하는 과정을 몇번이고 반복했으나 여전히 같은 이슈가 발생했습니다. 앞서 말씀드린.. VS code 의 Live Server Full Reload 오류현상을 해결하는 방법을 혹시 아실까 싶어 선생님께 질문을 드리고 싶었습니다(: 2. 두번째 질문입니다. ( position: relative 관련) .victory-jump img 에 position: absolute;를 적용할 때 선생님께서 말씀하시길, 그 위의 부모인 .victor-jump 에 position: relative;를 적용하지 않아도 되는 이유가 .awards-inner 안에 있는 div에 이미 position: relative;를 주었기 때문이라고 하셨습니다. 제가 잘 모르는 것일 수도 있겠지만- 지금까지 공부한 바로 .awards-inner > div 에서 '>' 표시는 그 부모 바로 밑에 있는 첫번째 자식 에게 적용되는 것으로 알고 있습니다. 때문에 .awards-inner의 두번째 자식인 .vicotry-jump 가 아닌 첫번째 자식 .about-awards 에만 적용되는 것으로 알았습니다. 제가 잘 못 알고 있는건지 궁금합니다(: 더불어, 두번째 자식인 .victory-jump 에 position: relative; 를 적용하지 않아도 .victory-jump 의 자식인 .victory-jump img 에 position: absolute; 만 적용해도 화면에 문제없이 잘 나타나는 이유도 궁금합니다.:) 감사합니다.
-
해결됨반응형 웹사이트 포트폴리오(Architecture Agency)
전체 레이아웃 와이어프레임 퍼블리싱(PC) - 전체레이아웃, 헤더영역
19분40초 overflow: hidden; 을 적용 하였으나, 여전히 이미지가 맞춰지지 않습니다. ㅠㅠ 그래서 .content > img { position: absolute; width: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); } 을 적용 시켜서 이미지를 맞췄습니다. 하지만 다음 강의 모바일편에서 @media 를 적용시키니 이미지가 나오지가 않습니다.
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
slick slider
안녕하세요 제이쿼리 slick slider 다운 받아 하는데 제꺼는 적용이 안됩니다. 아무리 해봐도 저렇게 밖에 안되는데 왜그러는 걸까요?
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
화면을 부드럽게 이동하는 scrollTo 제이쿼리에 대해서
코딩웍스 선생님 강의에서, 특정 버튼 클릭시 지정된 섹션으로 화면을 부드럽게 이동시켜주는 제이쿼리 플러그인으로 jquery.scrollTo.min.js라는 js 파일을 올려주시고 연결(<script src...>)시키는법을 알려주셨는데요. 그 후 적용해보는 강의 파트에서, 선택자에 명령어를 입력할때, $('선택자').click(function (e) { $.scrollTo(this.hash || 0, 900) }) 이렇게 써주시면서 , "이건 플러그인 제작자가 정한 공식이니 따라치면 된다." 라고만 설명하고 넘어가셨습니다. 여기서 $.scrollTo(this.hash || 0, 900)이 공식을 어디서 찾아낸 것인지 알고 싶은데 어떻게 찾아야 할까요? 욕심으로는 이것저것 다 물어보고싶긴 합니다만... - $뒤에 선택자가 없는 이유 - hash 는 무엇인지 - || 0, 900 는 무엇인지 ... 뿐만 아니라 다른 제이쿼리 플러그인들도 각각의 공식이 있을 것 같은데, 그걸 어떻게 찾아서 써야 하는 것일지 모르겠습니다!
-
미해결jQuery 입문자를 위한 강의
스크립트 작성시에 ; 세미콜론을 써야할까요? 안써도될까요?
선생님 강의 잘 듣고 있습니다. 감사합니다! 그런데 강의를 듣는 도중 한가지 의문이 생겼는데, $(document).ready(function(){ $("#btnClick").click(function(){ $("a+p").css("border", "5px solid black") }) }) 예를 들어 이렇게 코드를 작성했다는 가정하에 마지막부분에 ";"를 넣어도 실행이 잘되고 ";"를 넣지 않아도 실행이 잘됩니다. 어쨌든 실행하는데에 문제는 없으니 넣든 안넣든 상관없을까요?
-
미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
선생님 질문에 대한 신속한 답변 감사합니다! 그런데 ㅠㅠ 슬라이더가 작동이 안되고 이미지가 왜 저렇게 되는지 모르겠어요!
원인을 모르겠어요 <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>StarUp Mate : App Official Landing</title> <link rel="icon" href="images/logo-favicon.png"> <!---jquery CDN---> <script src="http:s//code.jquery.com/jquery-3.5.1.min.js"></script> <!--Slick slider--> <link rel="stylesheet" href="js/slick/slick/slick-theme.css"> <link rel="stylesheet" href="js/slick/slick/slick.css"> <script src="js/slick/slick.min.js"></script> <!-- Custom CSS & JS --> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="responsive.css"> <script src="custom.js"></script> </head> <body> <header> <div class="header-inner"> <div class="logo"> <a href="#none"><img src="images/logo.png" alt=""></a> </div> <div class="gnb"> <a href="#none">CEO 인사말</a> <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> </header> <!-- Section : welcome --> <section class="welcome"> <div class="slideshow"> <img src="images/slide-welcome-01.png"> <img src="images/slide-welcome-02.png"> <img src="images/slide-welcome-03.png"> </div> <div class="welcome-heading"> <span>창의적인 아이디어를 만드는 가장 빠른 방법</span> <h1> An idea solution of startup for your <em id="typing"></em> </h1> <p> 스타트업 메이트 앱이 여러분의 최상의 스타트업 구축을 위해 창의적인 아이디어를 제공하는 데 최선을 다하겠습니다. </p> <div class="welcome-btns"> <a href="#none" class="btn start">CEO 시작하기</a> <a href="#none" class="btn guide">사용자 가이드</a> </div> </div> <div class="mouse"> <span class="wheele"></span> </div> </section> <!---.ceo-access---> <section class="ceo-access"> </section> <!---.banner---> <section class="banner"> </section> <!---.feature---> <section class="feature"> </section> <!---.vision---> <section class="vision"> </section> <!---.faq---> <section class="faq"> </section> <!---.review---> <section class="review"> </section> <!---.focus---> <section class="focus"> </section> <!---.guide---> <section class="guide"> </section> <!---.news---> <section class="news"> </section> <footer> </footer> </body> </html> css /* Fontawesome 4.7 */ @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); /* XEION CDN */ @import url('http://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css'); /* Web Fonts - Source Sans Pro */ @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap'); /* font-family: 'Source Sans Pro', sans-serif; */ /* Web Fonts - NoonNoo */ @font-face { font-family: 'NEXON Lv2 Gothic'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv2 Gothic.woff') format('woff'); font-weight: normal; font-style: normal; } /* Reset CSS */ * { box-sizing: border-box; } a { text-decoration: none; color: #222; } button, input { outline: none; } h1,h2,h3,h4,h5,h6 { margin-top: 0; font-weight: normal; line-height: 1.5em; } /* Default CSS */ body { font-family: 'NEXON Lv2 Gothic', sans-serif; font-size: 18px; line-height: 1.7em; margin: 0; background-color: #fff; color: #222; } /*########header#########*/ header{ position: fixed; width:100%; z-index: 100; } .header-inner{ width:1300px; margin: auto; overflow: hidden; padding-top: 30px; padding-bottom: 15px; } .logo{ float: left; } .logo img{ margin-top: -7px; } .gnb{ float: right; } .gnb a{ margin: 10px; font-size: 16px; } /* ################# section : welcome ################# */ .welcome { /* border: 5px solid #000; */ height: 90vh; position: relative; } .slideshow {} .welcome-heading { position: absolute; top: 50%; transform: translateY(-50%);/*수직으로 섹션을 기준으로 정중앙에 옴*/ left: 200px; text-align: center; width: 750px; } .welcome-heading span { font-size: 24px; } .welcome-heading h1 { font-family: 'Source Sans Pro', sans-serif; font-size: 60px; font-weight: 600; line-height: 1.2em; margin-bottom: 30px; margin-top: 15px; } .welcome-heading h1 em { display: block; font-style: normal; color: #eb4d4b; } .welcome-heading p { padding: 0 100px; margin-bottom: 50px; } .welcome-btns {} .btn { display: inline-block; width: 160px; padding: 8px; color: #fff; border-radius: 5px; margin: 5px; transition: 0.5s; } .btn:hover { box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); transform: translateY(-5px); } .btn.start { background-color: #0abde3; } .btn.guide { background-color: #fff; color: #222; } /* Mouse Wheele */ .mouse { border: 2px solid #fff; position: absolute; width: 32px; height: 45px; border-radius: 30px; bottom: 100px; left: 250px; } .wheele { position: absolute; width: 4px; height: 15px; background-color: #fff; border-radius: 5px; left: 12px; top: 10px; animation: wheele 1.5s linear infinite; } @keyframes wheele { 0% { top: 10px; } 50% { top: 20px; } 100% { top: 10px; } } /* ▦▦▦▦▦▦▦▦▦ Slick Custom CSS ▦▦▦▦▦▦▦▦▦ */ .slideshow .slick-arrow { border: 1px solid #000; display: none !important; } .slideshow * { outline: none; } jquery $(function(){ /* Slick Slider - Welcome */ $('.slideshow').slick({ infinite: true, dots: false, autoplay: true, autoplaySpeed: 2000, fade: true, speed: 1000, pauseOnHover: false });
-
미해결퍼블리싱 핵심이론 PDF 교재 및 예제파일(HTML+CSS+FLEX+JQUERY)
수강기한 관련 문의
안녕하세요! 현재 퍼블리싱 관련 강의를 수강하고 있는 도중 궁금한 점이 생겨 문의드립니다. "퍼블리싱 핵심이론 PDF 교재 및 예제파일"에 수강 기한이 있는 것을 확인하였는데, 추후 교재가 수정이 된다면 기한이 끝나고 난 후 강의를 다시 구입해야 하나요? 만약, 다시 구입해야 한다면 교재가 수정(또는 개정)되었다는 것을 어떻게 알 수 있을까요? 인프런 강의에서 확인하는 방법이 될까요?
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
자막이 있으면 좋겠어요..
자막파일 따로 다운받아서 놓친부분 찾기도 좋고 중간중간에 목소리 끊기는 부분도 있고 학교과제하느라 제가 시간도 많이 부족해서..... 다음 영상제작부터 자막이 있으면 계속 구매하고싶어요!!
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
질문드립니다.
선생님, 안녕하세요. 다름이 아니라 브라켓의 emmet 기능을 설치했는데도 강의에서 선생님처럼 css 속성 앞글자만 쳐도 속성 목록이 쭉 나와야 되는데 저는 css 속성 앞 글자만 작성해도 속성 목록이 전혀 나오지 않습니다. emmet 기능 말고도 다른 확장 기능을 설치해야 되나요? 질문드립니다.
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
오지랖입니다만,
$(function(){ /* TRIGGER */ $('.trigger').click(function(){ $(this).toggleClass('active') $('.gnb').toggleClass('active') }) $('section').click(function(){ $('.gnb').removeClass('active') $('.trigger').removeClass('active') }) }) 조금 더 정확하게 해주기 위해, 마지막에,$('.trigger').removeClass('active') 이거 한줄 더 넣어주면, 트리거 모양이 돌아옵니다. 저거 빠트리면, gnb가 들어가도 트리거가 X 모양으로 남아 있더라구요. 참고하시라고 넣었습니다.
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
안녕하세요 질문있습니다 ㅠㅠ
이번강의 보고 따라해봤는데 display: inline-block; 을 .item에 넣어도 옆으로 붙지를 않아서 한줄로 나오지를 않더라구요 뭘 잘못한건지 모르겠어서요 ㅠㅠ 뭐가 잘못된걸까요..?? <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>오버하면 상세설명 나타나는 상품목록</title> <style> .items { text-align: center; } .item { display: inline-block; width: 300px; height: 300px; border: 1px solid #ddd; position: relative; margin: 10px; } .caption { width: 300px; height: 300px; background-color: rgba(0, 0, 0, 0.7); position: absolute; top: 0; left: 0; color: #fff; padding: 20px; box-sizing: border-box; padding-top: 40px; opacity: 0; transition: 0.5s; } .caption a { color: #fff; background-color: teal; padding: 7px; border-radius: 3px; text-decoration: none; } .caption a:hover { background-color: #fff; color: #000; } .item:hover .caption { opacity: 1; } </style> </head> <body> <div class="items"> <div class="item"> <img src="1.jpg" alt=""> <div class="caption"> <h2>라이언인형</h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing. </p> <p>Price : <s>$12</s> $10</p> <a href="#none">view detail</a> </div> </div> </div> <div class="items"> <div class="item"> <img src="1.jpg" alt=""> <div class="caption"> <h2>라이언인형</h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing. </p> <p>Price : <s>$12</s> $10</p> <a href="#none">view detail</a> </div> </div> </div> <div class="items"> <div class="item"> <img src="1.jpg" alt=""> <div class="caption"> <h2>라이언인형</h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing. </p> <p>Price : <s>$12</s> $10</p> <a href="#none">view detail</a> </div> </div> </div> </body> </html>