HTML 이미지 위에 이미지 - HTML imiji wie imiji

Question

목차 Show

기본 이미지 캡션 배치
offset 조정
positioning context 변경
[응용] 이미지 상단에 캡션 배치
마치면서
댓글을 달아 주세요
그냥 이미지 HTML
div 겹친 HTML

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

기본 이미지 캡션 배치

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

<figure>
  <img src="https://source.unsplash.com/random/200x200" alt="random photo" />
  <figcaption>A random photo</figcaption>
</figure>

CSS의 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

category JSP-HTML-CSS/SOURCECODE 2019. 10. 26. 17:00 by I's

//z-index 높은게 위로 올라감
<div id="img1" style="display:none; position:absolute; top:0px; left:0px; z-index:2"> </div>
<div id="img2" style="display:block; position:absolute; top: 0px; left :0px; z-index:1"> </div>

'JSP-HTML-CSS > SOURCECODE' 카테고리의 다른 글

크롬 자동완성 로직이해 & 처리 꼼수 (0)	2021.10.26
[JSTL] eq, ne, lt, gt, le, ge 문법 (0)	2019.10.27
[JSP] 페이징 글번호 처리 (0)	2019.10.26

tag absolute, block, HTML, None, tag, z-index

댓글 0 , 엮인글

댓글을 달아 주세요

댓글을 남겨주세요

이름 NICK*

비밀번호*

홈페이지

공개 비공개

다음과 같이 div 안에 이미지를 넣고 그 위에 투명한 div가 올라오도록 하는 이미지를 만들어보았다

컴퓨터에 마땅한 이미지가 없어 예전에 그려두었던 호시노겐 그림을 넣었다

그냥 이미지 HTML

    <div class="item-box">
      <div class="image">
        <img src="../assets/image.png" alt="">
      </div>
    </div>

CSS

  .item-box{
    width: 100px;
    height: 100px;
    padding: 5px;
    margin: 5px;
    box-shadow: inset 1px 2px 4px rgba(0, 0, 0, 0.25);
    background: #fff;
    border-radius: 10px;
    display: table;
  }
  .image{
    display: table-cell;
    vertical-align: middle;

  }
  img{
    width: 100%;
    border-radius: 10px;
  }

이미지를 가운데 정렬 시키기 위해서 부모 div의 display 를 table 로 만들고 자식 div에 display : table-cell을 준 후

vertical-align : middle을 주었다!

div 겹친 HTML

<div class="item-box">
  <div class="image">
    <img src="../assets/image.png" alt="">
  </div>
  <div class="sold-out">
    <p>sold out</p>
  </div>
 </div>

다음과 같이 내가 원하는 div의 직속자식으로 sold-out 클래스를 가진 div를 만들어주었다

CSS

  .item-box{
    position: relative;
  }
  
  .sold-out{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    display: table;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    border-radius: 10px;
  }

  .sold-out > p{
    display: table-cell;
    vertical-align: middle;
  }

item-box 클래스에는 position : relative 값을 추가해주고

sold-out 클래스는 position : absolute 값을 주었다

처음 다른 블로그를 참고하여 부모에 relative 자식에 absolute 값만 줬을 때는 이런식으로 자식 상자가 옆으로 가벼렸는데

left : 0px; right : 0px을 줘서 위치값을 초기화 시켜주면 원하는 위치에 이동한다!

CSS 이미지 겹치기 HTML 이미지 겹치기 CSS 이미지 2개