plora/index.html

## index.html
<!DOCTYPE html>
<html lang="ko-KR">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<meta charset="UTF-8">
	<title>WA IR 기법을 사용한 배너 디자인</title>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>

	<h1>콘텐츠 이미지를 사용하는 경우</h1>
	<a href="">
		<img src="images/mobile_banner.jpg" width="306" height="100" alt="뮤지컬 데스노트 쇼케이스 6월 1일 밤 8시 생중계">
	</a>

	<h1>배경이미지를 사용하는 경우</h1>
	<a class="banner" href="">뮤지컬 데스노트 쇼케이스 6월 1일 밤 8시 생중계</a>

</body>
</html>

## style.css
.banner {
	position: relative;
	display: block;
	width: 306px;
	height: 100px;
}

.banner::before {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
	content: '';
	background: url(../images/mobile_banner.jpg);
	width: 100%;
	height: 100%;
}
	<!DOCTYPE html>
	<html lang="ko-KR">
	<head>
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<meta charset="UTF-8">
	<title>WA IR 기법을 사용한 배너 디자인</title>
	<link rel="stylesheet" href="css/style.css">
	</head>
	<body>

	<h1>콘텐츠 이미지를 사용하는 경우</h1>
	<a href="">
	<img src="images/mobile_banner.jpg" width="306" height="100" alt="뮤지컬 데스노트 쇼케이스 6월 1일 밤 8시 생중계">
	</a>

	<h1>배경이미지를 사용하는 경우</h1>
	<a class="banner" href="">뮤지컬 데스노트 쇼케이스 6월 1일 밤 8시 생중계</a>

	</body>
	</html>
	.banner {
	position: relative;
	display: block;
	width: 306px;
	height: 100px;
	}

	.banner::before {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
	content: '';
	background: url(../images/mobile_banner.jpg);
	width: 100%;
	height: 100%;
	}