61,600원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
reset css관련 질문
선생님 안녕하세요~ 기존에 제가 따로 사용하는 reset.css를 사용하여 제작해도 상관 없을까요? 다른 부분은 괜찮은데 제가 font-size : 0.625em; line-height:1;로 설정을 해놓고 썼던 습관이 있어서 만들다가 혹시 결과물이 다르게 나올까봐 걱정이 되네요..!
- 미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
모달 질문!!
선생님~ 유튜브 강의 통해서 반응형 모달 강의를 듣다가 질문 드립니다! .modal_content에 opacity : 0; 주시고 active시에 opacity:1;을 주셨는데, active되기 전 상태에서 마우스를 브라우저 쪽에 움직이다보면 input이나 p태그 쪽 위치에 마우스 포인터의 모양이 바뀌는 것을 발견해서요~ 이런 경우에는 display : none을 추가하고 active시에는 display: block을 추가해도 될까요~?
- 미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
wow.js 애니메이션 질문
선생님 안녕하세요! 혹시 wow.js는 스크롤을 다시 올렸다가 내리면 작동이 되지는 않나요?
- 미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
슬라이드 질문
$('.my_slider').slick({ dots: false }) 로 인디케이터 부분을 감추었는데 pc 모바일 해상도에선 사라졌다가, 1023px~600px 해상도에서는 인디케이터가 다시 생기는 현상이 발생해서 질문 드립니다
- 미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
제이쿼리 질문드립니다~
선생님 안녕하세요~ 다름이 아니라 저는 제이쿼리 구문에 $(window).scrollTop()부분을 변수처리하여 적어보았는데요, 변수를 맨 위에 적었을 때는 스크롤이 이상하게 반응했었다가 사진대로 함수안에 변수를 적었더니 정상적으로 작동을 해서요~ 변수를 넣는 위치의 기준을 잘 모르겠어요..! 제이쿼리는 공부를 해도 가끔씩 변수의 위치가 너무 헷갈리더라구요..
- 미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
5:11 뱃지 사이즈 관련
같은 뱃지라는 클래스에 위치 잡고나서, new ,hot 클래스에 글자만 바꿨는데 왜 패딩사이즈가 줄어들죠? 글자도 똑같은 소문자8개인데 , 화면보다가 머가 꿈뻑해서 보니까 갑자기 좌우 영역범위가 줄어든거 같아서요... (4:57 쯤에 class ="badge new"부분을 hot으로 바꿀땐 사이즈 변경이 없는데, 스팬클래스 안의 컨텐츠 부분을 수정하니까 작아지네요.)
- 미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
강의다 듣고 슬라이더 작동부분에 대한 질문입니다.
해당사이트는 슬라이드 모양이 저렇게 되어있는데.. 저게 누르면 버튼이 스타트버튼으로 바뀌게 되어있고.. 1/16숫자는 2/16 3/16이렇게 바뀌더라고요.ㅠㅠ 옵션 아무리 찾아봐도 힘들어서 1주일째 방치중인데 혹시 방법이 없나요 제 코드는 현재 이렇게 되어있는 상태입니다. 작동은 하는데 저게 겹쳐서 작동을 안하네요 ㅠㅠ 유튜브, 구글 모든걸 다 검색해도 저걸 겹치게해서 작동하는게 없어서 질문 올립니다. 강의와 관련있는 질문을 남겨주세요.• 강의와 관련이 없는 질문은 지식공유자가 답변하지 않을 수 있습니다. (사적 상담, 컨설팅, 과제 풀이 등)• 질문을 남기기 전, 비슷한 내용을 질문한 수강생이 있는지 먼저 검색을 해주세요. (중복 질문을 자제해주세요.)• 서비스 운영 관련 질문은 인프런 우측 하단 ‘문의하기’를 이용해주세요. (영상 재생 문제, 사이트 버그, 강의 환불 등) 질문 전달에도 요령이 필요합니다.• 지식공유자가 질문을 좀 더 쉽게 확인할 수 있게 도와주세요.• 강의실 페이지(/lecture) 에서 '질문하기'를 이용해주시면 질문과 연관된 수업 영상 제목이 함께 등록됩니다.• 강의 대시보드에서 질문을 남길 경우, 관련 섹션 및 수업 제목을 기재해주세요. • 수업 특정 구간에 대한 질문은 꼭 영상 타임코드를 남겨주세요! 구체적인 질문일수록 명확한 답을 받을 수 있어요.• 질문 제목은 핵심 키워드를 포함해 간결하게 적어주세요.• 질문 내용은 자세하게 적어주시되, 지식공유자가 답변할 수 있도록 구체적으로 남겨주세요.• 정확한 질문 내용과 함께 코드를 적어주시거나, 캡쳐 이미지를 첨부하면 더욱 좋습니다. 기본적인 예의를 지켜주세요.• 정중한 의견 및 문의 제시, 감사 인사 등의 커뮤니케이션은 더 나은 강의를 위한 기틀이 됩니다. • 질문이 있을 때에는 강의를 만든 지식공유자에 대한 기본적인 예의를 꼭 지켜주세요. • 반말, 욕설, 과격한 표현 등 지식공유자를 불쾌하게 할 수 있는 내용은 스팸 처리 등 제재를 가할 수 있습니다.
- 미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
slick slide arrow 관련입니다!
선생님 수업 잘 듣고 있습니다. 질문이 아니라 혹시나 다른 분들 수강할때 참고하시라고 글 남깁니다. slick slide 자체에서 arrow property를 제공합니다. 그래서 arrow button 사용하고 싶지 않으시다면 해당 property value 값을 false 설정 하시면 없애실 수 있습니다.
- 미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
으라차차차
파이팅!
- 미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
css filter 홈페이지
안녕하세요 . ceo-access 섹션 -css 배치 및 상세디자인 .강의 중 css filter 홈페이지에서 색상선택시 # 이런코드명이 아닌 rgba(238, 90, 36,1.0) 이런값이 복사가 되는데 사이트가 바뀐걸까요 . ?
- 미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
jquery부분에서 $('.faq-desc').eq(0).show()가 적용되지 않습니다..
안녕하세요 선생님! 강의 언제나 잘 듣고 있습니다:) 강의를 듣고 혼자서 제이쿼리를 작성하고 있는 중에 faq-desc의 첫번째 요소가 보이지 않아서 몇번이나 확인을 해보았는데도 적용이 되지 않습니다ㅜㅜ... 혹시 제가 잘못 작성한 부분이 있을까요...? 답변부탁드립니다! 감사합니다:) <HTML> <CSS> <JQUERY>
- 미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
선생님 질문에 대한 신속한 답변 감사합니다! 그런데 ㅠㅠ 슬라이더가 작동이 안되고 이미지가 왜 저렇게 되는지 모르겠어요!
원인을 모르겠어요 <!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="http:s//code.jquery.com/jquery-3.5.1.min.js"></script> <!--Slick slider--> <link rel="stylesheet" href="js/slick/slick/slick-theme.css"> <link rel="stylesheet" href="js/slick/slick/slick.css"> <script src="js/slick/slick.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> <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> <!---.ceo-access---> <section class="ceo-access"> </section> <!---.banner---> <section class="banner"> </section> <!---.feature---> <section class="feature"> </section> <!---.vision---> <section class="vision"> </section> <!---.faq---> <section class="faq"> </section> <!---.review---> <section class="review"> </section> <!---.focus---> <section class="focus"> </section> <!---.guide---> <section class="guide"> </section> <!---.news---> <section class="news"> </section> <footer> </footer> </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: 100; } .header-inner{ width:1300px; margin: 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; } /* ################# section : welcome ################# */ .welcome { /* border: 5px solid #000; */ height: 90vh; position: relative; } .slideshow {} .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 {} .btn { display: inline-block; width: 160px; padding: 8px; 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 { position: absolute; width: 4px; height: 15px; background-color: #fff; border-radius: 5px; left: 12px; top: 10px; animation: wheele 1.5s 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 * { outline: none; } jquery $(function(){ /* Slick Slider - Welcome */ $('.slideshow').slick({ infinite: true, dots: false, autoplay: true, autoplaySpeed: 2000, fade: true, speed: 1000, pauseOnHover: false });
- 해결됨반응형 웹사이트 포트폴리오(App Official Landing Website)
선생님 인터넷에서 vh를 검색해보니....
.welcome { /* border: 5px solid #000; */ height: 90vh; position: relative; } 저기 있는 vh라는 단위를 보고 vh라는 단위를 보고 궁금해서 인터넷 검색을 해보니... 예를 들어 브라우저 높이값이 900px일때 1vh는 9px이라는 뜻이 되지요. 그와 유사하게 뷰포트의 너비값이 750px이면 1vw는 7.5px이 됩니다. 출처: https://webclub.tistory.com/356 [Web Club] 라고 나오는데 90vh라면은 810px라는 말입니까?
- 해결됨반응형 웹사이트 포트폴리오(App Official Landing Website)
그래도 header모양이 이런데요 header { position: fixed; width: 100%; z-index: 10; } 해도 모양이 이래요
그래도 모양이 똑바로 되지 않네요 <!DOCTYPE html> <head> <meta charset="UTP-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>StarUp Mate : App Offical 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> <!--Custom CSS & JS--> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/responsive.css"> <script src="script/custom.js"></script> </head> <body> <!--Header--> <header> <div class="header-inner"> <div class="logo"> <a href="#"><img src="images/logo.png" alt=""></a> <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> </div> </header> <!--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 </h1> <em> Business strategy Organization Management Business Innovation </em> <p> 스타트업 메이트 앱이 여러분의 최상의 스타트업 구축을 위해 창의적인 아이디어를 제공하는 데 최선을 다하겠습니다. </p> </div> </section> <!--ceo-access--> <section class="ceo-access"> <div class="ceo-inner"> <div class="ceo-inner"> <div class="ceo-content"> <div class="ceo-left"> <img src="images/quotation-mark.svg" alt=""> <h3>3 Pre-made Solutions for your Startup Business</h3> <p>창의적인 아이디어를 가장 빠르게 창출할 수 있는 최고의 앱 솔루션을 제공합니다. 여러분의 스타트업을 더욱 성장시키기 위해 온 힘을 다할 것이며 STARTUP MATE 라는 이름답게 항상 동반자가 되겠습니다. 감사합니다.</p> <span>앤드류 - 스타트업 메이트 대표이사</span> </div> <div class="ceo-right"> <div class="ceo-msg"> <h3>Application Downloads<big>30,000+</big></h3> <p>스타트업메이트는 앱 다운로드 30,000명 이상의 앱 사용자의 충분한 피드백을 통해 검증된 서비스를 제공합니다.</p> </div> <div class="ceo-photo"> <img src="images/icon-face-ceo.jpg" alt=""> </div> </div> </div> </div> </div> <div class="access-inner"> <div class="access-content"> <div class="access-left"> <h2>언제나 어디서나 즐겁고 편리한 액세스 스타트업 CEO들의 커뮤니티</h2> <p>언제나 어디서나. 즐겁고 편리한 액세스가 가능합니다. 회원 가입은 쉽고 간단합니다. 무료 회원 가입 후 로그인하시면 업데이트 된 스타트업 메이트의 서비스를 받으실 수 있습니다.</p> <div class="btn-download"> <a href=""><img src="images/btn-appstore.png" alt=""></a> <a href=""><img src="images/btn-playstore.png" alt=""></a> </div> </div> </div> <div class="access-right"> <img src="images/access-mockup.png" alt=""> </div> </div> </section> 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 { width: 1300px; margin: 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; }
- 미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
header부분 오류때문에 질문 드립니다 분명 제가 한것에다가 코드도 복사해서 붙여넣었는데도 이상해요
hhtml과 css 첨부해서 적습니다 <!DOCTYPE html> <head> <meta charset="UTP-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>StarUp Mate : App Offical 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> <!--Custom CSS & JS--> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/responsive.css"> <script src="script/custom.js"></script> </head> <body> <!--Header--> <header> <div class="header-inner"> <div class="logo"> <a href="#"><img src="images/logo.png" alt=""></a> <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> </div> </header> <!--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 </h1> <em> Business strategy Organization Management Business Innovation </em> <p> 스타트업 메이트 앱이 여러분의 최상의 스타트업 구축을 위해 창의적인 아이디어를 제공하는 데 최선을 다하겠습니다. </p> </div> </section> <!--ceo-access--> <section class="ceo-access"> <div class="ceo-inner"> <div class="ceo-inner"> <div class="ceo-content"> <div class="ceo-left"> <img src="images/quotation-mark.svg" alt=""> <h3>3 Pre-made Solutions for your Startup Business</h3> <p>창의적인 아이디어를 가장 빠르게 창출할 수 있는 최고의 앱 솔루션을 제공합니다. 여러분의 스타트업을 더욱 성장시키기 위해 온 힘을 다할 것이며 STARTUP MATE 라는 이름답게 항상 동반자가 되겠습니다. 감사합니다.</p> <span>앤드류 - 스타트업 메이트 대표이사</span> </div> <div class="ceo-right"> <div class="ceo-msg"> <h3>Application Downloads<big>30,000+</big></h3> <p>스타트업메이트는 앱 다운로드 30,000명 이상의 앱 사용자의 충분한 피드백을 통해 검증된 서비스를 제공합니다.</p> </div> <div class="ceo-photo"> <img src="images/icon-face-ceo.jpg" alt=""> </div> </div> </div> </div> </div> <div class="access-inner"> <div class="access-content"> <div class="access-left"> <h2>언제나 어디서나 즐겁고 편리한 액세스 스타트업 CEO들의 커뮤니티</h2> <p>언제나 어디서나. 즐겁고 편리한 액세스가 가능합니다. 회원 가입은 쉽고 간단합니다. 무료 회원 가입 후 로그인하시면 업데이트 된 스타트업 메이트의 서비스를 받으실 수 있습니다.</p> <div class="btn-download"> <a href=""><img src="images/btn-appstore.png" alt=""></a> <a href=""><img src="images/btn-playstore.png" alt=""></a> </div> </div> </div> <div class="access-right"> <img src="images/access-mockup.png" alt=""> </div> </div> </section> 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 {} .header-inner{ border: 1px solid #000; width: 1300px; margin: 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; }
- 미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
첨부파일이 없어요.
인라인자바스크립트 활용하기 강의목록에 첨부 파일이 없어요. 어디서 받아 볼 수 있나요?
- 해결됨반응형 웹사이트 포트폴리오(App Official Landing Website)
.access-right img{ display: block; float:right; }하면 화면이 이상하게 나와요 어디를 잘못쳐서 그런걸까요?
코드는 <!DOCTYPE html> <head> <meta charset="UTP-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>StarUp Mate : App Offical 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> <!--Custom CSS & JS--> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/responsive.css"> <script src="script/custom.js"></script> </head> <body> <!--Header--> <header> <div class="header-inner"> <div class="logo"> <a href="#"><img src="images/logo.png" alt=""></a> <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> </div> </header> <!--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 </h1> <em> Business strategy Organization Management Business Innovation </em> <p> 스타트업 메이트 앱이 여러분의 최상의 스타트업 구축을 위해 창의적인 아이디어를 제공하는 데 최선을 다하겠습니다. </p> </div> </section> <!--ceo-access--> <section class="ceo-access"> <div class="ceo-inner"> <div class="ceo-inner"> <div class="ceo-content"> <div class="ceo-left"> <img src="images/quotation-mark.svg" alt=""> <h3>3 Pre-made Solutions for your Startup Business</h3> <p>창의적인 아이디어를 가장 빠르게 창출할 수 있는 최고의 앱 솔루션을 제공합니다. 여러분의 스타트업을 더욱 성장시키기 위해 온 힘을 다할 것이며 STARTUP MATE 라는 이름답게 항상 동반자가 되겠습니다. 감사합니다.</p> <span>앤드류 - 스타트업 메이트 대표이사</span> </div> <div class="ceo-right"> <div class="ceo-msg"> <h3>Application Downloads<big>30,000+</big></h3> <p>스타트업메이트는 앱 다운로드 30,000명 이상의 앱 사용자의 충분한 피드백을 통해 검증된 서비스를 제공합니다.</p> </div> <div class="ceo-photo"> <img src="images/icon-face-ceo.jpg" alt=""> </div> </div> </div> </div> </div> <div class="access-inner"> <div class="access-content"> <div class="access-left"> <h2>언제나 어디서나 즐겁고 편리한 액세스 스타트업 CEO들의 커뮤니티</h2> <p>언제나 어디서나. 즐겁고 편리한 액세스가 가능합니다. 회원 가입은 쉽고 간단합니다. 무료 회원 가입 후 로그인하시면 업데이트 된 스타트업 메이트의 서비스를 받으실 수 있습니다.</p> <div class="btn-download"> <a href=""><img src="images/btn-appstore.png" alt=""></a> <a href=""><img src="images/btn-playstore.png" alt=""></a> </div> </div> </div> <div class="access-right"> <img src="images/access-mockup.png" alt=""> </div> </div> </section> <!--banner--> <section class="banner"> <div class="banner-inner"> <div class="banner-content"> <input type="radio" name="tabmenu" id="tab1" checked> <input type="radio" name="tabmenu" id="tab2"> <input type="radio" name="tabmenu" id="tab3"> <div class="tab-btn"> <label for="tab1"> <em><img src="images/banner-icon-01.png" alt=""></em> <span>CEO를 위한 경영 전략을 위한 더 쉽은 방법</span> </label> <label for="tab2"> <em><img src="images/banner-icon-02.png" alt=""></em> <span>개선된 검색 필터로 효율적인 전략 수립</span> </label> <label for="tab3"> <em><img src="images/banner-icon-03.png" alt=""></em> <span>CEO 오프라인 커뮤니티 활동 지원</span> </label> </div> <div class="tabs"> <div class="tab tab1"> <h2>Fast management strategy</h2> <p>어떤 상황에서든 기업의 리더는 불황기 생존 방안은 물론이고 미래에 성장할 수 있는 전략을 반드시 찾아야 합니다.</p> </div> <div class="tab tab2"> <h2>Efficient search filter</h2> <p>스타트업 메이트는 비즈니스 모델 캔버스를 통해 가장 효율적인 경영전략 수립 방안을 스타트업 CEO에게 제시합니다.</p> </div> <div class="tab tab3"> <h2>CEO Community Activities</h2> <p>기업이 디지털과 물리적인 요소를 통합하여 비즈니스 모델을 변화시키는 새로운 방향을 정립하기 위한 오프라인 활동을 지원합니다.</p> </div> </div> </div> </div> </section> <!--feature--> <section class="feature"> <div class="feature-inner"> <div class="headline-share"> <h1>스타트업 CEO 커뮤니티</h1> <p> 스타트 업 비즈니스 발전을 위한 다양한 서비스를 제공합니다. </p> <div class="feature-content"> <div class="feature-mockup"> <img src="images/feature-mockup-01.png" alt=""> </div> <div class="feature-about"> <img src="images/feature-mockup-02.png" alt=""> <h2></h2> <p></p> </div> </div> <div class="feature-content"> <div class="feature-about"> <img src="" alt=""> <h2></h2> <p></p> </div> <div class="feature-mockup"> <img src="images/icon-num-01.png" alt=""> </div> </div> <div class="feature-content"> <div class="feature-mockup"> <img src="images/feature-mockup-03.png" alt=""> </div> <div class="feature-about"> <img src="" alt=""> <h2></h2> <p></p> </div> </div> </div> </div> </section> <!--vision--> <section class="vision"> </section> <!--faq--> <section class="faq"></section> <!--review--> <section class="review"></section> <!--focus--> <section class="focus"></section> <!--guide--> <section class="guide"></section> <!--news--> <section class="news"></section> <!--footer--> <footer></footer> </body> </html> css는 *{ box-sizing: border-box; } a{ text-decoration: none; color: #222; } button, input { outline:none; } h1,h2,h3,h4,h5{ margin-top: 0; font-weight: normal; line-height: 1.5em; } /* header */ .header {} .header-inner{ border: 1px solid #000; width: 1300px; margin: 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; } /* welcome */ .welcome{ border: 5px soild #000; height:90vh; position:relative; } .slideshow{width: 1300px; margin: auto;} .slideshow img{width: 1300px; height:auto; margin:0 auto;} .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; } .welcome-heading p{} .welcome-btn{} .welcome-btns .btn{} .btn.start {} .btn.guide {} /*################SECTION ceo-access##############*/ .ceo-access{} .ceo-inner{ width:1300px; margin:auto; } .ceo-content{ overflow: hidden; border:1px solid #eee; padding: 50px 0; } .ceo-content > div{ float:left; width: 50%; } .ceo-left{padding-right: 50px;} .ceo-left h3{font-weight: bold;} .ceo-left img{ width:30px; filter: invert(39%) sepia(95%) saturate(475%) hue-rotate(116deg) brightness(95%) contrast(101%); } .ceo-right{text-align: center;} .ceo-right > div{ float: left; padding: 20px; } .ceo-msg{width:60%;} .ceo-msg h3{ font-size: 28px; color:#009b72; } .ceo-msg h3 big{ display: block; } .ceo-photo{width: 40%;} .ceo-photo img{ border-radius: 15px; width: 100%; } .access-inner{ width:1300px; margin:auto; } .access-content{ padding-top: 50px; padding-top: 80px; } .access-content > div{ float: left; width: 50%; } .access-left{ padding-right: 50px; } .access-right{ text-align: center; } .access-right img{ display: block; float:right; } .btn-download{ margin-top: 30px; } /*##############banner##############*/ .banner { /*background: linear-gradient(to right, #69acfe, #6eaefd);*/ background: url(../images/wave-line.png) no-repeat center right 100px, linear-gradient(to right, #69acfe, #6eaefd); background-size: 80px } .banner-inner { width:1300px; margin:auto; } .banner-content { overflow: hidden; padding:40px 0; } .banner-content > div{ float: left; width: 50%; } input[name=tabmenu]{display:none;} .tab-btn {} .tab-btn label { border: 1px solid red; width: 30%; display: inline-block; text-align: center; margin: 5px; cursor: pointer; } .tab-btn label em{ background-color: #fff; display: inline-block; width: 110px; height: 110px; border-radius: 50%; text-align: center; padding-top: 20px; } .tab-btn label em img{ width: 60px; filter: invert(72%) sepia(23%) saturate(6765%) hue-rotate(188deg) brightness(101%) contrast(99%); } .tab-btn label span{ display: block; margin-top: 10px; } .tabs{ border: 1px solid #000; } .tab{ display: none; color: #fff; padding-top: 20px; padding-left: 50px; } .tab h2{ font-size: 32px; font-weight: bold; } /*###############checked funtion##################*/ input[id=tab1]:checked ~ .tabs .tab1, input[id=tab2]:checked ~ .tabs .tab2, input[id=tab3]:checked ~ .tabs .tab3{ display: block; } input[id=tab1]:checked ~ .tab-btn label[for=tab1] em, input[id=tab2]:checked ~ .tab-btn label[for=tab2] em, input[id=tab3]:checked ~ .tab-btn label[for=tab3] em { background-color: #34495e; } input[id=tab1]:checked ~ .tab-btn label[for=tab1] em img, input[id=tab2]:checked ~ .tab-btn label[for=tab2] em img, input[id=tab3]:checked ~ .tab-btn label[for=tab3] em img{ filter: invert(); } input[id=tab1]:checked ~ .tab-btn label[for=tab1] span, input[id=tab2]:checked ~ .tab-btn label[for=tab2] span, input[id=tab3]:checked ~ .tab-btn label[for=tab3] span{ color: #34495e; } /*##################feature#################*/ /*##################vision#################*/ /*##################faq#################*/ /*##################review#################*/ /*##################focus#################*/ /*##################guide#################*/ /*##################news#################*/ 선생님 하다보니 자꾸 실수해서 그런거 같은데... 어디가 잘못되서 저런 화면이 나오는 걸까요... 코딩 다된 완성본도 주시면 안될까요? 주실수 있으시다면 ghgh3036@gmail.com으로 보내주시면 안되나요?
- 미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
x 버튼으로 변경후에 위치 이동에서 자연스러운 애니메이션이 안돼요 ㅠㅠ
강의 너무 재미있고 잘듣구있습니다! 너무너무 알차요~!~!~! 근데 ㅠㅠ 다 되는데 이상하게 하나가.. 안따라지네요.. 햄버거 바 버튼에서 x 버튼으로 자연스러운 이미지 변환은 가능한데요! x버튼이 사이드바를 따라서 스르륵 이동하는게 안되네요 .. ㅠㅠ.. 제가보기엔 소스코드가 같은거같은데 어디가 잘못된건지.. ㅠㅠ 이틀을 .. 계속 강의따라서 다시 코드 타이핑을 해봐도 같아서.. 질문드립니다 ! input[id=trigger]{ display: none; } label[for=trigger]{ border: 1px solid red; width: 30px; height: 20px; display: inline-block; position: absolute; transition: 0.3s; } label[for=trigger] span{ display: block; height: 2px; width: 100%; background-color: black; position:absolute; left: 0; cursor: pointer; transition: 0.3s; z-index: 100; } label[for=trigger] span:nth-child(1){ top: 0; } label[for=trigger] span:nth-child(2){ top: 50%; } label[for=trigger] span:nth-child(3){ top: 100%; } /* display: none; 이지만 label과 같은 이름이기때문에 체크가 된다. */ input[id=trigger]:checked + label span:nth-child(1){ top: 50%; transform: rotate(45deg); } input[id=trigger]:checked + label span:nth-child(2){ opacity: 0; } input[id=trigger]:checked + label span:nth-child(3){ top: 50%; transform: rotate(-45deg); } .sidebar{ width: 250px; height: 100vh; background-color: pink; position: fixed; top:0; left: -250px; transition: 0.3s; } input[id=trigger]:checked ~ .sidebar{ left: 0px; } input[id=trigger]:checked + label{ left: 250px; }
- 해결됨반응형 웹사이트 포트폴리오(App Official Landing Website)
섹션6_banner CSS적용이 안되어 질문드려요
삭제된 글입니다
- 미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
중간영상이 없어요!
4:02초 쯤 부터 이미지 3개 추가하고 슬릭 css,js 추가 후에 내려올때부터 welcome-heading에 css 넣는 부분이 빠진것같아요!ㅜ