[TIL] 9.26

1. CSS

 

1- 1)  margin collpase ( 마진 병합 )

 

마진 병합은 CSS에서 발생하는 현상으로, 인접한 요소들의 수직 마진이 하나로 합쳐지는 것을 말합니다.

주요 특징:

1. 수직 방향으로만 발생합니다 (상하 마진).
2. 가장 큰 마진 값이 적용됩니다.
3. 부모-자식 요소 사이에서도 발생할 수 있습니다.

.box1 {
  margin-bottom: 20px;
}

.box2 {
  margin-top: 30px;
}

 

이 경우, 두 박스 사이의 실제 간격은 30px이 됩니다 (더 큰 값인 30px이 적용됨).

마진 병합 방지 방법:

1. 부모 요소에 overflow: hidden; 적용
2. 부모 요소에 padding 또는 border 추가
3. 플렉스박스나 그리드 레이아웃 사용

참고: https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

 

 

1- 2)  글로벌 리셋

 

브라우저마다 기본 스타일이 다를 수 있어 일관성 있는 디자인을 위해 사용합니다.

   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }

 

장점	단점
- 일관된 시작점을 제공 - 브라우저 간 차이를 줄인다 - 레이아웃 계산을 단순화	- 모든 요소에 적용되어 성능에 영향을 줄 수 있음 - 일부 유용한 기본 스타일을 제거할 수 있음

 

 

일반적인 사용법

1. 완전한 글로벌 리셋보다는 Normalize.css나 필요한 부분만 선택적으로 리셋하는 경향이 있습니다.
2. CSS-in-JS 라이브러리(예: styled-components, Emotion)를 사용할 때는 글로벌 스타일을 별도로 정의합니다.
3. 컴포넌트 기반 개발에서는 전체적인 리셋보다 컴포넌트별 스타일링에 더 중점을 둡니다.

 

 

1- 3)  인라인, 블록, 인라인블록 차이 특징 리마인드

 

https://daunje0.tistory.com/149

[CSS] 3. 인라인, 블록, 인라인블록

 

 

 

2. JS

 

2- 1)  Symbol.iterator 와 iterator protocol 리마인드

https://daunje0.tistory.com/150

[Javascript] Iterable, Iterator 프로토콜

 

3. React

https://daunje0.tistory.com/151

[React] Vue 에는 없는 React 만의 표현들