1. 이슈: 상위 태그(빈 div태그)에 백그라운드 컬러를 지정 ⇒ 하위 태그 아래 margin부분에 적용되지 않음

  2. 이유: 상위태그의 height가 내부 태그에 맞춰서 크기를 조정 - margin끼리 맞닿을 때 상쇄

  3. ⇒ 자식 요소의 마진이 더 크든 작든 상관없이 상쇄된 마진은 부모 박스의 바깥으로만 렌더링이 됩니다. (부모를 벗어남)

    Untitled

  4. 해결방법: padding 또는 border 값을 주어 벽을 만들어주는 것이 안전합니다. 이렇게 하면 의도했던 대로 첫 번째(마지막) 자식 요소를 배치할 수 있습니다.

Untitled

  1. https://velog.io/@raram2/CSS-마진-상쇄Margin-collapsing-원리-완벽-이해

Untitled

해결 방법: padding-bottom: 1px;을 추가 해줌

  1. 리액트 img 태그에 src 경로 설정

데이터의 값을 이용해 이미지의 이름과 같게 하여 불러올려고 했으나 실패

⇒

//예시
import sampleImg from './~~~'

var aa = 'sampleImg'
<img src={sampleImg }> // true
<img src={aa}> // false

해결 이미지들을 객체에 담아 사용

import sampleImg1 from './~~~'
import sampleImg2 from './~~~'
import sampleImg3 from './~~~'

const imgBox = {sampleImg1, sampleImg2, sampleImg3}

<img src={imgBox.sampleImg1 }>
<img src={imgBox.sampleImg2 }>
<img src={imgBox.sampleImg3 }>

Untitled