CSS _HTML_JavaScript/CSS

[CSS] CSS 박스 모델을 구성하는 속성 다루기(margin 영역)

Oli-Viaaaa 2023. 7. 26. 18:01

박스모델은 모든 HTML 요소가 사각형의 박스로 둘러쌓여있다는 개념으로

박스 형태의 요소들을 하나씩 원하는 곳에 배치해 원하는 모양으로 만들어 나가는 것이 웹 페이지를 만드는 본질이다.

 

박스 모델은 크게 다음과 같이 4가지 요소로 구성된다.

 

구성요소 설명
margin 요소의 외부 여백을 의미한다.
border 요소의 테두리(경계선)을 의미한다.
padding 요소의 내부 여백을 의미한다.
content 요소의 내용을 의미한다.

 

 

 

1. margin 영역

margin은 박스 모델에서 가장 외부에 있는 영역으로 요소의 외부 여백을 담당한다.

박스모델은 사각형 모양이라 각 방향에 해당하는 속성이 독립적으로 존재한다.

margin 영역을 다룰 때 사용할 수 있는 속성으로는 margin-top, margin-right, margin-left, margin-bottom이 있고

모든 방향을 통합해 margin 속성으로 사용할 수도 있다. 속성값에는 크기를 넣으면 된다.

형식)
    margin-top:<크기>;
    margin-right:<크기>;
    margin-botton:<크기>;
    margin-left:<크기>;
    margin:<margin-top> <margin-right> <margin-bottom> <margin-left>;
    margin:<margin-top> <margin-right> <margin-bottom>;
    margin:<margin-top & margin-bottom> <margin-right & margin-left>;
    margin:<margin-top & margin-right & margin-bottom & margin-left>;

 

아래의 예제는 p 태그로 작성된 두 요소의 간격을 20px만큼 벌리기 위해 margin-bottom에 속성을 적용한것이다.

실행 결과를 보면 아래쪽 말고 위쪽에도 margin이 적용된걸 볼 수 있는데 이러한 이유는

기본 스타일 시트에 의해 p 태그에 이미 속성값(16px)이 적용되었기 때문이다.

다만 기본 스타일 시트에 정의된 스타일 속성보다 사용자가 정의한 속성이 우선순위가 높아 아래쪽은 20px 로 변경된것이다.

 

 

    - margin 겹침 현상

margin 영역을 다루다 보면 흔하게 겪는 일 중 하나가 바로 margin 겹침현상이다.

인접한 margin 값이 둘 중 더 큰 값으로 통일되는 것을 말하는데 아래의 예시를 보면 이해하기 쉽다.

 

두 요소 사이의 간격은 20px과 30px을 합한 50px이 될 것 같지만 실제로는 30px이 적용된다.

이러한 현상을 바로 margin 겹침 현상이라고 한다.

예제를 통해 보면 이해하기 쉽다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>margin collpase</title>
  <style>
    .first{
      margin-bottom:20px;
    }
    .second{
      margin-top:30px;
    }
  </style>
</head>
<body>
  <p class="first">lorem1</p>
  <p class="second">lorem2</p>
</body>
</html>

 

 

코드를 실행하면 속성값이 더 큰 아래 요소의 값이 적용되어 두 요소 사이의 간격은 30px이 됨을 확인할 수 있다.

저작자표시 (새창열림)