CSS에서 요소 바깥쪽 여백을 설정하는 margin 속성. 정말 많이 사용하는 속성인데 사용하는 방법도 다양하고 사용할 때마다 혼동이 오는 경우가 많아서 오늘 margin 속성 사용법을 정리해 보려고 합니다!
우선 margin 속성을 지정할 div 요소와 영역을 만들어 주겠습니다.
<body>
<div class="container">
<div class="inner_area">
</div>
</div>
</body>
<style>
.container {
border: 2px solid red;
display: inline-block;
}
.inner_area {
border: 2px solid black;
width: 300px;
height: 300px;
background-color: black;
}
</style>
그럼 이제 margin 속성을 부여하며 사용법을 알아 볼까요?
방법1. 내부 속성 이름(left, right, top bottom) 을 모두 지정해 주기
첫번째 방법은 모든 속성을 하나하나 지정해 주는 방법입니다.
.inner_area {
margin-top: 40px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 50px;
border: 2px solid black;
width: 300px;
height: 300px;
background-color: black;
}
위와 같이 margin-top, margin-right, margin-bottom, margin-left, 속성을 하나하나 기입하여 지정해
주는 가장 기본 적인 방법이죠. 아래와 같은 결과 화면을 확인 하실 수 있습니다.
방법2. margin 속성 값 4개 나열하기
방법1에서 속성 이름값을 모두 쓰기가 번거로울 경우 사용할 수 있는 방법입니다.
.inner_area {
margin: 40px 20px 30px 50px;
border: 2px solid black;
width: 300px;
height: 300px;
background-color: black;
}
위와 같이 margin 하나의 속성에 4가지 여백값을 모두 나열하여 사용합니다.
이때 여백값의 순서는 위에서부터 시계방향으로 (상단, 오른쪽, 하단, 왼쪽) 여백 설정값이 지정됩니다.
위코드의 경우 상단 40px, 오른쪽 20px, 하단 30px, 왼쪽 50px의 여백이 설정 됩니다.
결과 화면은 방법1의 화면과 동일합니다.
방법3. margin 속성 값 3개 나열하기
.inner_area {
margin: 40px 20px 30px;
border: 2px solid black;
width: 300px;
height: 300px;
background-color: black;
}
속성값을 3개 나열할 경우 (상단, 좌우값 동일, 하단) 순서로 여백값이 설정 됩니다.
위의 경우 상단 40px, 좌우값은 둘다 20px로 동일하게 설정되고, 하단값이 30px로 설정 됩니다.
결과 화면을 확인해 보겠습니다.
방법4. margin 속성 값 2개 나열하기
.inner_area {
margin: 40px 20px;
border: 2px solid black;
width: 300px;
height: 300px;
background-color: black;
}
속성값을 2개 나열할 경우 (상단 하단 동일, 좌우 동일) 순서로 여백값이 설정 됩니다.
위의 경우 상단과 하단 둘다 40px, 좌우 둘다 20px로 설정 됩니다.
결과화면을 확인해 보겠습니다.
방법5. margin 속성 값 1개로 설정
.inner_area {
margin: 40px;
border: 2px solid black;
width: 300px;
height: 300px;
background-color: black;
}
마진 속성값을 1개로 설정할 경우 (상하좌우) 여백값이 모두 하나의 속성값으로 설정 됩니다.
위의 경우 상단 40px, 하단 40px, 왼쪽 40px, 오른쪽 40px로 설정 됩니다.
결화화면을 확인해 보겠습니다.
방법6. auto 값으로 margin 설정 하기
margin 설정 값중 auto값은 좌우설정에만 적용할 수 있는 속성입니다. margin 좌우영역 설정 값에 auto값을 줄 경우 부모영역인 container 요소와 안에 자리하고 있는 inner_area요소의 사이즈를 고려하여
균등하게 동일값으로 양쪽 여백을 설정해 주고 가운데에 자리잡아 줍니다.
부모 영역에 width 사이즈를 주고 marin 좌우 영역값을 auto로 설정해 보겠습니다.
.container {
border: 2px solid red;
display: inline-block;
width: 400px;
}
.inner_area {
margin: 40px auto;
border: 2px solid black;
width: 200px;
height: 100px;
background-color: black;
}
결과 화면을 확인해 볼까요?
container 역역의 width를 400px로 주었는데 영역 사이즈에 맞춰 양쪽 여백이 균등하게 설정되어
가운데 정렬 된 모습입니다.
오늘은 자주 사용하지만 혼동할 수 있는 margin 속성 사용방법에 대해 정리해 보았습니다.
한번쯤 다시 보며 사용법을 정리해 두는 것도 좋을 것 같아요!
그럼 다음에 다른 내용으로 찾아오겠습니다~!
'css' 카테고리의 다른 글
| CSS 세로 가운데 정렬 방법 정리 (0) | 2022.12.29 |
|---|---|
| CSS box-shadow 속성 사용방법 정리 (0) | 2022.12.28 |
| CSS box-sizing 속성 (영역, 기준 정리) (0) | 2022.12.21 |
| CSS 초기화 (Reset CSS) (0) | 2022.12.14 |
| CSS float 해제 방법 정리 (0) | 2022.12.13 |
댓글