header부분 오류때문에 질문 드립니다 분명 제가 한것에다가 코드도 복사해서 붙여넣었는데도 이상해요
651
My own life
작성한 질문수 13
1
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;
}
답변 1
2
오류는 아니구요 현재 영상 단계에서 header에 fixed를 주지 않아서 그렇습니다.
뒤로 가시면서 헤더 부분 fixed해서 정리하는 강의 부분 순차적으로 나옵니다.
지금 영상은 welcome 섹션 만드는데 집중하는 영상이라서 헤더는 일단 저렇게 놔둔거에요.
밑에 있는 캡쳐는 완성본이구요. 지금 단계 강좌 영상에서도 header에 fixed가 없습니다.
하드코딩으로 이미지맵(image map) 만들기
1
80
2
슬릭 슬라이더
1
149
2
position: fixed; 가 안먹혀요..뭐가 문제일까요?
1
168
1
반응형 fixed 안먹히는 문제
1
264
2
선생님
2
156
1
.news-thum .date 위치가 안맞아요
1
246
2
TypeIt - Welcome 부분이 적용이 안됩니다..
1
373
2
Scroll Reveal Animation 적용이 안되요
1
363
1
완성 후 각 섹션 display:none 주석 시 문제
1
384
3
브라우저를 줄일 때 화면 깨짐
1
635
2
welcome-heading 부분이 왜 저렇게 위치되는지 모르겠습니다.
1
342
1
제이쿼리 탭메뉴 클릭 질문
1
237
1
질문있습니다
1
550
1
질문있습니다.
2
647
2
슬릭슬라이더가 왜 안되는지 모르겠습니다
1
625
1
slick slider와 .ceo-content영역 겹침
1
720
1
span .badge 부분 참고하실분 하세요
2
334
1
플렉스를 안주고 그냥 패딩을 줘도 되지 않나요
1
332
1
창을 줄이면 위치가 이동되는 백그라운드 이미지
1
533
1
크롬창을 줄어들면 이미지가 작아짐
1
743
1
scroll behavior 오류
1
268
1
선생님 코딩좀 봐주세요..
1
405
3
왜 전 선생님과 화면이 다를까요?
1
371
3
따라했는데 이상합니ㅏㄷ..ㅠ
1
297
2