묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
스크롤라 js에대해서..
선생님 질문이있습니다. 스크롤라 제이에스를 $(document).ready(function(){ $(".animate").scrolla({ mobile:true, once:false })})작성하고,html 에 동일하게 넣었는데<section class="visual animate" data-animate="motion">클래스가 motion 이렇게 붙는게아니라.. 선생님과 다르게 animate__motion 이렇게 붙습니다 혹시..이유를 할수있을까요?
-
해결됨반응형 웹사이트 포트폴리오(Architecture Agency)
포지션 속성 중복과 관련해서
<모바일 네비게이션 퍼블리싱 - 모바일트리거, GNB 보이기 감추기> 수업중에/* 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 위치 잡을때 position: absolute를 썼기 때문에 추가로 relative 중복 설정이 불가하면, 어떻게 .trigger가 부모이고 .trigger span이 자식요소가 되서 span이 위치를 잡을 수 있나요?
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
section about에 관련.. 궁금해요
items에 div를 사용했기때문에 CSS작성시 그러한 것 때문에 이왕이면 다른 태그가 좋다고 하는 부분은 이해가 됐어요~혹시나 dl dt dd 태그를 이용을 안하신건 이유가 있으실까요?div를 사용해도 되고 어느것도 괜찮다고 하셨는데dl이 있는데 이용하지 않고 span태그와 h3를 이용하신 이유가 있을 것 같아서요.
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
섹션3 모바일네이게이션 퍼블리싱 모바일트리거 관련
섹션3 모바일 전체 레이아웃 및 네비게이션 퍼블리싱(모바일버전)의 3강 모바일트리거 GNB 보이기 감추기까지 관련하여서 제가 잘못한것 같아서 계속 동일한 강의를 3번이나 보고 잘못된게 없는지 확인했는데,선생님과 어떠한 점에서 코드가 다른지 찾을 수가 없습니다. 그래서 무엇이 잘못되었는지, 트리거가 작동은 하나 한번 닫은 후 햄버거메뉴가 보여야 하는데 gnb가 active되어있어도 머가 문제인지 모르겠습니다. 어째서 첫 로딩 후, 보이고, 닫기버튼을 누른 후, 햄버거 메뉴 자체가 안보일까요? 그래서 아래의 다른 학습자님의 글을 보고 추가도 해봤지만 안되네요. 제가 어떤걸 잘못했길래 보이지 않는걸까요?
-
해결됨UIUX 포트폴리오 Part.3 - 반응형 웹 포트폴리오
css 관련 질문 있습니다.
안녕하세요 강의 잘 수강하고 있습니다.다름이 아니라 s1_list , s2_list 의 내용을 html에 목록 태그로 정의하고 css 디자인 입히셨는데요이 부분을 s1_list s2_list에 display:flex 속성을 주어서 정렬을 해도 괜찮을까요?flex 속성을 활용하여 만들어보고 싶어서 여쭤봅니다! 혹시나 이 속성을 적용하면 단점이라던지 불편한 점이나 불가능한 부분이 있을까요 pc 버전등에서 디자인이 변경될때 좀 더 용이한가 싶어서 이 부분을 수정해서 포폴에 활용해 볼까 합니다!
-
미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
TypeIt - Welcome 부분이 적용이 안됩니다..
안녕하세요 강사님,Header & Welcome 섹션 #4까지 수강 중에 마우스 휠까지는 다 되는데 TypeIt - Welcome 부분만 적용이 안됩니다.제이쿼리 슬릭 슬라이더는 문제없이 잘 되는데 왜 typeit.min.js 파일만 제이쿼리 연결이 안되는 건지 잘 모르겠네요, 경로는 맞게 지정한거 같은데 이상하네요..em태그 안에 임으로 텍스트를 나오면 텍스트가 뜨기는 하는데 제이쿼리 연결하려고 다 지우면 안나옵니다.코드에는 이상이 없는거 같은데 어떻게 해결해야 될지 몰라서 질문 드립니다. 확인 한번 부탁드립니다, 감사합니다. [HTML 코드]<!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="https://code.jquery.com/jquery-3.5.1.min.js"></script> <!-- Slick Slider --> <link rel="stylesheet" href="js/slick/slick-theme.css"> <link rel="stylesheet" href="js/slick/slick.css"> <script src="js/slick/slick.min.js"></script> <!-- TypeIt --> <script src="js/typeit.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> <div class="container"> <!-- Header --> <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> <!-- Section : ceo-access --> <section class="ceo-access"></section> <!-- Section : banner --> <section class="banner"></section> <!-- Section : feature --> <section class="feature"></section> <!-- Section : vision --> <section class="vision"></section> <!-- Section : faq --> <section class="faq"></section> <!-- Section : review --> <section class="review"></section> <!-- Section : focus --> <section class="focus"></section> <!-- Section : guide --> <section class="guide"></section> <!-- Section : news --> <section class="news"></section> <!-- Footer --> <footer></footer> </div> </div> </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:10; } .header-inner { /* border:1px solid #000; */ width: 1300px; margin:0 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; } .gnb a {} /* #################### section : welcome #################### */ .welcome { /* border:5px solid #000; */ height:90vh; position:relative; } .slidshow {} .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 {} .welcome-btns .btn { /* border:1px solid #000; */ display:inline-block; width: 160px; padding:8px; /* height: 70px; */ 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 { /* display:block; */ position:absolute; width: 4px; height: 15px; background-color: #fff; border-radius: 5px; left:12px; top:10px; animation:wheele 1s 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 img { outline:none; } [custom.js 코드]$(function(){ /* Slick Slider - Welcome*/ $('.slideshow').slick({ infinite: true, // 무한반복 dots: false, // 동그라미 네비게이션 사용안함 autoplay: true, // 자동 재생 autoplaySpeed: 2000, // 자동 재생 시 머무는 시간 fade: true, // 크로스 페이드 트랜지션 speed: 1000, // 자동 재생 트랜지션 시간 pauseOnHover: false // 마우스 오버될 때 멈춤 사용안함 }); }) /* TypeIt - Welcome */ $('#typing').typeIt({ strings: ["Business strategy.", "Innovation Plan.", "Creative Idea."], // 타이핑 텍스트 입력 speed: 100, // 알파벳 타이핑 속도 autoStart: true, // 자동 재생 사용 breakLines: false, // 줄 바꿈 사용안함 });
-
미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
Scroll Reveal Animation 적용이 안되요
아래 처럼 css 적용하고 html도 강의데로 넣어줬는데...왜 애니메이션이 적용되지 않을까요.ltr { animation: ltr o.5s linear both; } .rtl { animation: rtl o.5s linear both; } .utd { animation: utd o.5s linear both; } @keyframes ltr { 0% { transform: translateX(-100px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } @keyframes rtl { 0% { transform: translateX(100px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } @keyframes utd { 0% { transform: translateY(-100px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
-
미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
완성 후 각 섹션 display:none 주석 시 문제
각 섹션별 모두 완성하였습니다.Section Display의 각 섹션을 하나씩 풀어서 볼 때는 문제가 없습니다. 하지만 모두 주석 처리하여 볼 때 문제가 있습니다..faq 섹션의 accordian이 작동하지 않습니다.위 각 항목 눌러지지 않아요..guide 섹션에서 close modal이 작동하지 않습니다.위 X버튼이 작동하지를 않아요.
-
미해결실전! 웹사이트제작! Step by Step! (대방산업_InteractiveWeb)
슬라이드 안 find out more 버튼 위치관련
강사님, 안녕하세요.슬라이드 안 find out more 버튼 스크롤 애니메이션이,가운데 정렬로 올라가는게 아니라, 오른쪽으로 치우쳐있다 가운데로 올라갑니다. css에선 left:50%; 되어 있던데 왜 그럴까요??(올려놓으신 수업 파일도 똑같은 현상입니다.)
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
CSS 적용 안됨
안녕하세요, 맨 첫 강의인 <header영역 레이아웃> 수업을 듣고 있는데, 강의 내용과 똑같이 진행하였으나 Css가 적용되지 않아 질문 드립니다. Google에 검색을 통해 쿠키 삭제, link대신 @import 사용 등을 실행했으나 결과는 똑같았고, F12 눌러 개발자용 모드로 확인 해보았는데 css가 작동되지 않는다는 알림만 뜰 뿐 해결책을 찾지는 못했습니다. 이러한 경우에 어떻게 해결할 수 있을까요? 미리 답변 감사드립니다.
-
해결됨반응형 웹사이트 포트폴리오(App Official Landing Website)
브라우저를 줄일 때 화면 깨짐
pc버전에서 브라우저 화면을 줄일 때 저렇게 화면이 깨지는데실제 다른 웹 사이트 처럼 화면을 줄여도 안 깨질려면 max-width 768 버전 말고 max-width 1200도 같이 만들어줘야 하나요?
-
해결됨반응형 웹사이트 포트폴리오(Architecture Agency)
개발자도구
개발자도구에서 모바일 버전으로 볼때 계속 인터넷 연결없음으로 나옵니다 ㅠㅠ그리고 폴더에 있는 index파일을 누르면 사진과 같이 기본 셋팅만 나오는데 왜 그런지 알 수 있을까요?
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
안녕하세요 강사님
이번에 업데이트 해주신 gsap 수업자료에 json 파일은 vscode를 사용해야지만 확인이 가능한건가요?이전 영상과는 수업자료가 조금 다른거같아 질문드립니다.
-
미해결입문자를 위한 반응형 웹 기초 강의
max-width에 관해서
안녕하세요 강사님, <div id='parents'> <div id='child'></div> </div>여기서 이 밑 두 코드의 차이점을 알 수 있을까요?<style> #parents { width: 50%; } #child { max-width: 100%; } </style><style> #parents { width: 50%; } #child { width: 100%; } </style>
-
미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
welcome-heading 부분이 왜 저렇게 위치되는지 모르겠습니다.
블록요소기 때문에 슬라이드 밑줄에 위치되어야 하는걸로 아는데 왜 슬라이드와 겹쳐서 저렇게 페이지 맨 상단 왼쪽에 위치되는지 모르겠습니다.
-
미해결실전! 웹사이트제작! Step by Step! ('크루알라모드'_반응형웹 제작)
video 크기
안녕하세요.위 화면처럼 contents부분의 들어간 video가 옆에 세로 스크롤이 생깁니다.처음엔 가로, 세로 스크롤이 다 생겨서 다시했더니 이번엔 세로 스크롤이 생기네요.강의를 더 가면 object-fit: cover;로 맞추던데.. 그렇게 해도 스크롤은 사라지지 않아요.지금은 우선 여기까지 진도를 나갔지만..처음 진도를 나갈땐 visual title의 font-size: 70px;도 먹지않아 글씨가 작았는데....왜 그럴까요?
-
해결됨GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
영상 오류 확인 요청 드립니다.
섹션 14 5차_업데이트(고정된 섹션에 하위 섹션 올라오는 인터렉티브)ScrollTrigger 실무활용_ScrollTrigger Script적용영상 오류 확인 요청 드립니다.4분 37초 정도 부터 30분 50초 정도 까지 블랙 화면(소리 X)으로 나옵니다.확인 후 회신 부탁 드립니다.
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
Y축 섹션 고정스크롤애니메이션 강의중
Y축 섹션 고정스크롤애니메이션 강의에서 스크롤을 올리면 border-radius준 영역 밖으로 bg가 보이는데 어떻게 없애면 될까요??
-
미해결실전! 웹사이트제작! Step by Step! ('크루알라모드'_반응형웹 제작)
수업자료 오류
안녕하세요.수업자료 다운시 내용이 없습니다.압축폴더가 올바르지 않다며 풀리지도 않습니다.jaja29@naver.com으로 보내주실 수 있을까요?
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
트리거메뉴 제이쿼리
<!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'> <title>DesignWorks Architecture Agency</title> <!-- Page Scroll Effects JS & CSS --> <script src="/js/jquery-2.1.4.js"></script> <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="/custom.js"></script> <link rel="stylesheet" href="/style.css"> <link rel="stylesheet" href="/reponsive.css"> </head> <!-- hijacking: on/off - animation: none/scaleDown/rotate/gallery/catch/opacity/fixed/parallax --> <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"> </div> </div> </section> <section class="cd-section" id="about"> <div> <div class="content"> <img src="/images/temp-section-02.jpg"> </div> </div> </section> <section class="cd-section" id="project"> <div> <div class="content"> <img src="/images/temp-section-03.jpg"> </div> </div> </section> <section class="cd-section" id="plan"> <div> <div class="content"> <img src="/images/temp-section-04.jpg"> </div> </div> </section> <section class="cd-section" id="awards"> <div> <div class="content"> <img src="/images/temp-section-05.jpg"> </div> </div> </section> <section class="cd-section" id="location"> <div> <div class="content"> <img src="/images/temp-section-06.jpg"> </div> </div> </section> <section class="cd-section" id="content"> <div> <div class="content"> <img src="/images/temp-section-07.jpg"> </div> </div> </section> <header> <div class="gnb-inner"> <div class="logo"> <a href="#none"><img src="/images/logo.png"></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>@media (max-width: 768px) { /* Entire 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 #0000002a; transition: 0.3s; } .gnb.active { right: 0; } .menu { line-height: 40px; margin-top: 60px; } .menu a { display: block; text-align: right; padding-right: 20px; color: black; 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: black; transition: 0.3s; } .trigger span:nth-child(1) { top: 0; } .trigger span:nth-child(2) { top: 50%; width: 90%; } .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: 90%; opacity: 0; } .trigger.active span:nth-child(3) { top: 50%; transform: rotate(-45deg); } }$(function(){ /* Trigger */ $('.trigger').click(function(){ $(this).toggleClass('active') $('.gnb').toggleClass('active') }) $('section, .menu a').click(function(){ $('.gnb').removeClass('active') }) }) 모바일에서 트리거메뉴 클릭시 제이쿼리(아이콘X로 변경 슬라이더메뉴 나오기)가 적용되지 않는데 왜 이럴까요 ㅠ 클레스네임부분에서 틀린게 없습니다
