inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작

스크롤 시 헤더 fixed에 관해 질문드립니다

541

Hun

작성한 질문수 12

1

헤더를 상단 fixed할경우 이게 공중에 붕뜨는 것처럼 아래있던 intro섹션이 위로 끌려오게 되는데 intro 섹션에 padding-top을 줘서 header와 간격을 벌려주는게 맞는지 궁금합니다

    /* header */
    #header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 99;
    }
    .header-inner {
        margin: auto;
        height: 100%;
        border: 1px solid #000;
    }
    nav {
        max-width: 1440px;
        text-align: right;
        height: 70px;
        line-height: 70px;
    }
    nav a {
        margin-right: 10px;
    }
        * {
            margin: 0;
            padding: 0;
        }
        a {
            text-decoration: none;
            color: #fff;
        }
    #header {
    }
    #intro {
        height: 400px;
        padding-top: 70px;
        background-color: #CCB9AF;
   }
    </style>
</head>
<body>
    <header id="header">
        <div class="header-inner">
            <nav>
                <a href="#intro">HOME</a>
                <a href="#about">ABOUT</a>
                <a href="#skills">SKILLS</a>
                <a href="#pratical">Pratical</a>
                <a href="#mobile">Mobile Web&App</a>
                <a href="#none">WebSite Publising</a>
              </nav>
        </div>
    </header>
    <section id="intro"></section>

HTML/CSS jquery 포트폴리오

답변 1

1

코딩웍스(Coding Works)

네. header에 포지션 absolute 또는 fixed가 되면 떠서 위치를 잡기 때문에 공간이 생겨서 아래 요소가 올라갑니다. 곧 intro 섹션이 올라가기 때문에 헤더의 높이 만큼 intro 섹션의 상단이 덜 보이게 됩니다. 

말씀하신 것처럼 intro 섹션에만 패딩 상단을 더 주어서 조절하시면 됩니다.

0

운동

와...대박...그렇구나..

감사합니다!!!

현재도 float 사용은 중요한가요?

1

212

2

웹 호스팅 후 문제

1

235

1

퍼블리셔 코딩테스트 질문입니다.

1

586

1

feather light

1

248

2

skill 섹션 질문

1

254

1

포트폴리오 홈페이지 제작가이드

2

247

1

iframe 질문입니다.

1

208

1

디자인설정

1

332

1

연봉 질문합니다.

1

891

1

폰트, 이미지? 관련 질문입니다

1

305

1

파일질라 카페24? 관련 질문입니다

1

430

1

면접 복장 질문입니다

1

741

1

도메인 연결 오류

1

358

1

개인 포트폴리오 웹사이트 안에 들어갈 포트폴리오 웹사이트 작업물들

1

479

1

카페24 절약형 관련 질문있습니다

1

869

2

기능정의서 html에 첨부하는 방법/header include

1

621

1

prototype 뜻

1

699

1

폴더구조 질문드립니다.<재업로드>

1

428

1

폴더구조 질문드립니다

1

357

1

개인포토폴리오 해상도문제요..!

1

388

1

구글에 검색했을 때 나오는 포트폴리오

2

408

1

wow.js live option

1

439

1

개인 포트폴리오 홈페이지 만들때 UI 포토샵 디자인

1

530

1

featherlight 연결시 링크된 html이 문제가 있어요 ㅠㅠ

1

311

1