댓글 목록

CSS 여백(padding)

페이지 정보

작성자 운영자 작성일 17-10-29 16:59 조회 1,589 댓글 0

동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.

동영상 강좌보기

 


CSS padding(여백)

CSS padding속성은 요소의 테두리 안쪽 여백을 정의합니다.

CSS를 사용하면 padding을 완벽하게 제어할 수 있습니다. 요소의 각면(위, 아래, 왼쪽, 오른쪽)에 대한 여백 설정을 위한 속성이 있습니다.


padding - 개별 속성

CSS에는 요소의 각 면에 대한 padding 지정을 위한 속성이 있습니다.

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left


모든 padding속성은 다음 값을 가질 수 있습니다.

  • length - px, pt, cm등의 단위로 값을 가질 수 있습니다.
  • % - 요소의 너비에 대한 padding을 %로 지정합니다.
  • inherit - padding은 부모 요소로부터 상속합니다.

** 음수값은 허용되지 않습니다.


다음 예는 <div>요소의 네 면에 다른 padding을 설정합니다.

div {
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
}

padding - 속기 속성

코드를 단축하기 위해 모든 padding속성을 하나의 속성에 지정할 수 있습니다.

padding속성은 다음과 같은 개별 padding속성에 대한 속기 속성입니다.

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left


작동하는 방법은 다음과 같습니다.


padding속성의 값이 네 개인 경우

padding : 25px 50px 75px 100px;

  • top-padding : 25px
  • right-padding : 50px
  • bottom-padding : 75px
  • left-padding : 100px
div {
    padding: 25px 50px 75px 100px;
}

padding속성값이 세 개인 경우

padding : 25px 50px 75px;

  • top-padding : 25px
  • right and left-padding : 50px
  • bottom-padding : 75px
div {
    padding: 25px 50px 75px;
}

padding속성값이 두 개인 경우

padding : 25px 50px;

  • top and bottom-padding : 25px
  • right and left-padding : 50px
div {
    padding: 25px 50px;
}

padding속성값이 한 개인 경우

padding : 25px;

top and right and bottom and left-padding : 25px

div {
    padding: 25px;
}

padding 및 요소 너비

CSS width속성은 요소의 내용 영역의 너비를 지정합니다. 내용 영역은 요소의 안쪽 여백, 테두리, 바깥쪽 여백을 포함합니다.(상자모델)


다음 예제에서 <div>요소의 폭은 300px입니다. 그러나 <div>요소의 실제 랜더링된 너비는 350px(300px + 25px왼쪽여백 + 25px오른쪽여백)입니다.

div {
    width: 300px;
    padding: 25px;
}

너비를 padding값과 관계없이 300픽셀로 유지하려면 box-sizing속성을 사용할 수 있습니다.

이 속성을 사용하면 요소는 폭을 유지할 수 있습니다. padding을 늘리면 컨텐츠 공간이 상대적으로 줄어듭니다. 다음은 그 예입니다.

div {
    width: 300px;
    padding: 25px;
    box-sizing: border-box;
}


댓글목록 0

등록된 댓글이 없습니다.

CSS Flexbox강좌

CSS Variables강좌 

CSS Grid강좌