margin : 요소 주변의 여백을 설정
margin은 요소 주변의 여백을 의미한다. 따라서 마진을 이용하면 요소와 요소 사이 간격을 조절할 수 있다.
지금까지 배운 속성과 마찬가지로 마진도 박스 모델의 네개 방향에 한번에 똑같이 지정할 수 있고,
margin 다음에 하이픈을 넣고 위치를 나타내는 예약어 top, right, bottom, left를 사용해서 특정 방향에만 지정할 수도 있다.
margin: <크기> | <백분율> | automargin 속성에 속성값을 하나만 지정하면 모든 방향에 동일한 마진이 적용되고, 여러개라면 top-right-bottom-left 순서로 적용된다.
크기값으로는 px이나 em같은 단위로 정할 수 있다.
margin 속성을 사용하여 웹 문서를 가운데 정렬하기
일단 배치할 요소의 너빗값이 정해져 있다고 가정하자.
그리고 margin-left와 margin-right의 속성값을 auto로 지정하자.
이렇게 하면 요소를 화면에 중앙에 배치할 수 있다.
다음 예제는 <div> 태그를 사용해 웹 문서 전체를 하나로 묶은 후 #container라는 스타일을 적용했다.
container 스타일은 전체 너비를 600px로 정하고 margin: 20px auto; 을 지정해서 위아래 마진은 20px씩 주고 좌우 마진은 자동으로 계산했다.
그리고 가운데 정렬된 내용을 확인하기 쉽도록 문서 전체 배경은 어둡게 하고 container영역으의 배경만 흰색으로 지정했다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Html-basic</title>
<style>
body { background-color: gray;}
#container {
background-color: #fff;
width: 600px;
margin : 20px auto;
padding : 20px;
}
</style>
</head>
<body>
<div id="container">
<h1>마진 공부중</h1>
<p>
중앙정렬 확인하는 예제. 중앙정렬 확인하는 예제. 중앙정렬 확인하는 예제. 중앙정렬 확인하는 예제. 중앙정렬 확인하는 예제. 중앙정렬 확인하는 예제. 중앙정렬 확인하는 예제. 중앙정렬 확인하는 예제.
</p>
</div>
</body>
</html>
마진 중첩
박스 모델에서 마진을 지정할 때 주의해야 할 것이 있다.
요소를 세로로 배치할 경우 각 요소의 마진과 마진이 서로 만나면 마진값이 큰 쪽으로 겹쳐진다.
이러한 현상을 마진 중첩 또는 마진 상쇄라고 한다.
이 현상을 염두에 두어야 웹 요소를 배치할 때 의도하는 대로 만들 수 있다.
padding : 콘텐츠와 테두리 사이의 여백을 설정
패딩이란 콘텐츠 영역과 테두리 사이의 여백을 말한다.
테두리 안쪽의 여백이라고 생각하면 된다.
패딩과 마진은 여백이 어느 위치에 있느냐만 다를 뿐 박스 모델에서 패딩을 지정하는 방법은 동일하다.
'📁Web Developing > CSS 기초' 카테고리의 다른 글
| III. 박스 모델 - 5. 웹 요소의 위치 지정하기 (0) | 2022.06.04 |
|---|---|
| III. 박스 모델 - 4. 웹 문서의 레이아웃 만들기 (0) | 2022.06.04 |
| III. 박스 모델 - 2. 테두리 스타일 지정하기 (0) | 2022.06.04 |
| III. 박스 모델 - 1. CSS와 박스 모델 (0) | 2022.06.03 |
| II. 텍스트 - 5. 표 스타일 (0) | 2022.06.03 |
댓글