61,600원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
기능정의서
기능정의서는 보통 어떤툴로 만드시나요?
- 미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
앵커 만들기 btn-gototop 관련 질문
왜 btn-gototop은 href에 안써줘도 작동이 되나요?
- 미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
선택자 적용에 대한 질문 드립니다.
안녕하세요. 선생님. 반응형 웹사이트 제작 마무리까지 따라한 상태인데요. 갑자기 웰컴 버튼에서 패딩값 (윗부분) 이 적용되지 않아서 높이 차이가 있는 것을 발견해서요. 저는 .btn 이렇게 코딩했는데요. 나중에 완성파일과 비교해보니 .welcome-btns .btn {} 이렇게 되어 있어서 바꿔줘보니 문제 없이 padding: 8px가 적용돼서 해결은 됐는데요. 그런데 그 이유가 궁금해서요. css 전체에서 .btn 선택자를 검색해봤는데 다른 코드에서 겹치는 곳은 없었고요. 왜 'ceo시작하기' 은 padding값이 상하좌우 모두 적용됐는데 '사용가 가이드'는 padding 상 부분이 왜 빠진건지 알고 싶어서요. <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> .welcome { /* border: 5px solid #000; */ height: 100vh; position: relative; padding: 0; } .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; }
- 해결됨반응형 웹사이트 포트폴리오(App Official Landing Website)
!important 에 대해서 질문 드립니다.
guide 섹션 - 슬릭 슬라이더 css 상세 디자인 6:57 안녕하세요. 선생님 강의에 따라서 코딩하면서 공부하고 있는데요. .mockup-slider .slick-arrow { display: none; 적용이 안 되는 거예요. 선생님 강의에서는 적용이 되었고요. 하지만 안 되는 경우도 있으니 !important 넣어주면 될 거라고 말씀해주셨고요. 이 부분에서 궁금한 점이 생겨서요. 선생님과 똑같이 따라해왔는데 저는 display:none; 이 왜 적용이 안 된 건지 궁금하고요. 혹시 코딩에 있어서 순서의 다름 부분으로 이런 차이가 발생될 수 있는 건지요? 그리고 slick custom css 에서 보면, .slideshow .slikck-arrow { display: none !important; 이렇게 slideshow 이곳에 이미 넣어줬잖아요. 그래서 .mockup-slider 에서 display: none;이 적용이 안 된 거였을까요? !important넣어주니깐 적용은 됩니다. 임포턴트는 가급적 적게 쓰는 것이 좋다고 들은 것 같은데요. 이렇게 한번 사용하게 되면 그 다음 요소가 적용되기 위해서 또 사용할 수 밖에 없는 것 같은데요. 말이 너무 길어졌네요..ㅜㅜ그러니깐 선생님과 똑같이 코딩을 해왔는데도 강의에서는 display:none;이 적용되고 저는 적용이 안돼서 important로 해야 적용되는 것과, 적용 안 된 이유가 위에서 !importnant를 넣어준 것 때문에 적용이 안 된 것이 아닐까 하는 궁금증을 여쭙고 싶었습니다. /* ▦▦▦▦▦▦▦▦▦ Slick Custom CSS ▦▦▦▦▦▦▦▦▦ */ .slideshow .slick-arrow { border: 1px solid #000; display: none !important; } .slideshow * { outline: none; } /* Review Slider */ .review-slider .slick-dots li { margin: 0; } .review-slider .slick-dots li button:before { opacity: 1; transform: scale(0.8); } .review-slider .slick-dots li.slick-active button:before { opacity: 1; color: transparent; border: 1px solid #000; border-radius: 50%; top: -2px; transform: scale(0.6); } /* Next Prev */ .review-slider .slick-arrow { /* border: 1px solid #000; */ /* z-index: 1000; */ } .review-slider .slick-prev:before, .review-slider .slick-next:before { color: red; content: "\f104"; font-family: fontawesome; color: #000; font-size: 30px; opacity: 1; } .review-slider .slick-next:before { transform: rotateY(180deg); display: block; } /* mockup-slider */ .mockup-slider .slick-arrow { display: none !important; } .mockup-slider .slick-dots { bottom: 10px; } .mockup-slider .slick-dots li { margin: 0; }
- 미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
강의 듣는 순서 상의드립니다.
선생님 항상 감사히 공부하고 있습니다. 지금 랜딩사이트 웹 섹션별로 강의 들으면서 따라해보고 있는데요. 웹 페이지 마무리까지만 해도 꽤 시간이 걸리겠더라고요.ㅜㅜ 혹시 섹션별로 웹 페이지와 모바일 레이아웃제작 파트에 나오는 섹션별로 맞춰서 강의를 따라한다면 제작순서에 문제 없이 괜찮을지 궁금해서 질문드리고 싶어서요. 예를 들어, welcome 섹션 pc버전 - 모바일버전 이런식으로요. 가능하다면 반응형 제작방식도 미리 조금씩 병행하면서 배우면 좋을 것 같다는 생각이 들어서요. 살펴봐주셔서 감사합니다.
- 해결됨반응형 웹사이트 포트폴리오(App Official Landing Website)
그라디언트에 이미지 삽입하기 에서 그라디언트가 반복되어 보여요.
강의에서 적용하신 색상 말고 더 티가 나는 색상으로 해봤더니 이렇게 그라디언트가 사진처럼 반복되는 식으로 나옵니다.
- 미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
랜딩사이트 웰컴 페이지 부분 질문드립니다.
선생님 강의 듣다가 너무 답답해서요.ㅜㅜ 짧게 여쭤봐도 될까요? section welcome 에 경계확인하기 위해 border를 주니깐 위에 헤더부분도 모두 감싸더라고요. 이게 header에 float:fixed; z-index를 줘서 section영역이 헤더영역까지 감싸는 건가요?? float:fixed는 헤더부분이 상단에 고정되기 위해 사용된 걸로 이해했거든요.ㅜㅜ header영역이 끝나고 section영역에서 슬라이더가 있는데 마치 전체 브라우저를 차지하는 것이 어렵네요.. 슬라이더 우선순위 뭐 그런 문제도 있는 건가요?
- 해결됨반응형 웹사이트 포트폴리오(App Official Landing Website)
랜딩사이트 제작 강의내용 질문드립니다.
선생님 너무 좋은 강의 잘 보고 있습니다. 1.강의 내용이 편집이 된건지, 갑자기 클래스명이 바뀌는 부분이 있어서요. ----------------------------------------------------------------------- 반응형 앱 오피셜 랜딩사이트 제작 Header & Welcome 섹션 welcome 섹션 제작(슬라이더) 0분 45초에는 <section class="welcome"> <div class="slideshow-area"> <img src="images/slide-welcome-01.png"> <img src="images/slide-welcome-02.png"> <img src="images/slide-welcome-03.png"> 였다가, 16분 24초에는 <div class="slideshow"> <img src="images/slide-welcome-01.png"> <img src="images/slide-welcome-02.png"> <img src="images/slide-welcome-03.png"> 클래스명이 slideshow-area 에서 slideshow로 단순히 바뀐 걸로 이해하면 될까요? 이번 강의에서는 css부분 내용이 전혀 없었는데요. welcome-heading 부분에 보더가 되어서 강의에서는 보여지는데요. css는 다음편 강의에서 해주시는 거겠죠? ------------------------------------------------------------------------------------------------- 2. header 부분에서요. 보통 실무에서 웹사이트 제작할 때에 header section ..등등 각 부분마다 미리 높이값은 정하지 않고 하는 편인가요? 그런데 예를 들어, 웹디자인기능사 실기시험 같은 경우는 각각 높이가 정해져서 지침에 나와서 거기에 맞춰서 만들어줘야 하더라고요. 만약에 header높이값이 미리 고정해서 만든다고 하면, padding-top: 30px; padding-bottom: 15px;등등으로 높이값이 늘어날 텐데요. 이렇게 header 높이값이 정해져 있을 때는 어떤 식으로 조절해주는 팁 같은 게 있을까요? line-height같은 방법일까요..? ------------------------------------------------------------------------------------------------- 3. 그리고 position: fixed; 이 부분은 제가 공부가 부족해서 이해를 못하는 것 같은데요. 헤더에 position: fixed;를 주는 이유가 하단에 내용이 많아서 스크롤바를 내리면 상단의 메뉴바가 안 보여서 고정해주기 위해서 주는 걸로 알고 있었는데요. 이번 같은 경우에는, 헤더 부분에도 슬라이더를 적용하기 위해서 fixed를 해주는 건가요? header에 position: fixed;를 주면 너비가 인라인블록으로 줄어들어서 width:100%;를 주고 z-index값을 주니깐 헤더부분에도 슬라이드가 적용된다고 알려주셨는데요. width:100%를 주지 않으니깐 헤더부분이 .header-inner {margin: auto;}가운데 정렬도 안 되는 것 같더라고요. 왜 너비값 100%주지 않으면 가운데정렬 적용이 안 되는지 잘 모르겠고, fixed를 주면 너비가 인라인블록으로 줄어든다.. 이 부분도 이해가 잘 안되고요.. position부분을 공부한다고 하긴 했는데 많이 부족한가 봅니다..ㅜㅜ 선생님 어느 강의를 다시 들으면 이 부분이 이해할 수 있을까요? 너무 어렵고 어렵지만은, 그래도 하나씩 배워가는 기쁨이 큰 것 같습니다. 질문이 너무 길어서 죄송합니다. 선생님께서 언제나 티칭해주시니 너무 든든합니다. 감사합니다.
- 미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
팝업창 닫기 버튼을 클릭해도 영상의 소리가 들려요
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.
- 미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
모바일 버전 동작 오류 질문 드립니다.
pc와 모바일 버전 최종 구현 후, 웹브라우저에서 확인하면 햄버거 버튼이 펼쳐지고, 접히는 동작이 잘 됩니다. 그런데 ftp 서버에 파일을 그대로 업로드 후, 웹브라우저나 핸드폰에서 url로 접속하면 햄버거 버튼이 동작을 하지 않습니다. (웹브라우저에서도, 폰에서도요) 제 파일에 오류일 수도 있다 싶어서 선생님 완성본 파일을 ftp에 업로드하고 확인해도 동작을 하지 않습니다. 웹 주소는(jesuslove.dothome.co.kr)입니다. 확인해 주실수 있나요?
- 미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
CEO들의 생생리뷰 글씨가 가운데로 오지않습니다. 쿠키문제 때문에 이것저것 코드치다가 구조가 깨진거같네요
<!-- Section : review --> <section class="review"> <div class="review-inner"> <div class="headline-share"> <h1>CEO들의 생생 리뷰</h1> <p>startup mate ceo review</p> </div> <div class="review-content"> <h1 class="slogan">CEO 커뮤니티 앱, 스타트업 메이트</h1> <div class="review-slider"> <div> <p> 스타트업 창업 후 조직관리에 관한 내용이 잘 만들어져 있어서 많은 도움이 됩니다. 스타트업메이트의 CEO를 위한 특별한 서비스들 너무 좋습니다. CEO로서 스타트업메이트의 기본적인 가이드만 참고해도 원하는 방향으로 조직관리할 수 있을 것 같습니다. 조직관리의 시작을 명확하게 하고, 완성도를 높일 수 있어서 좋습니다. </p> <p> <span>주승윤 대표</span> 스타메이킹 스타트업 대표이사 </p> </div> <div> <p> 경영전략을 어떻게 기획해야 하는지 도무지 엄두가 나지 않았는데 스타트업메이트 앱을 통해서 그런 고민 해결이 많이 되었습니다. 안전성과 전문성이 검증된 스타트업메이트의 CEO 경영전략 서비스 추천해 드립니다. 철저한 단계별 검증을 통해 새니기 CEO에게 경영전략 실패에 대한 위험부담을 낮출 수 있을 것 같습니다. 감사합니다. </p> <p> <span>정동수 대표</span> 스타트업 웹 에이전시 CEO </p> </div> <div> <p> 처음 시작하는 CEO라서 전략기획이 뭔지 조직관리가 뭔지 정말 막막했습니다. 컨설팅도 합리적인 비용으로 해주기 때문에 이런 부분에 대한 고민해결도 충분히 되었습니다. 스타트업메이트와 같은 CEO만을 위한 앱 서비스가 없어서 비교가 어렵겠지만 저는 정말 만족합니다. 번창하시길 기원합니다. 저도 화이팅~ 스타트업메이트도 화이팅입니다. </p> <p> <span>유태연 대표</span> 캐주얼 모바일 게임 개발 CEO </p> </div> </div> </div> </div> </section> /* ################## section : review ##################### */ .review { background-color: #f9f9f9; } .review-inner { width: 1300px; margin: auto; } .review-content { text-align: center; width: 900px; margin: auto; } h1.slogan { font-size: 36px; } .review-slider {} .review-slider div { outline: none; } .review-slider div p { padding: 0 70px; } .review-slider div p span { display: block; font-weight: bold; }
- 미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
samesite 때문에 어코디언 뿐만이아니라 슬릭슬라이더 제외 비디오모달 어코디언이 안됩니다.
jquery가 안됩니다. 해결방법이 있을까요? 주변에 개발자분들도 안계시고 아무리 검색을하고 시도를 해봐도 해결이안되네요
- 미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
어코디언이 작동이 안됩니다. 코드에는 이상이 없는데 쿠키문제인지 모르겠습니다.
<section class="faq"> <div class="faq-inner"> <div class="headline-share"> <h1>서비스 이용이 궁금하신가요?</h1> <p>스타트업메이트가 도와드리겠습니다,</p> </div> <div class="faq-content"> <div class="faq-accordion"> <div class="faq-item active"> <div class="faq-title">스타트업 메이트 회원가입이 필수인가요?</div> <div class="faq-desc"> 네. 회원가입은 필수입니다. 스타트업 메이트 회원가입은 만 20세 이상 누구나 가입하실 수 있으며, 스타트업 메이트 앱 서비스를 이용하시기 위해서 회원가입은 필수입니다.<br> 스타트업 메이트 회원가입은 앱을 통해서 가입하실 수 있습니다. 가입 절차는 아래와 같습니다.<br> ① 약관동의(서비스이용약관, 개인정보 취급방침)<br> ② 기본정보 입력(아이디, 이름, 비밀번호, 이메일, 휴대전화, 사업자 주소)<br> </div> </div> <div class="faq-item"> <div class="faq-title">회원가입 시 주민등록번호가 포함되나요?</div> <div class="faq-desc"> 스타트업 메이트 회원가입 시 주민등록번호는 입력받지 않습니다. 회원가입을 위한 최소한의 정보만으로 회원가입이 완료됩니다.<br> 입력된 회원 정보는 스타트업 메이트 보안 시스템을 통해 안전하게 보호되며 법령에서 정하는 바에 최소한의 기간 동안 보관 후 모두 삭제되며, 고객 정보 보호에 최선을 다하고 있습니다. </div> </div> <div class="faq-item"> <div class="faq-title">개인정보 관리를 어떻게 하시나요?</div> <div class="faq-desc"> 스타트업 메이트는 서비스 제공을 위해 회원의 개인정보를 최소화 하여 수집하며, 수집된 정보는 '개인정보 취급방침'에 따라 엄격히 관리됩니다.<br><br> 스타트업 메이트는 고객님의 개인정보를 소중하게 생각하며 서비스를 이용하시는 고객님의 개인정보 보호를 위해 관련 법령에서 규정하고 있는 개인정보보호 규정을 철저히 준수합니다. 개인정보보호와 관련한 자세한 내용은 '개인정보 취급방침'을 참고해주시기 바랍니다. </div> </div> <div class="faq-item"> <div class="faq-title">회원정보를 변경하고 싶은데 어떻게 하나요?</div> <div class="faq-desc"> 스타트업 메이트 회원정보를 변경하기 위해서 로그인 후 [회원정보]에서 회원정보를 조회하거나 변경하실 수 있습니다.<br> 회원정보 변경 방법은 아래와 같습니다. (단, 아이디는 수정하실 수 없습니다.) <br><br> ① [회원정보] 페이지 > 현재 사용중인 비밀번호 입력 <br> ② [정보수정] 버튼을 클릭합니다. </div> </div> <div class="faq-item"> <div class="faq-title">회원탈퇴 후 같은 아이디로 재가입 가능한가요?</div> <div class="faq-desc"> 스타트업메이트 회원 탈퇴를 원하시나요? 동일 아이디는 스타트업 메이트 회원 정책에 따라 재가입이 일정 기간 불가합니다. 회원 탈퇴 시 기존 회원 정보를 포함한 모든 정보가 복구 불가능합니다. 탈퇴 시 이 점을 다시 한번 고려하신 후 진행해 주세요. 항상 최선을 다하는 스타트업메이트가 되겠습니다. 감사합니다. </div> </div> </div> <div class="awards-content"> <div class="award-image"> <img src="images/faq-01.png" alt=""> </div> <h2>Great apps win awards</h2> <p> 웹 및 모바일 개발자가 이끄는 Great apps win awards는 새로운 모바일 앱을 대중에게 주목을 받는 역할을 수행한 앱(App)에 수여됩니다. </p> <a href="" class="btn-awards">view the awards</a> </div> </div> </div> </section> /* faq-accorion */ .faq-accorion {} .faq-item { border: 1px solid #ddd; border-radius: 10px; margin-bottom: 20px; } .faq-item > div { padding: 15px; } .faq-title { color: #428cd6; cursor: pointer; } .faq-title:after { content: '\f105'; font-family: fontawesome; float: right; color: #444; transition: 0.35s; } .faq-desc { display: none; } .faq-item.active { border: 1px solid #7dbeff; } .faq-item.active .faq-title:after { color: #7dbeff; transform: rotate(90deg); } /* Faq Accordion */ $(function(){ $('.faq-desc').eq(0).show() $('.faq-title').click(function(){ $(this).next().stop().slideDown() $(this).parent().siblings().children('.faq-desc').stop().slideUp() $(this).parent().addClass('active') $(this).parent().siblings().removeClass('active') }) })
- 미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
슬라이더 도트부분 크기가 너무작은데 어떻게 바꿔야 될까요?
(사진)
- 미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
faq 부분 h1 태그 파란 바 따로 디자인 하지않았는데 어떻게 그대로 나온건지 궁금합니다
(사진)
- 미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
스타트업 CEO 커뮤니티 부분 위에 가 너무 붙어있습니다.
선생님 강의를 보고 잘 따라한 거같은데 선생님이 하신 화면과 제가 한 화면이 너무 다릅니다 스타트업 CEO 커뮤니티 위에 부분이 너무 붙어있습니다. 패딩 탑을 주어야 될까요? 아니면 마진탑을 주어야할까요? <!--section : feature--> <section class="feature"> <div class="feature-inner"> <div class="headline-share"> <h1>스타트업 CEO 커뮤니티</h1> <p> 스타트 업 비즈니스 발전을 위한 다양한 서비스를 제공합니다. </p> </div> <div class="feature-content"> <div class="feature-mokeup"> <img src="images/feature-mockup-01.png"> </div> <div class="feature-about"> <img src="images/icon-num-01.png"> <h2>스타트업 메이트 CEO 평생 회원 자격</h2> <p> 스타트업 메이트 회원가입은 평생 무료입니다. 조직의 리더 곧, CEO에게 필요한 경영, 전략, 조직관리 등 최신 경향을 안내하고 스타트업메이트 CEO에게 영감과 창의적인 아이디어를 만들 수 있도록 지원합니다. </p> </div> </div> <div class="feature-content"> <div class="feature-about"> <img src="images/icon-num-02.png"> <h2>CEO 오프라인 모임 참석(월 2회)</h2> <p> 스타트 업메이트 CEO 회원들만의 오프라인 모임을 월 2회 진행합니다. 온라인에서 부족한 상호작용을 위해 오프라인 모임을 만들고 해당 오프라인 모임에서 다야한 업종의 CEO들과 고민을 나누는 자리가 됩니다. </p> </div> <div class="feature-mokeup"> <img src="images/feature-mockup-02.png"> </div> </div> <div class="feature-content"> <div class="feature-mokeup"> <img src="images/feature-mockup-03.png"> </div> <div class="feature-about"> <img src="images/icon-num-03.png"> <h2>조직관리를 위한 오프라인 멘토링</h2> <p> 스타트업 메이트에서는 오프라인 멘토링을 정기적으로 개최합니다. 스타트업 메이트 CEO 회원이면 누구나 참석 가능합니다. 오프라인 멘토링에서는 명사를 초빙하여 경영혁신과 조직관리 그리고 최신 경영 트랜드에 대한 강연을 진행합니다. </p> </div> </div> </div> </section> /* ################## feature ##################### */ .feature-inner { width: 1300px; margin: auto; } .feature-content { overflow: hidden; margin: 100px 0; } .feature-content > div { float: left; width: 50%; text-align: center; } .feature-about { padding: 0 70px; padding-top: 80px; } .feature-about h2 { font-size: 30px; }
- 미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
header position: fixed 가 안됩니다.
안녕하세요 선생님 공부를 하다가 보니 헤더부분 gnb가 position: fixed; 가 안됩니다. header부분이 계속 따라오는 거 같아 말씀드려봤습니다. <!--Custom CSS & JS--> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="reponsive.css"> <script src="js/costom.js"></script> </head> <body> <div class="container"> <!--##########Header##########--> <header> <div class="header-inner"> <div class="logo"> <a href="#none"><img src="images/logo.png"></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> /* ################## 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)
선생님이 하신 화면과 제가한 화면이 많이다릅니다.
웰컴헤딩이 선생님이 하신것과 같은 위치에 있어야하는데 맨 밑으로 가고있습니다. 제이쿼리 구문을 수정했는데도 슬라이드가 넘어가지 않고있습니다. 웰컴헤딩 css부분은 지금 제가 듣고있는 영상에는 설명되어있지않아 다음영상에서 보도록하겠습니다. 현재 영상에서 학습할때 문제점을 확인부탁드립니다. 현재 제 화면입니다. <!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 offical Landing</title> <link rel="icon" href="images/logo-favicon.png"> <!--Fontawesome--> <script src="https://kit.fontawesome.com/1afe467c36.js" crossorigin="anonymous"></script> <!--Xeicon--> <link rel="stylesheet" href="//http://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css"> <!--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="style.css"> <link rel="stylesheet" href="reponsive.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"></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>3가지 타이핑 텍스트 자리</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-accese--> <section class="ceo-accese"></section> <!--section : banne--> <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> </body> </html> /* CSS */ /* Web Fonts - Noto Fonts */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap'); /* Web Fonts - NoonNoo */ @font-face { font-family: 'NEXON Lv2 Gothic Light'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv2 Gothic Light.woff') format('woff'); font-weight: normal; font-style: normal; } /* ################## header ##################### */ .welcome { height: 90vh; } 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 { text-decoration: none; color: #222; margin: 10px; font-size: 16px; } /* ################## section : welcome ##################### */ $(function(){ /* slick slider - welcome */ $('slideshow').slick({ infinite: true, dots: false, autoplay: true, autoplaySpeed: 2000, fade: true, speed: 1000, pauseOnHover: false }); })
- 미해결반응형 웹사이트 포트폴리오(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 offical Landing</title> <link rel="icon" href="images/logo-favicon.png"> <!--Fontawesome--> <script src="https://kit.fontawesome.com/1afe467c36.js" crossorigin="anonymous"></script> <!--Xeicon--> <link rel="stylesheet" href="//http://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css"> <!--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="style.css"> <link rel="stylesheet" href="reponsive.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"></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>3가지 타이핑 텍스트 자리</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-accese--> <section class="ceo-accese"></section> <!--section : banne--> <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> </body> </html> /* custom js */ $(function () { /* slick slider - welcome */ $('.slideshow').slick({ infinite: true, dots: false, autoplay: true, autoplaySpeed: 2000, fade: true, speed: 1000, pauseOnHover: false }); /* CSS */ /* Web Fonts - Noto Fonts */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap'); /* Web Fonts - NoonNoo */ @font-face { font-family: 'NEXON Lv2 Gothic Light'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv2 Gothic Light.woff') format('woff'); font-weight: normal; font-style: normal; } /* ################## 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 { text-decoration: none; color: #222; margin: 10px; font-size: 16px; }
- 미해결반응형 웹사이트 포트폴리오(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 offical Landing</title> <link rel="icon" href="images/logo-favicon.png"> <!--Fontawesome--> <script src="https://kit.fontawesome.com/1afe467c36.js" crossorigin="anonymous"></script> <!--Xeicon--> <link rel="stylesheet" href="//http://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css"> <!--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="style.css"> <link rel="stylesheet" href="reponsive.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"></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>3가지 타이핑 텍스트 자리</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-accese--> <section class="ceo-accese"></section> <!--section : banne--> <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> </body> </html> $(function () { /* slick slider - welcome */ $('.slideshow').slick({ infinite: true, dots: false, autoplay: true, autoplaySpeed: 2000, fade: true, speed: 1000, pauseOnHover: false });