728x90
1. 퍼센트(%) 사용하기
- body에 height 100%, 직계 자식요소의 width, height 값 100% 적용하기
■ 예시1
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>레이아웃2</title> <style type="text/css"> *{margin:0; padding: 0;} html, body{height: 100%;} .box{width: 100%; height: 100%; background-color: #00f;} .box1{width: 100%; height: 100%; background-color: #0f0;;} </style> </head> <body> <div class="box"></div> <div class="box1"></div> </body> </html> |
■ 실행결과1
※ 스크롤을 내려 확인해보세요. 각각의 div상자가 페이지 전체를 차지하고 있는 형태입니다.
2. 포지션(position) 사용하기
■ 예시2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>레이아웃2</title> <style type="text/css"> *{margin:0; padding: 0;} .box{position: absolute; top:0; bottom:0; left:0; right:0; background-color: #f0f;} </style> </head> <body> <div class="box">100% full page</div> </body> </html> |
■ 실행결과2
3. 배경이미지를 넣은 full-page
※ w3school에 있는 예시를 한 번 보겠습니다.
■ 예시3
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body, html { height: 100%; margin: 0; } .bg { /* The image used */ background-image: url("img_girl.jpg"); /* Full height */ height: 100%; /* Center and scale the image nicely */ background-position: center; background-repeat: no-repeat; background-size: cover; } </style> </head> <body> <div class="bg"></div> </body> </html> |
■ 실행결과3
※ 실행결과3처럼 배경이미지가 화면 전체를 차지하는 모습입니다. 위 결과 실행 데모페이지를 보려면 여기를 클릭하세요^^ (데모페이지로 이동합니다.)
※ 오늘은 예쁜 메인 화면으로 활용하기 좋은 full-page에 대해서 알아봤습니다. 더많은 예제를 보려면,
W3SCHOOL을 참고하세요^^
반응형