HTML 사진 위에 글 작성하는 법

image.html

<div class="main_image">
      <img src="beach.jpg" width="100%" height="500px">


    <h1 class="main_image_text" style="font-size:50px">가운데에 글씨 쓰기</h1>

</div>

style.css

  <style>
  .main_image {
    position: relative;
  }
  .main_image_text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate( -50%, -50% );
    color: white;
  }
  </style>

1. 사진과 텍스트를 묶은 main_image 선택자에 다음을 추가한다

   position: relative;

2. 텍스트만 묶음 main_image_text 선택자에 다음을 추가한다

   position: absolute;
   top: 50%;
   left: 50%;

   이 때, 글씨가 정중앙에 오지 않는다면 다음을 추가한다

   transform: translate( -50%, -50% );

참고로 나는 겉보기에는 잘나왔는데
보이지않는 이미지가 위에 있던 a태그를 가려서
a태그가 눌리지가 않았다!

이 때 position:relative를 날렸더니
별다른 문제없이 해결되었다..

알고보니 relative가 이전요소부터 연결되서
그리는거라서 그런거였다!!