패딩은 정의된 테두리 안에서 요소의 내용 주위에 공간을 만드는 데 사용된다.
CSS padding 속성
CSS padding 속성은 정의된 경계 내에서 요소의 내용 주위에 공간을 생성하는 데 사용된다.
CSS를 사용하면 패딩을 완전히 제어할 수 있다. 요소의 각 측면(위, 오른쪽, 아래 및 왼쪽)에 패딩을 설정하는 속성이 있다.
CSS padding 개별 측면
CSS는 요소의 각 변에 대한 패딩을 지정하는 속성을 가지고 있다:
- padding-top
- padding-right
- padding-bottom
- padding-left
모든 패딩 속성의 값은 다음과 같다:
- length - 패딩을 px, pt, cm 등으로 지정합니다.
- % - 포함 요소 너비의 % 단위로 패딩을 지정합니다
- inherit - 패딩이 상위 요소에서 상속되어야 함을 지정합니다
참고: 음수 값은 허용되지 않는다.
<div> 요소의 네 변 모두에 대해 서로 다른 패딩을 설정한다:
| <!DOCTYPE html> <html> <head> <style> div { border: 1px solid black; background-color: lightblue; padding-top: 50px; padding-right: 30px; padding-bottom: 50px; padding-left: 80px; } </style> </head> <body> <h2>개별 패딩 속성 사용</h2> <div>이 div 요소에는 위쪽 패딩 50px, 오른쪽 패딩 30px, 아래쪽 패딩 50px, 왼쪽 패딩 80px가 있습니다.</div> </body> </html> |
위의 코드에서 패딩을 설정하였다.
위쪽에는 50px, 오른쪽에는 30px, 아래쪽에는 50px, 왼쪽에는 80px를 설정하였고, 결과 화면은 아래 그림과 같다.
CSS padding 단축 속성
코드를 줄이면 하나의 속성에 모든 패딩 속성을 지정할 수 있다.
padding 속성은 다음과 같은 개별 패딩 속성에 대한 단축 속성이다:
- padding-top
- padding-right
- padding-bottom
- padding-left
패딩 속성의 값이 4개인 경우:
| padding: 25px 50px 75px 100px |
| 위쪽 패딩은 25px 오른쪽 패딩은 50px 아래쪽 패딩은 75px 왼쪽 패딩은 100px |
단축 padding 속성으로 표현하면 아래 표와 같다.
| div { padding: 25px 50px 75px 100px; } |
순서대로 위쪽 25px, 오른쪽 50px, 아래쪽 75px, 왼쪽 100px 패딩이 설정한다.
| <!DOCTYPE html> <html> <head> <style> div { border: 1px solid black; padding: 25px 50px 75px 100px; background-color: lightblue; } </style> </head> <body> <h2>패딩 단축 속성 - 4개 값</h2> <div>이 div 요소는 위쪽 패딩 25px, 오른쪽 패딩 50px, 아래쪽 패딩 75px, 왼쪽 패딩 100px입니다.</div> </body> </html> |
위의 코드를 실행한 결과 화면은 아래 그림과 같다.
단축 패딩 속성에 3개의 값이 설정된 경우,
| <!DOCTYPE html> <html> <head> <style> div { border: 1px solid black; padding: 25px 50px 75px; background-color: lightblue; } </style> </head> <body> <h2>패딩 단축 속성 -3개 값</h2> <div>이 div 요소는 상단 패딩 25px, 좌우 패딩 50px, 하단 패딩 75px입니다.</div> </body> </html> |
위의 패딩은 상단 패딩 25px, 좌우 패딩 50px, 하단 패딩 75px이며 결과 화면은 아래 그림과 같다.
단축 패딩 속성에 2개의 값이 설정된 경우,
| <!DOCTYPE html> <html> <head> <style> div { border: 1px solid black; padding: 25px 50px; background-color: lightblue; } </style> </head> <body> <h2>패딩 단축 속성 -2개 값</h2> <div>이 div 요소의 상하 패딩은 25px이고 좌우 패딩은 50px입니다.</div> </body> </html> |
위의 코드를 실행한 결과 화면은 아래 그림과 같다.
단축 패딩 속성에 1개의 값이 설정된 경우,
| <!DOCTYPE html> <html> <head> <style> div { border: 1px solid black; padding: 25px; background-color: lightblue; } </style> </head> <body> <h2>패딩 단축 속성 -1개 값</h2> <div>이 div 요소의 상하좌우 패딩은 25px입니다.</div> </body> </html> |
위의 코드를 실행하며 상하좌우 모두 25px 패딩을 설정한 코드이며 결과는 아래 그림과 같다.
CSS 패딩과 요소 너비(Padding and Element Width)
CSS width 속성은 요소의 내용 영역 너비를 지정한다. 내용 영역은 요소(상자 모델)의 패딩, 테두리 및 여백 내부 부분이다.
따라서 요소의 너비가 지정된 경우 해당 요소에 추가된 패딩이 요소의 전체 너비에 추가된다. 이는 종종 바람직하지 않은 결과이다.
여기서 <div> 요소의 폭은 300px입니다. 그러나 <div> 요소의 실제 너비는 350px(300px + 왼쪽 패딩 25px + 오른쪽 패딩 25px)입니다:
| div { width: 300px; padding: 25px; } |
이에 대한 예제 코드는 아래 표와 같다.
| <!DOCTYPE html> <html> <head> <style> div.ex1 { width: 300px; background-color: yellow; } div.ex2 { width: 300px; padding: 25px; background-color: lightblue; } </style> </head> <body> <h2>패딩과 요소 너비</h2> <div class="ex1">이 div는 폭이 300px입니다.</div> <br> <div class="ex2">이 div의 너비는 350px이지만 CSS에서는 300px로 정의됩니다.</div> </body> </html> |
div.ex1의 너비는 300px이고 div.ex2너비는 350px이지만 300px로 정의된다. 이에 대한 결과 화면은 아래 그림과 같다.
너비를 300px로 유지하려면 패딩의 양에 관계없이 박스 크기 속성을 사용할 수 있다. 이렇게 하면 요소가 실제 너비를 유지한다. 패딩을 늘리면 사용 가능한 콘텐츠 공간이 줄어든다.
이상과 같이 패딩에 대해 간략히 살펴보았다.
반드시 예제 실습을 손으로 눈으로 머리로 꼭 실습하며 익히기 바랍니다.
모두 화이팅입니다.!!!
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
'HTML > CSS문법' 카테고리의 다른 글
| CSS box model (0) | 2023.07.22 |
|---|---|
| CSS height, width, max-width 속성 (0) | 2023.07.21 |
| CSS 여백 축소(CSS margin collapse) (0) | 2023.07.19 |
| CSS 여백(margin) (0) | 2023.07.18 |
| CSS 둥근 테두리 (0) | 2023.07.17 |
댓글