launchy
Posted in etc at 4월 27th, 2012. No Comments.
xhtml, css, html5, javascript, etc..
<img src=”이미지” alt=”" usemap=”#이미지맵 네임” border=”0″>
<map name=”이미지맵 네임”>
<area shape=”rect” coords=”왼위(좌표1), 왼위(좌표2), 오른아래(좌표1),오른아래(좌표2) href=”#none” target=”_blank” />
</map>
<style type=”text/”>
::-moz-selection { background: #c30; color: #fff; }
::selection { background: #c30; color: #fff; }
</style>
브라우저의 html5, css3 지원여부를 체크해준다.
IE 코멘트 필터의 병행사용으로 미지원 브라우저에 대한 javascript pullback을 지원,
스탠다드브라우저들을 제외함으로써 브라우저의 효율성을 높일 수 있다.
<style type=”text/css”>
@font-face{ font-family:ngttf; src:url(./font/NanumGothic.ttf);}
@font-face{ font-family:ngeot; src:url(./font/NanumGothic.eot);}
body {
font-size: 25px; line-height: 1.5; font-family: NanumGothic, 나눔고딕, ngttf, ngeot, Dotum, Tahoma;
}
</style>
나눔폰트 다운(eot, ttf)
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<style type=”text/css”>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#head {
height: 100px;
background: #ddd;
position: relative;
z-index: 1;
}
#body {
min-height: 100%;
margin: -100px 0 -50px;
}
* html #body {
height: 100%;
}
#content-area {
padding: 100px 0 50px;
}
#foot {
height: 50px;
background: #ddd;
}
</style>
</head>
<body>
<div id=”head”>
요건 100px 높이 헤드
</div>
<div id=”body”>
<div id=”content-area”>
<p>컨텐츠 영역 1</p>
<p>컨텐츠 영역 2</p>
<p>컨텐츠 영역 3</p>
<p>(계속 추가해서 테스트 가능)</p>
</div>
</div>
<div id=”foot”>
요건 50px 높이 풋
</div>
</body>
</html>
참조 ) 신현석