61,600원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨반응형 웹사이트 포트폴리오(Architecture Agency)
.cd-section > div에 height를 100%준 이유에 대해서 궁금합니다!
안녕하세요 선생님! 언제나 강의 잘 듣고 있습니다:) 다름이 아니라 강의 3: 35부분에 .cd-section 에는 height를 100vh; .cd-section > div 에는 height를 100%; 주셨는데 똑같이 100vh로 적용하지않고 퍼센트(%)로 준 이유가 있으실까요..?! 또 괜찮다면 .cd-section > div에도 height를 100vh;로 줘도 될까요?!
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
모바일 사이즈 질문 드립니다.
안녕하세요. 모바일 사이즈 작업시 컨텐츠로 묶여있는 항목이 두개씩 나오는 현상이 발생합니다 . 다른 사이즈에서는 안나오는데 768이하로 조정하면 미리보기 이미지를 씌운 컨테이너와 씌우지 않은 회색화면 컨테이너가 나타납니다. content로 묶여있는 화면에 이미지를 넣었는데 이미지 넣은 화면이 먼저, 이미지 없는 회색배경에 h2가 적힌 화면이 다음에 이런식으로 총 14개의 화면이 보이게 됩니다. 도와주세요 ! <section id="home" class="cd-section visible"> <div> <div class="content"> <img src="images/temp_1.png" alt=""> <h2>section 1</h2> </div> </div> </section>
- 해결됨반응형 웹사이트 포트폴리오(Architecture Agency)
질문입니다.
.feature가 width: 70%; 인상태이고 그 바로아래 자식인 .office 는 width: 60%, .service는 width: 40%를 주셨는데 이상태에서 .office에 padding-right를 100px주면 .service가 옆으로 밀려서 .feature 의 width를 초과해서 줄바꿈이 되야 하는게 아닌가요?
- 해결됨반응형 웹사이트 포트폴리오(Architecture Agency)
질문입니다.
.feature > div 에 float: left; 를 주면 .feature이 높이값을 잃어서 overflow: hidden; 을 줘야하는거 아닌가요? 영상에서는 높이값을 잃지 않았네요..? 이유가 뭔가요??
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
모바일 메뉴가 안나옵니다
index.html <!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- page scroll effects JS & CSS --> <script src="js/jquery-2.1.4.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"> <title>DesignWorks Architecture Agency</title> </head> <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" alt=""> </div> </div> </section> <section class="cd-section" id="about"> <div> <div class="content"> <h2>Section 2</h2> </div> </div> </section> <section class="cd-section" id="project"> <div> <div class="content"> <h2>Section 3</h2> </div> </div> </section> <section class="cd-section" id="awards"> <div> <div class="content"> <h2>Section 4</h2> </div> </div> </section> <section class="cd-section" id="Location"> <div> <div class="content"> <h2>Section 5</h2> </div> </div> </section> <section class="cd-section" id="contact"> <div> <div class="content"> <h2>Section 6</h2> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <h2>Section 7</h2> </div> </div> </section> <header> <div class="gnb-inner"> <div class="logo"> <a href="#none"><img src="images/logo.png" alt="로고"></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> <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> style.css /* 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; width: 100%; top: 0; left: 0; } .gnb-inner { /* border: 1px solid #000; */ width: calc(100%-40px); margin: auto; height: 60px; line-height: 60px; } .logo { float: left; } .gnb { float: right; } .menu { display: none; } .menu a { } .slogan { font-size: 16px; font-style: italic; } .trigger { display: none; } Responsive.css @media (max-width: 768px) { /* html { scroll-behavior: smooth; } */ /* Entire Layout */ .cd-section { height: auto; } .cd-section > div { height: auto; } .content { position: static; width: 100%; height: 100%; } /* HEADER */ .slogan { display: none; } .gnb { background-color: #fff; position: fixed; top: 0; right: -270px; width: 250px; height: 100vh; box-shadow: -5px 0 10px rgba(0, 0, 0, 0.1); transition: 0.5s; } .gnb.active { right: 0; } .menu { display: block; line-height: 40px; margin-top: 60px; } .menu a { text-align: right; display: block; padding-right: 20px; color: #000; font-size: 20px; } /* trigger */ .trigger { display: block; width: 24px; height: 14px; position: absolute; right: 20px; top: 20px; } .trigger span { position: absolute; height: 1px; width: 100%; background-color: #000; transition: 0.5s; } .trigger span:nth-child(1) { top: 0; } .trigger span:nth-child(2) { top: 50%; width: 80%; } .trigger span:nth-child(3) { top: 100%; } .trigger.active span:nth-child(1) { top: 50%; transform: rotate(45deg); } .trigger.active span:nth-child(2) { top: 50%; width: 80%; opacity: 0; } .trigger.active span:nth-child(3) { top: 50%; transform: rotate(-45deg); } } gnb가 오른쪽 right:-270px;에서 active되면 right:0 되어야 하는데 안 나타나네요 ㅠㅠ html에 gnb에 수동으로 active넣으면 흰색배경이 나타나는데 저는 어느부분이 오타가 난걸까요..
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
temp-section 사진 크기에 대해서 질문이요!
웹 페이지 제작하는데 밑에 사진 보시면 전체적으로 temp-section사진이 커서 그런지 사진이 많이 짤리더라구요 제것만 그런줄 알았는데 선생님것도 똑같이 section 사진들이 잘려보여요ㅠㅠ선생님 영상보면 잘리는거 없이 잘 되어 있는데.. .content img{ width: 100%; height:100%; }를 줘봤는데 웹페이지로는 잘리는거 없이 잘 보이지만 모바일버전으로 보면 이상하게 되더라구요.. 어떻게 해결 할 수 있을까요ㅠ.ㅠ.. --------- 그리고 모바일 버전으로 볼때 자꾸 header가 밑에 배치되네요.. 코드 작성도 똑같이 했는데 뭐가 문제일까용?ㅠㅠ
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
제가 질문이 좀 많습니다. 죄송합니다.
완강하고 완전히 저의 것으로 만들기 위해 혼자서 여러번 처음부터 끝까지 하다가 딱 여기서 project 반응형으로 수정할때, 막혀 고생했던것들 관련하여 질문올립니다. 뭐냐면, 우선 웹상에서 선생님께서 버튼을 누르면 tabs가 움직일때, margin-left 로 조정해서 하셨지만, 저는 project-inner에 position: relative; 를 주고tabs에 position: absolute;를 준뒤,움직임은 left값으로 조정해서 구현을 했었습니다. 그러니까 문제가 뭐였냐면,이 반응형에서, 선생님께서 알려주신대로,height값 들을 auto로 하고, 만드니, project-inner 부터(색깔 있는 보더를 그려주니 알게 되었습니다.) 높이값이 안나와 굳이 구현을 하려면, 높이값을 auto가 아닌 수동으로 잡아줘야 했고,btn도 위치가 이상해지고 알 수 없는 빈 공간도 막 생기고,뭐가 문제인지 모르겠더라구요.선생님 처럼, position 값으로 움직이는게 아니라,margin-left 값으로 움직이게 한 후 모바일반응형으로 높이를 height를 주면 문제가 없는데 말이죠. 그 이유를 혹시 알 수 있을까해서 여쭤봅니다. 제 스스로 내리는 판단하에서는 이렇게 움직이나 저렇게 움직이나 웹상에서는 문제가 없는데, 제가 했던 방식으로는 반응형으로 할때 구조가 이상해지니, 분명 더 명확한 방법이 있을 것 같은데, 현재 완전히 구현하려면 선생님의 방식으로 가는것 밖에는 없더라구요. 제 질문의 요지를 이해하셨는지 잘 모르겠습니다만,이해가 가셨다면, 답변을 부탁드리겠습니다.자꾸 귀찮게 해드리는것 같아 죄송하지만, 답을 알면 속이 시원할 것 같습니다. 감사합니다.
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
질문있습니다.
선생님 안녕하세요! 강의를 듣다가 award 부분에 스크롤이 도달했을 때 opacity : 0 이었다가 opacity : 1로 스르륵 나타나게 하고싶은데 js를 모르겠어요 ㅠㅠ 혹시 알려주실 수 있으실까요?
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
gnb 질문드립니다
모바일 화면으로 창 크기를 줄일 때, gnb가 처음에는 없고(right:-270px) 햄버거 버튼을 눌러야 나타나야 하잖아요! 그런데 저는 처음부터 gnb창이 나옵니다 ㅜㅜ right값을 더 늘려도 소용이 없고, display:hidden을 줘도 그렇습니다 ㅜㅜ 어떻게 하면 되는 걸까요? 답변 기다리겠습니다. 감사합니다.
- 해결됨반응형 웹사이트 포트폴리오(Architecture Agency)
page-scroll-effects-master이 어디 있나요
제 눈이 의심스럽네요.^^; page-scroll-effects-master를 어디서 다운로드 받을수 있을까요
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
수고많으셨습니다. 한가지만 마지막으로 여쭤볼게요!
모바일버전으로 볼때, 스크롤다운하면 고정된 헤더부분을 하얗게설정했잖아요. 그렇다면, 그 고정된 헤더가 내가 보려는 부분을 가릴 수도 있단말이죠. 그래서 보통 휴대전화를 사용할 때, 화면을 한번 누르면 그 하얀헤더가 투명하게 사라졌다가, 다시 헤더를 보고 싶을 때, 한번 더 화면을 터치하면 다시 나타나는데, 그런 부분들의 조정은 개발자가 하고 퍼블리셔가 따로 할건 없는걸까요? 궁금합니다. 감사합니다. ^^
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
안녕하세요 iframe css 에 대한 질문입니다.
안녕하세요, iframe 제이쿼리 연결해서 모달창 띄우는 부분에서 질문이 있는데요, 강의하신 내용대로 아래와 같이 수정하면 html 페이지 링크했을때는 괜찮은데 이미지를 링크하면 이미지도 화면에 꽉차게 뜨는데요, 혹시 이미지는 원래 기본설정대로 두고 html페이지에만 css 적용시킬 방법이 있을까요? 제작자 깃허브 보면 <a href="#" data-featherlight="myimage.png">Open image in lightbox</a> <a href="#" data-featherlight="myhtml.html .selector">Open ajax content in lightbox</a> <a href="#" data-featherlight="<p>Fancy DOM Lightbox!</p>">Open some DOM in lightbox</a>이런식으로 나뉘어져서 써있긴 한데 이렇게 해봐도 창은 전체화면 크기입니다. ㅠㅠ .featherlight .featherlight-content { position: relative; text-align: left; vertical-align: middle; display: inline-block; overflow: auto; padding: 0; border-bottom: 25px solid transparent; margin-left: 0; margin-right: 0; max-height: 100%; background: #fff; cursor: auto; white-space: normal; width: 100%; height: 100%; }
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
17분짜리 이 영상
실제로는 8분 30초 짜리 맞나요? 제 컴퓨터에서만 이렇게 보이나 해서 여쭤봅니다. 별문제 아니면 넘어갈게요 ^^;;
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
애니메이션 질문드립니다.
안녕하세요 강의 잘 듣고있습니다. 다른 분들 포트폴리오를 보다가 의문점이 생긴 부분이 있어서 질문드립니다. 강사님의 프로젝트를 보면 애니메이션이 처음 Section home에 애니메이션을 걸어놨는데 다른 분들의 포폴 홈페이지를 보니까 1. 섹션을 내리다가도 다시 그 섹션에 돌아가면 애니메이션이 재시작되고 이런 게 좀 있어서 상황에 따라 그게 더 돋보일 수도 있다는 생각이 들어서 그렇게 설정을 하는건 어렵나요? 2. 강사님 슬라이더 강의를 들은걸로 슬라이더 형태를 만들면 (Slick.js를 안 쓴 경우) 사용자가 마우스로 label을 클릭해서만 이동하게 되있던데 그 슬라이더를 slick처럼 시간에 따라 자동으로 지나가게는 못만드나요?
- 미해결반응형 웹사이트 포트폴리오(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 모양으로 남아 있더라구요. 참고하시라고 넣었습니다.
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
다른분들 참고하실분 참고해 주세요. 트리거 관련입니다.
이 영상 다다음에 트리거 만들어서 jQuery 작성해서 하는데, 자꾸 왜 작동을 안하지? 해서 계속 거기 해결하려고 시간을 많이 보냈었습니다. 알고보니 이 영상 15분쯤에 볼 수 있는 velocity.css 파일의 ::before 가상요소 때문이었습니다. 이게 너비 100%로 트리거를 덮고 있어서 아무리 트리거를 눌러도 작동을 하지 않았던 겁니다. before에 보더를 그려보면 한눈에 알 수 있습니다. 거기다 z-index까지 들어가 있으니 말 다했죠. 그래서 선생님께서 하신대로 content: '';를 주석처리 하든가 아니면 top 값을 높여 위치를 아래로 내려주던가 하면 트리거를 누르는데에 문제가 없어집니다. 분명 똑같이 했는데, 왜 나는 안되나 찾고 찾다가 이제 알게 됐습니다. 혹시 저처럼 이부분에서 헤매셨거나 그랬다면, 참고하여 시간 아끼시기 바랍니다. 물론 이런 헤맴이 관찰력과 실력을 함께 끌어 올릴거라 생각은 합니다만, 저는 마음이 초조한지라 빨리 실력을 올리고 싶네요. 다들 잘하셔서 질문이 많이 없는 것 같습니다. 읽어주셔서 감사합니다.
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
선생님 질문이 있습니다.
선생님 안녕하세요~ 서브페이지 퍼블리싱(Project Detail)에서 PC 레이아웃 서브페이지 퍼블리싱(Project Detail) - #02 강의 듣고잇는데 서브페이지 연결하고 뒤로가기 했을 때 컨택트 화면만 보이고 스크롤하면 위에 포지션 픽스 부분이 스크롤 되더라구요.. 해결하는 방법이 무엇일까요?? visible은 맨 천번 째 섹션에 위치해있어요
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
질문드립니다!
선생님 강의 정말 잘 듣고 있습니다. 한 개 빼고 다 듣고 있는데요. 다름이 아니고 혹시 다음 강의 제작중인 것이 있는지 궁금합니다. 이제 강의 거의 전부 2회독씩도 넘어가고 있고 또 다른 것도 배우고 싶어서 이렇게 질문 드립니다 그리고 혹시 제작 생각 중이신 것 중에 부트스트랩이나 플러그인 강의 이런것도 중점에 두고 계신지 궁금합니다~
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
재문의 드립니다.
바로 밑밑 게시글에 전체 섹션 완성후 home 섹션 처음 로딩될 때 라는 제목으로 5일정도 전에 문의 드렸었는데, 처음 로딩될 때 온갖 태그들이 합쳐진 상태로 난잡하게 보여진 후 그다음 애니메이션이 실행되는 걸로 질문을 드려서, 알아 보신후에 재답글 주신다고 하셨는데 아직 재답글이 안달려서 재문의 드립니다.
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
섹션 3까지 들은 학생입니다.
현재 작동에는 아무런 문제가 없으나 브라우저에 계속 저런 오류가 나타나는데 어떤 문제인지 질문드립니다 ㅜㅜ현재 수업자료에도 계속 오류가 뜨고 있습니다. jquery-2.1.4.js:3 [간섭] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/6662647093133312