[CSS] img 에 display: block 을 쓰는 이유

이미지의 위치가 이상할 때 display:block 적용

또는 이미지 하단에 여백이 생길 때 사용

 

이미지 태그 (<img>)는 기본적으로 인라인 요소처럼 동작

display: block;을 사용하면 이미지를 블록 요소로 변환하여 이러한 여백을 제거할 수 있다.

= 블록 요소는 자신만의 줄을 차지하므로, 이러한 여백이 제거.

---

display: block;을 추가하면 여백이 사라지는 이유는 다음과 같습니다:

1. 인라인 요소의 기본 특성 때문에 여백이 발생합니다.
2. display: block;을 사용하면 이미지가 블록 요소로 변환되어, 상하 여백이 제거됩니다.
3. 결과적으로 이미지가 상단에 정확히 맞게 배치됩니다.

---

reset.css
기본설정

/* CSS - 기본 설정 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  // position: relative;
  // pointer-events: none;
  text-decoration: none;
  list-style: none;
}

html {
  font-size: 16px;
}

a,
a:link,
a:visited {
  color: inherit; //하단 밑줄 색깔 없애기
}

img {
  display: block;
  max-width: 100%; /* 이미지가 부모 요소를 넘지 않도록 */
  height: auto; /* 이미지의 비율을 유지 */
}

max-width: 100%;

• 기능: 이미지의 최대 너비를 부모 요소의 100%로 제한합니다.
• 효과: 이미지가 부모 요소의 너비를 넘지 않도록 하여, 부모 요소보다 커지지 않게 합니다.
• 따라서 부모 요소보다 이미지가 커지는 경우 이미지가 자동으로 축소됩니다.
• 예시: 부모 요소의 너비가 500px일 때, 이미지의 원래 너비가 1000px이라면 max-width: 100%; 설정으로 인해 이미지의 너비가 500px로 축소됩니다.

---

height: auto;

• 기능: 이미지의 높이를 자동으로 설정하여 원본 비율을 유지합니다.
• 효과: 이미지의 너비가 조절될 때, 높이가 원본 비율을 유지하도록 자동으로 조절됩니다.
• 이렇게 하면 이미지가 왜곡되지 않습니다.
• 예시: 부모 요소의 너비가 조절될 때, 이미지의 높이가 너비에 맞춰 원본 비율을 유지하면서 조절됩니다.

---

max-width: 100%;와 height: auto;를 사용하면

이미지를 부모 요소의 크기에 맞게 조절하면서,

원본 비율을 유지할 수 있습니다.