패딩

Coddy HTML 여정의 Styling with CSS 섹션에 포함된 레슨 — 76개 중 34번째.

CSS에서 padding은 요소의 콘텐츠와 테두리(border) 사이의 공간입니다. 패딩은 콘텐츠 주변에 시각적인 여백을 만들어 더 읽기 쉽고 시각적으로 매력적으로 만드는 데 사용됩니다. 요소의 네 면(top, right, bottom, left)의 패딩을 각각 독립적으로 제어하거나 단축 속성(shorthand notation)을 사용하여 제어할 수 있습니다.

padding 속성을 사용하기 위한 기본 구문은 다음과 같습니다:

selector {
    padding-top: value;
    padding-right: value;
    padding-bottom: value;
    padding-left: value;
}

padding-top: 요소의 상단 패딩입니다.
padding-right: 요소의 우측 패딩입니다.
padding-bottom: 요소의 하단 패딩입니다.

padding-left: 요소의 왼쪽 패딩입니다.
value: 원하는 패딩 값으로, 픽셀(px), em(em), 백분율(%) 또는 기타 유효한 CSS 단위로 지정할 수 있습니다.

또한 다음과 같이 네 면 모두의 패딩을 한 번에 설정하는 단축 표기법을 사용할 수 있습니다:

p {
    padding: 20px; /* 네 면 모두에 동일한 패딩을 적용합니다 */
}

div {
    padding: 10px 25px; /* 상단과 하단 패딩을 10px로, 좌측과 우측 패딩을 25px로 설정합니다 */
}

.button {
    padding: 15px 30px 10px 5px; /* 각 면의 패딩을 개별적으로 설정합니다 */
}

이 예제에서 모든 <p> (단락) 요소는 모든 면에 20px의 패딩을 가지며, 모든 <div> 요소는 상하 패딩 10px와 좌우 패딩 25px를 가집니다. 그리고 button 클래스를 가진 모든 요소는 상단 패딩 15px, 우측 패딩 30px, 하단 패딩 10px, 좌측 패딩 5px를 가집니다.

챌린지

쉬움

두 개의 제목이 포함된 HTML 문서가 주어집니다. 여러분의 작업은 padding 속성을 사용하여 이 요소들의 콘텐츠 주변에 여백을 추가하는 것입니다. 다음 단계를 따르세요:

<h1> 요소를 대상으로 하는 CSS 규칙을 작성하세요. 모든 면의 padding을 20px로 설정합니다.
<h2> 요소를 대상으로 하는 CSS 규칙을 작성하세요. 상하 padding을 10px로, 좌우 padding을 30px로 설정합니다.

치트 시트

CSS padding은 요소의 콘텐츠와 테두리(border) 사이의 공간을 만듭니다.

개별 패딩 속성:

selector {
    padding-top: value;
    padding-right: value;
    padding-bottom: value;
    padding-left: value;
}

단축 표기법:

/* 모든 면에 동일한 패딩 적용 */
padding: 20px;

/* 상/하: 10px, 좌/우: 25px */
padding: 10px 25px;

/* 상, 우, 하, 좌 개별 설정 */
padding: 15px 30px 10px 5px;

값은 픽셀(px), em(em), 백분율(%) 또는 기타 유효한 CSS 단위로 지정할 수 있습니다.

직접 해보기

<html>
<head>
    <title>Padding</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1 style="border:2px solid black;">The Box Model</h1>
    <h2 style="border:2px solid black;">It helps in controlling spacing and layout in web design! </h2>
</body>
</html>