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 |
gocoder_div_center.html● 3. 결과 모습입니다.
간단한 안내 페이지로 활용할때 좋은 방법입니다.
마무리
사람들은 HTML 형식에서도
신뢰를 얻습니다.
'IT_Developers > HTML' 카테고리의 다른 글
| HTML - required 필수 항목 값을 확인해주는 속성 (1) | 2019.08.01 |
|---|---|
| HTML - style 태그를 두번 선언하면 어떻게 될까? (4) | 2019.07.04 |
| CSS - Font Awesome 버전별 아이콘 확인하기 (1) | 2019.06.11 |
| HTML - image maps 이미지맵 만들기 사이트 / image-maps.com (0) | 2019.03.24 |
| 폰트- kopubdotum.css CDN URL 오류 (1) | 2019.03.21 |
댓글