[css]스타일쉬트 여백 지정시 꼭 알아야 할 padding, margin, width 정리

[css]스타일쉬트 여백 지정시 꼭 알아야 할 padding, margin, width 정리

일반적으로 사용하는 스타일쉬트에 대해서만 간략하게 정리하려고 했는데 생각보다 그리 녹녹치가 않네요!
이미 시작을 했으니 끝내긴 끝내야겠는데.. ^^

그래도 이웃분들의 염려와 걱정덕분에 힘 받아서 또 열심히 정리를 시작해보겠습니다.
편의상 지금부터는 평어체를 사용할것이므로 양해 바라겠습니다.

css의 사용법을 모르는 분은 이 글을 읽기 전에 "스타일시트(CSS) 이해하기 for 티스토리를 먼저 읽기를 권한다.

오늘은 padding, margin 그리고 적용되는 범위와 width에 대해서 알아볼까 한다.

padding이나 margin은 둘다 컨텐츠의 상하좌우에 여백(공백)을 줄때 사용하는 속성이다.

padding, margin의 적용영역과 width 값의 계산 

각각의 적용되는 영역은 아래 그림을 보면 쉽게 이해할 수가 있을것이다.

 

• css에서 자주 사용되는 width는 contents가 표시되는 영역이다.
• padding은 border와 contents 사이의 공백을 지정할때 사용
• margin은 border의 바깥쪽 영역이다.
• margin, padding, border를 모두지정했을때 전체 영역의 크기는 margin + padding + border + width 이다.

위의 내용이 어렵게 느껴지는 사람은 이해하려고 노력하지 않아도 된다.
사실 위의 전체 영역을 계산하는 방법은 페이지의 구조를 만들때 주로 사용하기 때문에 이미 구조가 만들어진 경우 (완성된 스킨이 적용된 경우) 전체 영역 계산할 일은 별로 없기 때문이다.

하지만 지금부터 진행되는 padding과 margin은 자주 사용하기 때문에 잘 알아두는 것이 좋다.

 

margin 속성

; margin은 여백을 지정할때 사용하는 속성이다. 컨텐츠와 컨텐츠간의 여백, 컨텐츠와 이미지간의 여백, 본문과 사이드사이의 여백등 웹에서 상.하.좌.우 여백을 지정할때 사용된다. 다른 표현으로는 컨텐츠가 표시되는 위치를 지정하는 용도로도 사용된다.

margin의 사용형식

• margin: 값;    => 상하좌우 동시에 지정할때 사용, 길이 지정은 px, em등으로 지정
• margin-left     => 왼쪽 여백을 지정
• margin-right   => 오른쪽 여백을 지정
• margin-top     => 위 여백을 지정
• margin-bottom => 아래 여백을 지정

사용예제 1.

margin: 10px;         =>상하좌우 모두 10px 씩 여백이 지정됨  margin: 10px 5px ;  =>위, 아래는 10px, 왼쪽과 오른쪽은 5px로 지정됨  margin: 10px 9px 8px 7px; => 위 10px, 오른쪽 9px, 아래 8px, 왼쪽 7px   margin: 10 9 8 7 ;    => 위와 동일

사용예제 2.

<div>여백이 없을때</div> <div style="MARGIN-left: 10px; background:yellow">왼쪽 여백이 10일때 </div> <div style="MARGIN-left: 30px; background:yellow">왼쪽 여백이 30일때 </div>

 

 

< 결과 > 여백이 없을때 왼쪽 여백이 10일때 왼쪽 여백이 30일때

padding 속성

; padding은 컨텐츠와 테두리(border) 사이의 공백을 지정할때 사용하는 속성이다. 마진과 마찬가지로 컨텐츠와 컨텐츠간의 여백, 컨텐츠와 이미지간의 여백, 본문과 사이드사이의 여백등으로 다양하게 사용할 수 있으며 상.하.좌.우 개별적으로 지정이 가능하다.

padding의 사용형식

마진과 사용법이 같다.

• padding: 값;    => 상하좌우 동시에 지정할때 사용
• padding-left     => 왼쪽 공백을 지정
• padding-right   => 오른쪽 공백을 지정
• padding-top     => 위 공백을 지정
• padding-bottom => 아래 공백을 지정

사용예제 1.

padding: 10px;         =>상하좌우 모두 10px 씩 공백이 지정됨  padding: 10px 5px ;  =>위, 아래는 10px, 왼쪽과 오른쪽은 5px로 지정됨  padding: 10px 9px 8px 7px; => 위 10px, 오른쪽 9px, 아래 8px, 왼쪽 7px   padding: 10 9 8 7 ;    => 위와 동일

사용예제 2.

<div style="border:3px solid #ff0000; padding:10px">padding을 10으로 했을때</div> <div style="border:3px solid #ff0000; padding:30px; margin:10px">padding이 30 일때</div> <div style="border:3px solid #ff0000; padding:10px 3px">상하 10px, 좌우 3px</div>

 

 

< 결과 > padding을 10으로 했을때 padding이 30 일때 상하 10px, 좌우 3px

설명.

<div style="border:3px solid #ff0000; padding:30px; margin:10px">padding이 30 일때</div>

위 소스는 3픽셀 굵기의 빨간색 테두리를 표시하고, 보더와 내용사이 여백은 상하좌우 30px을 주는 예이다.
div 는 줄바꿈만 하기 때문에 윗줄과의 공백이 생기지 않아서 margin:10px을 줬다.

여기까지 margin 과 padding에 대한 내용이었습니다.

스타일쉬트에서 많이 사용되는 속성들이므로 상단 메뉴줄에 있는 태그연습장을 통해서 꼭 연습을 해보시기 바랍니다.

css 관련글.
2008/10/21 - [CSS for 티스토리] - 스타일시트(CSS) 이해하기 for 티스토리
2008/10/24 - [CSS for 티스토리] - 스타일시트(CSS)의 선언방법 1
2008/10/27 - [CSS for 티스토리] - 스타일시트의 선언방법 및 사용 예제 2
2009/02/16 - [CSS for 티스토리] - 서식으로 배우는 스타일시트(CSS)
2009/09/03 - [CSS for 티스토리] - 티스토리 뽀개기 - 스킨 구조(skin.html) 이해하기
2009/09/07 - [CSS for 티스토리] - 티스토리 뽀개기 - div 와 span
2009/09/24 - [CSS for 티스토리] - (css) border로 꾸미는 나만의 이미지 스타일
2009/10/20 - [CSS for 티스토리] - 티스토리 스킨 style.css 완전정복 1
2009/10/21 - [CSS for 티스토리] - 티스토리 스킨 style.css 완전정복 2