CSS의 absolute position으로 이미지 캡션 겹치기

지난 포스팅에서 absolute position의 기본적인 특징과 작동 매커니즘에 대해서 살펴보았습니다. 이번 포스팅에서는 absolute position를 응용해서 이미지 위에 캡션을 겹치는 방법에 대해서 알아보겠습니다.

기본 이미지 캡션 배치

웹페이지 상의 이미지에 캡션을 넣을 때는 보통 HTML5에서 도입된 <figure/>와 <figcpation/> 태그를 사용합니다.

<figure>
  <img src="https://picsum.photos/200" alt="random photo" />
  <figcaption>A random photo</figcaption>
</figure>

CSS의 position 속성을 건드리지 않으면 이미지와 캡션은 서로의 영역을 침범하지 않고 위아래로 차례대로 배치됩니다.

absolute position 적용

figcaption 엘리먼트의 position 속성을 absolute로 바꿔보겠습니다.

figcaption {
  /* 생략 */
  position: absolute;
}

얼핏 보면 단지 캡션 영역의 폭이 감싸고 있는 텍스트의 너비에 맞도록 줄어든 것처럼 보일 것입니다. 하지만 absolute position의 특징을 상기해보면, figcaption 엘리먼트는 더 이상 부모인 figure 엘리먼트에 속박되지 않고 웹페이지 상에서 자유롭게 배치될 수 있는 상태가 됩니다. 따라서, figcaption 엘리먼트의 너비가 반드시 부모 엘리먼트의 100%을 채울 필요가 없어지게 되며, 브라우저 개발자 도구로 figure 엘리먼트의 높이를 확인해보면 딱 이미지의 높이인 200px로 줄어들었음을 알 수 있게 됩니다.

absolute position 자체에 대한 자세한 설명은 관련 포스팅를 참고 바랍니다.

offset 조정

이제 offset 속성(top, left, bottom, right)을 사용해서 figcaption 엘리먼트의 위치를 변경해보겠습니다. 캡션 영역이 좌측, 우측, 하단에 딱 달라붙길 원하기 때문에, left, right, bottom 속성을 모두 0으로 설정합니다.

figcaption {
  /* 생략 */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

앗, 이렇게 했더니, 약간 원하는 바와 다르게 캡션 영역이 화면 맨 아래에 배치되었습니다. :( 상위 엘리먼트 중에 position 속성이 relative인 엘리먼트가 없다면 offset 속성이 적용되는 기준(positioning context)은 전체 화면이 되기 때문입니다.

positioning context 변경

배치 기준을 figure 엘리먼트로 변경하기 위해서는 figure 엘리먼트의 position 속성을 relative로 바꿔줘야 합니다.

figure {
  /* 생략 */
  position: relative;
}

이제 원하는 바와 같이 캡션 영역이 바로 이미지 하단에 이미지의 일부로 자리 잡게 되었습니다!

[응용] 이미지 상단에 캡션 배치

offset 속성만 살짝 바꿔주면 이미지의 상단으로 캡션을 옮길 수 있습니다. 참고로 left와 right 속성 대신에 width 속성을 사용할 수도 있습니다.

figcaption {
  /* 생략 */
  position: absolute;
  top: 0;
  width: 100%;
}

마치면서

이상으로 absolute position을 이용해서 이미지의 일부로 캡션을 넣는 방법에 대해서 알아보았습니다. offset 속성을 바꿔가면서 연습하셔서 좀 더 다양하게 이미지를 연출하실 수 있으셨으면 좋겠습니다.

참고

• MDN position
• MDN figure