III. 박스 모델 - 3. 여백 조절하기

Hush 2022. 6. 4. 17:12

margin : 요소 주변의 여백을 설정

margin은 요소 주변의 여백을 의미한다. 따라서 마진을 이용하면 요소와 요소 사이 간격을 조절할 수 있다.

지금까지 배운 속성과 마찬가지로 마진도 박스 모델의 네개 방향에 한번에 똑같이 지정할 수 있고,

margin 다음에 하이픈을 넣고 위치를 나타내는 예약어 top, right, bottom, left를 사용해서 특정 방향에만 지정할 수도 있다.

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

margin 속성에 속성값을 하나만 지정하면 모든 방향에 동일한 마진이 적용되고, 여러개라면 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 : 콘텐츠와 테두리 사이의 여백을 설정

패딩이란 콘텐츠 영역과 테두리 사이의 여백을 말한다.

테두리 안쪽의 여백이라고 생각하면 된다.

패딩과 마진은 여백이 어느 위치에 있느냐만 다를 뿐 박스 모델에서 패딩을 지정하는 방법은 동일하다.

저작자표시 (새창열림)