JKUN

Welcome To The Jkun.net

블로그 포스트 검색결과


HTML 에 해당되는 글 6개가 검색 되었습니다.

  1. 2016.09.23 A4 용지 출력
  2. 2015.05.08 IE 10 이상으로 셀렉트박스 아이콘 숨기기
  3. 2012.03.13 이미지 맵
  4. 2011.11.09 최고의 HTML 편집기가 궁금합니다.
  5. 2010.11.17 HTML UI 구성
  6. 2010.10.29 HTML UI :: 세로 100% 설정

Blog

A4 용지 출력

2016.09.23 11:06 Development/HTML / XHTML


웹페이지에서 프린트 출력할때 유용합니다.

HTML

<page size="A4">
	<h1>A4 용지 세로 1 이어서</h1>
</page>
<page size="A4">
	<h1>A4 용지 세로 2 이어서</h1>		
</page>
<hr is-divide="true">
<page size="A4" is-divide="true">
	<h1>A4 용지 세로 1 분리</h1>
</page>		
<page size="A4" is-divide="true">
	<h1>A4 용지 세로 2 분리</h1>		
</page>
<page size="A4" layout="portrait">
	<h1>A4 용지 가로</h1>		
</page>
<page size="A5">
	<h1>A5 용지 세로</h1>		
</page>
<page size="A5" layout="portrait">
	<h1>A5 용지 가로</h1>		
</page>
<page size="A3">
	<h1>A3 용지 세로</h1>		
</page>
<page size="A3" layout="portrait">
	<h1>A3 용지 가로</h1>				
</page>


CSS

