마크업을 하면서 기본적인 요소들간의 간격을 위해서 margin값을 많이 사용한다.
단순한 간격을 비롯해 원한다면 특정 요소를 가운데로 정렬할 수도 있다.
1. margin 속성의 사용
margin값은 단순한 간격을 조정하는데에 가장 많이 사용한다.
특히 padding이나 border와는 다르게 영역의 너비나 높이 값에 영향을 주지 않는다.
width 200px, height 200px 의 영역이 있다고 했을 때
해당 영역에 padding:20px 을 적용할 때와 margin:20px 을 적용할 때의 너비, 높이는 다르다.
먼저, padding을 적용할 경우 width:240px, height:240px의 값을 갖게 되고
margin을 적용할 경우 width:200px, height:200px의 값을 그대로 갖게 된다.
2. margin 값
margin 속성은 상 하 좌 우 내가 원하는 요소에 값을 줄 수 있다.
<style>
.box1{margin-top:5px;}
.box2{margin-right:10px;}
.box3{margin:5px 10px 0 0;} /* 축약형 사용 */
</style>margin-top, margin-right, margin-bottom, margin-left를 통해 원하는 방향에 원하는 값을 각각 줄 수도 있고,
margin: 0(위) 0(오른쪽) 0(아래) 0(왼쪽)와 같이 축약형을 사용해서 원하는 값을 한 번에 줄 수 있다.
(축약형의 경우 위, 오른쪽, 아래, 왼쪽의 순서로 값을 적용한다.)
3. margin 정렬 (auto)
margin을 사용해서 특정한 영역을 가운대로 정렬할 수 있다.
바로 margin의 auto값을 이용한 방법이다.
<style>
.box{margin:0 auto; width:400px; height:200px; background:skyblue;}
</style>
<body>
<div class="box"></div>
</body>위와 같이 소스를 적용했을 때
예시와 같이 특정 영역이 가운데 정렬한 모습을 볼 수 있다.
위와 같이 auto값을 사용할 때, 주의할 점이 있다.
너비 값(width)을 지정 해주지 않으면 가운데 정렬을 할 수 없다는 점이다.
'Frontend > CSS' 카테고리의 다른 글
| [css 속성] border (0) | 2020.08.25 |
|---|---|
| [css 속성] padding (0) | 2020.08.22 |
| [css 속성] box-sizing (0) | 2020.08.22 |
| [css 응용] 이미지 세로 중앙 정렬 (0) | 2020.05.23 |
| [css 단위] vw, vh, vmin, vmax (Viewport 단위) (0) | 2020.04.22 |