[CSS] Box Model

1. 패딩 속성 값 사용 방법

2. 패딩 속성

3. Padding 속성 사용하기

* Padding 에서 % 사용하는 방법

안녕하세요 냥장판 입니다

지난 게시글에서는 CSS에 box model의 기본 개념에 대해서 알아봤어요.

2020/01/30 - [놀고있네/HTML & CSS] - [CSS] Box Model - 기본 요소

이번 게시글에서는 기본 요소 중 Padding에 대해서 알아볼거에요.

패딩(padding)은 컨텐츠를 둘러싼 공간으로 안쪽여백을 말합니다.

1. 패딩 속성 값 사용 방법

패딩(padding) 속성값으로 사용할 수 있는 것들은 아래와 같습니다.

length - 특정 길이 단위 사용(px, pt, cm, etc.)
% - 컨텐츠 요소(content)의 넓이(width)를 기준으로한 비율(%)
inherit - 부모 요소로부터 상속받는 패딩값(일부 요소에만 적용가능함)

Note: 음수값은 허용되지 않아요!

2. 패딩 속성

패딩의 속성은 아래와 같아요.

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

사용 방법은 하나씩 살펴볼게요!

     style="display:inline-block;width:740px;height:200px"
     data-ad-client="ca-pub-9512983930357661"
     data-ad-slot="5785466884">

3. Padding 속성 사용하기

가장 첫번째로 padding 을 단독으로 사용하는 것에 대해 알려드릴게요.

CSS 파일에서 padding을 사용할 때,

padding 뒤에는 최대 4개의 속성값이 올 수 있어요.

속성값의 갯수에 따라 padding에 적용되는 부분이 다릅니다.

규칙은 시계방향으로 적용된다고 생각하시면 됩니다!

padding: 하나 - 모든 4개의 면에 적용되구요.

padding: 두개 - vertical(top, bottom), horizontal(left, right)

padding: 세개 - top, horizontal(left, right), bottom

padding: 네개 - top, right, bottom, left

한번 적용해 볼까요?

소스코드는 아래에 올려뒀습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='UTF-8'/>
    <title>Hello, CSS Boxes - Padding 🎁</title>
    <link rel='stylesheet' href='box-styles.css'/>
  </head>
  <body>
    <h1>Padding Property</h1>
 
    <p id="p1">Padding: one; - All 4 sides</p>
    <p id="p2">Padding: one two; - vertical | horizontal</p>
    <p id="p3">Padding: one two three; - top | horizontal | bottom</p>
    <p id="p4">Padding: one two three four; - top | right | bottom | left</p>
  </body>
</html>
Colored by Color Scripter

cs

나머지 padding 속성 padding-top, padding-bottom, padding-left, padding-right 는 적용이 쉽겠죠?

     style="display:inline-block;width:740px;height:200px"
     data-ad-client="ca-pub-9512983930357661"
     data-ad-slot="5785466884">

padding에서 % 사용하는 방법

% 속성값 사용을 혼동하시는 분들이 있어요.

포함된 block 넓이(width)에 퍼센트를 곱한 값입니다.

CSS 파일을 아래처럼 작성해 봤어요.

그랬더니 값이 이상하죠? width를 300px로 해놨는데, padding이 각각 54.5??

이건 windows 창 넓이에 비례하기 때문에,

창을 줄이면 줄어들고, 늘리면 늘어나요.

즉, 화면에 대해 유동적으로 조절이 되는겁니다!

아래는 padding에 대해서 직접 실습해 볼 수 있는 사이트니까

꼭 한번 들어가 보시길 추천해드려용

https://developer.mozilla.org/en-US/docs/Web/CSS/padding

padding

The padding CSS property sets the padding area on all four sides of an element. It is a shorthand for padding-top, padding-right, padding-bottom, and padding-left.

developer.mozilla.org

그럼 이만!

저작자표시

'🎪 놀고있네 > HTML & CSS' 카테고리의 다른 글

[CSS] Box Model - Borders (border-image) (4)	2020.02.06
[CSS] Box Model - Borders (2)	2020.02.04
[CSS] Box Model - Block, Inline 개념 이해하기 (2)	2020.01.30
[CSS] Box Model - 기본 요소 (4)	2020.01.30
[CSS] CSS에서 Google Fonts 사용하기 (5)	2020.01.23

냥장판