HTML <div>태그를 웹브라우저 화면 중간에 정렬하는 간단한 소스입니다.
1. CSS 지정
#wrap{
margin:0 auto;
}
2. DIV 태그
<div id="wrap" style="width:1000px;">내용</div>
margin:0 auto;를 사용하여 자동으로 화면 가운데에 위치하도록 지정할 수 있습니다.
주의할 점은 <div> 태그의 가로폭을 반드시 지정해주어야 합니다. 가로폭은 CSS또는 div태그에서 직접 지정하시면 됩니다.
| <div> 태그 height 100% 적용하기 (0) | 2016.01.19 |
|---|---|
| [HTML] 모바일웹 명함 기본 HTML 소스 (0) | 2016.01.09 |
<div> 태그 높이를 100% 적용 (height="100%")하는 예제입니다. 100%로 적용하면 웹브라우저 화면 세로로 높이가 100%로 적용됩니다.
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div id="container_div"></div>
</body>
</html>
style.css
HTML {
height: 100%;
}
BODY {
height: 100%;
}
#container_div {
height:100%
}
설명:
style.css 파일에서 div 태그의 id 높이를 100%로 지정합니다.
HTML과 BODY 태그의 높이도 100%로 함께 지정해야 적용됩니다.
| div 태그 화면 중간에 정렬시키는 간단한 소스 (0) | 2016.05.18 |
|---|---|
| [HTML] 모바일웹 명함 기본 HTML 소스 (0) | 2016.01.09 |
모바일웹 명함을 제작할 때 사용할 수 있는 가장 기본적인 HTML 예제 소스입니다.
아래 소스코드에서는 <a> 태그로 전화걸기, SMS보내기 기능을 사용할 수 있습니다.
<html>
<head>
<title>ooo 모바일 명함</title>
<style type="text/css">
img{width:100%;}
</style>
</head>
<body>
<div><img src="./이미지파일명1.png" border="0"></div>
<div><img src="./이미지파일명2.png" border="0"></div>
<div><a href="tel:010-7777-8888"><img src="./전화기이미지.png" border="0"></a></div>
<div><a href="sms:010-7777-8888"><img src="./sms이미지.png" border="0"></a></div>
</body>
</html>
홈페이지 링크, 지도 서비스 api 연동, 카카오톡 연동 등 모바일웹 명함에서는 다양한 기능을 함께 사용할 수 있습니다.
| div 태그 화면 중간에 정렬시키는 간단한 소스 (0) | 2016.05.18 |
|---|---|
| <div> 태그 height 100% 적용하기 (0) | 2016.01.19 |
