61,600원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨반응형 웹사이트 포트폴리오(Architecture Agency)
모바일 풀스크린 질문
pc에서 확인할때는 풀스크린 다 잘되는데 실제로 핸드폰 크롬으로 들어가보면 위에가 좀 비네요 원래 이런가요? 첫번째 사진처럼 상단에 주소창이 내려와있으면 딱맞는데 두번째 사진처럼 주소창이 없으면 위에 섹션이 보이게되네요.. 스크롤 플러그인 사용해서 터치하면 한섹션씩 보이게 하려고했는데 그때도 두번째사진처럼 주소창이없으면 빌까봐 걱정되네요
- 해결됨반응형 웹사이트 포트폴리오(Architecture Agency)
스크롤 플러그인 사용 시 모션이 적용이 안되요
학원다니면서 포폴 준비중인데 velocity 였나 그 스크롤 플러그인 사용하려고 하거든요 제가 만들려는 포트폴리오가 스크롤하면 객체들이 하나씩 따로따로 나타나는 그런 포트폴리오인데 스크롤 플러그인을 사용하면 그 모션이 적용이안되네요 제가 값을 잘못준건지 ㅜ 제이쿼리에서 사진과 같이 일정스크롤 구간이되면 active 추가되서 모션이 작동하는건데.. 거리구해서 하였는데 문제가 뭘까요..높이계산이 잘못됐나 싶어서 0.8말고 다른값들도 한번 넣어봤는데 안되네요
- 해결됨반응형 웹사이트 포트폴리오(Architecture Agency)
파일
안녕하세요 첫번째 다운로드 파일 받아서 열심히 수업듣는 와중 style.css부분 작성하려고 소스적혀있는 텍스트 파일 열었는데, 제 파일에는 font관련 경로도 안적혀 있습니다. 일일이 하나하나 다 작성해야 할까요?
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
예제파일
안녕하세요 인강 처음 들어보는 학생입니다. 다름이 아니고 질문이 있어서 글을 남깁니다. 커리큘럼에 보면 페이지를 같이 만들어 볼수 있게 작성 해주셨는데, 그럼 예제 파일이나 이런건 저희가 따로 준비하는건지 아니면 준비 해주셔서 그걸 기반으로 같이 만들어본다는 건가요?
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
pc버전 메뉴
안녕하세요 현재 강의를 다 들었는데요. 웹일때도 상단에 네비를 해주고 싶은데 안되더라고요 ㅜ 사용한 페이지 플러그인은 안되는건가요? ㅜ
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
history-slider > div 들이 모바일에서 width:90%로 보이게 하고 싶습니다.
강사님 안녕하세요! plan 섹션을 반응형으로 만드는 과정에서 추가적으로 궁금한 점이 있습니다! history에 div들이 모바일로 바뀌면서 한개씩 슬라이딩하는 형태로 되었는데요. 제가 디자이너로 일할때 이부분 div가 오른쪽에 빼꼼~ 하고 보이는 형태(위 이미지처럼요)가 UX적으로 좋아서 이대로 퍼블에 넘기면 똑같이 해줬었거든요...! 근데 제가 해보려고 혼자서 개발자도구를 열어봤는데 이렇게 클래스 안에 style로 걸려있더라구요. 제가 학원에서(입문정도로만 배워봤습니다) 강사님이 이렇게 클래스에 스타일이 있는건 자바스크립트로 스타일을 준 경우라고 하신 기억이 났습니다. 그래서 slick.min.js에서 이 부분을 찾아서 width를 고쳐보려고 했는데 어떻게 찾아야 할지 모르겠습니다. min으로 되어있어서 보기가 어렵네요! 그래서 responsive.css에 적어서 덮어씌우려고 했는데 이렇게 먹혀버립니다... 어떻게 해야 할까요?
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
복습으로 혼자 해봤는데 slick을 입히면 project-photo가 안보입니다.
강사님 안녕하세요! home 섹션까지 전부 마치고 전체적으로 제 힘으로 다시 만들어보고 있는 중인데 아무리 삽질해도 안되는 부분이 생겨 질문드립니다... project 섹션에서 html/css를 전부 구축하고 slick 효과를 넣는 과정에서 강사님처럼 slick을 입혔는데 .project-photo 영역이 전부 흰색으로 보이는 현상이 발생했습니다. 완성본이랑 비교해보는 중인데 일단 css를 완성본으로 덮어씌우면 slick 효과가 입혀지는 것으로 확인돼서 css에 문제가 있는 것 같다고 판단했습니다. html은 완성본과 같은 상태이고 css는 복습과정에서 강사님 css 순서와 다르게 써내려가고 있는데 어디가 잘못된건지 도통 못찾겠습니다... ㅠㅠ 확인 한번만 부탁드립니다 ㅠㅠ .project-inner{ background-color: #fff; border: 1px solid #ddd; } .tabs{ width: 300%; height: 100%; transition: 0.5s; } .tab{ width: 33.33333%; height: 100%; float: left; } input[id=tab1]:checked ~ .tabs { margin-left: 0; } input[id=tab2]:checked ~ .tabs { margin-left: -100%; } input[id=tab3]:checked ~ .tabs { margin-left: -200%; } input[type=radio]{ display: none; } .btn{ width: 36%; height: 10px; position: absolute; bottom: 30px; left: 40px; } .btn label{ width: 5px; height: 5px; background-color: #000; border-radius: 50%; display: block; float: left; margin: 0 10px; position: relative; cursor: pointer; } .btn label:first-child{ margin-left: 6px; } .btn label:before{ content: ''; display: block; position: absolute; top: -6px; left: -6px; width: 17px; height: 17px; border: 1px solid transparent; border-radius: 50%; transition: 0.5s; } .btn label:hover::before{ border: 1px solid #aaa; } input[id=tab1]:checked ~ .btn label[for=tab1]::before, input[id=tab2]:checked ~ .btn label[for=tab2]::before, input[id=tab3]:checked ~ .btn label[for=tab3]::before{ border: 1px solid #ddd; } .project-info{ width: 37%; float: left; padding-top: 20px; padding-left: 40px; } .project-info h3{ margin-top: 35px; font-size: 22px; } .project-info ul{ margin-bottom: 30px; } .project-info ul li{ margin: 10px 0; } .project-info ul li i{ font-size: 14px; } .project-info .detail{ margin-bottom: 30px; } .project-info .detail div{ font-size: 12px; display: inline-block; text-align: center; margin: 0 15px; } .project-info .detail div span{ font-size: 30px; display: block; } .project-info button{ border: none; width: 230px; padding: 12px 0; text-transform: uppercase; background-color: #3f3f3f; color: #fff; transition: 0.5s; cursor: pointer; } .project-info button .fas{ transition: 0.3s; } .project-info button:hover{ background-color: #000; } .project-info button:hover .fas{ padding-left: 20px; } .project-photo{ width: 60%; height: 100%; float: right; position: relative; overflow: hidden; } .project-photo img{ position: absolute; height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); }
- 미해결반응형 웹사이트 포트폴리오(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 는 무엇인지 ... 뿐만 아니라 다른 제이쿼리 플러그인들도 각각의 공식이 있을 것 같은데, 그걸 어떻게 찾아서 써야 하는 것일지 모르겠습니다!
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
반응형 pc버젼 질문
안녕하세요 선생님 이번에도 좋은 강의 유익하게 잘 들었습니다. 강의를 듣다가 한가지 궁금한 점이 있어서 질문 드립니다. 물론 테블릿버젼 없이 pc,모바일버젼으로 진행되었지만 section project 부분과 서브페이지 project부분에서 화면을 줄일때 width: 1300px 정도만 되도 텍스트 위치가 어긋나는 현상을 보고 질문을 드리는데요 (서브페이지 project같은경우에는 height 고정픽셀으로 텍스트가 넘치는 현상) 이게 pc 모니터 크기가 작거나 1300px 이하의 모니터라면 저렇게 어긋나거나 넘치는 텍스트로 출력이 되는 건지 따로 신경을 안써도 되는 부분인지 궁금합니다. 또한 만약 그렇게 출력이 될 수 있다면 일일히 폰트사이즈를 줄여줘서 변경해야 하는건가요?
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
full reload 문제
안녕하세요, 선생님께서 알려주신대로 live server full reload 세팅에서 체크박스에 체크하고 껐다가 다시 켰습니다. 그런데 저는 왜 자꾸 수정할때마다 맨 위로 올라가는걸까요..? 혹시 다른 셋팅 변경 방법이 따로 있나요? 지금은 아직 about 섹션 하고 있어서 큰 불편함은 없지만 이제 그 다음부터 조금 불편할 것 같아서요. 혹시나 하고 다른 방법이 있나 싶어서 여쭙습니다. ㅎㅎㅎ 아니면 그냥 블라캣츠를 쓰는게 나을까요? 감사합니다!
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
css 와 svg 파일이 같은 경로에 있을 때
강의에서 알려주신대로 경로를 제외하고 background: url(cd-icon-arrow.svg ) 로 작성했으나 화살표 아이콘이 화면상에 보이지 않습니다. 이럴 경우 제가 해볼 수 있는건 무었일까요?
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
강의 외 질문이지만 FLEX랑 GRID가 실무에서 쓰이나요?
FLEX랑 GRID가 IE에서 지원이 안돼서 국내에서는 잘 사용을 안하다는 애기가 있는데 퍼블리셔에게 FLEX랑 GRID가 필요한가요?
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
다운로드 받은 파일로강의 영상과 동일하게 진행할 수 있는 것이 맞는지 확인 요청드립니다.
전체 UI UX를 제어하는 플러그인 다운로드 및 폴더파일 셋팅하기 에 해당하는 다운로드 파일을 받아 셋팅을 진행하였습니다. 강의 영상에 따라 진행하였는데, index.html 파일은 중복되고 영상에 없는 파일이 다운로드 파일에는 있어서 문의 드립니다. 감사합니다.
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
project 섹션의 project-info padding 값 질문입니다
강의에서 배운것을 토대로 포트폴리오 사이트를 제작하고 있습니다. 그중에서 프로젝트 슬라이더 부분을 만들고 있는데. 아래 강의에서 만든 코드를 그대로 이런식으로 옴기면 padding값에 의해 25%비율이 커지면서 project photo 부분이 흘러내려가더라고요. 왜냐하면 padding이 안에 크기값을 추가하니깐요. 생각해보니 이게 당연한 것 같은데 .project-info { width: 25%; padding: 50px; } .project-photo { width: 75%; overflow: hidden; } 그런데 강의에서는 25%비율은 깨지지 않고 유지하면서 padding값이 주어지는데 그 이유가 뭔가요?
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
포지션 속성에 관해서 질문드립니다
position 속성에 관해서 궁금한게 있는데 혹시 한 클래스값에 포지션 요소를 중복해서 쓸수 있나요? 포지션 fixed를 준곳에 relative 속성을 줘서 여기를 기준으로 잡고 자식태그에 absolute를 주고싶습니다 만약 쓸 수있다면 어떤식으로 작성해야하나요 ex) position:fixed; position:relative; position:fixed,relative;
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
섹션 plan 01 질문입니다
인라인 블럭은 넓이값도 가지고 있고 마진값도 있는데 왜 margin:auto가 적용이 안된건가요? 25분대 보면 hr.bar를 display:inline-block 바꿔주니깐 마진 오토가 적용이 안된게 잘 이해가 안가요.
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
섹션 로케이션 01 오버레이 질문입니다
20분대 보면 오버레이 넣을 곳인 .location-inner { } 에 배경색을 넣을 순 없는건가요? 영상에서는 before에 검은색 배경을 넣으셨더라고요
- 미해결반응형 웹사이트 포트폴리오(Architecture Agency)
기능정의서 작성을 해보려고 하는데요 pdf 파일이 어디에 있나요?
기능정의서 작성을 해보려고 하는데요 pdf 파일이 어디에 있나요?
- 미해결반응형 웹사이트 포트폴리오(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> 위아래로 태그닫혀서 나중에 코드 많아지면 불편하던데 이건 어떤 부분을 설정해야하나요?