61,600원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
마우스 휠 콘솔오류
반응형-웹사이트-포트폴리오 인강을 신청해서 듣고 있는 취준생입니다. 혹시 시간이 많이 지났는데.. 마우스 휠을 내릴때 생기는 콘솔오류는 아직 해결이 안된건가요? 포트폴리오로 오류가 있는 작품을 내고싶지 않아서요 ㅠㅠ 그리고 제이쿼리 플러그인을 회사에서도 사용하고 싶은데 저렇게 콘솔오류가 뜨면 사용하기 어렵고 열심히 배운게 저 오류 하나때문에 소용없어질까봐 무섭습니다ㅠㅠ 제발 오류해결방법좀 알려주세요 ㅠㅠ
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
rem에 관해 질문있습니다
안녕하세요 선생님. rem에 대해 궁금한 것이 있습니다. html 태그나 body 태그의 폰트 사이즈를 따로 css에서 설정하지 않고도 일반적인 태그(div, h1등)에 rem을 설정할 수 있나요? 만약 그렇다면 root 폰트 사이즈는 16px이 되는 것인가요? 혹은 rem을 설정하려면 반드시 html { font-size: ~~}를 설정해야 하는지 궁금합니다. 감사합니다.
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
퍼블리셔와 프론트엔드 업무 질문입니다
강의 중에 이런 말씀을 하셨더라구요 "textarea 태그에 name, id 이런 부분은 개발자들이 하는 것이기 때문에, 신경안써도 된다~" 퍼블리셔와 프론트엔드 개발자에서 어떤 업무적인 차이가 있는지 궁금합니다.
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
레벨 5 정도의 사이트를 보고 싶습니다 ㅎㅎ
선생님께서 말씀하신 레벨 5정도의 사이트의 예시를 알 수 있을까요 ㅎㅎ 공부할 때 많은 자극이 될 것같아서 여쭈어 봅니다.
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
input 태그와 label 태그에 관한 질문입니다
안녕하세요 선생님 input 태그에 id를 설정하고 이를 label 태그의 for 속성으로 연결한다고 들었습니다. 그런데 input 태그를 그대로 사용하지 않고 굳이 display:none;으로 바꾼 다음 label 태그를 대용하는 이유는 무엇인가요?
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
span 애니메이션 질문입니다
블럭이 위에서 쏟아지듯이 등장합니다. 포지션 문젠가 해서 이리저리 바꿔보았지만 그대로 입니다. 어떻게 수정하면 옆에서 등장하게 만들수 있나요?
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
강의와 같이 경로를 맞춰주었는데 화면이 제대로 나오지않아요
. 경로를 다 맞춰줬다고 생각하는데 화면이 강의와같이 나오지 않아서 질문 올립니다. 이럴 경우 무엇을 더 체크해보면 좋을까요 ?
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
선생님, 수업에는 나오지 않는 부분인데 궁금한게 있어서 질문드립니다.
안녕하세요 선생님! 먼저 선생님 강의를 잘듣고있는 학생입니다. 기본CSS부터 FLEX 그리고 포트폴리오강의까지 너무나 잘듣고 있습니다.^^ 포트폴리오 강의에는 해당 내용이 없는것 같은데 제가 너무 궁금해서 질문드립니다. 요즘 웹페이지를 보면 흔하게 볼수 있더라구요. 페이지가 전환될때나 스크롤을 내리면서 컨텐츠가 보일때 페이드인 되면서 애니매이션이 작동하는 방식이요! 페이지가 전환될때도 페이드아웃되고요. 부드럽게 넘어가는게 고급스러운 느낌을 주더라구요 ^^; (그래서 저도 써보고 싶어서 이리저리 검색해봤는데 며칠째 원하는 답을 찾지못했습니다.ㅜㅜ 그렇게 간단하지 않은것 같더라구요. DOM의 실행순서와 자바스크립트의 연관성이 있어보이던데...) 어떤 코드를 입력해야 구현이 가능한걸까요? 도움주시면 너무 감사하겠습니다!! http://andneeds.co.kr/ (여기웹을 보시면 home에서 shop으로 넘어갈때 애니메이션이 발생합니다. 그리고 shop에서 아래로 스크롤을 하면 애니메이션이 또 발생합니다.)
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
소스텍스트는 어디서 다운 받나요
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다. 6:07분
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
선생님 이 슬라이드를 아래로 스크롤했다가 맨위로 올리면 화면이 하얗게 되면서 이상해지네요 ㅠㅠㅠ
■ 질문 남기실 때 꼭! 참고해주세요. <!DOCTYPE html> <html lang="en" class="no-js"> <head> <meta charset="UTF-8" /> <!--반응형웹선언문--> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" /> <!-- jQuery CDN --> <script src="https://code.jquery.com/jquery-latest.min.js"></script> <!-- CSS basic--> <link rel="stylesheet" href="css/basic/reset.css" /> <link rel="stylesheet" href="css/basic/aos.css" /> <link rel="stylesheet" href="css/basic/slick.css" /> <link rel="stylesheet" href="css/basic/slick-theme.css" /> <link rel="stylesheet" href="css/basic/featherlight.css" /> <!-- JS basic --> <script src="js/basic/aos.js"></script> <script src="js/basic/veloslide/velocity.min.js"></script> <script src="js/basic/veloslide/velocity.ui.min.js"></script> <script src="js/basic/veloslide/main.js"></script> <script src="js/basic/jquery.scrollTo.min.js"></script> <script src="js/basic/slick.min.js"></script> <script src="js/basic/featherlight.js"></script> <!-- CSS/JS custom --> <link rel="stylesheet" href="css/veloslide.css" /> <link rel="stylesheet" href="css/style.css" /> <link rel="stylesheet" href="css/responsive.css" /> <script src="js/custom.js"></script> <title>Ellarose's portfolio</title> </head> <!-- hijacking: on/off - animation: none/scaleDown/rotate/gallery/catch/opacity/fixed/parallax --> <body data-hijacking="on" data-animation="catch"> <div id="wrap"> <header> <div class="gnb-inner"> <div class="logo"> <h1><a href="#">Ellarose's</a></h1> </div> <div class="tran"> <div class="trigger"> <span></span> <span></span> <span></span> </div> </div> </div> </header> <!-- home --> <section class="cd-section visible" id="home"> <div> <div class="content"> <img src="img/pic1.jpg" alt="" /> </div> </div> </section> <!-- profile --> <section class="cd-section" id="profile"> <div> <div class="content"> <img src="img/pic1.jpg" alt="" /> </div> </div> </section> <!-- vision --> <section class="cd-section" id="vision"> <div> <div class="content"> <img src="img/pic1.jpg" alt="" /> </div> </div> </section> <!-- work : responsive --> <section class="cd-section" id="works1"> <div> <div class="content"> <img src="img/pic1.jpg" alt="" /> </div> </div> </section> <!-- work : adaptive --> <section class="cd-section" id="works2"> <div> <div class="content"> <img src="img/pic1.jpg" alt="" /> </div> </div> </section> <!-- work : another works --> <section class="cd-section" id="another"> <div> <div class="content"> <img src="img/pic1.jpg" alt="" /> </div> </div> </section> <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> </div> </body> </html> @charset "utf-8"; @import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,400;0,600;1,200;1,400;1,600&family=Noto+Sans+KR:wght@100;400;700&display=swap"); /* font-family: 'Montserrat', sans-serif; 200 400 600 font-family: 'Noto Sans KR', sans-serif; 100 400 700 */ /* Default */ body { font-family: "Montserrat", sans-serif; background-color: #fff; height: 100vh; } /* Default Layout */ .cd-section { width: 100%; height: 100vh; } .cd-section > div { width: inherit; height: inherit; position: relative; } /* .content { background-color: #ccc; position: absolute; width: 100%; height: 100%; } */ .content { position: absolute; width: calc(100% - 40px); height: calc(100% - 80px); /* margin: 40px 20px; */ left: 20px; bottom: 20px; overflow: hidden; border: 1px solid #000; background-color: lightpink; } .content img { width: 100%; height: 100%; object-fit: cover; } header { position: fixed; width: 100%; top: 0; left: 0; z-index: 999; transition: 0.5s; } .gnb-inner { width: calc(100% - 40px); margin: 0 auto; height: 60px; /* overflow: hidden; line-height: 60px; */ display: flex; justify-content: space-between; align-items: center; } /* 자식요소가 float 성질을 가지니까 높이값을 잃음 overhiden 혹은 height 60px 도 가능*/ .logo h1 a { font-size: 3rem; padding-left: 10px; color: #000; } .gnb { position: fixed; width: 100%; height: 100%; background-color: rgb(44, 44, 44); z-index: 999; display: none; } .menu { float: left; width: 50%; height: 100%; display: flex; justify-content: center; align-items: center; text-align: center; } .menu a { display: block; color: rgb(255, 255, 255); font-size: 4rem; padding: 10px 20px; scroll-behavior: smooth; } .gnb .image { float: right; position: relative; width: 50%; height: 100%; overflow: hidden; border: 1px solid #000; } .gnb .image img { height: 100%; width: auto; object-fit: cover; object-position: center; } .tran { border: 1px solid transparent; border-radius: 50%; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; } .trigger { display: block; width: 30px; height: 16px; cursor: pointer; position: relative; z-index: 999; } .trigger span { position: absolute; height: 1px; width: 100%; background-color: #000; transition: 0.3s; } .trigger { display: block; width: 3px; height: 16px; cursor: pointer; position: relative; z-index: 999; } .trigger span { position: absolute; height: 3px; width: 3px; background-color: #000; transition: 0.3s; border-radius: 6px; } .trigger span:nth-child(1) { top: 0; } .trigger span:nth-child(2) { top: 50%; width: 100%; } .trigger span:nth-child(3) { top: 100%; } .trigger.active span:nth-child(1) { transform: translateX(-40%) rotate(45deg); width: 20px; height: 2px; top: 50%; } .trigger.active span:nth-child(2) { opacity: 0; } .trigger.active span:nth-child(3) { transform: translateX(-40%) rotate(-45deg); width: 20px; height: 2px; top: 50%; } @keyframes jello-vertical { 0% { transform: scale3d(1, 1, 1); } 30% { transform: scale3d(0.75, 1.25, 1); } 40% { transform: scale3d(1.25, 0.75, 1); } 50% { transform: scale3d(0.85, 1.15, 1); } 65% { transform: scale3d(1.05, 0.95, 1); } 75% { transform: scale3d(0.95, 1.05, 1); } 100% { transform: scale3d(1, 1, 1); } } .trigger:hover { animation: jello-vertical 0.9s both; } /* -------------------------------- Primary style -------------------------------- */ body::before { /* never visible - this is used in jQuery to check the current MQ */ content: "mobile"; display: none; } @media only screen and (min-width: 1281px) { body::before { /* never visible - this is used in jQuery to check the current MQ */ content: "desktop"; display: none; } } /* -------------------------------- Main Components -------------------------------- */ @media only screen and (min-width: 1281px) { body[data-hijacking="on"] { overflow: hidden; } .cd-section { height: 100vh; } .cd-section h2 { font-size: 4rem; font-weight: 300; } [data-hijacking="on"] .cd-section { opacity: 0; visibility: hidden; position: absolute; top: 0; left: 0; width: 100%; } [data-hijacking="on"] .cd-section > div { visibility: visible; } [data-hijacking="off"] .cd-section > div { opacity: 0; } [data-animation="rotate"] .cd-section { /* enable a 3D-space for children elements */ -webkit-perspective: 1800px; -moz-perspective: 1800px; perspective: 1800px; } [data-hijacking="on"][data-animation="rotate"] .cd-section:not(:first-of-type) { -webkit-perspective-origin: center 0; -moz-perspective-origin: center 0; perspective-origin: center 0; } [data-animation="scaleDown"] .cd-section > div, [data-animation="gallery"] .cd-section > div, [data-animation="catch"] .cd-section > div { box-shadow: 0 0 0 rgba(25, 30, 46, 0.4); } [data-animation="opacity"] .cd-section.visible > div { z-index: 1; } .cd-section:first-of-type > div::before { display: none; } .cd-section > div { position: fixed; top: 0; left: 0; width: 100%; /* Force Hardware Acceleration */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } [data-hijacking="on"] .cd-section > div { position: absolute; } [data-animation="rotate"] .cd-section > div { -webkit-transform-origin: center bottom; -moz-transform-origin: center bottom; -ms-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom; } .cd-vertical-nav { /* lateral navigation */ position: fixed; z-index: 1; right: 3%; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); display: none; } .cd-vertical-nav a { display: block; height: 42px; width: 42px; /* image replace */ overflow: hidden; text-indent: 100%; white-space: nowrap; background: url(../img/arrow_gray.svg) no-repeat center center; transform: rotate(180deg); } .cd-vertical-nav a.cd-prev { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); margin-bottom: 10px; } .cd-vertical-nav a.inactive { visibility: hidden; opacity: 0; -webkit-transition: opacity 0.2s 0s, visibility 0s 0.2s; -moz-transition: opacity 0.2s 0s, visibility 0s 0.2s; transition: opacity 0.2s 0s, visibility 0s 0.2s; } .cd-vertical-nav { display: block; } } - 왜이런것일까요 ㅠㅠㅠ ?? - HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
선생님 fullscreen.js에 관해서 질문있습니다.
선생님 다름이 아니라 같이 만든 이 페이지를 featherlight.js를 통해 링크를 해주고 싶은데 첫페이지만 나오고 반응이 없는 상태입니다. 현재 시즌2 포트폴리오 부분처럼 featherlight.js를 통해 만들고 있는데 제가 따로 만든 페이지는 정상작동하는데 이 플러그인의 문제가 있는지 안되고 있습니다. 혹시 죄송하지만 선생님도 안되는지 봐주실 수 있을까요? *닷홈에다가 올려서 링크로 따왔을때는 정상작동하나 a태그에 동일한 주소를 넣었는데도 안되네요.....
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
checked radio 속성
안녕하세요 강의도중 제가 이해한게 맞는지 궁금해서 질문을 남겨요. 질문은 radio 속성입니다 input 에 checked 를 첫번째 tab1인 친구에게 준다고 했을때 화면이 리로드 했을때 그 녀석만 css가 적용이 되는것을 알 수가 있습니다. 그런데 저희가 다른 친구인 tab2 tab3 한테 주면 tab1 의 checkd 가 사라지는걸 알 수가 있는데 그것은 그냥 radio의 속성인 걸까요 무조건 1개만 선택 할 수 있게 하여라!! 또 다른 방법으로 css에서 active라는 클래스를 만들어서 css를 넣어준후 제이쿼리 클릭이벤트로 클릭이 되었을때 다른요소들의 active 클래스는 삭제를 시켜주고 이 요소에게는 active를 add시켜라 라는 코드를 짜도 똑같이 작동할 것 같은데 맞는지 궁금합니다.
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
12분10초 부모요소 따라 내려가는 셀렉터 선택
부모요소따라 selectoer 선택하는건 좋지 않다고 하셨는데용 여기서 의문점이 있습니다. 말씀해주시면 class로 계속 적게 되면 각각의 tag 에게 전부 class 를 부여 해주어야 하나요? 이 부분에 대해서 너무 답답합니다 ㅠㅠ 누구는 저렇게 부모요소따라 적어주면서 하라고 하시구 GOD딩웍스에서는 딱 클래스만 적어서 사용하라고 하구요 ㅠㅠ 어느것이 정답인가요 ㅠㅠ
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
href 링크
선생님 강의를 잘 들었습니다. 다름이 아니라 다 만들었는데 저같은 경우 home section에 네비 메뉴를 넣어뒀습니다. 그래서 각 section에 클래스 옆에다가 아이디로 해당 네비게이션 이름을 지정해놨습니다, 그래서 네비게이션버튼을 눌렀을 때 넘어갈 줄 알았는데 넘어가지를 않아서 아무리 고민을 해봐도 답이 안나와서 글을 남기게 되었습니다. 밑에 코드랑 화면 같이 남기도록 하겠습니다. 감사합니다. <body data-hijacking="on" data-animation="scaleDown"> <section class="cd-section visible" id="home"> <div> <div class="content"> <video src="video/Tomorrowland Presents _ THIS WAS TOMORROW Official Movie Trailer (1080p)_1.mp4" autoplay muted loop></video> </div> </div> </section> <section class="cd-section" id="about"> </section> 각 섹션별로 아이디를 동일하게 지정해놓은 상태입니다. header영역 <header> <div class="head_inner"> <h1 class="logo"><a href="#"><img src="images/android-icon-48x48.png" alt="logo"></a></h1> <div class="gnb"> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#lineup">LineUp</a></li> <li><a href="#md">MD</a></li> <li><a href="#directions">Directions</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> <div class="slogan">Make Some Noise</div> </header>
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
beautify 라는 세팅 대신에 prettier 를 사용해도되나여?
안녕하세요 이번에 강의를 결제하고 보는 코린이 입니다. 다름 아니라 vscode에서 저는 prettier 라는 것을 사용 하고 있는데 beautify 라는 것을 사용 하는것이 더좋은가요?
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
블라켓 에밋설치
검색창이 클릭이 안되서 에밋을 설치할수가없어요 ㅜ
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
margin : auto 와 position : absolute 의 차이가 궁금합니다
자주 나오는 개념같은데 제가 헷갈려서 질문드립니다. ^^; 보통 부모자식관계를 설정할때 position : absolute를 써서 원하는 위치에 놓는것으로 알고 있습니다. 그런데 어떨때는 강의에 나오는 header 와 header-inner 같이 margin:auto를 사용하던데 그 차이가 궁금합니다. 예를 들어 단순히 센터배치일때도 position : absolute 와 top/ left/ transform 등을 써서 센터에 놓기도 하잖아요.
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
선생님! project-info 안에 별도의 div를 넣지 않고 padding으로 처리하신 이유가 있을까요?
선생님! project-info 안에 별도의 div를 넣지 않고 padding으로 처리하신 이유가 있을까요? 그 기준이 궁금합니다! 퍼블리셔가 상황에 맞게 그냥 하면 되는건지요 !
- 해결됨반응형 웹사이트 포트폴리오(Architecture Agency)
컨텐츠 변경해서 웹사이트 포트폴리오로 사용해도 될까요?
선생님 안녕하세요~ 이 작업물을 컨텐츠 변경 후 웹사이트 폴트폴리오로 사용해도 될까요?? (개인 포폴 홈페이지 x)
- 해결됨반응형 웹사이트 포트폴리오(Architecture Agency)
slick 적용 시 슬라이더 페이지마다 높이가 다를 경우 질문드립니다.ㅠㅠ
안녕하세요 반응형 웹 작업하다가 궁금한게 있어서 질문 드립니다. project 섹션 안에 tab 메뉴 슬라이더 적용했을 때 인데요, tab 안에 project-info 내용들이 각 슬라이드 마다 차이가 있어서 내용이 제일 많은 슬라이드 기준으로 여백?이 생기는 문제가 발생했습니다..ㅠㅠ 제가 잘못 작업한걸까요... 아니면 각 슬라이드 height를 동일하게 맞출 수 있는 방법이 있을까요..ㅠㅠ