61,600원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
모바일 트리거 버튼이 안나와요
<!DOCTYPE html> <html lang="UTF-8"> <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" /> <!-- Custom JS & CSS --> <script src="js/custom.js"></script> <link rel="stylesheet" href="css/style.css" /> <link rel="stylesheet" href="css/responsive.css" /> </head> <!-- hijacking: on/off - animation: none/scaleDown/rotate/gallery/catch/opacity/fixed/parallax --> <body data-hijacking="on" data-animation="scaleDown"> <div class="container"> <section class="cd-section visible"> <div> <div class="content"> <h2>Section 1</h2> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <h2>Section 2</h2> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <h2>Section 3</h2> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <h2>Section 4</h2> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <h2>Section 5</h2> </div> </div> </section> <section class="cd-section"> <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="logo" /></a> </div> <div class="gnb"> <div class="menu"> <a href="#none">Home</a> <a href="#none">About</a> <a href="#none">Project</a> <a href="#none">Plan & History</a> <a href="#none">Awards</a> <a href="#none">Location</a> <a href="#none">Contact</a> </div> <div class="slogan">Publisher. Lim Hyun Mook</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> @media (max-width: 768px) { /* Layout */ .cd-section { height: auto; } .cd-section > div { height: auto; } .content { position: static; width: 100%; height: 100%; } /* Header */ .menu { display: block; } .slogan { display: none; } .gnb { background-color: #fff; position: fixed; top: 0; right: -270px; width: 250px; height: 100vh; box-shadow: -5px 0 10px rgb(0, 0, 0, 0.1); transition: 0.4s; } .gnb.active { right: 0; } .menu { 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.4s; } .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); } } /* 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 */ * { 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; } /* Layout */ .cd-section { height: 100vh; } .cd-section > div { height: 100%; position: relative; } .content { position: absolute; width: calc(100% - 40px); height: calc(100% - 80px); left: 20px; bottom: 20px; overflow: hidden; } /* header */ header { position: fixed; width: 100%; } .gnb-inner { width: calc(100% - 40px); margin: auto; height: 60px; line-height: 60px; } .logo { float: left; } .gnb { float: right; } .menu { display: none; } .slogan { font-size: 18px; font-style: italic; } .trigger { display: none; } /* Trigger */ $(function(){ $('.trigger').click(function(){ $(this).toggleClass('active') $('.gnb').toggleClass('active') }) $('section').click(function(){ $('.gnb').removeClass('active') $('.trigger').removeClass('active') }) }) 선생님과 똑같이 했다고 생각하는데 여러번 봐도 문제점을 못 찾겠습니다..
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
vsc 설정에 관해 질문드립니다
강의를 보는데 강사님꺼를 보면 div태그를 닫을 경우 자동으로 <div>...</div> 이렇게 아래있던 태그가 옆으로 오더라고요. 반면 제 코드는 <div>... </div> 위아래로 태그닫혀서 나중에 코드 많아지면 불편하던데 이건 어떤 부분을 설정해야하나요?
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
slick이 작동되지 않는 문제
안녕하세요, 슬릭 슬라이더가 작동되지않고 jQuery.Deferred exception: $(...).slick is not a function TypeError: $(...).slick is not a function 이런 메세지가 나오는데요... 첨부해주신 단계별 코드를 보면서 하나하나 다 비교도 해보고 slick js, css 파일도 옮겨서 덮어써보고, jquery도 최신으로 바꿔봐도 슬릭 슬라이더만 작동이 되지 않는데 왜 그런 걸까요? index.html <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DesignWorks Architecture Agency</title> <script src="https://code.jquery.com/jquery-3.5.1.min.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> <!-- Slick.js --> <link rel="stylesheet" href="js/slick/slick.css"> <link rel="stylesheet" href="js/slick/slick-theme.css"> <script src="js/slick/slick.min.js"></script> <!-- Custom JS & CSS --> <script src="custom.js"></script> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="responsive.css"> <script src="https://kit.fontawesome.com/62a31d096f.js" crossorigin="anonymous"></script> </head> custom.js $(function(){ // Trigger $('.trigger').click(function(){ $(this).toggleClass('active') $('.gnb').toggleClass('active') }) $('section, .menu a').click(function(){ $('.gnb').removeClass('active') $('.trigger').removeClass('active') }) /* Smooth Scrolling */ $('.menu a, .gototop').click(function(e){ $.scrollTo(this.hash || 0, 900) }) // Change CSS with Scroll $(window).scroll(function(){ if($(window).scrollTop() > 50) { $('header, .gototop').addClass('active') } else { $('header, .gototop').removeClass('active') } }) // slick.js : history $('.history-slider').slick({ dots: true, infinite: false, speed: 300, slidesToShow: 4, slidesToScroll: 2, }) // slick.js : project photo $('.project-photo').slick({ dots: true, infinite: true, speed: 500, fade: true, autoplay: true, autoplaySpeed: 2000, cssEase: 'linear' }) })
- 반응형 웹사이트 포트폴리오(Architecture Agency)
psd 파일이 어디에 있는지 못찾겠습니다 ㅠㅠ
삭제된 글입니다
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
contact-form 과 contact-info 의 높이
contact-form와 contact-info 의 높이를 동일하게 맞추고 또 contact info 의 각각의 컨텐츠들의 높이비율? 같은걸 맞추고싶은데 이럴때의 방법은 flex 밖에 없는걸까요? 아니면 padding-top 같은 방법을 이용해서 대략적으로 맞추는 걸까요?
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
scss에 관해서
강의 너무 잘보고 있습니다. 다름이 아니라 저는 해외 취업을 목적으로 제 개인 포트폴리오를 강의를 통해서 만들려고 하는데요 대부분 회사가 scss 사용 여부를 많이 보더라구요 그래서 저희 초반에 파일 정리할때 scss 파일 지웠는데 따로 컴파일 하지 않고 그 지운 파일 쓰면 될까요? 그리고 해외에서는 모바일 버전을 먼저 만들고 나중에 데스크탑을 미디어 커리 적용을 하는데요 (min- width) 선생님이 하시는거 반대로만 하면 될까요? html 파일에서 모바일 버전 링크를 나중에 해야 한다고 하셨는데 저같은 경우에는 style css 보다 responsive css 를 먼저 링크 해야 할까요?
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
선생님 하라고 하신대로 다 작성했는데 크롬에서 인덱스파일 열어서 새로고침 해봐도 적용이 안됩니다 ㅜㅜ 제가 무엇을 빠트린 걸까요..
(사진)
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
질문있습니다.
선생님,header tag 만들때 섹션7 밑에 tag를 만들면 잘 작동하는데섹션1의 윗부분에 만들고 처음 작동시 위로 스크롤 하면 빈 페이지가 나오고 작동이 안되는데 왜 그런지 궁금합니다.
- 해결됨반응형 웹사이트 포트폴리오(Architecture Agency)
강의와는 다른내용이긴한데..
이 강의에서 제작한 작업물을 취업시 제 입맛에 맞게 조금씩 변경해서 포트폴리오에 사용하셔도 된다고 하셨는데 만약에 회사에서 이 포트폴리오를 직접 디자인 한거냐고 물어보면 어떻게하죠? 제가 디자인 능력이 좀 떨어지는데 포트폴리오 디자인을 보고 저의 디자인능력을 과대평가해서 고용했다가 저의 진짜 디자인 능력을 알고 실망할까봐 좀 걱정되네요.. 물론 디자인 공부를 하는게 베스트이겠지만 코딩만 공부해도 벅차네요
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
선생님~ 데스크탑/모바일 반응형 다 완성했는데요 데스크탑일때 흰화면으로 나옵니다
선생님~ 데스크탑/모바일 반응형 다 완성했는데요 데스크탑일때 흰화면으로 나옵니다 창 크기를 줄여서 모바일일때는 나오구요. 대신에 location 섹션만 안 보이네요. ㅠㅠ 제공해주신 완성파일과 동시에 켜서 코드를 검토해 보아도 답을 찾기가 어렵습니다 혹시 메일로 파일 드리면 어느부분이 문제인지 확인 가능할까요?
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
project-photo질문입니다!
custom.js 파일에서 $('.project-photo').slick({ dots: true, ( 이부분에 true로 설정했는데 도트가 왜 안 보이나요?? ) })
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
before 질문입니다.
.location-inner:before 여기에 position:absolute를 줬는데 .location-inner에 position:relative 꼭 안 줘도 되는 건가요?
- 해결됨반응형 웹사이트 포트폴리오(Architecture Agency)
main.js 창 켜면 하단에 느낌표가 떠요 !
노란색 삼각형에 느낌표가 떴어요....! 상관 없는 건가요? 어쨌든 잘 작동하기는 해요....!
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
slick.js 이런 경우는 어떻게 해야하나요..?
강의를 두번 완강하고나서 다른 사이트 클론코딩하면서 연습하고 있습니다 강의 예제가 아니라서 물어봐도 되는건지 모르겠네요.. 마우스를 갖다대면 slide down 되면서 내려오는 sub menu가 있고 바로 아래에 slick.js를 사용한 fade되는 슬라이더를 만들었습니다. sub menu가 내려오기 전에는 이상이없는데 내려왔을때 슬라이더가 옆으로 밀립니다 이 부분은 어떻게 해결 할 수 있을까요?
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
<body data-hijacking="off" data-animation="none">
섹션 하나씩 이동하는게 작업할때 번거로워서 off하고 none으로 설정해서 사용할려고 했어요. 근데 이럴경우에는 섹션 사이사이 마다 공간이 크게 비더라구요?! 빈 공간을 줄일 수는 없나요?
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
파란색 라인은 왜 나타나는건가요?
(사진)
- 해결됨반응형 웹사이트 포트폴리오(Architecture Agency)
질문입니다.
아래 부분보면 slick.js dots 때문에 content 배경색이 나오는데 왜 저런건가요..? .plan-feature에 padding: 20px 이렇게 넣어주면 강의 완성본처럼 색이 정상적으로 꽉채워지긴 하는데 왜 그런지 모르겠습니다.. project 섹션에서도 같은 현상이 일어납니다
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
자막이 있으면 좋겠어요..
자막파일 따로 다운받아서 놓친부분 찾기도 좋고 중간중간에 목소리 끊기는 부분도 있고 학교과제하느라 제가 시간도 많이 부족해서..... 다음 영상제작부터 자막이 있으면 계속 구매하고싶어요!!
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
네비게이션 메뉴 눌렀을 때 페이지의 처음부터 보이게 하는 방법
안녕하세요, 이번 강의 마지막 부분에 전반적으로 모바일버전이 잘 작동하는지 확인하시는 과정에서 네비게이션 메뉴를 눌러 각 페이지로 이동하는지도 보여주셨는데요, 이 과정에서 상단에 고정되어 있는 header가 페이지의 내용을 일부 가리게 되는 현상이 보입니다. 이를 조정해서 페이지의 전체가 보이도록 하는 방법이 있을까요?
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
css 360줄에
.contact-info ul li:la2st-child{color:#0088cc;}로 되어 있습니다. last-child로 오타 수정 필요