[CSS] 이미지 위에 텍스트 덮는 방법

위와 같이 이미지와 텍스트가 주어져있을 때 이미지 위에 텍스트를 입히는 방법을 알아보고자 한다.

1. wrap, image, text div를 구성해준다.

<div class="user-wrap">
    <div class="user-image">
    	<img src="/assets/img/sub_card.png" alt="" />
    </div>
    <div class="user-text">
        <p>{id}님의 덕담보따리</p>
    </div>
</div>

2. 각 div에 맞춰 css를 넣어준다.

.user-wrap {
	width: 100%;
	margin: 10px auto;
	position: relative;
}
.user-wrap img {
	width: 100%;
	vertical-align: middle;
}
.user-text {
	position: absolute;
	top: 40%;
	left: 50%;
	width: 100%;
	transform: translate( -50%, -50% );
    font-size: 20px;
    font-family: 'ypseo';
    text-align:center;
}

이미지와 텍스트를 감싸고 있는 wrap요소에 "position: relative"를 추가해준 뒤에, text요소에 "position: absolute"를 추가해준다. 위치는 위에서 40%, 왼쪽에서 50%로 정한다.(위치값은 해당 이미지에 맞춰 정해주면 된다.)

꼭지점을 현재 위치 기준 -50%, -50%을 해주어 img의 가운데로 맞춰준다.