마진 병합 현상, 박스, 벤더 프리픽스

<SeongHun />·2022년 4월 6일

CSS TIL 멋쟁이 사자처럼

CSS

목록 보기

9/11

오늘의 키워드📌

마진 병합 현상
블록 박스 / 인라인 박스
벤더 프리픽스

1. 마진 병합 현상

1-1. 마진(margin)이란?

margin CSS 속성은 요소의 네 방향 바깥 여백 영역을 설정한다.

출처 - mozila.org

1-2. 마진 병합 현상이란?

<head>
  <style>
    body {
      background-color: gray;
    }

    .부모 {
      background-color: white;
      width: 300px;
      margin: 0 auto;
    }

    .자식 {
      width: 200px;
      height: 200px;
      text-align: center;
      margin: 50px;
      background-color: tomato;
    }
  </style>
</head>
<body>
  <div class="부모">
    <div class="자식">A</div>
    <div class="자식">B</div>
  </div>
</body>

마진 병합 현상은 인접한 블록 요소의 상하단 마진이 병합되는 현상을 말한다. CSS에 설계된 의도된 부분이며, 마진 병합 현상은 우리가 고쳐야 될 문제점이 아닌 우리를 도와주는 이로운 점이라 생각하자. 즉, 좋은 설계다!

마진 병합 현상은 2가지로 나뉜다.
- 블록요소의 상하단 마진 병합
- 부모 자식 요소간의 마진 병합

1-3. 마진 병합 현상 조건

인접해 있는 블럭 요소끼리만 일어난다.
상하단에만 해당하며, 좌우는 병합이 일어나지 않는다.
아래 코드처럼 병합 되는 위치에 공간을 차지하고 있는 어떤 요소가 있다면 마진 병합 현상은 일어나지 않는다.(부모와 자식이 온전히 떨어져 있기 때문)

<div class="부모">
    텍스트
    <div class="자식">A</div>
  	텍스트
    <div class="자식">B</div>
    텍스트
</div>

1-4. 병합 현상이 발생하지 않는 조건

1. 부모 요소에 padding: 1px을 주거나


    body {
      background-color: gray;
    }

    .부모 {
      background-color: white;
      width: 300px;
      margin: 0 auto;
      padding: 1px;
    }

    .자식 {
      width: 200px;
      height: 200px;
      text-align: center;
      margin: 50px;
      background-color: tomato;
    }

2. border: 1px solid transparent를 준다.

    body {
      background-color: gray;
    }

    .부모 {
      background-color: white;
      width: 300px;
      margin: 0 auto;
      border: 1px solid transparent;
    }

    .자식 {
      width: 200px;
      height: 200px;
      text-align: center;
      margin: 50px;
      background-color: tomato;
    }

이는 마진 병합 현상 해결 방법이 아닌 발생하지 않는 조건에 해당한다. 그리고 1px 만큼의 공간을 차지하기 때문에 의도한 디자인과 거리가 멀어질 수 있다.

1-5. 병합 현상 해결 방법

간단하게 결과부터 말하자면, 부모 요소에 overflow: hidden을 준다. 그럼 새로운 블록 서식 맥락(block format context)이 부모 요소 기준에서 만들어지고 부모 요소의 마진과 자식 요소의 마진은 별개가 되고, 안에 있는 자식 요소의 마진이 부모 요소의 안에서 새로 시작할 수 있는 것이다.

따라서, 새로운 block format context에 있는 자식 요소인 A는 위 여백을 표현하고, 또 다른 자식 요소인 B는 아래 여백이 표현하게 된다. 단, A와 B 사이의 마진(A 아래, B 위)은 그대로 병합된다.

    body {
      background-color: gray;
    }

    .부모 {
      background-color: white;
      width: 300px;
      margin: 0 auto;
      overflow: hidden;
    }

    .자식 {
      width: 200px;
      height: 200px;
      text-align: center;
      margin: 50px;
      background-color: tomato;
    }

참고

2. 블록 박스 / 인라인 박스

2-1. 박스가 무엇인고?

HTML 요소들은 모두 내부에 박스들을 가지고 있다.
4가지의 박스로 이루어져 있는데, 이를 박스 모델이라고 한다.

콘텐츠(content) 박스?

요소의 콘텐츠가 표시되는 영역으로 넓이는 width로, 높이는 height와 같은 속성을 사용해서 설정할 수 있다.

패딩(padding) 박스?

패딩은 콘텐츠와 테두리 사이의 공간이다. 패딩의 크기는 padding 관련 속성을 사용해 제어할 수 있다.

보더(border) 박스?

