키위노트

<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">