[html/css] img 태그에 vertical-align RESET 필요한 이유

반응형

 

[html/css] img 태그에 vertical-align RESET 필요한 이유

---

vertical-align 과 typography

 

Problem

 

아래 예제 코드를 보면 알겠지만 이미지의 height 628p이다.

하지만 img를 감싸고 있는 div의 height는 633px으로 5px 만큼 더해진 문제가 있었다. 왜 그럴까?

 

See the Pen vertical-align img by nuhends (@nuhends) on CodePen.

 

 

Why?

이를 알기 위해서는 몇가지 배경지식이 필요하다.

 

배경 지식 1: img의 display 기본값은 inline 이다.
배경 지식 2: inline 요소는 typography 규칙인 vertical-align 속성이 적용된다. 

img 태그 display 기본 값

 

 

이제 아래 예시를 살펴보자. 자세히 살펴보면 img 요소와 p 요소 사이에 간격이 생긴다. 

이는 vertical-align 속성의 기본값이 적용되었기 때문이다. 이를 제대로 알기 위해선 Typography에 대한 지식이 필요하다.

 

See the Pen vertical-align by nuhends (@nuhends) on CodePen.

img와 다른 요소 사이에 생기는 간격

 

Typography

타이포그래피(Typography)는 '활자'를 의미하는 'Type'와 '-술'을 의미하는 접미사 'Graphy'의 합성어. 쉽게 문자(활자)를 어떻게 배열할까에 관한 기술, 규칙 등을 의미

typography

 

이 개념을 web에 적용할 때, baseline, ascender, descender 개념들을 구현한 것이 바로 항상 아리송한 vertical-align 속성이다.

 

vertical-align의 기본값은 baseline이다.

 

이미지 또한 인라인 요소이므로 기본 값은 baseline으로 적용된다.

정리해보자면

- 이미지는 inline 요소이다 = text와 같다
- text(inline 요소)는 typography 레이아웃을 따른다.
- 고로 이미지는 typography 레이아웃에 따라 적용된다.
=> 즉, 이미지와 다음 요소 사이에 생기는 공백은 baseline과 subscript baseline사이의 간격 임을 알 수 있다.

 

How?

그렇다면 어떻게 이 문제를 해결할 수 있을까?

1. vertical-align을 baseline에서 top 혹은 bottom으로 바꾸자.
2. 요소의 위 또는 아래로 기준을 바꾸면 간격은 사라진다.
3. display: block으로 바꾸자.
4. block이 적용되면 텍스트 레이아웃을 따라가지 않고, 박스 모델을 따라가게 된다.

 

개인적 의견

경험상 보통 img를 사용할 때 div 같은 다른 요소로 감싸서 처리하는 경우가 많았다.

div {
	width: 500px;
	height 500px;
}

div img {
	display: block;
	width: 100%;
	// height: auto; height는 보통 주지 않는다. 비율에 맞게 width에 따라 자동으로 늘어나기 때문
}

그러므로, display: block을 주고 이를 reset에서 선언해두는게 dx에 더 도움이 된다고 생각합니다.

참고로 svg의 display도 inline이므로 함께 처리하는 걸 추천

// reset.css
img, svg {
	display: block;
}