카카오웹툰의 개별 웹툰 페이지에 들어가보면 배너 이미지가 두 장이 겹쳐서 배치되어 있고 더러는 애니메이션이 적용되어 있는 것을 확인할 수 있다.
https://webtoon.kakao.com/content/타락도시/2915
이렇게 두 장의 이미지를 겹쳐서 배치하는 간단한 HTML css 설정 방법을 알아본다.
<div>
<div>타락도시</div>
<div><a href='http://webtoon.kakao.com/content/타락도시/2915'>http://webtoon.kakao.com/content/타락도시/2915</a></div>
<div class='position: relative;'>
<div style='position: absolute; top: 150px; max-height: 600px; overflow: hidden;'><img src='https://kr-a.kakaopagecdn.com/P/C/2915/bg/2x/6d702d8f-4ade-4cb4-8b00-7c1264e9864d.webp'></div>
<div style='position: absolute; top: 150px;'><img src='https://kr-a.kakaopagecdn.com/P/C/2915/c1/2x/2767cee6-eeda-40f5-8195-94fa2e9b7e49.png'></div>
</div>
</div>
- 첫번째 이미지와 두번째 이미지의 y offset을 top: 150px로 지정하여 왼쪽 위가 겹치도록 했다.
- 첫번째 이미지의 최대 높이는 600px이며 overflow: hidden으로 지정하여 600px 초과 영역에 대해서는 화면에 렌더링되지 않도록 처리했다.
(이미지 출처: 카카오웹툰)
¶ 위 html 파일이 렌더링된 화면의 스크린샷
