CSS3 - CSS 스타일 - 패딩(padding) 설정하기 (15)

CSS3 - CSS 스타일 - 패딩(padding) 설정하기 (15)

오늘은 CSS3의 열다섯번째 내용으로 패딩을 

설정하는 방법에

 대해서 알아보도록 하겠습니다.

CSS도 HTML처럼 기초부터 알아보기 전에  

압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.

(백번 보는 것 보다 한번 살 타이핑 해보면 이해 되니! 꼭!)

굳이 압타나 아니더라도 이클립스등 자신에게 맞는 툴이 있으시다면 사용하시기 바랍니다.

css 스타일 - 패딩(padding) 설정하기

먼저 패딩을 설정하는 방법을 알아보기전 패딩이란 이 앞전 박스모델에서 설명했듯이 컨텐츠인 html 태그와 경계선 사이의 영역을 이야기 하는데 이러한 패딩 설정은 css에서 padding 이라는 속성으로 설정이 가능 하고 아래와 같이 패딩 속성의 기본 값들이 있습니다.

속성 값	내용
length	px, pt, em 단위로 패딩을 설정 합니다.
%	패딩을 퍼센트로 설정 합니다.

<패딩 속성의 기본 값>

-------------------------------------------------------------------------------------------------------------------------------------------------

<패딩 기본 설정 방법>

위 는 padding 속성을 px단위로 사용 한 방법 입니다. 

(사용법은 마진과 동일 합니다.)

위와 같이 30px을 주었을 경우 위, 오른쪽, 아래, 왼쪽  전부 공통으로 30px 이 되는데 

이렇게 한꺼번에 주지 않고 별도 음수로도 지정 할 수 있으며 이러한 방법은 

아래와 같이 2가 지 방법이 있습니다.

1. 패딩의 각각의 변을 별도로 설정하는 방법 

위와 같이 각 변을 padding-top (위쪽), padding-right (오른쪽), padding-bottom (아래쪽), padding-left (왼쪽) 이라는 별도의 속성을 이용해 별도로 지정 하는 방법이 있습니다.

2. 한 줄에서 모든 변에 대한 값을 설정 하는 방법

이번에는 패딩  (padding) 속성을 이용해 한 줄에서 모든 변에 대한 값을 설정한 방법입니다.

위 와같이 제일 앞쪽 값 부터 위, 오른쪽, 아래쪽, 왼쪽 순 (시계흘러가는방향)으로 값이 정해지며 

첫번째 패딩의 각 변을 별도로 지정하는 방법과 동일합니다. 

이상 CSS3 - CSS 스타일 - 패딩(padding) 설정하기 (15)에 관련된 포스팅을 마치도록 하겠습니다.