2021-03-26
margin 한국에서는 주로 이익잉여금 정도로 해석되곤 하지만 사전적 의미로는 이보다 여유/ 가장자리라는 의미가 강하다. 해당 margin은 css에서 각 요소들에 외부 여백을 부여하거나 요소의정렬 수단으로 사용된다. 이 margin의 사용방법을 알아보도록 하자.
- 예제 코드
아래는 예제로 사용될 코드이다. 기본적인 div태그에 영역 속성을 부여해주었으며, body 여백공간들을 제거한 상태이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{ /* div 태그 기초 영역속성 부여 */
width: 600px;
height: 400px;
background-color: skyblue;
}
body{/*body에 있는 모든 여백들을 제거 */
padding: 0px;
margin: 0px;
}
</style>
</head>
<body>
<div id="area">Area</div>
</body>
</html>
실행시 아래와 같은 브라우저 화면이 나타난다.
- margin(top/right/bottom/left)
마진에는 각각 top / right / bottom / left 옵션을 부여할 수 있다. 각각 단어에서도 느껴지듯이 태그의 위아래 좌우에 부모 태그를 기준으로 margin을 부여할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{ /* div 태그 기초 영역속성 부여 */
width: 400px;
height: 200px;
background-color: skyblue;
}
body{/*body에 있는 모든 여백들을 제거 */
padding: 0px;
margin: 0px;
}
#area{
margin-top:100px;
margin-left:100px;
}
</style>
</head>
<body>
<div id="area">Area</div>
</body>
</html>
위의 태그는 div의 아이디를 이용해 각각 margin-top과 margin-left를 부여하였다. ( #area{ margin-top:100px; margin-left:100px;} )그러면 아래의 이미지와 같이 body태그 기준에서 위에서 100px 왼쪽으로 100px의 공간의 여백이 생겨 기존의 div가 부모 태그로부터 밀려나는 것을 확인할 수 있다.
- margin
물론 margin이라는 하나의 속성만으로도 네 방향의 외부여백값을 부여할 수 있다. 기존의 top과 left에 100px준 외부 여백을 margin: 100px 0px 0px 100px; 로 표현할 수 있다. margin 속성은 매개 값으로 4개 / 3개 / 2개를 줄 수 있으며, 양식은 아래와 같다.
* margin: 'Top'px 'RIGHT'px 'BOTTOM'px 'LEFT'px
-> 위 / 오른쪽 / 아래 / 왼쪽 순으로 픽셀값 부여
-> ex) margin: 1px 1px 1px 1px;
* margin: 'Top'px ('LEFT/RIGHT')px 'BOTTOM'px
-> 위 / (좌우하나의 값) / 아래 픽셀 값 부여
-> ex) margin: 1px 1px 1px;
* margin: '(Top/BOTTOM')px ('LEFT/RIGHT') px
-> (위아래 하나의 값) / (좌우하나의 값)
-> ex) margin: 1px 1px;
아래는 기본 margin만 이용한 코드이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{ /* div 태그 기초 영역속성 부여 */
width: 400px;
height: 200px;
background-color: skyblue;
}
body{/*body에 있는 모든 여백들을 제거 */
padding: 0px;
margin: 0px;
}
#area{
margin: 100px 0px 0px 100px;
}
</style>
</head>
<body>
<div id="area">Area</div>
</body>
</html>
margin 옵션을 각각 따로 부여하던 margin 속성만 사용하여 픽셀 값을 부여하던 실행결과는 같다.
- margin(auto)
margin 에는 auto라는 속성이 있는데, 이는 margin이 부여된 요소를 가로로 중앙으로 자동정렬을 할 수 있도록 도와준다. 결과적으로 지정된 너비를 차지하며 나머지 공간은 왼쪽과 오른쪽 여백 간에 균등하게 분할된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{ /* div 태그 기초 영역속성 부여 */
width: 400px;
height: 200px;
background-color: skyblue;
}
body{/*body에 있는 모든 여백들을 제거 */
padding: 0px;
margin: 0px;
}
#area{
margin: 100px auto;
}
</style>
</head>
<body>
<div id="area">Area</div>
</body>
</html>
위의 코드는 margin: 100px auto; 를 부여함으로써 위와 아래의 margin은 각각 100px 씩 부여하고 좌우는 auto를 부여함으로써 해당 div 태그는 브라우저가 줄어들거나 늘어나도 항상 중앙을 유지하게 된다.
