만약
엘리먼트 사이에 간격을 주기 위해서는 CSS의 프로퍼티
margin을 사용할 수 있습니다. 이 프로퍼티는 각 요소간에 원하는 만큼 여백(spacing)을 주게됩니다. 아래는 margin 프로퍼티를 사용하는 방법과 예제소스입니다.
# CSS margin property 사용방법
먼저 각 html의 각 요소들을
상하좌우 간격을 조정할 수 있습니다. 이때 margin값을 사용하게되는데 방법은 아래와 같이 사용합니다.습니다.
margin: 10px;이때 적용된 값이 하나인 경우는 상하좌우 모두 같은 크기가 적용되게됩니다.
! margin 축약 프로퍼티 사용하기
위와 같이 상하좌우에 동일한 값을 적용하는 경우가 아니라 단 하나의 방향만 margin값을 추가할 경우 어떻게해야할까요? 이 경우 축약 프로퍼티를 사용할 수 있습니다.
- margin-top
- margin-right
- margin-left
- margin-bottom
위 프로퍼티를 사용하면 더 간단하고 빠르게 적용할 수 있겠죠. 아래의 두 css 룰은 동일하게 적용됩니다.
margin: 0 0 0 20px; /* 좌측으로 여백 20 적용 */
margin-left: 20px; /* 위와 동일하게 좌측 여백 20 적용 */
축약 프로퍼티보다는 일반적으로 margin을 사용하는 방법이 더 많이 사용됩니다. 만약
css가 중복으로 사용되는 경우... 예를들어 div 태그에 이미 margin: 20px;이라고 전체 방향에 여백이 설정되어 있는데 아래방향만 30px로 바꾸고 싶다면? 이 경우에 추가로 margin-bottom: 30px;을 추가할 수 있습니다. 아래와 같이 적용할 수 있죠.
@ 이미 선언된 CSS 룰.test { margin: 20px; }
@ 아래 여백만 바꾸고 싶어 추가한 CSS.test { margin-bottom: 20px;
! margin 상하좌우 다르게 값 적용하기
만약 각각 다르게 주고 싶다면 아래처럼 top right bottom left의 순서에 따라 달리 값을 주는 것이 가능합니다.
margin: 5px 20px 30px 100px;
이미지) top, left, right, bottom 다르게 적용된 CSS 값위와 같이 사용하는 경우는 매우 많은데 상하 좌우만 따로 적용할 수도 있습니다. 아래를 봐주세요.
margin: 10px 20px;
위와 같이 적용될 경우 어떻게될까요? 이 경우 상하 top, bottom은 각각 10px 그리고 좌우는 20px씩 가지게됩니다.
참고로 값을 세가지만 사용할 수도 있습니다.
margin: 10px 0 0;
이 경우에도 역시 순서에 따라 top, right, bottom에 각각 10px, 0, 0이 적용되게됩니다. 그리고 left에는 0이 적용되게됩니다.
# CSS margin 속성 예제보기
아래는 여러 margin 값을 가지는 예제입니다. 각각 어떻게 나타나는지 확인해보시기 바랍니다.
<div class="test block">TOP</div>
<div class="test inline-block">LEFT</div>
<div class="test1 inline-block">TEST</div>
<div class="test inline-block">RIGHT</div>
<div class="test block">BOTTOM</div>
@ test1.css
.test1 {
margin: 0 10px 50px 100px;
}
.test {
width: 50px;
height: 50px;
border: 1px solid;
}
.block {
display: block;
}
.inline-block {
display: inline-block;
}
아래는 위 코드를 실제 구현한 모습입니다.