HTML5 게임 만들기, Relative Units

카테고리 없음

HTML5 게임 만들기, Relative Units

Soul-Learner 2012. 6. 8. 14:53

웹브라우저 화면 상에서 글자나 영역의 크기를 지정할 때 상대적인 단위(em) 사용하기

main.css


body {
	margin : 0;
}

#game {
	position : absolute;
	left : 0;
	top : 0;
	font-family: Geo;
	font-size : 40px; /*em 단위의 기준이 되는 폰트 크기, 즉, #game 안에 있는 태그에서 1em 은 40px을 의미함*/
	width : 8em;
	height : 12em;
	/*width : 320px;
	height : 480px;*/
	
	background-color : rgb(200,200,100);
}

#game .screen {
	position : absolute;
	width : 100%;
	height : 100%;
	display : none;
	z-index : 10;
}

#game .screen.active {
	display : block;
}

#splash-screen {
	text-align : center;
	/*padding-top : 100px;*/
	padding-top : 2.5em;
}
#splash-screen .continue {
	/*cursor : pointer;
	font-size : 30px;*/
	cursor : pointer;
	font-size : 0.75em;
}
.logo {
	font-size : 1.5em;
	line-height : 0.9em;
	text-shadow : 0.03em 0.03em 0.03em rgb(255,255,0),
		-0.03em -0.03em 0.03em rgb(255,255,0),
		0.10em 0.15em 0.15em rgb(0,0,0);
	font-family : Slackey;
	/*font-size : 60px;*/
	/*line-height : 60px;*/
	margin : 0;
	text-align : center;
	color : rgb(70,120,20);
	/*text-shadow : 1px 1px 2px rgb(255,255,0),
	-1px -1px 2px rgb(255,255,0),
	5px 8px 8px rgb(0,0,0);*/
}
.no-textshadow .logo {
	filter : dropshadow(color=#000000,offX=3,offY=3);
}

index.html


<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>HTML5, 카드 맞추기 게임</title> 
<link rel="stylesheet"  href="../styles/main.css" />
<link rel="stylesheet"  href="../styles/fontfaces.css" />
<script src="../scripts/modernizr.js"></script>
<script src="../scripts/loader.js"></script>
</head>
<body>
<div id="game">
	<div class="screen"  id="splash-screen">
		<h1 class="logo">Jewel <br/>Warrior</h1>
		<span>Click to continue</span>
	</div>
	<div class="screen"  id="main-menu"></div>
	<div class="screen"  id="game-screen"></div>
	<div class="screen"  id="high-scores"></div>
</div>
</body>
</html>