[HTML&CSS] 마진(margin) 속성, 패딩(padding) 속성

*아래 링크를 누르시면 HTML, CSS 코드 실행환경을 만들 수 있습니다.

[Language & Solution/Node.js] - npm과 lite-server로 HTML, CSS 실습관경 만들기



| 마진(margin)


마진(margin)은 요소 주변 여백을 뜻합니다. 마진의 크기를 조절함으로서 다른 요소 사이에 간격을 남겨 유저 친화적인 UI를 구사할 수 있죠. 



마진 속성에는 margin-top, margin-right, margin-bottom, margin-left가 있습니다. 이름에서 알 수 있듯 위, 오른쪽, 아래쪽, 왼쪽 여백들을 가리키는 속성들이며 이를 한 번에 표기할 수 있는 margin이란 속성도 있습니다. 사용법은 다음과 같습니다.


margin : <크기> | <백분율> | auto 

margin-top : <크기> | <백분율> | auto 

margin-right : <크기> | <백분율> | auto 

margin-bottom : <크기> | <백분율> | auto 

margin-left : <크기> | <백분율> | auto 


 크기

 px 혹은 cm 단위와 함께 수치 지정 

 백분율 

 박스 모델을 포함한 부모 요소를 기준으로 % 지정

 auto

 display 속성에서 지정한 값에 맞게 자동으로 크기 조절 



| 마진(margin) 예제


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 200px;
height: 100px;
background: #ffbc8a;
}
.box1 { margin: 30px 50px 30px 50px;}
.box2 { margin: 30px 50px;}
.box3 { margin: 50px;}
.box4 { margin: 30px 5px 10px;}
.box-auto {
margin:0 auto; /* 너비 값을 뺀 나머지 공간의 좌우 마진을 똑같이 맞춥니다. */
}
</style>
</head>
<body>
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
<div class="box4">
</div>
<div class="box-auto">
</div>
</body>
</html>



| 패딩(padding)


패딩(padding)은 콘텐츠 영역과 테두리 사이의 여백입니다. 


패딩과 관련된 css속성에는 padding-top, padding-right, padding-bottom, padding-left, padding 있으며 각각 위, 오른쪽, 아래, 왼쪽, 네 방향 패딩을 한꺼번에 지정할 수 있습니다. 


패딩을 사용하는 방법은 margin과 같으므로 여기서는 생략하도록 하겠습니다.



| 패딩(padding) 예제


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 200px;
height: 100px;
background: #ffbc8a;
margin: 20px;
color: #F46075;
}
.box1 { padding: 10px 30px 10px 30px;}
.box2 { padding: 30px 50px;}
.box3 { padding: 50px;}
</style>
</head>
<body>
<div class="box1">
패딩의 여백1
</div>
<div class="box2">
패딩의 여백2
</div>
<div class="box3">
패딩의 여백3
</div>
</body>
</html>




이 글을 공유하기

댓글(0)

Designed by JB FACTORY