border 관련 Property


Home > Document > CSS > Layout > border

페이지 목차

border란 Inline이나 block을 막론하고 브라우저 창에 보여지는 Element들의 4각형 테두리를 말하며 border의 모양을 지정하는 border-style Property, border의 두께를 지정하는 border-width Property, border의 색상을 지정하는 border-color Property의 3가지 요소가 있습니다. 이 중에서 border-style 은 초기값이 none이기 때문에 생략하면 border가 나타나지 않습니다.




border-style Property

border-style Property는 border 형태를 지정하는 Property로서 초기값은 none으로 표시가 되지 않습니다. <border-style>{1,4}라는 표기를 보면 top, right, bottom, left 의 각면에 다른 border-style을 지정할 수 있습니다.

  [표 보는 방법]
border-style Property
Value <border-style>{1,4} | Inherit
Initial see individual properties
Applies to all elements
Inherited no
Percentages N/A
Media Visual
HTML Syntax { border-style: sStyle }
Scripting object.style.borderStyle [ = sStyle ]


CSS Scripting
onMouseOver="this.style.borderStyle='solid';"


border-style

border-style에는 초기값인 none과 solid, dotted, dashed, inset, outset, ridge, groove 가 있습니다. 아래의 DHTML을 참조.

border-style의 종류





Border Style
 
none solid dotted dashed inset outset ridge groove
tomato palegreen royalblue gold orange gray silver black





border-top-style, border-right-style, border-bottom-style, border-left-style Property

border-top(right, bottom, left)-style Property 는 top, right, bottom, left 의 각 4면에 해당 border의 style을 지정하는 Property입니다. 4가지 Property 가 사용법이 같으므로 border-top-style에 대해서만 설명하기로 하져.

  [표 보는 방법]
border-top-style, border-right-style, border-bottom-style, border-left-style Property
Value <border-top(right, bottom, left)-style> | Inherit
Initial none
Applies to all elements
Inherited no
Percentages N/A
Media Visual
HTML Syntax { border-top(right, bottom, left)-style: sStyle }
Scripting object.style.borderTop(Right, Bottom, Left)Style [ = sStyle ]


CSS Scripting
onMouseOver="this.style.borderTopStyle='dotted';"


HTML
{ border-top-style : groove; } /*상단 border를 groove로 지정한다.*/





border-width Property

border-width Property 는 border의 두께를 지정하는 Property로서 길이 단위와 Keyword 를 사용할 수 있습니다. 길이 단위는 여기를 참조하고, keyword는 thin(2px), medium(4px), thick(6px) 을 사용하며 Percentage(백분률)은 사용할 수 없습니다. 순서는 역시 top, right, bottom, left 순으로 width를 지정합니다.

  [표 보는 방법]
border-width Property
Value <border-width>{1,4} | thin | medium | thick | Inherit
Initial see individual properties
Applies to all elements
Inherited no
Percentages N/A
Media Visual
HTML Syntax { border-width: sWidth }
Scripting object.style.borderWidth [ = sWidth ]


CSS Scripting
onMouseOver="this.style.borderWidth='3px';"


HTML
{ border-width : 5px; }





border-top-width, border-right-width, border-bottom-width, border-left-width Property

이 Property 들은 border 4면에 각각에 대한 두께를 따로 지정하는 Property border-top-width Property 를 예를 들겠습니다.

  [표 보는 방법]
border-top-width, border-right-width, border-bottom-width, border-left-width Property
Value <border-top(right, bottom, left)-width> | Inherit
Initial medium
Applies to all elements
Inherited no
Percentages N/A
Media Visual
HTML Syntax { border-top(right, bottom, left)-width: sWidth }
Scripting object.style.borderTop(Right, Bottom, Left)Width [ = sWidth ]


CSS Scripting
onMouseOver="this.style.borderTopWidth='thin';"


HTML
{ border-top-width : thick; }





border-color Property

border-color Property는 border 의 색상을 지정하는 Property로서 색상에 대한 설명은 여기를 참조하는 것과 아래의 표로 설명을 대신기로 하져...^^

  [표 보는 방법]
border-color Property
Value <color >{1,4} | transparent | Inherit
Initial transparent
Applies to all elements
Inherited no
Percentages N/A
Media Visual
HTML Syntax { border-color: sColor }
Scripting object.style.borderColor [ = sColor ]


CSS Scripting
onMouseOver="this.style.borderColor='#336699';"


