Trio 홈페이지 CSS 매뉴얼 박스(box) 특성 예제 메뉴로
소개 일반 텍스트 폰트 박스 색상 목록 색인 예제
CSS2 규격 박스 참조 HTML 규격 표(table) 참조
space 박스(box)란 이미지, 도형, 글자들의 모음체를 말한다.
    p, table, ol, ul, img, input, textarea, select와 object 등이 포함 된다.
space border는 후레임 테두리를 말 함.
space padding은 후레임과 내용물과의 공백을 말 함.
    (HTML 규격 border, padding, margin 차잇점 설명 )
space margin은 떨어진 공백의 크기를 말 함.
space 먼저 공통사항을 기술하고 그후 특정 지정하면, 덮어씌우기를 하여 마지막 지정이 적용 된다.
아래 CSS1 설명은 스페이스 관계로 '규격'으로 연결시켰다.
space
margin-top: margin-bottom: margin-left: margin-right:
규격 규격 규격 규격
ul {margin-top: 0.5in;} ul {margin-bottom: 0.5in;} p {margin-left: 3em;} img {margin-right: 30px;}
margin:
공통
규격		 h1 {margin: 2ex;}
div {margin: 3px 4px 5px 6px } 위, 우, 하, 좌 시계방향으로 지정
  • 상하, 좌우 간격의 크기를 지정 한다. 음수가 허용되나 주의 하여야 한다.
  • 길이, 백분율, auto
    • space
    padding-top: padding-bottom: padding-left: padding-right:
    규격 규격 규격 규격
    ul {padding-top: 0.5in;} ul {padding-bottom: 0.5in;} p {padding-left: 3em;} img {padding-right: 30px;}
    padding:
    공통
    규격    		 h1 {padding: 2ex;}
    div {padding: 3px 4px 5px 6px } 위, 우, 하, 좌 시계방향으로 지정
  • 상하, 좌우 padding 두께를 지정 한다. 음수는 허용되지 않는다.
  • 길이, 백분율, auto
    		•
    space
    border-top-width: border-bottom-width: border-left-width: border-right-width:
    규격 규격 규격 규격
    ul {border-top-width: 0.5in;} ul {border-bottom-width: 0.5in;} p {border-left-width: 3em;} img {border-right-width: 30px;}
    border-width
    공통
    규격    		 h1 { border-width: 2px 3px }
    div {border-width: 3px 4px 5px 6px } 위, 우, 하, 좌 시계방향으로 지정
  • 상하, 좌우 border의 두께를 지정 한다. 음수는 허용되지 않는다.
  • thin, medium, thick, 길이
  • 자체적인 foreground 특성을 가질 수 있다.
    • space
    border-top: border-bottom: border-left: border-right:
    규격 규격 규격 규격
    ul {border-top: 0.5in solid black;} ul {border-bottom: 0.5in grooved green;} p {border-left: 3em solid gray;} img {border-right: 30px dotted blue;}
    border:
    공통
    규격    		 h1 {border: 2px;}
    a:visited { border: thin dotted #800080 }
  • 윗쪽 border의 두께(width), 색상(color) 및 특성(style)을 지정 한다.
  • 값은 border-top-width, border-style, color
    		•
    space
    border-color:

    규격
    		 border의 색상를 지정 한다.(색상표)
    color, rgb number
    사방의 length, style, color를 동일하게 만 지정된다.
    h1 {border-color: purple; border-style: solid;}
    div {border-color: ffffff red blue yellow }     위, 우, 하, 좌 시계방향으로 지정
    border-style:

    규격
    		 border의 특성을 지정 한다.
    none, dotted, dashed, solid, double, groove, ridge, inset, outset
    h1 {border-color: purple; border-style: solid;}
    space
    width:
    길이, 백분율, auto
    규격
    		 폭(width)를 지정한다. 음수는 허용되지 않는다.
    이미지 폭 지정에 많이 사용는데 다른 block 에서도 사용 된다.
    table {width: 80%;}
    height:
    길이, auto
    규격
    		 높이(height)를 지정한다.
    img.icon {height: 50px;}
    space
    float:
    left, right, none

    규격
    		 
    엘레멘트가 움직이는(float) 것을 지정한다.
  html에서 <align=left>와 같은 기능이다,
  일반적으로 텍스트 이미지에 사용하나
  다른 엘레멘드에도 사용 할 수 있다.
img {float: left;}
    clear:
    left, right, both, none
    규격
    		 
    html에서 <br clear=left/right/all/none>과 비슷
float 엘레멘트에서 작동 지정
h1 {clear: both;}
h1 {clear: left;} h1 문자는 left를 피해서 나타남
    space
    예제

<STYLE type="text/css">
.box1 { color:blue; background:#cfffff;  line-height:12pt;
  font-family: 굴림; font-size: 10pt; font-weight: bold; font-style: normal;
  margin-left: 20px;
  padding-top:1; padding-bottom:6; padding-left:11; padding-right:16;
  border-color: #aaffee #006600 #ff6600 #eeffaa; border-style:solid;
  border-top-width:16; border-bottom-width:12;
  border-left-width:8; border-right-width: 20;
}
</STYLE>

<table border=1 width=68% class=box1>
<tr><td>test of 텍스트</td>
<td>and 박스 together</td></tr>
<tr><td>밖은 border</td>
<td>안은 padding</td></tr>
</table>
    결과
    test of 텍스트and 박스 together
    밖은 border안은 padding
    소개 일반 텍스트 폰트 박스 색상 목록 색인 예제
    번역문 소유자 - Trio 홈페이지 제공
    이 문서(http://trio.co.kr/webrefer/css/cssbox.html)는
    자유로이 연결 사용이 가능함.
    		 예제 메뉴로