보더 박스는 콘텐츠와 패딩을 둘러싸는 테두리이다. 보더의 크기와 스타일은 border와 관련 속성을 사용하여 제어할 수 있다.

마진(margin) 박스?

마진은 보더 바깥 쪽 영역으로 요소와 요소 사이의 공백 역할을 한다. 마진 박스의 크기는 margin 관련 속성을 사용하여 제어할 수 있다.

2-2. 박스의 유형

CSS에는 크게 블록 박스와 인라인 박스 2가지 유형이 있다.

블록 박스

사용 가능한 공간을 양 옆으로 100% 사용하며 사용하지 못하는 공간은 마진 영역으로 채운다. 상위 컨테이너에서 사용 가능한 공간을 채운다.
width와 height 속성을 사용하여 스타일을 제어할 수 있다.
패딩과 마진, 보더 속성을 사용하여 스타일을 제어할 수 있으며 해당 속성들이 다른 요소들을 밀어낸다.

<div class="블록박스">블록 박스1</div>
<div class="블록박스">블록 박스2</div>
<div class="블록박스">블록 박스3</div>

.블록박스 {
  background-color: orange;
}

인라인 박스

기본적으로 콘텐츠 박스만큼의 크기만 가진다. 때문에 새 줄로 행을 바꾸지 않는다.
width와 height 속성을 사용할 수 없다.
패딩과, 보더 속성을 사용할 수 있지만 마진 속성은 좌우만 조절할 수 있다. 해당 속성들의 상하 값(top, bottom)들은 다른 요소들을 밀어내지 않는다.

<span class="인라인박스">인라인박스1</span>
<span class="인라인박스">인라인박스2</span>
<span class="인라인박스">인라인박스3</span>

.인라인박스 {
  background-color: orange;
}

3. 벤더프리픽스(Vendor-Prefix)

벤더(브라우저 제조사)와 프리픽스(접두어)의 합성어다.
아직 비표준이거나 실험적인 CSS 속성을 특정 브라우저에서 실행할 수 있도록 CSS 속성 앞에 브라우저 제조사 만의 접두어(prefix)를 붙이는 문법을 의미한다.

3-1. 벤더 프리픽스의 종류

-webkit- : 크롬, 안드로이드, 사파리, ios 기반 파이어폭스, 오페라 등 웹킷 기반 브라우저
-moz- : 파이어폭스 브라우저
-ms- : 마이크로소프트 인터넷 익스플로러, 레거시 엣지
-o- : 레거시 오페라 브라우저

사용예

-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease;

웹킷 기반 브라우저

웹킷(Webkit)은 브라우저가 HTML, CSS를 화면에 그려줄 때 사용하는 렌더링 엔진이다.
크롬, 안드로이드, 사파리, ios 기반 파이어폭스 등 많은 브라우저들이 사용했다.
현재 크롬, 안드로이드, 오페라, 마이크로소프트 엣지 브라우저 등은 Blink 엔진으로 전환 되었다.
참고로, Blink 엔진은 verdor-prefix가 존재하지 않는다.

2022년 현재 시점에서 벤더 프리픽스는 줄어들고 있고 익스플로러도 종료 예정이다!
하지만 여전히 새로운 CSS 기능들은 개발되고 있고, 아직까지 사용해야하는 벤더 프리픽스들도 존재한다. 크로스 브라우징을 위해 레거시 브라우저들을 지원해야하는 점도 잊지 말아야 한다.

필요는 하지만 사용하는 것은 상당히 귀찮고, 어떤 속성에서 사용해야 하는지도 항상 바뀌기 때문에 자동화할 필요가 있다는 것을 알아두자!

몰랐던 점 ✏️

마진 병합 현상
block format context(블록 서식 맥락)
벤더 프리픽스
웹킷
Blink 엔진

오늘 하루를 정리하며.. 🌃

나중에 JS와 React를 학습하게 되면 TIL에 투자할 수 있는 시간이 많이 줄어들 거 같다.
중요 키워드를 몇 가지 선정하고, 키워드에 관한 간단한 설명을 작성하며 복습하고, 오늘 학습하며 몰랐던 점과 오늘 하루를 정리하며 느낀점을 적는 형식은 유지하지만, 내용을 최대한 압축해야겠다.

최종 합격 포스팅에서도 언급되었지만 메인은 일지 작성이 아닌, 공부인 것을 잊지말자!
물론 일지 작성도 하나의 공부라고 볼 수는 있겠지만, 일지 작성하는데 시간을 너무 과하게 투자하는 것은 공부라는 목적에 있어서 효율적이지 못한 것 같기 때문이다!