HTML
{ border-color : #336699; }





border-top-color, border-right-color, border-bottom-color, border-left-color Property

border-top(right, bottom, left)-color Property는 Box 의 각 4면에 해당 값을 따로 지정할 때 사용하는 Property입니다. 지면 관계상 역시 border-top-color Property 에 대해서만 예를 들겠습니다.

  [표 보는 방법]
border-top-color, border-right-color, border-bottom-color, border-left-color Property
Value <color> | transparent | Inherit
Initial transparent
Applies to all elements
Inherited no
Percentages N/A
Media Visual
HTML Syntax { border-top(right, bottom, left)-color: sColor }
Scripting object.style.borderTop(Right, Bottom, Left)Color [ = sColor ]


CSS Scripting
onMouseOver="this.style.borderTopColor='#336699';"


HTML
{ border-top-color : #336699; }





border Property

border Property는 border-style, border-width, border-color를 한꺼번에 지정하는 단축형(Shorthand) Property입니다. 사용되는 값에는 border-width, border-style, border-color 의 3가지 를 사용하며,

  [표 보는 방법]
border Property
Value [ <'border-width'> || <'border-style'> || <color > ] | Inherit
Initial see individual properties
Applies to all elements
Inherited no
Percentages N/A
Media Visual
HTML Syntax { border: sBorder }
Scripting object.style.border [ = sBorder ]


CSS Scripting
onMouseOver="this.style.border='1px solid #336699';"

onMouseOver="this.style.border='thin solid red';"


HTML
{ border : 1px solid #336699; }





border-top, border-right, border-bottom, border-left Property

이 Property들은 top, right, bottom, left 의 각 4면의 테두리의 border-style, border-width, border-color를 지정하는 단축형 Property입니다. 역시 border-top을 예로 들겠습니다.

  [표 보는 방법]
border-top, border-right, border-bottom, border-left Property
Value [ <'border-top(right, bottom, left)-width'> || <'border-top(right, bottom, left)-style'> || <color> ] | Inherit
Initial see individual properties
Applies to all elements
Inherited no
Percentages N/A
Media Visual
HTML Syntax { border-top(right, bottom, left): sBorder }
Scripting object.style.borderTop(Right, Bottom, Left) [ = sBorder ]


CSS Scripting
onMouseOver="this.style.borderTop='1px solid #336699';"

onMouseOver="this.style.borderTop='thin solid red';"


HTML
{ border-top : 1px solid #336699; }






border관련 종합 DHTML

아래는 border-style, border-width, border-color 의 값을 를 바꿔 볼 수 있는, 즉 border 에 대한 종합 Sample이 되겠네요. 이 중에서 double의 경우 solid 형태의 선을 2겹으로 나타내기 때문에 3pixel 이상 부터 보이고, ridge, groove, inset, outset 등도 4pixel 이상에서 부터 잘 보입니다.

border 관련 종합 선물 세트



Type selector로 border를 지정할 경우
아래와 같이 지정합니다.

DIV { border: thin solid blue }



Drop down box에서 각각 다른 값을 선택해 보세요.







border-style을 이용한 우표 효과

사실 Web design 이라는게 HTML Element나 CSS Property 를 안다고 저절로 되어지는 것은 아니져. 많이 다루어 보고, 나름대로 생각도 많이 하다 보면 기대치 않았던 의외의 소득을 얻을 수도 있으니까요. 다음은 border-style을 dotted, border-width를 2px 로 Box의 테두리에 지정하고 DIV Box의 배경색가 같은 색상을 지정합니다. 그리고 cell의 배경색을 다른 색으로 지정해 주면 마치 우표의 테두리같은 모양을 얻을 수 있습니다.

입력
<HTML>
    <HEAD>
        <TITLE>dotted border-style을 이용한 우표효과</TITLE>
    <STYLE type="text/css">
    <!-- 
    TABLE.seal {background-color:tomato;}
    TD.cell {vertical-align:middle; height:150}
    DIV.box {width:50px; height:70px; border:2px dotted #EFEFEF; 
    background-color:#EFEFEF;}
    -->
    </STYLE>
    </HEAD>
    <BODY>
      <table class="seal" border="1" cellpadding="0" cellspacing="0" width="100%">
          <tr align="center">
              <td class="cell"><DIV class="box"></DIV></td>
              <td class="cell"><DIV class="box"></DIV></td>
          </tr>
      </table>
    </BODY>
</HTML>

출력결과





이 문서의 저작권은 www.cadvance.org 에 있습니다.

Top
Back
New
검색