[etc] CSS 레이어(DIV) 제어하기
  
 작성자 :
작성일 : 2015-04-21     조회 : 1,041  

예제)
 
<html>
  <head><title>테두리</title>
  <style type="text/css">
  div {text-align:center;width:100px;height:100px;margin:10px;
      border-width:10px;border-color:Orange}
      </style>
  </head>
  <body>
    <div style="border-style:none;float:left">none</div> (float:left -레이어 정렬방식)
    <div style="border-style:solid;float:left">solid</div> 
    <div style="border-style:dotted;float:left">dotted</div>
    <div style="border-style:dashed;float:left">dashed</div>
    <div style="border-style:double;float:left">doubole</div>
    <div style="border-style:groove;float:left">groove</div>
    <div style="border-style:ridge;float:left">ridge</div>
    <div style="border-style:inset;float:left">inset</div>
    <div style="border-style:outset;float:left">outset</div>
  </body>
</html>
 
 
- Tip -
margin :  border밖의 여백
padding : border안의 여백
 
margin 속성
margin - 모든 방향의 여백을 지정
margin-top - 위쪽의 여백 지정
margin-bottom - 아래쪽 여백 지정
margin-left - 왼쪽여백 지정
margin-right - 오른쪽여백 지정
 
 
padding 속성
padding-top - 위쪽의 여백 지정
padding-bottom - 아래쪽 여백 지정
padding-left - 왼쪽여백 지정
padding-right - 오른쪽여백 지정