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

지난 시간에서는 CSS의 absolute position의 기본적인 특징과 작동 매커니즘에 대해서 살펴보았는데요. 이번 시간에는 이를 응용해서 이미지 일부로 캡션을 넣는 방법에 대해서 알아보겠습니다. 📺 동영상: https://youtu.be/PvQraBFOnnw 📝 포스팅: https://www.daleseo.com/css-position-absolute-image-caption/ 🧑‍💻 실습 코드: • 이미지 하단 캡션 겹치기: https://codepen.io/daleseo/pen/ZEzvJvQ • 이미지 상단 캡션 겹치기: https://codepen.io/daleseo/pen/bGbaraJ HTML 요소를 원하는 위치에 배치하기 위해서 사용되는 CSS의 position 속성에 대해서 좀 더 공부하고 싶으시다면 아래 게시물도 참고해보세요 :) 📕 CSS의 5가지 position 속성 값 기본 정리: https://careerly.co.kr/comments/93201 📗 CSS의 fixed position을 통한 HTML 요소의 위치 고정: https://careerly.co.kr/comments/92417 📘 CSS의 fixed position으로 메뉴바 상단 고정하기 🔝: https://careerly.co.kr/comments/86578 📙 CSS의 absolute position 작동 메커니즘 이해: https://careerly.co.kr/comments/92417