역쉬 금요일이라 넘나리 졸립지만 ... 1일 1포스팅을 위해 ! 달려보겠쓰
4일차 TIL 가보자고 !

마진 병합 현상

종종 마진을 설정하면, 내가 부여한 값이 제대로 표현되지 않을 때가 있다. 또한 개발자 도구에서 요소를 마우스로 찍었을 때 요소마다 마진으로 표시되는 주황색 영역이 겹치는 경우가 있다. 그렇다 .. 이미 당신은 마진 병합 현상과 구면이었던 것이다 ... !

1. 조건

마진 병합 현상은 특정 조건에서 나타나는 상하 마진이 병합되는 현상이다. 아래의 조건이 충족되면 마진 병합 현상이 발생한다. block 요소에서 나타나는 현상이기 때문에 margin-left와 margin-right에서는 나타나지 않는다. 중첩된 마진의 크기는 가장 큰 마진의 값이 적용된다.

1. 조건 : 인접해있는 block level element의 상하단 중첩
2. 마진 값 : 인접한 block 요소에 부여된 margin 값 중 가장 큰 값이 적용됨

정확한 원인은 아직 모르지만, CSS 개발자들이 자연스러운 스타일링을 위해 의도적으로 설계했다고 보여진다. 위의 이미지처럼, 각 block 요소에 마진을 20px씩 부여했을 때 마진이 중첩되었기 때문에 오히려 자연스러운 레이아웃이 완성된다. 하지만 문제는 이 마진 병합 현상이 부모 - 자손간에도 발생한다는 것이다.

2. 부모 - 자손 간 마진 병합 현상

block 요소인 부모 - 자손간 레이아웃이 시각적으로 중첩되는 부분에서 마진도 같이 중첩된다. 부모-자손간 마진 병합도 역시 부여된 마진 값 중 가장 큰 값으로 병합된다. 아래 이미지를 참고하면, 부모와 자식 모두에게 50px의 마진이 부여되어 있다. (나는 왜 부모도 50px, 자식도 50px로 그림을 그렸을까? 숫자를 다르게 할걸 .. .하고 후회되는 맘이 있지만 ,, 애써 무시한다!)

.parent {
  margin: 50px;
}
.parent .child {
  margin: 50px;
}

우리는 두께가 50px인 '8' 모양의 흰색 여백을 어여 내놔 ~ 하고 요구했지만 브라우저는 'H' 모양의 여백을 내놓는다. 현실에선, 자식에게 부여한 50px의 상단 마진이 사라져버린 것이다. 이것은 자식의 상단 마진이 위로 돌출되어 부모의 마진과 병합되었다고 생각하면 된다. 만약 자식의 마진이 80px이었다면 80px 만큼 위로 돌출되어 부모의 마진이 마치 80px 인것처럼 보여졌을 것이다.

3. 해결 방법

멋쟁이 프엔이 되기 위해 더 집중해야할 부분은 해결 방법이다. 여러 가지 해결 방법을 하나씩 살펴보자 !

block이 아닌 값으로 변경

마진 병합 현상의 필수 조건은 block level 요소끼리 인접했을 때이다. 즉 block 요소가 아니라면 아무리 인접해도 병합되는 현상이 발생하지 않는다. 이때 inline-block으로 값을 변경하는 것은, 형제간 발생한 마진 병합 현상을 쉽게 해결할 수 있는 방법이다. flow-root 값은 부모에 설정해야 해결할 수 있으니 꼭 기억하자 !

• display: inline-block
• display: flow-root

  flow-root : block 요소이지만 마진 병합 현상이 발생하지 않는 root == html 요소처럼 만들어주는 값
  ㄴ html은 최상위 요소이기 때문에 마진 병합이 발생해도 아래로 레이아웃을 밀리지 않는다.

마진이 중첩되는 경계 분리

마진 병합 현상의 또다른 필수 조건은 마진이 부여된 요소끼리 인접하는 것이다. 인접하는 그 경계를 분리하면 그만인 것이다 ! 분리할 수 있는 방법은 여러가지가 있는데 몇 가지를 소개한다. 사실 이 방법은, 주어진 시안을 그대로 똑~같이 만들어야할 땐, 쩝 ... 사용이 어렵다..!

• CSS 프로퍼티 추가 - border, padding 등 (부모-자손간 마진병합 현상 해결방법!)
• 컨텐츠 추가 - 텍스트, table요소 등
  ㄴ 다만, 본래 태그의 목적에 부적합하게 사용되는 table 요소는 추천되지 않는다.

overflow 프로퍼티 활용

이 프로퍼티를 부모에 사용하는 순간! 해당 박스는 총 맞은 것처럼 ,,, ~ 이 아닌 구멍이 뚫린 것처럼 독단적인 영역으로 취급이 된다. 그렇기 때문에 마진 병합을 위해 상단으로 돌출될 수가 없다. 구멍 밖으로 나갈 수가 없으니까 말이다 ~! overflow의 두가지 값 모두 활용 가능한데, 따로 height를 강제로 부여하지 않았다면 hidden 값을 주는 것이 제일 쉬운 해결 방법이 될 듯 하다.

• overflow: scroll
• overflow: hidden

애초에 마진이 중첩되게 사용하지 않기 ~ ㅎ

이런 원리를 이해하지 못하고 마진은 내 맘대로 적용이 잘 안되니까 ~ 난 패딩을 주겠어 ! 하고 사용해왔던 방법이다. 이제야 모든 퍼즐이 맞춰지는 이 기분 ! 부모 - 자손간 레이아웃을 조절할 때 이 방법을 사용하는 사람들이 많은 것 같다. 왜냐? 내 맘대로 잘되니까 ~

.parent {
  padding: 50px;
}
.parent .child + .child {
  margin-top: 50px;
}

---

CSS load, transition

오늘 수업에서 transition 프로퍼티에 대해 잠깐 다뤘다. transition을 사용하면, CSS가 로드되는 그 찰나의 순간이 누가봐도 오류처럼 transition 되며 스르륵 ... 보여진다. 기본으로 세팅되어 있는 initial value, UA stylesheet에서 내가 작성한 css로 transition 되는 과정이 보여진다. 그동안 이걸 숨기려고 진짜 많이 애썼는뎁 쩝 (ㅠ)
하지만 드디어 완벽한 해결 방법을 알게 되었다! 바로 아래 태그를 추가하면 된다.

<script> </script>

이렇게 간단할수가 ? (충격에 말을 못 잇고 급 마무리)

---

오늘은 마진병합쓰에게 내 모든 🔥열🔥정🔥을 다 소진해버렸다. 사실 금욜쓰라 초큼 피곤하기도하다 ~! 앞으로 5개월을 달려야 할 나의 컨디션도 짱짱 중요하기 때문에 오늘은 이만 끝내겠다 ~ ~ ~ ~ .