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 적용시켜줘야 된다!!
이제 하나하나 대충대충 이해한걸 뜯어보자.
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은 -를 하면 반대로 움직인다고 생각)
2. padding-top: 200px;
container의 height가 200px; 만큼 더 커진 이유가 중요하다.
예를 들면 해당 예시에서의 container 크기는 969px이다. (html 태그의 height 크기 자체가 969px이고, container는 min-height: 100%; 이기 때문에 부모의 height를 100% 상속받는다.)
하지만 padding-top:200px; 을 하면서 container의 크기가 200px 늘어나버려 1169px; 가 되어버린것.
그것을 해결하기 위해 box-sizing: border-box; 를 해준다.
이는 padding 값과 border 값도 포함하여 요소의 height를 지정해주는 속성값이다.
3. box-sizing: border-box;
결과적으로 아래와 같은 모양이 된다.
중요한 내용은 다 정리했으니까
끄읕..
'TEMP' 카테고리의 다른 글
| 윈도우10 자동 드라이버 업데이트 기능 끄기 (0) | 2018.08.01 |
|---|