<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<style>
html, body {width:100%;height:100%;margin:0;padding:0;}
body {position:relative;}
.box1 {position:absolute;top:50%; left:50%;margin-left:-505px;margin-top:-185px;}
</style>
</head>
<body>
<div class="box1">
<img src="./issue_exe.jpg">
</div>
</body>
</html>
DIV로 안내 페이지 만들기
안녕하세요.
고코더 입니다.
오늘은 DIV를 화면 가운데 중앙에 위치 하게
하는 방법을 알아보겠습니다.
● 1. 제가 만든 모니터 체크 사이트에서 사용한 HTML 입니다.
안내 페이지로 반응형으로 DIV를 화면 가운데로 노출하였습니다.
● 2. HTML을 웹에서 실행 해보세요.
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 26 27 28 29 30 31 32 33 34 35 36 | <html> <head> <style type="text/css"> .layer { position: absolute; text-align: center; width: 100%; height: 100%; top: 0; left: 0; font-size: 50px; } .layer .content { display: inline-block; vertical-align: middle } .layer .blank { display: inline-block; width: 0; height: 100%; vertical-align: middle } </style> </head> <body> <div class="layer"> <span class="content">div를 화면 가운데 놓기 gocoder.net</span> <span class="blank"></span> </div> </body> </html> | cs |
● 3. 결과 모습입니다.
간단한 안내 페이지로 활용할때 좋은 방법입니다.
마무리
사람들은 HTML 형식에서도
신뢰를 얻습니다.