body {
	background: rgb(204,204,204); 
}
page {
	  background: white;
	  display: block;
	  margin: 0 auto;
	  margin-bottom: 0.5cm;
	  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
page[size="A4"] {  
	  width: 21cm;
	  height: 29.7cm; 
}
page[size="A4"][layout="portrait"] {
	  width: 29.7cm;
	  height: 21cm;  
}
hr[is-divide="true"] {
	height:0; margin:0; padding:0; border:none !important;
}
[is-divide="true"] {
	page-break-after: always;
}
page[size="A3"] {
	  width: 29.7cm;
	  height: 42cm;
}
page[size="A3"][layout="portrait"] {
	  width: 42cm;
	  height: 29.7cm;  
}
page[size="A5"] {
	  width: 14.8cm;
	  height: 21cm;
}
page[size="A5"][layout="portrait"] {
	  width: 21cm;
	  height: 14.8cm;  
}
@media print {
	  body, page {
		margin: 0;
		box-shadow: 0;
	  }
}


JAVASCRIPT

window.onload = function() {
	window.print();
};

Inline HTML Full Code

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
		body {
		  background: rgb(204,204,204); 
		}
		page {
		  background: white;
		  display: block;
		  margin: 0 auto;
		  margin-bottom: 0.5cm;
		  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
		}
		page[size="A4"] {  
		  width: 21cm;
		  height: 29.7cm; 
		}
		page[size="A4"][layout="portrait"] {
		  width: 29.7cm;
		  height: 21cm;  
		}
		hr[is-divide="true"] {
			height:0; margin:0; padding:0; border:none !important;
		}
		[is-divide="true"] {
			page-break-after: always;
		}
		page[size="A3"] {
		  width: 29.7cm;
		  height: 42cm;
		}
		page[size="A3"][layout="portrait"] {
		  width: 42cm;
		  height: 29.7cm;  
		}
		page[size="A5"] {
		  width: 14.8cm;
		  height: 21cm;
		}
		page[size="A5"][layout="portrait"] {
		  width: 21cm;
		  height: 14.8cm;  
		}
		@media print {
		  body, page {
			margin: 0;
			box-shadow: 0;
		  }
		}
		</style>
		<title>Page Print Example</title>
	</head>
	<body>
		<page size="A4">
			<h1>A4 용지 세로 1 이어서</h1>
		</page>
		<page size="A4">
			<h1>A4 용지 세로 2 이어서</h1>		
		</page>
		<hr is-divide="true">
		<page size="A4" is-divide="true">
			<h1>A4 용지 세로 1 분리</h1>
		</page>		
		<page size="A4" is-divide="true">
			<h1>A4 용지 세로 2 분리</h1>		
		</page>
		<page size="A4" layout="portrait">
			<h1>A4 용지 가로</h1>		
		</page>
		<page size="A5">
			<h1>A5 용지 세로</h1>		
		</page>
		<page size="A5" layout="portrait">
			<h1>A5 용지 가로</h1>		
		</page>
		<page size="A3">
			<h1>A3 용지 세로</h1>		
		</page>
		<page size="A3" layout="portrait">
			<h1>A3 용지 가로</h1>				
		</page>	
		<script type="text/javascript">
			window.onload = function() {
				window.print();
			};
		</script>
	</body>
</html>


아 구글링 중에 설명을 깔끔하게 잘 해주신 분입니다.

http://noveloper.github.io/blog/css/2015/04/12/how-to-divide-print-space.html


추가적으로 확인해야 하는 부분은

프린트도 크로스 브라우징 검증 작업은 필요합니다.

인터넷 익스플로러도 감안해서 폰트는 포인트(pt) 로 작성하시는게 정신건강상.. ㅎㅎ

그리고 인터넷 익스플로러에서는 상황에 따라 페이지 설정을 브라우저 기능 설정단에서 바꾸어줘야

하는 경우가 있습니다.





저작자 표시
신고
현재 0 개의 댓글이 있습니다.
Comment

Blog

IE 10 이상으로 셀렉트박스 아이콘 숨기기

2015.05.08 17:32 Development/CSS


셀렉트 박스를 배경이미지로 넣어 커스텀으로 사용하려 했는데,

인터넷 익스플로러에서는 적용이 되지를 않는다. 구글링 해서 찾을 결과 10이상으로는 적용이 되는것 같다.

내가 테스트 해본 결과로는 11 이상이었다.



select::-ms-expand { display:none; } 
저작자 표시
신고
현재 0 개의 댓글이 있습니다.
Comment

Blog

이미지 맵

2012.03.13 11:27 Utility Tip&Tech


이미지맵하나 만드려는데 드림위버까지 키는건...
리소스 낭비를 떠나서 기분이 매우 별로다. 로딩이 매우 빠르다 해도.. 기분이 별로더군.
그래서 오래전에 찾아서 쓰던건데 갑자기 찾을때 없어서 일단 포스팅 해둬야겠다능;;;
아래 이미지 밑에 링크를 통해 다운받으세요.^^
 







저작자 표시
신고
현재 0 개의 댓글이 있습니다.
Comment

Blog

최고의 HTML 편집기가 궁금합니다.

2011.11.09 05:21 Development/HTML / XHTML




물론 모두들 각자의 작업방식이 있겠지만 나 같은 경우에는 울트라 에디트로 HTML 코드를 작성하였습니다.
그런데 현업에서 종사하고 있는 모두들 사용하고 있는 편집기들은 제각각이더군요.
하지만 생산성 향상을 위해서 정말로 빠르고 성능 좋은 HTML 편집기를 사용하고 싶습니다. 
제 블로그에 방문해주신 웹에서 종사하고 계신 프로페셔널하신 엔지니어 여러분들의 답변좀 부탁드립니다.

그리고 답변과 경험을 토대로 각각의 편집기들에 대해서
리뷰를 작성할 예정이니 많은 도움 부탁드립니다. 
저작자 표시
신고

'Development > HTML / XHTML' 카테고리의 다른 글

Visual Studio 2010 HTML 유효성 검사  (2) 2012.07.09
HTML UI 에 대해서  (0) 2012.03.12
최고의 HTML 편집기가 궁금합니다.  (0) 2011.11.09
3D로 강력해진 구글 ‘크롬9′ 공개  (0) 2011.02.10
HTML UI 구성  (0) 2010.11.17
UI : 엘리먼트 배치  (0) 2010.11.10
현재 0 개의 댓글이 있습니다.
Comment

Blog

HTML UI 구성

2010.11.17 19:02 Development/HTML / XHTML


이번에도 간단하게 HTML과 CSS 로 UI 를 구성하는데,
나름 괜찮은 방법이기에 다시 포스팅을 한다. 이미 모두 사용하고 있을 수도 있지만..
나는 기억력이 그다지 좋은 편이 아니기에 포스팅을 한다.

테스트 브라우저 : Google Chrome, IE8, IE6, FF, Opera

div 태그로 UI 를 구성함에 있어 기본적인 원칙.
요소들의 배치.

이 것이 상당히 중요한 원칙이다. 이 원리를 구현하고자 테스트를 반복함으로 알수 있있다.
먼저 이러한 UI 를 구성하고자 타겟을 설정하였다.


색상으로 박스를 설정하였다.
White (Background) : html, body, form, Wrap
Yellow : header
Container : blue
Contents : brown
box1 : cyan
box2 : skyblue
Footer : green

위를 구성하는 CSS 코드들은 기본적으로 padding 이 모두 0 이다.
이에 margin, position, width, height 로만 UI를 구성한 것 이다.
먼저 해당하는 속성들을 간단하게(?) 설명한다.

 속성명 정의 
 margin

정의 : 해당 엘리먼트의 바깥 여백을 지정한다.
  
 margin-left:10px 왼쪽으로 10픽셀 
margin-right:10px  오른쪽으로 10픽셀 
margin-top:10px  상단 10픽셀 
 margin-bottom:10px  하단 10픽셀
marign:10px  전체 10픽셀 
marign:20px 20px  상하 20픽셀, 좌우 20픽셀 
 margin:10px 30px 20px 상단 10픽셀,  좌우 30픽셀,
하단 20픽셀
 margin:10px 20px 30px 40px  상단 10픽셀, 오른쪽 20픽셀,
하단 30픽셀, 왼쪽 40픽셀


 position  엘리먼트 위치속성 적용
  1. static
    • (기본값) normal flow에 따라서 배치된다. (Visual formatting model : Normal flow)
    • top, left. bottom, right 속성이 적용되지 않는다.
  2. relative
    • static일때의 위치를 기준으로 top, left, bottom, right 속성이 적용된다.
    • relative인 box B가 있고, 그 다음에 나오는 sibling은 B의 static 영역을 기준으로 자리를 잡는다.
    • relative가 적용되지 않는 block elements : table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption
  3. absolute
    • top, left, bottom, right 속성이 자신을 포함하는 box의 위치를 기준으로 적용된다.
    • 다른 sibling과의 위치에 영향을 주지 않는다.
    • margin 값이 있어도 다른 box의 margin과 합쳐지지 않는다. (Box model : Collapse margins)
  4. fixed
    • absolute와 비슷하지만, 자신을 포함하는 box가 아닌 viewport의 맨위좌측을 기준으로 적용된다.
    • 스크롤되지 않고, 항상 같은 위치에 보이게 된다.
    • print media type에 적용되는 경우, 모든 페이지에 나타난다.
    • 따라서 화면에는 항상 나타나지만, 프린트할때는 한번만 보이게 할경우... screen의 경우 fixed, print의 경우 static으로 다르게 설정해 주어야 한다.
 width  엘리먼트의 가로 크기 (길이 단위 [예 : 픽셀], %, auto, inherit
 height  엘리먼트의 세로크기 (길이 단위 [예: 픽셀], %, auto, inherit

먼저 header 와 container, footer 가 고정이라 정의한다면
container 내에서는 요소들의 배치가 자유로워야 한다.
이에 contents 라는 요소를 배치하고 그 안에 box1, box1-1, box2 이라는 요소들을 배치하였다.
box1-1 과 box2 는 같은 레벨이며 box1-1 은 box1 의 하위레벨 요소이다.
box1, box2 역시 contents 의 하위레벨 요소이다.
먼저 하위레벨 요소들의 위치 배정이 모든 브라우저에서 동일하게 적용된다면 정말로 실용성은
상당히 좋지 않은가?
이게 "웹표준" 이다.. 하면서 정의를 하면서 하지는 않겠다. 하지만 크로스 브라우징에 있어서만큼은
올바른 태그 사용과 표시오류가 없을 신뢰할 수 있었다.
신뢰기반은 무조건 실행과 테스트니 말이다.

먼저 html 태그의 코드 구성은 다음과 같다.
간단하게 body 태그 안에 코드만 작성하였다.


White (Background) : html, body, form, Wrap
Yellow : header
Container : blue
Contents : brown
box1 : cyan
box2 : skyblue
Footer : green

이와 같은 구성이 증명된다.
UI 를 구성하는 라인 끝에 시작은 <!-- WRAP -->. 끝은 <!-- //WRAP -->
처럼 주석을 작성하여 보기에 편의를 두었다.
참. 이에 메타태그도 추가하겠다. 큰 상관은 U-UA_Compatible 속성만 있겠지만야. 일단 고정적으로
쓰는 메타를 추가한다.


그럼 위에서도 보다시피 렌더링 유도시에는 인터넷 익스플로러 최신버전임을 알 수 있다.
그럼에도 불구하고 IE6,7,8 에도 모두 동일한 결과를 나타냈기 때문에 흡족하였다.

그리고 이를 구성하는 CSS 코드.
보면 생각보다 상당히 간단함을 알 수 있다.


먼저 html, body, form 은 무조건 전체를 지향하며,
이제 Wrap 역시 전체를 지향하였다. 굳이 divWrap 으로 감싼 이유는.. 업무적 특성상인데.. 나중에
비동기 방식등에 대비하여 상당히 유용한 경우가 있다.
이건 사용에 따라 다르니. 테스트로만..ㅋㅋ

그리고 header 는 가로 1000픽셀의 세로 100픽셀. 그리고 상단 0 오른쪽 자동 하단 0 왼쪽 0 으로
margin 을 지정하였다. 쉽게 말해 위에 딱 붙이고 , 가운데 정렬하겠단 말이다.
container 는 가로 100%. 브라우저 끝까지. 세로는 500픽셀로. position 속성은 자신이 배치된 위치를
보존하기 위해 relative 로 지정하였다.
이에 하위 divContents 엘리먼트 역시 가로는 900픽셀로 지정하고 세로는 container 의 세로크기를
모두 상속받기 위해 100% 로 지정하였다.
그리고 위치 역시 가운데. 그리고 position 역시 relative.

이제 내부에 위치한 특정 위치에 엘리먼트들을 배치함이다. 주목할만한 포인트다.
앗. 근데 오타다. margin:0 은 신경쓰지 마사기 바람.
또 캡쳐가 귀찮아서 오타라고 미리 인정함.ㅋㅋ

이에 가로, 세로는 정의되어있고. position 은 absolute. margin 은 보이는 바와 같다.
이렇게 설정했을때 absolute 로 인해 자신이 차지하고 있는 공간은 사라지고 상위 요소 절대지점에
위치하며 그 시점으로 부터에 margin 을 이용하여 원하는 특정위치에 배치가 가능하게 되는것이다.
이게 포인트인것이다. 

일단 위와 같은 테스트를 경험하게 되면 결과를 체험할 수 있을것이다.

저작자 표시
신고

'Development > HTML / XHTML' 카테고리의 다른 글

최고의 HTML 편집기가 궁금합니다.  (0) 2011.11.09
3D로 강력해진 구글 ‘크롬9′ 공개  (0) 2011.02.10
HTML UI 구성  (0) 2010.11.17
UI : 엘리먼트 배치  (0) 2010.11.10
HTML UI :: 세로 100% 설정  (0) 2010.10.29
HTML5의 모든 것  (0) 2010.07.29
현재 0 개의 댓글이 있습니다.
Comment

Blog

HTML UI :: 세로 100% 설정

2010.10.29 17:47 Development/HTML / XHTML


다시 포스팅을 합니다.
http://www.jkun.net/258 -> 이 링크를 참조하시는게 더욱 좋을 듯합니다.
아래 포스팅은 이전에 테스트를 하였었습니다.
새로 작성된 포스팅을 확인하시면 더 좋을것 같습니다.^^;
혼랸야기 죄송~


검색엔진에서 뒤지다 보니 세로 100%, CSS 세로 100% 등등 많은 포스팅을 볼수가 있었다.
물론 테스트를 거치다 보니 옳은 내용이었으나.. 나의 잘못된(?) 코드 작성 습관으로 인하여
삽질을 면할수가 없었다.
일단 기본적으로 나의 HTML UI 구성코드는 이렇다.

HTML

<!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>
<link rel="stylesheet" type="text/css" href="UI.css" />
<script type="text/javascript" src="MyPrototype.js"></script>
<title> UI Testing </title>
</head>
<body>
<form name="frm" onsubmit="return false;">
<div id="divWrap"><!-- WRAP -->
<div class="header"></div>
<div class="container"></div>
<div class="footer"></div>
</div><!-- //WRAP -->
</form>
</body>
</html>

CSS

html, body {width:100%; height:100%; margin:0; padding:0;}
#divWrap {width:100%; height:100%; margin:0; padding:0}
#divWrap div.header {width:100%; height:70px; margin:0; padding:0; position:relative; z-index:1}
#divWrap div.container {min-height:100%; height:100%;}
#divWrap div.footer {height:70px;}

위와 같이 구성되어 있는경우.. 분명 세로 브라우징이 맞다. "100%" 개념 자체가
상위 엘리먼트의 Height 를 따라가게 되어있기 때문인데..
여기서 어처구니 없는 현상이..

"divWrap" 엘리먼트가 100% 이지만.. 그 위에 <form..........
나는 항상 Form 의 Post 방식의 데이터 전송을 즐겨 사용하는데...
빌어먹을.. form 에도 100% 지정을 해줘야 했던것이다..

html, body, form {width:100%; height:100%; margin:0; padding:0;}

세로 100% 브라우징.. 간단하지만 사람 참 귀찮게 하는 요소다.
반드시 footer (하단) 요소를 하단에 고정시키고자 함에 의해서 그런거지만..
일단 뜻하지 않게 삽질 하는 사람들에게 도움이 되기를.


저작자 표시
신고

'Development > HTML / XHTML' 카테고리의 다른 글

최고의 HTML 편집기가 궁금합니다.  (0) 2011.11.09
3D로 강력해진 구글 ‘크롬9′ 공개  (0) 2011.02.10
HTML UI 구성  (0) 2010.11.17
UI : 엘리먼트 배치  (0) 2010.11.10
HTML UI :: 세로 100% 설정  (0) 2010.10.29
HTML5의 모든 것  (0) 2010.07.29
현재 0 개의 댓글이 있습니다.
Comment