inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

반응형 웹사이트 포트폴리오(App Official Landing Website)

Header 네비게이션 제작

그래도 header모양이 이런데요 header { position: fixed; width: 100%; z-index: 10; } 해도 모양이 이래요

해결된 질문

689

My own life

작성한 질문수 13

1

그래도 모양이 똑바로 되지 않네요

<!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';
  srcurl('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv2 Gothic.woff'format('woff');
  font-weightnormal;
  font-stylenormal;
}

/* Reset CSS */
* {
  box-sizingborder-box;
}
a {
  text-decorationnone;
  color: #222;
}
buttoninput {
  outlinenone;
}
h1,h2,h3,h4,h5,h6 {
  margin-top0;
  font-weightnormal;
  line-height1.5em;
}

/* Default CSS */
body {
  font-family'NEXON Lv2 Gothic'sans-serif;
  font-size18px;
  line-height1.7em;
  margin0;
  background-color: #fff;
  color: #222;
}

/* header */
header {
  positionfixed;
  width100%;
  z-index10;
}
.header-inner {
  width1300px;
  marginauto;
  overflowhidden;
  padding-top30px;
  padding-bottom15px;
}
.logo {
  floatleft;
}
.logo img {
  margin-top-7px;
}
.gnb {
  floatright;
}
.gnb a {
  margin10px;
  font-size16px;
}

jquery HTML/CSS 반응형-웹

답변 1

2

코딩웍스(Coding Works)

<meta charset="UTP-8">

위에 오타 있어요.

<meta charset="UTF-8"> 이렇게 하세요.

지금 오류와는 관계 없지만 나중에 문제가 생길거에요. 텍스트 관련해서요.

.container 없이 body 다음에 바로 header가 나오면 안됩니다.

그리고 <html></html> 이것도 없네요.

기본 html 문서 구조를 잘 만들고 시작하셔야 합니다.

그리고 지금 .gnb가 float: right 해도 오른쪽으로 안가는건 .gnb가 .logo 안에 있습니다.

이래서 안되는거에요.

html이 잘못되어 있으면 css를 정상적으로 해도 잘못된 결과가 나옵니다.

영상에서 html 구조를 만들때 자세히 보셔야 할 것 같습니다.

지금 html 수정하려고 하지 마시고 처음 html 구조 만드는 것 부터 차분하게 다시 하셔야 할 것 같아요.

또 하나 이야기 하면 제 영상에서는 css 폴더를 만들고 넣지 않았는데 css 폴더를 만들고 css파일을 넣으셨네요.

그렇게 하셔도 되지만 처음 따라오실 때는 영상에 있는 파일 폴더 구조로 하시는걸 권해드립니다.

파일 폴더 구조를 다르게 하면 나중에 잘 안될 때 질문하시면 저도 헛갈릴 수 있어요.

하드코딩으로 이미지맵(image map) 만들기

1

79

2

슬릭 슬라이더

1

147

2

position: fixed; 가 안먹혀요..뭐가 문제일까요?

1

167

1

반응형 fixed 안먹히는 문제

1

264

2

선생님

2

155

1

.news-thum .date 위치가 안맞아요

1

245

2

TypeIt - Welcome 부분이 적용이 안됩니다..

1

369

2

Scroll Reveal Animation 적용이 안되요

1

362

1

완성 후 각 섹션 display:none 주석 시 문제

1

384

3

브라우저를 줄일 때 화면 깨짐

1

632

2

welcome-heading 부분이 왜 저렇게 위치되는지 모르겠습니다.

1

340

1

제이쿼리 탭메뉴 클릭 질문

1

236

1

질문있습니다

1

548

1

질문있습니다.

2

646

2

슬릭슬라이더가 왜 안되는지 모르겠습니다

1

621

1

slick slider와 .ceo-content영역 겹침

1

719

1

span .badge 부분 참고하실분 하세요

2

333

1

플렉스를 안주고 그냥 패딩을 줘도 되지 않나요

1

330

1

창을 줄이면 위치가 이동되는 백그라운드 이미지

1

531

1

크롬창을 줄어들면 이미지가 작아짐

1

742

1

scroll behavior 오류

1

265

1

선생님 코딩좀 봐주세요..

1

399

3

왜 전 선생님과 화면이 다를까요?

1

365

3

따라했는데 이상합니ㅏㄷ..ㅠ

1

291

2