61,600원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
.news-thum .date 위치가 안맞아요
<section class="news" id="news"> <div class="news-inner"> <div class="headline-share"> <h1>스타트메이트 최신 소식</h1> </div> <div class="news-content"> <div class="news-left"> <div class="news-big"> <img src="images/news-thum-big.jpg"> <div class="news-headline"> <h2>Merry Christmas 2020</h2> <p> 스타트업 CEO 여러분~ 지금은 사회적으로 힘든 시기를 보내고 있지만 우리는 이겨낼수 있습니다.<br> 스타트업메이트가 여러분을 응원합니다. <small class="date">Dec 24, 2020</small> </p> <a href="#none" class="btn-view">자세히 보기</a> </div> </div> </div> <div class="news-right"> <div class="news-items"> <div class="news-thum"> <div class="news-photo"> <img src="images/news-thum-small-01.jpg"> <span class="badge hot">hot issue</span> </div> <p> 스타트업 메이트 드디어 사무실이 확장 이전했습니다. <small class="date">Dec 11, 2020</small> </p> </div> <div class="news-thum"> <div class="news-photo"> <img src="images/news-thum-small-02.jpg"> <span class="badge new">new issue</span> </div> <p> 예상 고객의 요구사항 분석을 미리 알아보는 오프라인 CEO 프로젝트 <small class="date">Oct 21, 2020</small> </p> </div> </div> <div class="news-items"> <div class="news-thum"> <div class="news-photo"> <img src="images/news-thum-small-03.jpg"> <span class="badge hot">hot issue</span> </div> <p> 스타트업을 위한 앱 개발 유료서비스 플랫폼 서비스 오픈 <small class="date">Nov 12, 2020</small> </p> </div> <div class="news-thum"> <div class="news-photo"> <img src="images/news-thum-small-04.jpg"> <span class="badge new">new issue</span> </div> <p> 스타트업 CEO를 위한 사업 기획서 작성과 아이디어 도출 방법 <small class="date">Oct 16, 2020 </small> </p> </div> </div> </div> </div> <a href="#none" class="btn-readmore">read more news</a> </div> </section> //css .news { background-color: #f9f9f9; } .news-inner { width: 1300px; margin: auto; } .news-content { overflow: hidden; width: 95%; } .news-content > div { float: left; width: 50%; } .news-big { position: relative; width: 550px; height: 550px; margin: auto; } .news-big::before { content: ''; position: absolute; background-color: rgba(0, 0, 0, 0.6); width: 100%; height: 100%; top: 0; left: 0; transition: 0.3s; } .news-big:hover::before { background-color: rgba(0, 0, 0, 0.4); } .news-big img { width: inherit; height: inherit; object-fit: cover; } .news-headline { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; text-align: center; width: 90%; } .date { display: block; margin-top: 20px; font-size: 14px; } .btn-view { background-color: #000; padding: 5px 10px; border-radius: 5px; color: #fff; } .news-items { margin-bottom: 20px; } .news-items > div { display: inline-block; } .news-thum { width: 280px; } .news-thum:first-child { margin-right: 30px; } .news-thum:hover .news-photo img { transform: scale(1.1); } .news-thum p { margin-top: 0; } .news-photo { position: relative; display: inline-block; overflow: hidden; } .news-photo img { display: block; transition: 0.3s; } .badge { position: absolute; bottom: 0; left: 0; color: #fff; font-size: 14px; padding: 0 10px; } .badge.new { background-color: red; } .badge.hot { background-color: #000; } .news-thum .date { float: right; } .btn-readmore { background-color: #69acfe; color: #fff; width: 180px; text-align: center; padding: 5px; border-radius: 20px; text-transform: uppercase; font-weight: bold; font-size: 16px; display: block; margin: auto; margin-top: 30px; }제목 길이에 따라 date 위치가 바뀌는데 어떻게 수정해야 같은 위치로 놓을 수 있나요?
- 미해결반응형 웹사이트 포트폴리오(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버튼이 작동하지를 않아요.
- 해결됨반응형 웹사이트 포트폴리오(App Official Landing Website)
브라우저를 줄일 때 화면 깨짐
pc버전에서 브라우저 화면을 줄일 때 저렇게 화면이 깨지는데실제 다른 웹 사이트 처럼 화면을 줄여도 안 깨질려면 max-width 768 버전 말고 max-width 1200도 같이 만들어줘야 하나요?
- 미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
welcome-heading 부분이 왜 저렇게 위치되는지 모르겠습니다.
블록요소기 때문에 슬라이드 밑줄에 위치되어야 하는걸로 아는데 왜 슬라이드와 겹쳐서 저렇게 페이지 맨 상단 왼쪽에 위치되는지 모르겠습니다.
- 미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
제이쿼리 탭메뉴 클릭 질문
개인 포트폴리오 웹 사이트 작업 중에 질문이 있습니다.기초반 중급반 고급반 버튼 각자 클릭하면 색깔이 바뀌면서 아래에 4개의 사진들이 바뀌는 형태로 하고 싶은데 잘되지 않습니다. html <div class="online-inner"> <section class="online"> <div class="online-title"> <h2> 온라인 강의 미리보기 <i class="fa fa-line-chart" aria-hidden="true"></i> </h2> </div> <div class="online-content"> <div class="online-btn"> <a class="active" href="#none">기초반</a> <a href="#none">중급반</a> <a href="#none">고급반</a> </div> <div class="online-tabs"> <div class="online-tab1"> <div class="online-tab-inner"> <a href="#none"><img src="images/tab1-img-01.jpg"></a> <a href="#none"><img src="images/tab1-img-02.jpg"></a> <a href="#none"><img src="images/tab1-img-03.jpg"></a> <a href="#none"><img src="images/tab1-img-04.jpg"></a> </div> </div> <div class="online-tab2"> <div class="online-tab-inner"> <a href="#none"><img src="images/tab2-img-01.jpg"></a> <a href="#none"><img src="images/tab2-img-02.jpg"></a> <a href="#none"><img src="images/tab2-img-03.jpg"></a> <a href="#none"><img src="images/tab2-img-04.jpg"></a> </div> </div> <div class="online-tab3"> <div class="online-tab-inner"> <a href="#none"><img src="images/tab3-img-01.jpg"></a> <a href="#none"><img src="images/tab3-img-02.jpg"></a> <a href="#none"><img src="images/tab3-img-03.jpg"></a> <a href="#none"><img src="images/tab3-img-04.jpg"></a> </div> </div> </div> </div> </section> </div> CSS.online-inner { background-color: #5f98e7; } .online { width: 1300px; margin: auto; padding: 50px 0; } .online-title { text-align: center; } .online-title h2 { font-size: 35px; font-weight: 600; color: #fefefe; } .online-content {} .online-btn { text-align: center; } .online-btn a { display: inline-block; padding: 10px 18px; margin-right: 30px; border: 1px solid #295aa0; border-radius: 30px; background-color: #fff; } .online-btn .active { background-color: #132f55; color: #fff; } .online-tabs {} .online-tab-inner { padding-top: 50px; text-align: center; } .online-tab-inner a { margin-right: 20px; } .online-tab-inner a img { width: 280px; } .online-tab1 {} .online-tab2 { display: none; } .online-tab3 { display: none; } $('.online-btn button:nth-child(1)').click(function(){ $('.online-tab1').show() $('.online-tab2').hide() $('.online-tab3').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) $('.online-btn button:nth-child(2)').click(function(){ $('.online-tab2').show() $('.online-tab1').hide() $('.online-tab3').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) $('.online-btn button:nth-child(3)').click(function(){ $('.online-tab3').show() $('.online-tab1').hide() $('.online-tab2').hide() $(this).addClass('active') $(this).siblings().removeClass('active') })마지막 jquery입니다. 웹디자인기능사 시험처럼 탭메뉴 2개일때는 됐는데 3개로 형태바꾸니까 잘되지 않습니다.
- 미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
질문있습니다
사진과 같이 award-list 가 한화면에 한그룹씩 3개의 슬라이드를 구현하려고 하는데요 슬릭슬라이더 를 입력하니까 구조감이 깨져버립니다.어떤게 문제인지 봐주시면 감사하겠습니다.<!--section : award --> <section class="award"> <div class="award-inner"> <h3 class="title">AWARDS</h3> <div class="award-cont"> <ul class="award-list"> <li class="list-item"> <p class="award-tit"> 2018 경상북도 건축문화상 최우수상<br> 2019 한국건축문화대상 우수상 </p> <span class="award-txt"> 다산면 행정복합타운 </span> <a href="#none"> <span class="read-more-btn"> <em>read more</em> </span> </a> </li> <li class="list-item"> <p class="award-tit"> 2019 한국문화공간상<br> 2018 김해건축대상 대상 </p> <span class="award-txt"> 김해 서부문화센터 </span> <a href="#none"> <span class="read-more-btn"> <em>read more</em> </span> </a> </li> <li class="list-item"> <p class="award-tit"> 2016 청주시 아름다운 건축상 은상 </p> <span class="award-txt"> 한국전력공사 충북본부 사옥 </span> <a href="#none"> <span class="read-more-btn"> <em>read more</em> </span> </a> </li> <li class="list-item"> <p class="award-tit"> 2017 한국문화공간상<br> 2016 한국건축문화대상 우수상<br> 2016 경상북도 건축문화상 대상 </p> <span class="award-txt"> 고령군 문화체육복지관 </span> <a href="#none"> <span class="read-more-btn"> <em>read more</em> </span> </a> </li> <li class="list-item"> <p class="award-tit"> 2015 한국건축문화대상 우수상 </p> <span class="award-txt"> 서울대학교 치의학대학원 첨단교육연구복합단지 </span> <a href="#none"> <span class="read-more-btn"> <em>read more</em> </span> </a> </li> <li class="list-item"> <p class="award-tit"> 2012 서울시 건축상 우수상 </p> <span class="award-txt"> 올림픽홀 복합문화공간 </span> <a href="#none"> <span class="read-more-btn"> <em>read more</em> </span> </a> </li> </ul> <ul class="award-list"> <li class="list-item"> <p class="award-tit"> 2011 경주시 건축상 금상 </p> <span class="award-txt"> 월성스포츠센터 </span> <a href="#none"> <span class="read-more-btn"> <em>read more</em> </span> </a> </li> <li class="list-item"> <p class="award-tit"> 2011 제주건축문화대상 본상 </p> <span class="award-txt"> 한전 제주지사 사옥 </span> <a href="#none"> <span class="read-more-btn"> <em>read more</em> </span> </a> </li> <li class="list-item"> <p class="award-tit"> 2013 경주시 건축상 금상 </p> <span class="award-txt"> 한국원자력환경공단 환경친화단지 방문객센터 </span> <a href="#none"> <span class="read-more-btn"> <em>read more</em> </span> </a> </li> <li class="list-item"> <p class="award-tit"> 2018 경상북도 건축문화상 최우수상<br> 2019 한국건축문화대상 우수상 </p> <span class="award-txt"> 서울대학교 의과대학 의생명과학관 </span> <a href="#none"> <span class="read-more-btn"> <em>read more</em> </span> </a> </li> <li class="list-item"> <p class="award-tit"> 2007 부산다운 건축상 우수디자인 건축물부분 동상<br> 2007 이원 환경 건축,조경대상 환경건축대상 </p> <span class="award-txt"> 신고리 원자력 지역협력시설 </span> <a href="#none"> <span class="read-more-btn"> <em>read more</em> </span> </a> </li> <li class="list-item"> <p class="award-tit"> 2004 한국건축문화대상 우수상 </p> <span class="award-txt"> 서울대학교 이공계 멀티미디어 강의동 </span> <a href="#none"> <span class="read-more-btn"> <em>read more</em> </span> </a> </li> </ul> <ul class="award-list"> <li class="list-item"> <p class="award-tit"> 2007 경상남도 건축대상 은상<br> 2005 대한민국 토목, 건축대상 최우수상 </p> <span class="award-txt"> 김해 문화의 전당 </span> <a href="#none"> <span class="read-more-btn"> <em>read more</em> </span> </a> </li> </ul> </div> </div> </section> /*css*/ /*section - award*/ .award-inner { margin: auto; padding: 130px 0 0; } .award-cont { width: 1300px; padding: 50px; margin: 0 auto; justify-content: center; } .award-cont ul { width: 1200px; height: 565px; margin: auto; border: 1px solid red; } .award-cont li { float: left; width: 33.3333%; height: 30vh; border: 1px solid blue; } /* Slick Slider : award */ $(document).ready(function(){ $('.award-list').slick({ dots: false, infinite: true, speed: 300, slidesToShow: 1, adaptiveHeight: true }); });
- 미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
질문있습니다.
선생님 강의에서 테마를 변경 후 작업중입니다. 슬릭슬라이드를 적용 하였는데 마지막 사진의 위치가 내려갔습니다. 사진을 변경하여 작업을 해봐도 같은 현상이 발생합니다.<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>다울건축사무소</title> <!--jquery--> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> <!--Slick slider--> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" /> <!--Custom CSS & js --> <link rel="stylesheet" href="/style.css"> <link rel="stylesheet" href="/resposive.css"> <script src="js/custom.js"></script> </head> <body> <div class="container"> <!--section : 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">ABOUT</a> <a href="#none">RPOJECTS</a> <a href="#none">NEWS</a> <a href="#none">CONTACT</a> </div> </div> </header> <!--section : home --> <section class="home"> <div class="home-inner"> <ul class="imgbox"> <li class="item-bg" style="background-image: url(/images/강원대농업생명과학대학개축설계제안공모\(설계공모\ 당선\).jpg)"> <div class="text-area"> <h3 class="eng">강원대 농업생명과학대학 개축 설계제안 공모</h3> <p>(설계공모 당선)</p> </div> </li> <li class="item-bg" style="background-image: url(/images/서울대학교문화관재건축공사현상설계.jpg)"> <div class="text-area"> <h3 class="eng">서울대학교 문화관 재건축공사 현상설계</h3> <p>(설계공모 당선)</p> </div> </li> <li class="item-bg" style="background-image: url(/images/서울출입국·외국인청\(설계공모안\).jpg)"> <div class="text-area"> <h3 class="eng">서울출입국·외국인청</h3> <p>(설계공모안)</p> </div> </li> <li class="item-bg" style="background-image: url(/images/수성행복드림센터\(설계공모\ 당선\).jpg)"> <div class="text-area"> <h3 class="eng">수성행복드림센터</h3> <p>(설계공모 당선)</p> </div> </li> <li class="item-bg" style="background-image: url(/images/시화\ MTV\ 초중통합학교\(우수상\).jpg)"> <div class="text-area"> <h3 class="eng">시화 MTV 초중통합학교</h3> <p>(우수상)</p> </div> </li> <li class="item-bg" style="background-image: url(/images/시화mtv지하주차장\ \(설계공모\ 당선\).jpg)"> <div class="text-area"> <h3 class="eng">시화 MTV 지하주차장</h3> <p>(설계공모 당선)</p> </div> </li> <li class="item-bg" style="background-image: url(/images/한수원새울본부복지관신축.jpg)"> <div class="text-area"> <h3 class="eng">한수원 새울본부 복지관 신축</h3> </div> </li> </ul> </div> </section> <section class="about"></section> <section class="award"></section> <footer></footer> </div> </body> </html> /*CSS*/ /* Web Font - Kanit */ @import url('https://fonts.googleapis.com/css2?family=Kanit:wght@200;300;400;500;600;700&display=swap'); /* Web Font - S-CoreDream */ @font-face { font-family: 'S-CoreDream-3Light'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff'); font-weight: normal; font-style: normal; } /* Reset CSS */ * { box-sizing: border-box; } a { text-decoration: none; color: #333; } button, input { outline: none; } h1, h2, h3, h4, h5, h6 { margin-top: 0; font-weight: normal; line-height: 1.5em; } ul, li { padding: 0; list-style: none; } /* Default CSS */ body { font-family: 'Kanit'; line-height: 1.7em; margin: 0; background-color: #fff; color: #333; } /*section - header*/ .header-inner { width: 1300px; margin: auto; padding-top: 20px; padding-bottom: 10px; overflow: hidden; } .logo { float: left; } .gnb { margin-top: 10px; float: right; } .gnb a { font-size: 20px; margin-left: 80px; } /*section - home*/ ul.imgbox { overflow: hidden; margin: 0; } .item-bg { display: inline-block; top: 0; background-size: cover; background-position: center; height: 100vh; } /*Custom JS*/ $(document).ready(function(){ $('.imgbox').slick({ infinite: true, dots: true, speed : 3000, autoplay: true, autoplaySpeed: 5000, swipe: true, arrows: false, fade : true, zIndex:50, pauseOnFocus: false, pauseOnHover: false, }); });
- 미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
슬릭슬라이더가 왜 안되는지 모르겠습니다
현재 선생님 강의에서 테마를 변경해서 작업하고 있습니다.<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>다울건축사무소</title> <!--jquery--> <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script> <!--Slick slider--> <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" /> <!--Custom CSS & js --> <link rel="stylesheet" href="/style.css"> <link rel="stylesheet" href="/resposive.css"> <script src="js/custom.js"></script> </head> <body> <div class="container"> <!--section : 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">ABOUT</a> <a href="#none">RPOJECTS</a> <a href="#none">NEWS</a> <a href="#none">CONTACT</a> </div> </div> </header> <!--section : home --> <section class="home"> <div class="home-inner"> <ul class="imgbox"> <li class="item-bg" style="background-image: url(/images/강원대농업생명과학대학개축설계제안공모\(설계공모\ 당선\).jpg)"> <div class="text-area"> <h3 class="eng">강원대 농업생명과학대학 개축 설계제안 공모</h3> <p>(설계공모 당선)</p> </div> </li> <li class="item-bg" style="background-image: url(/images/서울대학교문화관재건축공사현상설계.jpg)"> <div class="text-area"> <h3 class="eng">서울대학교 문화관 재건축공사 현상설계</h3> <p>(설계공모 당선)</p> </div> </li> <li class="item-bg" style="background-image: url(/images/서울출입국·외국인청\(설계공모안\).jpg)"> <div class="text-area"> <h3 class="eng">서울출입국·외국인청</h3> <p>(설계공모안)</p> </div> </li> <li class="item-bg" style="background-image: url(/images/수성행복드림센터\(설계공모\ 당선\).jpg)"> <div class="text-area"> <h3 class="eng">수성행복드림센터</h3> <p>(설계공모 당선)</p> </div> </li> <li class="item-bg" style="background-image: url(/images/시화\ MTV\ 초중통합학교\(우수상\).jpg)"> <div class="text-area"> <h3 class="eng">시화 MTV 초중통합학교</h3> <p>(우수상)</p> </div> </li> <li class="item-bg" style="background-image: url(/images/시화mtv지하주차장\ \(설계공모\ 당선\).jpg)"> <div class="text-area"> <h3 class="eng">시화 MTV 지하주차장</h3> <p>(설계공모 당선)</p> </div> </li> <li class="item-bg" style="background-image: url(/images/양주아트센터건립공사.jpg)"> <div class="text-area"> <h3 class="eng">강원대 농업생명과학대학 개축 설계제안 공모</h3> </div> </li> </ul> </div> </section> <section class="about"></section> <section class="award"></section> <footer></footer> </div> </body> </html> /* Slick Slider : home */ $('.imgbox').slick({ rtl: true });
- 미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
slick slider와 .ceo-content영역 겹침
section.welcome{width:90vh} 를 설정했음 불구하고 이미지값이 웰컴섹션을 넘어서ceo 컨텐츠와 패딩값이 겹칩니다.개발자툴로 slick-slider의 영역에 90vh를 해야 강사님과 같은 결과물이 나오는데 제가 잘못한게 있을까 싶습니다. float대신 flex속성으로 대체 하여 공부하고 있습니다
- 미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
span .badge 부분 참고하실분 하세요
강사님이 위아래가 넓다하여 padding 상하값를 주셨는데 꿈쩍 안했죠이건 처음 body에 주었던 line-height값 떄문입니다.해당 span에 우클릭 검사해서 보시면 padding값은 없습니다.고치실려면 line-height값을 줄여주세요.
- 미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
플렉스를 안주고 그냥 패딩을 줘도 되지 않나요
■ 질문 남기박스를 추가로 안만들고 그냥 패딩을 줘도 결과값은 똑같은데 .vision-item-headline 이러한 박스를 추가해서 플렉스를 주신 이유가 있으신가요? .vision-item-desc{ background-color: #f9f9f9; padding: 130px; }
- 미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
창을 줄이면 위치가 이동되는 백그라운드 이미지
안녕하세요 강사님창 크기를 줄이면 백그라운드 이미지도 같이 줄어 들어서 겹치는 문제에 대해 질문을 요청드려요.
- 미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
크롬창을 줄어들면 이미지가 작아짐
안녕하세요 강사님. 강의 잘듣고 있습니다.다름이 아니오라 크롬창이 줄어들면 이미지도 같이 작아지는데 이미지 크기를 고정시키는 방법이 있는지 해서 질문 요청합니다.그리고 다른사람들의 퍼블리셔 포트폴리오를 보면 대부분 피그마로 디자인이 되있던데 피그마를 배워서 포트폴리오에 첨석하는게 취업에 필수 인가요.
- 미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
scroll behavior 오류
css scroll behavior 가 브라켓에서 오류가 납니다. 사진처럼 빨갛게 처리되고, 당연히 동작하지 않습니다.선생님이 VS Code에서 하셨길래 VS Code 가서 테스트해보니, 거기서는 잘되네요 ;; (html파일을 냅다 크롬에서 열어서 테스트해봐도 잘되긴합니다)브라켓 대신에 VS Code 쓰면 해결되는 문제이긴 하지만 왜 그런지 궁금해서 한 번 여쭤봅니다.
- 미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
선생님 코딩좀 봐주세요..
안안녕하세욧 ㅓㄴ생님... 다름아니라 faq와 review 가 코딩이 겹쳐서나옵니다.. faq 보더를 그려보면 저렇게 상단만 나와요.. html구조를 제가 뭘 잘못했을가요..? <div 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></div> </div> <div class="faq-item"> <div class="faq-title">회원가입 시 주민등록번호가 포함되나요?</div> <div class="faq-desc">스타트업 메이트 회원가입 시 주민등록번호는 입력받지 않습니다. 회원가입을 위한 최소한의 정보만으로 회원가입이 완료됩니다. 입력된 회원 정보는 스타트업 메이트 보안 시스템을 통해 안전하게 보호되며 법령에서 정하는 바에 최소한의 기간 동안 보관 후 모두 삭제되며, 고객 정보 보호에 최선을 다하고 있습니다.</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> ① [회원정보] 페이지 > 현재 사용중인 비밀번호 입력<br> ② [정보수정] 버튼을 클릭합니다.</div> </div> <div class="faq-item"> <div class="faq-title">회원탈퇴 후 같은 아이디로 재가입 가능한가요?</div> <div class="faq-desc">스타트업메이트 회원 탈퇴를 원하시나요? 동일 아이디는 스타트업 메이트 회원 정책에 따라 재가입이 일정 기간 불가합니다. 회원 탈퇴 시 기존 회원 정보를 포함한 모든 정보가 복구 불가능합니다.<br> 탈퇴 시 이 점을 다시 한번 고려하신 후 진행해 주세요. 항상 최선을 다하는 스타트업메이트가 되겠습니다. 감사합니다.</div> </div> </div> <div class="awards-content"> <div class="award-image"> <img src="image/faq-01.png" alt=""> </div> <h2>Great apps win awards</h2> <p>웹 및 모바일 개발자가 이끄는 Great apps win awards는 새로운 모바일 앱을 대중에게 주목을 받는 역할을 수행한 앱(App)에 수여됩니다.</p> <a href="#none" class="btn-awards">view the awards</a> </div> </div> </div> </div> </section> <!-- review --> <section class="review"> <div class="review-inner"> <div class="headline-share"> <h1>CEO들의 생생 리뷰</h1> <p class="upper">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>
- 미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
왜 전 선생님과 화면이 다를까요?
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>StartUp</title> <!-- Favicon Logo --> <link rel="icon" href="image/logo-favicon.png"> <!-- --> <!-- jQuery CDN --> <script src="/script/jquery-3.4.1.min.js"></script> <!-- --> <!-- Slick Slider --> <link rel="stylesheet" href="script/slick-theme.css"> <link rel="stylesheet" href="script/slick.css"> <script src="/script/slick.min.js"></script> <!-- --> <!-- LINK CSS & SCRIPT --> <link rel="stylesheet" href="/css/style.css"> <link rel="stylesheet" href="/css/respon.css"> <script src="/script/main.js"></script> <!-- --> <!-- Fontawesome lINK --> <script src="https://kit.fontawesome.com/8e2986d4b4.js" crossorigin="anonymous"></script> <!-- --> </head> <body> <div class="container"> <!-- Header --> <header> <div class="header-inner"> <div class="logo"> <a href="#none"><img src="/image/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> <!-- welcome --> <section class="welcome"> <div class="slideshow"> <img src="/image/slide-welcome-01.png" alt=""> <img src="/image/slide-welcome-02.png" alt=""> <img src="/image/slide-welcome-03.png" alt=""> </div> <div class="wecome-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="wheel"></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></footer> </div> </body> </html> /* Font */ @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;1,400&display=swap'); /* font-family: 'Source Sans Pro', sans-serif; */ @import url('https://fonts.googleapis.com/css2?family=Gothic+A1:wght@100;200;300;400;500;600&display=swap'); /* font-family: 'Gothic A1', sans-serif; */ /* */ /* Setting CSS */ /* 박스사이징 고정 */ *{ box-sizing: border-box; } /* A태그 색상 및 데코 none */ a{ text-decoration: none; color:#222; } /* 버튼,인풋에 기본적으로 들어가있는 아웃라인 제거 */ button, input{ outline:none; } /* h태그들 제거, 마진 탑만 0, 라인하이트 설정 */ h1,h2,h3,h4,h5,h6{ margin-top: 0; font-weight: normal; line-height: 1.5em; } /* Default CSS */ /* 바디에 글꼴설정, a태그와 같은 글씨색상 */ body{ font-family: 'Gothic A1', sans-serif; font-size: 18px; line-height: 1.7em; margin: 0; background-color: white; color:#222; } /* Header */ header{ } .header-inner{ width: 1300px; margin: auto; overflow: hidden; padding-top:30px; padding-bottom:15px; } .logo{ float: left; } .logo img{ margin-top:-5px; } .gnb{ float: right; } .gnb a{ margin:10px; font-size:16px; } /* Welome */ .welcome{ height: 90vh; position: relative; } .welcome-heading{ position: absolute; top: 50%; transform:translateY(-50%); left:200px; border:5px solid red; width: 750px; text-align: center; } /* ceo-acess */ /* banner */ /* feature */ /* vision */ /* faq */ /* review */ /* focus */ /* guide */ /* news */ /* footer */ 안녕하세요, 선생님보고 코드따라썼는데 자꾸 welcome-heading부분이 위로 안올라오고 아래로 자꾸 떨어지는데.. 왜그럴까요?
- 미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
따라했는데 이상합니ㅏㄷ..ㅠ
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenfet</title> <script src="/script/jquery-3.4.1.min.js"></script> <!-- slick js --> <link rel="stylesheet" href="/slick/slick.css"> <link rel="stylesheet" href="/slick/slick-theme.css"> <script src="/slick/slick.js"></script> </head> <body> <div class="your-class"> <div>your content</div> <div>your content</div> <div>your content</div> </div> <script> $('.your-class').slick(); </script> </body> </html> 이렇게 했는데요, 그러면 your content가 한줄만나오고 나머지 두줄이 그냥 없어집니다 ... 세이브연속으로누르면 살짝 previous버튼과 next버튼이보이는? 현상이나오는데 뭐가문제일까요?
- 미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
flex로 된 부분을 좌우로 애니매이션 할때 발생하는 문제점.
제가 float로 레이아웃을 하지 않고 flex로 레이아웃을 했는데요.그러다 보니까 모바일 버전에서 애니매이션 되는 부분에서 가로스크롤이 생기면서 헤더 부분이 우측으로 밀리거나 픽스 되지 않고 본문과 함게 위로 올라가 버리는 문제가 발생하였습니다.flex 로 작업한 부분을 서버에 올려놓았는데요.모바일로 인터페이스에서 한번 보시고, 해결 방법이 있으면 알려 주시면 감사하겠습니다.사이트 접속 주소는 http://soopsok.dothome.co.kr/mate_01/index.html 입니다.그리고 3840 모니터에서 코딩웍스님 작업하신 메인화면과 아래 단락인 ceo access 부분을 보면 세로를 90vh로 주어서 너무 간격이 벌어지게 됩니다.참고 하시라는 뜻에서 캡쳐 화면 올려 드립니다.감사합니다.