CSS_원형이미지안에 편집 버튼 만들기(카카오톡 프로필)

썸네일의 이미지를 만들고 싶어서 이것저것 해보다가 알게된 사실들을 적어봄

<div className="모두를감싸는div">
   <img className="이미지파일" src="배경프로필이미지.jpg"/>
   <p className="텍스트"> 편집 </p>
</div>

구조는 이런식으로 만들었다.

CSS 를 살펴보자

.모두를감싸는div{
position:relative;
overflow: hidden;
}

.이미지파일{
width:100%
}

.텍스트{
position:absolute;
text-align: center;
width: 100%;
height: 20px;
margin-top: 80%;
background-color: grey;
cursor: pointer;

}

이렇게 주면 됨.
overflow 속성을 hidden 으로 주면 삐져나오는 이미지를 안보이게 처리한다.
이걸몰라서 계속 이미지가 밖으로 튀어나왔었음.
그리고 div 포지션을 relative로 주고 텍스트는 그안에서 absolute로 적용받아
위치를 설정해주어야 예쁘게 자리잡는다.
편--안--
이제 저 편집 누르면 이미지를 가져오도록 해봐야겠다.