img 공백 발생
block 박스 안의 inline 요소는 line-height로 인해서 gap이 발생한다.
이 것은 inline 요소가 해당 요소를 텍스트처럼 인식하기 때문이다. 기본적으로 컴퓨터 그리고 html은 서구 문화권에서 시작되었다. 때문에 자연스럽게 서구 문화권의 텍스트 작성 방법을 반영한다. 그런데 알파벳을 쓸 때는 눈에 보이지는 않지만 디센더와 어센더 라는 것이 존재하고 이에 맞춰서 텍스트를 작성한다.
물론 실제 텍스트를 작성하는 것과 브라우저에서 보여지는 텍스트가 완전히 동일하게 동작하지는 않는것 같지만, 그럼에도 기본적인 부분은 알파벳의 텍스트 작성 방법에 맞춰서 동작하게 되는 것이다.
그런데 문제는 이미지를 사용할 때 발생한다. img 요소는 inline 요소이기 때문에 베이스라인에 맞춰서 이미지가 정렬된다. 때문에 베이스라인과 디센더라인 사이의 여백인 디센더가 이미지와 외부 block box사이에 존재하게 되는 것이다.
그래서 이 것을 해결하기 위해서는 img 요소의 vertical-align 값을 기본값인 baseline이 아닌 bottom, middle, top등으로 변경해줘야 한다. (보통은 top으로 변경함)
img {vertical-aling: top;}어센더와 디센더
사실 우리는 알파벳을 쓸 때 어센더와 디센더가 있다는 것을 어렴풋이 알고 있다. 다만 어센더와 디센더라고 부르는 것을 몰랐을 뿐이다.
지금 하는 이 말이 거짓말이 아니라는 것은 처음 알파벳을 배울때 사용하는 영어노트를 떠올려보면 알 수 있다.
[이미지 출처 : 구글 이미지 검색 - 팝콘에듀 사이트]
하지만, 사실 위 이미지만으로는 어센더가 무엇인지, 디센더가 무엇인지 정확하게 알수는 없다.
그래서 이미지를 준비했다.
이미지에 작성되어 있는 것처럼 알파벳은 어센더라인, X-라인, 베이스라인, 디센더 라인에 맞춰 글자를 쓴다. 어센더 라인과 x라인 사이를 어센더, x라인과 베이스라인 사이를 x-높이, 베이스라인과 디센더 라인 사이를 디센더라고 한다.
그리고 inline 속성을 가지고 있는 이미지는 이미지상에 빨간색으로 표시되어 있는 베이스라인에 맞춰서 보여지기 때문에 빨간색으로 표시되어 있는 베이스 라인과 가장 아랫줄의 디센더 라인 사이의 공간인 디센더가 바깥 block box와 이미지 사이의 여백으로 보여지게 되는 것이다.
위에서도 말했지만 사실 브라우저에서는 실제 타이포 작성 방식과 동일하게 동작하지는 않는것 같다.
mdn 문서를 확인해보면 vertical-align은 여러 속성을 가지고 있다. 하지만 top은 어센더라인, baseline(기본값)은 베이스라인, bottom은 디센더라인에 해당하고 x라인에 대한 속성값은 없다고 보여진다.
타이포그래피 천일야화 원유흥, 서승연, 송명민 저 참고
vertical-align
vertical-align은 inline 또는 table-cell box에서의 수직 정렬을 지정한다.
vertical-align에서 사용할 수 있는 속성은 아래와 같다.
baselinesubsupertext-toptext-bottommiddletopbottom<percentage><length>
이 속성들은 inline요소에서 적용할 때와 table cell 에서 사용할 때가 다르게 적용된다.
table-cell에서 사용되는 top, middle, baseline, bottom은 단어의 뜻이 가져오는것과 크게 별다른 점이 없으므로 일반적으로 사용하면 된다. 하지만 inline에서 사용할때는 어떻게 적용되는지 알아두는 것이 좋을 것 같다.
inline 요소에 적용할 때
inline 요소에 vertical-align을 적용하는 것은 사실 주로 부모 엘리먼트에 대하여 상대적으로 수직 정렬하는 것을 의미한다. 예를 들어서 이미지와 텍스트를 나란히 정렬하거나, 텍스트를 작성중에 강조하기 위해 일부 단어만 span을 통해 폰트 사이즈를 키우고 정렬하는 경우에 유용하게 사용할 수 있다.
아래의 이미지는 알아보기 쉽게 하기 위해 폰트 사이즈나 백그라운드 색상을 변경하는 등의 설정을 했지만, 사실 div안에 텍스트를 작성하고 "Kim kyuree"라는 단어를 span을 이용해서 폰트 사이즈만 크게 한 별다를 것 없는 코드를 적용하고 우리가 확인하려는 vertical-align은 별도로 지정하지 않았으므로 기본값인 baseline이 설정된 상태이다.
이미지에서 보여지듯 모든 글씨가 아래에 존재하는 가상의 선을 기준으로 정렬되어 있는것처럼 보인다. 이 것이 baseline을 기준으로 정렬되어 있는것이다.
아래에서는 이 기본 이미지를 기준으로 vertical-align이 변경되었을 때 어떻게 보이는지 확인하려고 한다.
1. vertical-align: top;
2. vertical-align: middle;
3. vertical-align: bottom;
위에 작성한 top, middle 설정은 사실 보여지는 그대로라서 크게 설명할 필요가 없을 것 같다.
하지만 bottom으로 설정한 부분은 baseline으로 설정되어 있는 기본값과의 비교가 필요할 것 같다.
기본(baseline으로 설정된) 이미지의 작은 글씨를 확인하면 기본설정은 노란색으로 표시되어 있는 block 박스의 아웃라인에서 어느정도 띄어져서 올라가 있는 것을 볼 수 있다. (아마도 padding 값을 주기라도 한 것처럼?)
반면 bottom으로 설정된 이미지의 작은 글씨는 노란색 박스에 거의 딱 붙어서 보이고 있다. (약간의 이미지는 텍스트 자체의 디센더 문제인것으로 생각된다.)
지금은 텍스트로 설정을 했지만 사실 img와 텍스트의 정렬도 위의 예시 이미지와 같으므로 필요한 부분에 적절하게 사용하면 좋을 것 같다.
