고정 <header>, <footer> 만들기
1. 구현
1) body
body{ margin-top : 120px; margin-bottom:120px; }
- body의 위, 아래의 margin 값으로 header와 footer를 고정 시킬 여백의 공간을 만든다
2) <header>
header{ border : 4px solid brown; position : fixed; left : 0; top : 0; width: 100%; height:100px; background-color: antiquewhite; z-index: 4; }
- position: fixed로 고정한다
- z-index : 속성으로 태그들 가장 앞에 배치 하도록 한다.(제대로 동작 안 할 시 추가)
3) <footer>
footer{ border : 4px solid brown; position : fixed; left:0; bottom : 0; width: 100%; height:100px; background-color:antiquewhite; }
4) fullSource
<!DOCTYPE html><head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin-top : 120px; margin-bottom:120px; } footer{ border : 4px solid brown; position : fixed; left:0; bottom : 0; width: 100%; height:100px; background-color:antiquewhite; } header{ border : 4px solid brown; position : fixed; left : 0; top : 0; width: 100%; height:100px; background-color: antiquewhite; z-index: 4; } </style></head><header> This is a header</header><footer> This is a footer</footer>
5) 화면
'Front-End > HTML5 + CSS' 카테고리의 다른 글
| [CSS] Height 100% 하는법 (0) | 2016.12.13 |
|---|---|
| [CSS] 3단 레이아웃 (float, display) (0) | 2016.12.11 |
| [CSS] Inline vs Block vs Inline-block 속성 (0) | 2016.12.11 |
| [CSS3] CSS3 사용자 인터페이스 (0) | 2016.12.11 |
| [CSS3] CSS3 애니메이션 속도 제어 (0) | 2016.12.11 |
리딩리드