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

CSS의 absolute position으로 이미지 캡션 겹치기 | 달레의 웹 프로그래밍

www.youtube.com

CSS의 absolute position으로 이미지 캡션 겹치기 | 달레의 웹 프로그래밍

다음 내용이 궁금하다면?

또는

이미 회원이신가요?

2023년 11월 8일 오후 7:45

 • 

저장 6조회 2,863

댓글 0