Last active
August 29, 2015 14:21
-
-
Save yamoo9/f4a8f47060dcc11123d4 to your computer and use it in GitHub Desktop.
WA IR 기법을 사용한 배너 디자인
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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%; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment