키위노트

<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 예제

<style type="text/css">

.button1 

{

background: #5BB6FF;

border: none;

border-radius: 3px;

color: #ffffff;

display: block;

width: 100px;

height: 30px;

font: 13px "Gulim", "Dotum", Georgia, "Times New Roman", Times, serif;

margin: 0 0 0 0; 

padding: 1px 1px 1px 1px;

text-shadow: 0px 0px 0px 0px #e7e7e7; 

}

</STYLE>

<input type="button" value="버튼" class="button1">

HTML <div>태그를 웹브라우저 화면 중간에 정렬하는 간단한 소스입니다.

1. CSS 지정

#wrap{ 

margin:0 auto;

}

2. DIV 태그 

<div id="wrap" style="width:1000px;">내용</div>

margin:0 auto;를 사용하여 자동으로 화면 가운데에 위치하도록 지정할 수 있습니다.

주의할 점은 <div> 태그의 가로폭을 반드시 지정해주어야 합니다. 가로폭은 CSS또는 div태그에서 직접 지정하시면 됩니다.