HTML5 시작전 챙겨야할 것들 HTML5/CSS3 2012. 9. 13. 14:20

HTML5에서 새로 생긴 엘리먼트들은 IE에서 인식을 못하는데,
이러한 요소를 인식시키기 위해 아래의 javascript와 CSS를 넣어줘야한다.

head에 넣을 소스

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="respond.min.js"></script> <!-- IE6~8 미디어쿼리 해석 시켜줌 -->

respond.min.js 내려받기: respond.min.js

추가로 CSS에서 새로 추가된 요소를 block level 요소로 인식될 수 있도록 선언해 주고,
각 디바이스별 미디어쿼리 넣는다.

CSS 소스

rticle, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
   display:block;
}

/* 데스크탑용 CSS는 이곳에 작성 */

/* 미디어쿼리  : 태블릿용 1024px */
@media only screen and (max-width: 1024px) {
	body .row {width: 90%;}
}
/* 미디어쿼리 : 모바일용 767px */
@media only screen and (max-width: 767px){
    body {font-size: 16px;}
}

참고 사이트: http://helloworld.naver.com/helloworld/81480

'HTML5/CSS3' 카테고리의 다른 글

select box 디자인 화살표적용 css  (1) 2015.11.12
버튼 width 50%  (0) 2015.06.25
table 없이 table cell 코딩하기  (0) 2015.06.25
말줄임 ellipsis  (0) 2015.06.25
기기별 디바이스 사이즈  (0) 2013.02.04
,
프린트 영역 설정 javascript 2012. 9. 13. 10:03

HTML 소스

<a href="#" onclick="popPrintPreview('printHowmuch'); return false;">결과 출력하기</a>
<div id="printHowmuch">출력될 영역</div>

javascript

/*
 * 함수명 : popPrintPreview
 * 설명 : 특정 UI 영역에 대해 인쇄 미리보기 팝업을 띄움
 * 사용법 :팝업을 띄우고 싶은 영역에 id값 부여 후 popPrintPreview(id)로 호출
*/
function popPrintPreview(id){
	var docHeight = parseInt(jQuery("#" + id).outerHeight());
	var docWidth = parseInt(jQuery("#" + id).outerWidth());
	jQuery("#" + id).wrap('<div id="printArea" />');
	var thisHtml = jQuery("#printArea").html();
	htmlA = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html;charset=utf-8"/><title>인쇄 미리보기</title><link href="/css/fr/base.css" rel="stylesheet" type="text/css"  media="all" /><style type="text/css">a {cursor:default;} .section {margin-top:0}</style></head><body style="padding:10px; cursor:default" onclick="return false;">' + thisHtml + '<script type="text/javascript">window.print();</script></body></html>'; 
	printPop(htmlA,docWidth,docHeight);
}
function printPop(iVal,w,h){
	var popW = w + 20;
	var popH = '';
	var scr = '';
	if(h < 600){
		popH = h + 20;
		scr = 'no';
	}else{
		popH = 600;
		scr = 'yes';
		popW = popW + 17;
	}
	var iWindow = window.open('','WIN','scrollbars=' + scr + ', width='+ popW +', height=' + popH + ', location=no, menubar=no, status=no')
	iWindow.focus(); 
	iWindow.document.open(); 
	iWindow.document.write(iVal); 
	iWindow.document.close();
}


'javascript' 카테고리의 다른 글

Show tab  (0) 2013.04.19
팝업창 띄우기  (0) 2012.09.26
radio 선택에 따른 스타일 활성/비활성  (0) 2012.09.13
팝업창닫기 링크  (0) 2012.09.13
뒤로가기  (0) 2012.09.13
,
div에서 vertical-align:middle 정렬 HTML 2012. 9. 13. 09:52

1. text-align:center 와 상하padding조절로 수직정렬

2. line-height 와 height 조합으로 수직정렬 : 한줄일 때

3. display:table-cell 과 vertical-align:middle 조합으로 수직정렬 : 지원안하는 구브라우저에서 문제됨. 모바일코딩 일때 사용 O.
아래는 핵을 사용하여 IE6~8도 표현 됨.

<style type="text/css">
    .wrap {display:table; height: 200px; *position:relative;}
    .wrap .block {display:table-cell; vertical-align:middle; *display:inline-block; *position:absolute; *top:50%;}
    .wrap .block .pro {*position:relative; *top:-50%;}
  </style>

<div class="wrap">
    <div class="block">
        <ul class="pro">
            <li>상품</li>
            <li>상품</li>
            <li>상품</li>
        </ul>
    </div>
</div>

5. 틀이되는 영역안에 가운데 정렬할 요소를 넣고 빈 span태그 하나를 형제요소로 더 넣어서 인라인블록에 높이 100%(픽셀계산해서 틀과 같이 잡아도 됨)잡고 vertical-align:middle 주는방식으로 합니다.
줄바꿈 방지해야 합니다.

'HTML' 카테고리의 다른 글

button 태그 ie7 버그  (0) 2013.04.04
특별성 계산  (0) 2012.09.13
링크 # 걸었을때 화면 위로가기 방지  (0) 2012.09.13
return false;  (0) 2012.09.13
플래시 소스  (0) 2012.09.13
,

티스토리툴바