웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
엘리먼트 내부에 공간(간격)을 만들기 위해서 CSS의 padding 프로퍼티를 사용할 수 있습니다. padding은 설정된 값만큼 빈 공간을 만들어줍니다.
padding: 100px;
이때 값으로는 px, pt, em, %등 여러 값을 사용할 수 있습니다. 아래는 padding을 사용하는 자세한 방법입니다.
# padding 프로퍼티 사용방법
padding에 값을 설정할 경우 하나의 값을 설정하거나 상하좌우 다른 값을 설정할 수 있습니다. 아래는 Top, bottom, left, right 각각 20px의 값을 주는 경우입니다.
@ Top, right, bottom, left 각각 20px 내부 공간
위 두 값은 모두 동일하게 적용되어 20px 만큼 상하좌우 공간이 생기게 됩니다. 물론 각각 다른 값을 설정할 수도 있겠죠.
@ Top, right, bottom, left 각각 50px, 10px, 0, 20px 내부 공간
! padding 축약 프로퍼티 사용하기
margin처럼 padding 역시 상하좌우 중 하나만 선택하여 프로퍼티를 설정하는 축약 프로퍼티가 존재합니다. 아래를 봐주세요.
위 프로퍼티를 사용하면 각각 하나의 방향으로만 설정하는 것이 가능하죠. 만약 아래에만 30px 만큼 공간을 주고 싶다면?
# padding 프로퍼티 예제보기
아래는 padding 프로퍼티를 적용한 다양한 예제소스입니다. 어떻게 사용할 수 있는지 알아보세요.
위 요소에 각각의 다른 padding을 준 css를 적용해보겠습니다.
테스트를 위해서 테두리와 배경값을 설정했습니다.
위 예제 코드를 실행하면 아래와 같이 적용되어 나타나게됩니다. 아래에서 구현된 모습을 확인해보세요.
padding: 100px;
이때 값으로는 px, pt, em, %등 여러 값을 사용할 수 있습니다. 아래는 padding을 사용하는 자세한 방법입니다.
# padding 프로퍼티 사용방법
padding에 값을 설정할 경우 하나의 값을 설정하거나 상하좌우 다른 값을 설정할 수 있습니다. 아래는 Top, bottom, left, right 각각 20px의 값을 주는 경우입니다.@ Top, right, bottom, left 각각 20px 내부 공간
padding: 20px;
padding: 20px 20px 20px 20px;
padding: 20px 20px 20px 20px;
위 두 값은 모두 동일하게 적용되어 20px 만큼 상하좌우 공간이 생기게 됩니다. 물론 각각 다른 값을 설정할 수도 있겠죠.
@ Top, right, bottom, left 각각 50px, 10px, 0, 20px 내부 공간
padding: 50px 10px 0 20px;
! padding 축약 프로퍼티 사용하기
margin처럼 padding 역시 상하좌우 중 하나만 선택하여 프로퍼티를 설정하는 축약 프로퍼티가 존재합니다. 아래를 봐주세요.- padding-top
- padding-right
- padding-bottom
- padding-left
위 프로퍼티를 사용하면 각각 하나의 방향으로만 설정하는 것이 가능하죠. 만약 아래에만 30px 만큼 공간을 주고 싶다면?
div { padding-bottom: 30px; }
# padding 프로퍼티 예제보기
아래는 padding 프로퍼티를 적용한 다양한 예제소스입니다. 어떻게 사용할 수 있는지 알아보세요.<div class="test1 blocked">TEST 1</div>
<div class="test2 blocked">TEST 2</div>
<div class="test3 blocked">TEST 3</div>
<div class="test4 blocked">TEST 4</div>
<div class="test5 blocked">TEST 5</div>
<div class="test2 blocked">TEST 2</div>
<div class="test3 blocked">TEST 3</div>
<div class="test4 blocked">TEST 4</div>
<div class="test5 blocked">TEST 5</div>
위 요소에 각각의 다른 padding을 준 css를 적용해보겠습니다.
.test1 { padding: 50px; }
.test2 { padding: 10px 30px; }
.test3 { padding: 0 0 0 50px; }
.test4 { padding: 10px 0 20px; }
.test5 { padding: 0 0 10px 20px; }
.test2 { padding: 10px 30px; }
.test3 { padding: 0 0 0 50px; }
.test4 { padding: 10px 0 20px; }
.test5 { padding: 0 0 10px 20px; }
테스트를 위해서 테두리와 배경값을 설정했습니다.
.blocked {
display: inline-block;
border: 1px solid blue;
background: #eee;
text-align: center;
margin: 10px;
}
display: inline-block;
border: 1px solid blue;
background: #eee;
text-align: center;
margin: 10px;
}
위 예제 코드를 실행하면 아래와 같이 적용되어 나타나게됩니다. 아래에서 구현된 모습을 확인해보세요.
아래의 글도 찾고 계시지 않나요?
