-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
선생님이 하신 화면과 제가한 화면이 많이다릅니다.
22.03.30 00:15 작성 조회수 128
1
웰컴헤딩이 선생님이 하신것과 같은 위치에 있어야하는데
맨 밑으로 가고있습니다. 제이쿼리 구문을 수정했는데도
슬라이드가 넘어가지 않고있습니다. 웰컴헤딩 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
});
})
답변을 작성해보세요.
0
코딩웍스(Coding Works)
지식공유자2022.03.31
슬라이드 안되는 문제는 제이쿼리 구문에 클래스네임에 점(.) 이 빠져 있어요.
$('.slideshow')
$(function () {
/* slick slider - welcome */
$('slideshow').slick({
infinite: true,
dots: false,
autoplay: true,
autoplaySpeed: 2000,
fade: true,
speed: 1000,
pauseOnHover: false
});
})
헤딩텍스트 섹션 중앙에 위치하지 않는건 아래 CSS가 없어요.
.welcome {
/* border: 5px solid #000; */
height: 90vh;
position: relative;
}
.welcome-heading {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 200px;
text-align: center;
width: 750px;
}
0
코딩웍스(Coding Works)
지식공유자2022.03.31
영상 따가시다보면 자연스럽게 해결되는 부분들이 있습니다.
일단 영상 잘 따라가시고 코드도 알맞게 넣으세요.
하시다가 안되시는 부분은 질문 주세요.
답변 2