<div> 태그 width:100%일 때 border 값 있을 경우 100% 초과해서 레이아웃이 깨지는 경우
div 태그에서 width:100%인 경우에 border값을 주게 되면 width가 100%를 넘어서면서 레이아웃이 깨져 문제가 생깁니다.
border 값을 주더라도 기존 100% 너비를 유지하려면 아래와 같이 CSS를 적용하시면 됩니다.
HTML
<div id="example1"></div>
CSS
#example1 {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
| 버튼(button) 디자인 CSS 예제 (0) | 2016.06.04 |
|---|
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 |
