인프런 커뮤니티 질문&답변
작성한 질문수
header부분 오류때문에 질문 드립니다 분명 제가 한것에다가 코드도 복사해서 붙여넣었는데도 이상해요
작성
·
574
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
코딩웍스(Coding Works)
지식공유자
오류는 아니구요 현재 영상 단계에서 header에 fixed를 주지 않아서 그렇습니다.
뒤로 가시면서 헤더 부분 fixed해서 정리하는 강의 부분 순차적으로 나옵니다.
지금 영상은 welcome 섹션 만드는데 집중하는 영상이라서 헤더는 일단 저렇게 놔둔거에요.
밑에 있는 캡쳐는 완성본이구요. 지금 단계 강좌 영상에서도 header에 fixed가 없습니다.