CSS 이미지 위에 버튼 - CSS imiji wie beoteun

Question

티스토리 뷰

position: relative;	위치를 계산할때 static의 원래 위치부터 계산한다.
position: absolute;	원래 위치와 상관없이 위치를 지정할 수 있다. 단, 가장 가까운 상위 요소를 기준으로 위치가 결정 된다.

<div id="testImg">
  <img src="/images/test.png" width="700" height="350" alt="테스트이미지" />
  <button class="btn1" type="button" onclick="javascript:sensorBtnClick('btn1');">버튼1</button>
  <button class="btn2" type="button" onclick="javascript:sensorBtnClick('btn2');">버튼2</button>
</div>

<style>
#testImg{
  postiion : relative;
  width: 700px;
  height: 350px;
}
button.btn1 {
  position: absolute;
  top: 170px;
  left : 35px; 
}
button.btn2 {
  position: absolute;
  top: 85px;
  left : 95px;
}
</style>

결과

목차 Show

티스토리 뷰

CLASS는 여러 곳에 가능하지만 ID는 한 개만 가능하다

즉, 스타일 CSS에 스타일을 넣어서 효과를 줘야하는데 이를 한눈에 보기쉽게

정리하기 위해선 CLASS를 정해줘서 정리하기도 편하고 각각의 다른효과를 줄 수 있다

CSS해부하기

overflow hidden은 마스크와 같은 효과

img/sample-3.jpg는 브라켓으로 끌어온 파일의 경로를 적어주면 사진을 넣을 수가 있다

.container{
text-align: center;
margin-top: 200px;

}

.card-box{
    display: inline-block; 한 줄로 정렬하기
    margin: 10px; 여백
    width: 100%;
    max-width: 280px;
    position : relative;
    border-radius: 16px;
    overflow: hidden; 마스크 역할?
    width: 280px;
    height: 360px;
    overflow: hidden;
    box-shadow: 0 20px 35px rgba(0,0,0,26); 박스 그림자
    transition: 0.5s
}
.card-box:hover{ 박스 그림자 마우스 댈 시
    transform: scale(0.95);
}
.img-gradient{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1));
    z-index: 1; 맨앞으로 보내기?
}
.text-wrap{
    position: absolute;
    bottom: 0;
    padding: 24px;
    z-index: 2;
    text-align: left;
}
.text-wrap h2{
    color: #fff;
    font-size: 24px;
    margin-bottom: 8px;
    font-weight: bold;
    line-height: 1.5;
    margin: 0;
}
.text-wrap p{
    color: #fff;
    font-size: 18px

         }
.play-btn{
    width: 60px;
    height: 60px;
    position: absolute;
    right: 24px;
    top: 24px;
    background: #004fff url(../img/icon-play png)
    no-repeat center;
    background-size: 24px;
    border-radius: 50%; 박스 모서리 둥글기
    z-index: 2;

}

사진을 강조하는 블로그나 사이트의 경우 이미지 위에 텍스트를 놓는 경우가 많습니다. 텍스트가 보이게 놓기도 하고, 마우스를 올리면 보이게 하기도 합니다. 텍스트를 이미지 위에 어떻게 넣는지 알아보겠습니다.

방법 1

다음은 이미지와 텍스트가 있는 간단한 문서입니다. 이미지는 파란색의 사각형이고, 구분하기 쉽도록 텍스트의 배경색은 노란색으로 했습니다.

<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>CSS</title>
		<style>
			.jb-wrap {
				width: 40%;
				margin: 10px auto;
				border: 1px solid #000000;
			}
			.jb-wrap img {
				width: 100%;
				vertical-align: middle;
			}
			.jb-text {
				padding: 5px 10px;
				background-color: yellow;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div class="jb-wrap">
			<div class="jb-image"><img src="images/400x300.png" alt=""></div>
			<div class="jb-text">
				<p>HELLO</p>
			</div>
		</div>
	</body>
</html>

이미지와 텍스트를 감싸고 있는 요소에 position: relative를 추가합니다.
텍스트를 감싸고 있는 요소에 position: absolute를 추가하고, 위치를 50%로 정합니다.

.jb-wrap {
	width: 40%;
	margin: 10px auto;
	border: 1px solid #000000;
	position: relative;
}
.jb-wrap img {
	width: 100%;
	vertical-align: middle;
}
.jb-text {
	padding: 5px 10px;
	background-color: yellow;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
}

왼쪽 위 꼭짓점의 위치가 위에서 50%, 왼쪽에서 50%이므로, 텍스트가 정가운데에 있지 않습니다.

이를 해결하기 위해 transform 속성을 추가합니다.

.jb-wrap {
	width: 40%;
	margin: 10px auto;
	border: 1px solid #000000;
	position: relative;
}
.jb-wrap img {
	width: 100%;
	vertical-align: middle;
}
.jb-text {
	padding: 5px 10px;
	background-color: yellow;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
}

이제 이미지의 정가운데에 텍스트가 있습니다.

방법 2

transform 속성은 IE 10 이상을 지원합니다. 만약 IE 8, IE 9를 꼭 지원해야 한다면, 다른 방식을 사용합니다. 테이블의 셀은 수직 가운데 정렬이 가능하다는 걸 이용하는 방식입니다. HTML 마크업과 CSS 코드 둘 다 복잡해지지만, IE 8 이상에서 사용할 수 있습니다.

<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>CSS</title>
		<style>
			.jb-wrap {
				width: 40%;
				margin: 0px auto;
				position: relative;
			}
			.jb-wrap img {
				width: 100%;
				vertical-align: middle;
			}
			.jb-text {
				position: absolute;
				top: 0px;
				width: 100%;
				height: 100%;
			}
			.jb-text-table {
				display: table;
				width: 100%;
				height: 100%;
			}
			.jb-text-table-row {
				display: table-row;
			}
			.jb-text-table-cell {
				display: table-cell;
				vertical-align: middle;
			}
			.jb-text p {
				margin: 0px 40px;
				padding: 10px;
				background-color: #ffffff;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div class="jb-wrap">
			<div class="jb-image"><img src="images/400x300.png" alt=""></div>
			<div class="jb-text">
				<div class="jb-text-table">
					<div class="jb-text-table-row">
						<div class="jb-text-table-cell">
							<p>HELLO</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

CSS 이미지 겹치기 이미지 위에 글쓰기