padding Property


Home > Document > CSS > Layout > padding

페이지 목차



padding Property

padding Property는 내용물(Content : 문단, 그림 등의 화면에 나타나는 Element 들)과 내용물을 담고 있는 상자(Container box)의 테두리(Border)사이의 거리를 지정하는 Property입니다. Layout 메뉴에 나오는 CSS Box model의 DHTML을 참고하면 되겠군요. 아래의 Value 값을 보면 <padding-width>{1,4} 로 표시된 부분이 있는데 {1,4}는 1개에서 4개의 값을 Space로 구분하여 필요한 만큼 사용하라는 표기입니다. 예제를 통해 자세히 알아 보겠습니다.

  [표 보는 방법]
padding Property
Value <padding-width>{1,4} ( 길이단위 참조) | Inherit
Initial not defined for shorthand properties (단축형 Property에는 없음)
Applies to all elements
Inherited no
Percentages refer to width of containing block (Container box의 크기에 좌우됨)
Media Visual
HTML Syntax { padding: sPadding }
Scripting object.style.padding [ = sPadding ]




CSS Scripting
onMouseOver="this.style.padding='20px';"   onMouseOut="this.style.padding='5%';"


예제를 하기 위해서 우선 아래와 같이 height:200px, width:200px 의 DIV Box(Container box) 속에 height:100px, width:100px 의 DIV Box(내용물)가 들어가도록 Coding합니다.

입력
<HTML>
    <HEAD>
        <TITLE>padding 예제를 위한 준비</TITLE>
    </HEAD>
    <BODY>
        <DIV style="width:200px; height:200px; background-color:tomato;">
            <DIV style="width:100px; height:100px; background-color:gold;"></DIV>
        </DIV>    
    </BODY>
</HTML>


출력결과

위의 실행 결과는 padding을 지정하지 않았기 때문에 100px × 100px 의 DIV Box가 200px × 200px의 Box에 틈 없이 붙어 있습니다. DIV Box 의 경우 이렇게 padding을 지정하지 않으면 기본 적인 정렬은 left, top이 됩니다. 우선 전체적으로 padding 20px를 주면 어떻게 되는지 보도록 하져...

입력
<HTML>
    <HEAD>
        <TITLE>padding:20px</TITLE>
    </HEAD>
    <BODY>
      <DIV style="width:200px; height:200px; background-color:tomato; padding:20px;">
          <DIV style="width:100px; height:100px; background-color:gold;"></DIV>
      </DIV>    
    </BODY>
</HTML>


출력결과

위와 같이 좌측 20px, 상단 20px 의 padding이 생긴 것으로 나타나지만 실제로는 아래와 같이 200px X 200px Box의 안쪽의 4면(top, right, bottom, left)에 위에서 지정한 20px의 padding이 생겨 있습니다.

출력결과




Box 4면에 각각 다른 padding 값 지정하기

padding의 padding-top, padding-right, padding-bottom, padding-left 의 4가지 Property의 단축형으로서 한 번에 4면에 각각의 Padding 값을 지정하는 Properyt입니다. 지정하는 순서는 top, right, bottom, left 의 순서로 하면 되겠습니다.

top:20px, right:30px, bottom:40px, left:50px 의 예
{ padding : 20px 30px 40px 50px } /*값과 값 사이를 space로 구분한다.*/


값을 2개만 사용한 경우
{ padding : 20% 50% } /*top, bottom 은 20%, right,left는 50%의 padding이 생긴다.*/

앞에서 <padding-width>{1,4}라는 표기가 Box 4면의 padding값을 지정할 때 1 ~ 4개의 값을 사용 할 수 있다는 표기하로 했는데, 위의 경우와 같이 값을 2개만 사용하게 되면

  1. 첫 번째 값인 20% 가 top에 지정된다.
  2. 두 번째 값인 50% 가 right에 지정된다.
  3. bottom의 padding 값은 마주보는 면인 top의 20%가 지정된다.
  4. left의 padding 값은 마주보는 면인 right의 50%가 지정된다.

이와 같이 bottom과 left는 padding 값을 지정 받지 못하면 마주보는 면의 padding 값이 지정되게 됩니다.

값을 3개만 사용한 경우
{ padding : 20px 30px 50px } /*top 20px, right 30px, bottom 50px left는 30px의 padding이 생긴다.*/
  1. 첫 번째 값인 20px 가 top에 지정된다.
  2. 두 번째 값인 30px 가 right에 지정된다.
  3. 세 번째 값인 50px 가 bottom에 지정된다.
  4. left의 padding 값은 마주보는 면인 right의 30px가 지정된다.


padding-top, padding-right, padding-bottom, padding-left Property

이 4개의 Property 들은 각 해당 면의 padding 값을 단독적으로 지정할 때 사용합니다. 아래의 표기에서 보는 바와 같이 1개의 padding 값을 사용합니다. 4갸 모두 사용법이 동일하므로 padding-top 하나 만을 예로 들겠습니다.

  [표 보는 방법]
padding-top, padding-right, padding-bottom, padding-left Property
Value <padding-width> ( 길이단위 참조) | Inherit
Initial 0
Applies to all elements
Inherited no
Percentages refer to width of containing block
Media Visual
HTML Syntax { padding: sPadding }
Scripting object.style.paddingTop(Right, Bottom, Left) [ = sPadding ]




CSS Scripting
onMouseOver="this.style.paddingTop='20px';"


HTML
{ padding-top : 20px; } /*Box 상단에 20px의 padding이 생긴다.*/





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

Top
Back
New
검색