WEB/CSS

[CSS] CSS margin 속성을 통한 외부의 여백 / 가운데 정렬 방법

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 태그는 브라우저가 줄어들거나 늘어나도 항상 중앙을 유지하게 된다.

저작자표시 비영리

'WEB > CSS' 카테고리의 다른 글

[CSS] CSS Attribute Selectors(속성 선택자) 알아보기 (0)	2021.03.28
[CSS] CSS padding을 통한 내부 여백 부여하기 (0)	2021.03.27
[CSS] CSS Combinators Selector(선택자) (자식 형제 선택자 종류) (0)	2021.03.23
[CSS] CSS top: 50% 와 bottom: 50% 의 차이점 알아보기. (0)	2021.03.18
[CSS] CSS bottom 속성을 이용한 수직 위치 변경 방법 알아보기. (0)	2021.03.17

Contents

새소식

인기 검색어