padding Property페이지 목차padding Propertypadding Property는 내용물(Content : 문단, 그림 등의 화면에 나타나는 Element 들)과 내용물을 담고 있는 상자(Container box)의 테두리(Border)사이의 거리를 지정하는 Property입니다. Layout 메뉴에 나오는 CSS Box model의 DHTML을 참고하면 되겠군요. 아래의 Value 값을 보면 <padding-width>{1,4} 로 표시된 부분이 있는데 {1,4}는 1개에서 4개의 값을 Space로 구분하여 필요한 만큼 사용하라는 표기입니다. 예제를 통해 자세히 알아 보겠습니다. [표 보는 방법]
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개만 사용하게 되면
이와 같이 bottom과 left는 padding 값을 지정 받지 못하면 마주보는 면의 padding 값이 지정되게 됩니다. 값을 3개만 사용한 경우
{ padding : 20px 30px 50px } /*top 20px, right 30px, bottom 50px left는 30px의 padding이 생긴다.*/
padding-top, padding-right, padding-bottom, padding-left Property 이 4개의 Property 들은 각 해당 면의 padding 값을 단독적으로 지정할 때 사용합니다. 아래의 표기에서 보는 바와 같이 1개의 padding 값을 사용합니다. 4갸 모두 사용법이 동일하므로 padding-top 하나 만을 예로 들겠습니다. [표 보는 방법]
CSS Scripting
onMouseOver="this.style.paddingTop='20px';"
HTML
{ padding-top : 20px; } /*Box 상단에 20px의 padding이 생긴다.*/
이 문서의 저작권은 www.cadvance.org 에 있습니다.
|
||||||||||||||||||||||||||||||||||||||||