CSS3 - CSS 스타일 - 마진(margin) 설정하기 (14)

CSS3 - CSS 스타일 - 마진(margin) 설정하기 (14)

오늘은 CSS3의 열네번째 내용으로 마진을 

설정하는 방법에

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

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

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

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

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

css 스타일 - 마진(margin) 설정하기

먼저 마진을 설정하는 방법을 알아보기전 마진이란 이 앞전 박스모델에서 설명했듯이 경계선 주위의 영역을 이야기 하는데 이러한 마진 설정은 css에서만 margin이라는 속성으로 설정이 가능 하고 아래와 같이 마진 속성의 기본 값들이 있습니다.

속성 값	내용
auto	브라우저가 자동으로 마진을 잡아 줍니다.
length	마진을 px, pt, cm 단위로 지정 합니다. (처음 디폴트 값 : 0)
%	마진을 태그(요소) 폭을 퍼센트로 지정 합니다.
inherit	마진이 부모 태그(요소)로 부터 상속 됩니다.

<마진 속성의 기본 값>

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

<마진 기본 설정 방법>

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

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

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

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

1. 마진의 각각의 변을 별도로 설정하는 방법 

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

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

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

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

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

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