TEMP

HTML 레이아웃 - 고정 레이아웃 2022.10.21
윈도우10 자동 드라이버 업데이트 기능 끄기 2018.08.01

HTML 레이아웃 - 고정 레이아웃

2022. 10. 21. 09:03

1. 개념 (그냥 스크롤해도 계속 따라 다니면서 그자리 그대로 박혀있는거!)

#고정 레이아웃이란?
-1단 또는 다단 레이아웃에서 상단(header)과 하단(footer) 또는 그 두 영역이 모두 컨텐츠의 높이나 내용에 상관없이 항상 노출 되도록 하는 레이아웃
-컨텐츠의 내용이 길어서 메뉴나 상단 컨텐츠를 고정해주는 것.

#고정 레이아웃 형태를 가진 사이트들
-(네이버 소프트웨어야 놀자) https://www.playsw.or.kr/main
-(네이버 오디오클립) https://audioclip.naver.com
-(라인) https://line.me/ko

LINE｜라인은 언제나 사용자와 함께 합니다.

메신저 앱 그 이상의 경험을 제공합니다. 라인은 새로운 인프라 경험, 새로운 커뮤니케이션 경험을 모두에게 전달하고자 합니다.

line.me

소프트웨어야 놀자

Play with AI, Play with DATA

www.playsw.or.kr

네이버 오디오클립

즐거움이 들린다, 오디오클립! 당신을 위한 특별한 오디오 콘텐츠를 만나 보세요.

audioclip.naver.com

LINE｜라인은 언제나 사용자와 함께 합니다.

메신저 앱 그 이상의 경험을 제공합니다. 라인은 새로운 인프라 경험, 새로운 커뮤니케이션 경험을 모두에게 전달하고자 합니다.

line.me

2. 코드

<body>
    <div class="wrap">
        <div class="header">header</div>
        <div class="container">
            <div class="content">content</div>
        </div>
        <div class="footer">footer</div>
    </div>
</body>

HTML 구조

	html, body{
            height: 100%;
        }
        .wrap{
            height: 100%;
            min-width: 800px;
            text-align: center;
        }
        .header{
            height: 100px;
            position: fixed;
            background-color: aqua;
            top: 0; left: 0; right: 0;
        }
        .container{
            /* height를 %로 지정하기 위해서는 부모요소로 부터 높이값을 상속받아야한다. */
            min-height: 100%;
            margin: 0 auto;
            margin-top: -100px;
            padding-top: 200px;  /* padding으로 해야 border-box를 사용하여 원하는 레이아웃을 만들 수 있다. */
            box-sizing: border-box;
        }
        .content{
            margin: 0 auto;
            max-width: 1200px;
            height: 300px;
            background-color: brown;
        }
        .footer{
            height: 100px;
            background-color: blue;
        }

CSS구조

레이아웃

※ reset.css 적용시켜줘야 된다!!

reset.css

0.00MB

이제 하나하나 대충대충 이해한걸 뜯어보자.

3. 정리

3-1. 전체적인 레이아웃

※ 주의해야할 점!!!

주의해야할 점은 container 영역이 사실 header 영역에서 부터 footer 위까지 쭉 이어져 있다는 것이다. 이는 header가 fixed로 되면서 고정영역으로 되어있기 때문이다.

3-2. header

여기에서 중요한 점은 position을 fixed로 설정했다는 것이다.

고정 레이아웃은 상단(header)과 하단(footer) 또는 그 두 영역이 모두 컨텐츠의 높이나 내용에 상관없이 항상 노출 되도록 하는 레이아웃 이므로 fixed가 가장 중요하다고 생각한다.

3-3. container

# header fixed 문제 해결

고정 레이아웃을 공부할 때 가장 감명깊었던것이 container 부분이었다. 그 이유가 header가 fixed가 되면서 container 부분이 header 아래로 들어가버리는 현상을 해결해야했기 때문인데 단순히 margin-top: 100px;(header의 높이가 100px이니까 그만큼 내려주는 것) 을 하면 되는 줄 알았는데, 훨씬 좋은 방법 이 있었다.

[해결방법]

1. 오히려 margin-top : -100px; 을 해준다. (margin은 -를 하면 반대로 움직인다고 생각)