css margin, padding
오늘은 css로 페이지를 꾸밀 때 여백값으로 많이 사용되는 margin과 padding에 대해서 알아보는
시간을 갖도록 하겠습니다.
간단하게 설명하면 margin은 바깥쪽 여백, padding은 안쪽 여백을 표시하는 속성입니다.
먼저 그림을 보여 드리겠습니다.
크롬 브라우저에서 개발자 도구로 들어가면 이렇게 padding과 margin에 대해 설명하는 그림이 나옵니다.
보다싶이 영역 안에 텍스트나 이미지 등의 내용이 있으면, 그 내용과 외곽선(border) 사이의 여백값을
나타내는 것이 padding값이 됩니다.
그리고 다른 레이아웃들과의 사이 여백을 나타내는 것은 margin값이 됩니다.
그럼 예제 코딩으로 한번 살펴 보겠습니다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>exhtml</title>
<style type="text/css">
.container {
display: inline-block;
border: 1px solid black;
background-color: yellow;
}
.content {
display: inline-block;
border: 1px solid black;
background-color: #CFFFE5;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
안녕하세요.1
</div>
</div>
</body>
</html>
지금 보면 div container 안에 div content 내용이 들어가 있고, 그 안에는 내용에 해당하는 텍스트가
들어 있습니다.
그럼 margin값과 padding값을 주기 전에 예상을 먼저 해 보면, padding값으로 5px을 주면 텍스트와
div content의 border 사이에 5px의 여백이 생길 것이고, margin값으로 10px을 주면 div container
영역과 div content 영역 사이에 10px의 여백 공간이 생길 것입니다.
그러면 우리 예상대로 실행이 되는지 한 번 볼까요?
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>exhtml</title>
<style type="text/css">
.container {
display: inline-block;
border: 1px solid black;
background-color: yellow;
}
.content {
display: inline-block;
border: 1px solid black;
background-color: #CFFFE5;
width: 100px;
height: 100px;
padding: 5px;
margin: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
안녕하세요.1
</div>
</div>
</body>
</html>
이렇게 바깥쪽의 container 영역하고는 10px만큼씩 여백이 생겼고, content 내부에서는 내용에 해당하는
텍스트와 border 사이에 여백이 5px씩 생겼습니다.
(여기서 텍스트가 위쪽에 붙어있는 이유는 content에 가로, 세로값을 100px씩으로 고정을 했고, 가운데
정렬같은 것을 하지 않는 이상 일반적인 html은 위에서부터 쌓이기 때문에 이 화면에서는 위쪽과 양옆에만
5px의 여백이 들어간 것처럼 보이게 되는 것입니다.)
추가로 margin이나 padding을 쓸 때 뒤에 -left, -right, -top, -bottom과 같은 속성이 같이 뜨는데
단어의 뜻에서 알다싶이 margin이나 padding은 4가지 방향의 여백을 따로 줄 수 있습니다.
margin-top이나 padding-left와 같은 건 각각 margin영역의 위쪽에 여백을 준다는 뜻으로 단어 그대로의
뜻을 갖고 있고, 여기서 중요한 것은 -top과 같이 뒤에 추가로 붙이지 않고도 그냥 margin이나
padding으로도 값의 갯수에 따라 여백을 주는 방향이 달라진다는 특징에 있습니다.
(margin과 padding은 이 부분에 있어서는 똑같기 때문에 margin을 예시로 들겠습니다.)
- margin: 10px;
위의 코딩에서도 알 수 있듯 상하좌우 모두 10px씩 여백을 준다는 의미입니다.
- margin: 20px 10px;
상하 20px, 좌우 10px씩 여백을 줍니다.
- margin: 20px 10px 15px 5px;
순서대로 위 20px, 오른쪽 10px, 아래 15px, 왼쪽 5px의 여백을 줍니다.
(시계 방향을 생각하시면 됩니다.)
- margin: 20px 10px 15px;
위 20px, 좌우 10px, 아래 15px의 여백을 줍니다.
이렇게 값의 갯수에 따라 여백을 다르게 지정할 수 있습니다.
그러면 이에 대한 예제 코드를 보고 마무리 짓도록 하겠습니다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>exhtml</title>
<style type="text/css">
.container {
display: inline-block;
border: 1px solid black;
background-color: yellow;
}
.content {
display: inline-block;
border: 1px solid black;
background-color: #CFFFE5;
width: 300px;
height: 300px;
}
.one {
margin: 40px 50px;
padding: 60px 50px;
}
.two {
margin: 50px 10px 4px 40px;
padding: 40px 20px 5px 50px;
}
.three {
margin: 60px 50px 40px;
padding: 100px 60px 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="content one">
margin 40px 50px<br>
padding 60px 50px
</div>
</div>
<div class="container">
<div class="content two">
margin 50px 10px 4px 40px<br>
padding 40px 20px 5px 50px
</div>
</div>
<div class="container">
<div class="content three">
margin 60px 50px 40px<br>
padding 100px 60px 10px
</div>
</div>
</body>
</html>
위의 내용하고 비교해 보시면 상하좌우의 여백이 설정한 대로 다르게 들어가는 것을 볼 수 있습니다.
오늘은 여백을 주는 속성인 margin과 padding에 대해 알아봤습니다.
웹페이지를 디자인할 때 margin과 padding은 여백을 주는 역할로써 많이 쓰이는 요소이기 때문에
잘 기억하시고 활용하시면 좋겠습니다.