JKUN

Welcome To The Jkun.net

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

웹표준!! 이제는 div

2013.05.30 08:53 Development/HTML / XHTML


테이블은 이제 그만 쉬어야 할 때 - DIV

테이블(html의 table 을 칭함)은 이제 목적 이상의 일을 할 필요가 사라졌습니다. 그저 단순한 “표” 를 만들기 위해서 제작된 테이블이 레이아웃, 즉 홈페이지 틀을 잡기위해서 쓰이고 있다니. 그리고 그것이 테이블의 맞는 용도처럼 교육되고 있다니 이제는 슬슬 멈추어야 할때라고 봅니다. 특히 XHTML이 개발되어 나오면서 계층형과 같은 구조로 레이아웃은 디자인되며 디자인이 우선이 아닌 그 안의 내용의 구성을 먼저 생각해야하는 개념 자체의 변화가 찾아오고 있습니다. 아니, 예전 HTML 생성되었을때의 원래의 개념으로 돌리려고 하고 있습니다. 얼마전 XHTML 2.0(이 포스팅이 쓰여지는 현재는 XHTML 1.1) 이 개발되면서 약간의 내용을 볼수 있었습니다. 지금 쓰여지고 있는 모든 개념적인 HTML이 완전히 변화될듯 만들어 지고 있었습니다. 심지어 DIV만이 레이아웃의 용도가 아닌 SECTION 의 개념도 개발되어 가고 있었습니다. 이대로 가다가는 한국의 웹디자이너, 개발자들은 나중엔 너무나도 큰 공백을 매꾸어야 할 것입니다. 에플과 인텔이 손잡은 일도 그리하고 인터넷 익스플로러 만이 아닌 많은 ‘표준’ 브라우저들이 개발되어 나오면서 이제 한 방법만을, 그리고 한 부류의 소비자, 클라이언트를 겨냥하여 개발하는것은 몇년안에 ‘도박’ 으로 간주 될거 같습니다.

사용전에 개념의 문제

이 시점에서 본론으로 들어가기 전에 다루어야 할 문제가 있습니다. 제가 여러 한국 디자인 홈페이지를 만들어 보고, 보아 왔지만 한국에서 지향하거나 혹은 본의 아니게 지향되어 가고 있는 잘못된 개념이 있습니다. 바로 그 개념의 문제가 바뀌어야 하는데, 제가 잘 설명할수 있을지 모르겠군요.

최대한 말로 설명을 한다면, HTML은 디자인을 나타내는것이 아니라 문서를 유저들이 더 잘 볼수 있게 디자인 할수 있도록 만들어진 것이라는 겁니다. 문서의 개념이 디자인 보다 먼저 오는거 라는 거죠. 디자인이 먼저라면, 지금당장 HTML등을 버리고 플래쉬로 나가는게 더 나은 길일겁니다. 하지만 플래쉬가 그리도 멋지게 활용될수 있으며 여러가지 장점들이 있지만, 웹개발자, 클라이언트들에게 100% 다가가지 못하는 이유는 바로 이 ‘문서’ 의 개념을 잘 포옹하지 못하기 때문입니다. 웹페이지들의 궁극적인 목표는 바로 ‘책’ 처럼 되는 것이다 라고 하는데 이 목적을 채우기엔 역부족인거죠. 이전 HTML 에서도 그것을 잘 충족하지 못하고 오히려 역효과를 낸 것입니다. 해서 이번에 나오는 차기 XHTML은 문서의 개념을 더욱 투명하게 하고 인식을 바로 잡고 쓰기 위하는 목적으로 씌여지는거 같습니다.

문서의 요소로 예를 들어 보겠습니다. 보통 문서를 보면 서론 본론 결론으로 나뉩니다. 그 안에 제목, 문단, 단락 들이 있고, 여러가지 문서의 요소들이 있습니다. 바로 그 요소들을 HTML이 나타내고 싶은겁니다. 보통 볼수 있는 예로

는 바로 그 문단의 시작과 끝을 나타내어 주는것이고(처음 HTML 할때 젤 싫었던게 엔터치면 곧바로 에디터가 <p>로 인식을 하는거였네요. 무엇인지 모르니 짜증이 날수 밖에요 ^^) 이렇게 쓰이게 되면 HTML은 자동으로 알아서 문단이라고 인식해서 그에 맞추어 출력을 해주게 됩니다.(이런 개념을 잘 이해해서 디자인을 하면 <br>(웹표준에서는 <br /> 이 맞습니다)은 거의 쓰지 않게 됩니다 ^^)

이렇게 HTML의 속성들의 개념을 이해해 가다보면 문서의 틀을 잡아주는것에 대한것, 즉 레이아웃에 대한 속성들도 다루게 되는데 바로 그 문서의 표현을 도와 문단의 너비, 문단의 위치, 모양을 잡아주는 것이 바로 테이블 입니다. DIV 입니다. P(Paragraph, 문단의 첫글자) 속성도 있구요. 아무튼 다시한번 말합니다. 문서의 레이아웃을 돕는 HTML 속성은 DIV 입니다. ^^ DIVISION의 줄임말로 나누다 라는 뜻을 가진 div 인것이죠. 테이블로 레이아웃 사용은 문법 자체가 틀린것이라는 겁니다.

위의 긴 글을 정리하면서 다시 말하자면, HTML의 개념이 바르게 인식이 되어 가는데엔 테이블, 단순히 표를 만드는데 쓰인다는 원래의 목적을 찾아주고 레이아웃은 그에 맞는 속성을 쓰는것이 꼭 다루어져야 한다는 것입니다. 단순히 “DIV가 다루기 쉽잖아요” 가 이유가 아닌(실제로도 테이블보다 훨씬 쉽지만) 목적과 개념 자체에서부터 문제가 된다는 것입니다. 아직 뜨끔 안하셨나요? 이제 슬슬 개념뿐만이 아닌 왜 DIV가 테이블보다 나은지 다루어 보겠습니다.

table 보다 다루기가 쉽다

솔직히 예전에는 테이블이 웹페이지 레이아웃, 틀을 잡는데에 쓰일수 밖에 없었습니다. 그만한 틀을 잡아주는 속성이 약했기 때문입니다. 그리고 그 당시에는 그것이 더 편했고, 깔끔했습니다. 규격이 맞지 않아서 줄이고 늘리고 하는것이 더 문제 였으니까요. 하지만 DIV는 레이아웃을 위한 그 목적으로 씌여진 만큼, 그보다 더 다루기 쉽게, 간편하게 발전 되었습니다. 말도 안된다구요?

보통의 홈페이지 레이아웃으로 예를 들어가면서 보겠습니다.

이런 레이아웃을 만들어 보겠습니다.

  1. 테이블은

    <table>
    <tr>
       <td></td>
    </tr>
    <tr>
       <td></td>
       <td></td>
      </tr>
    </table>

    이렇게 코딩을 합니다. div를 보겠습니다.

    <div></div>
    <div style="float: left;"></div>
    <div></div>

    별로 차이 안나네요.
  2. 그럼 이것에 column 을 2개 더 넣어보겠습니다.

    <table>
    <tr>
       <td colspan=4></td>
    </tr>
    <tr>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
    </tr>
    </table>



    <div></div>
    <div style="float:left;"></div>
    <div style="float:left;"></div>
    <div style="float:left;"></div>
    <div style="float:left;"></div>

    또 약간 비슷합니다.여기서
    이렇게 만들어 볼까요?

  3. 그렇다면 이제 슬슬 테이블은 복잡해 집니다.

    <table>
    <tr>
       <td colspan=4></td>
    </tr>
    <tr>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
    </tr>
    <tr>
       <td colspan=4></td>
    </tr>
    <tr>
       <td colspan=4></td>
    </tr>
    <tr>
       <td colspan=4></td>
    </tr>
    <tr>
       <td colspan=4></td>
    </tr>
    </table>

    div를 보겠습니다.

    <div></div>
    <div style="float:left;"></div>
    <div style="float:left;"></div>
    <div style="float:left;"></div>
    <div style="float:left;"></div>
    <div style="clear:both;"></div>
    <div></div>
    <div></div>
    <div></div>

    div는 간단히 끝이 났네요.

클라이언트가 위의 구성중 column이 많다고 빼달라고 요청합니다. 하나를 빼면,,
테이블로 구성한 코드는 저 위의 4라고 써진거 다 3으로 바꾸어야겠죠. 네. ‘찾기’ 기능을 아주 잘 써야겠습니다. 하지만 div는 어떤가요? float:left 는 align:left 와 같습니다. 왼쪽으로 정렬된것들 마구 넣은 후에 빼고 싶은거 빼고나서 다시 정리된 한칸을 넣을때엔 align 이 적용 안되도록 clear:both; 만 넣으면 됩니다. 개발자 분들, 너무나도 차이나는게 보이시는지요?

테이블은 느리다

다른 이유를 보겠습니다. 너무나도 잘 아는 사실이죠. 테이블의 속도 문제도 꽤나 골치 아픈 문제 입니다.

유저들은 아마도 브라우저창 타이틀 부분에는 웹사이트 제목이 떴는데 하얀 바탕으로 아무것도 나오지 않는 경우를 겪어 봤습니다. 요즘이야 워낙에 속도가 빨라지긴 했지만… 그 이유는 테이블의 속도 문제가 있기 때문입니다. 각각의 테이블이 하나하나의 요소로 받아들이기 때문에 그 테이블이 다 읽히기 전까지는 화면에 읽히지 않습니다. 그 이유 때문에 제목창에는 제목이 뜨는데 화면에는 아무것도 들어오지 않는것처럼 보이는 것이죠. 특히 커다란 포털사이트에 이런 경우가 많습니다. 기다림 후에 나타나는 화면은 이미 로딩이 거의 끝난 상태로 나타나게 되죠. 그와 반대로 div를 사용하게 되면, 틀을 잡아주는 것이기에 틀에 잡힌 텍스틀이 이미 뜬 후에 배경이라던지 이미지가 읽혀지게 됩니다. 유저들에겐 기다림의 지루함이 조금이나마 줄어들게 되는 것입니다. 그러므로 속도의 차이는 없는듯 커다랗게 나는것입니다. 예전 야심만만 이라는 프로그램에서 ‘당신에게 가장 긴 1분은 언제였나?’ 라는 질문에 웹사이트가 로딩되는 그 1분이 길었다 라는 대답이 상당히 많았던 것만 봐도 그 ‘약간’ 의 차이가 유저들에게는 얼마나 큰것인지를 알수 있습니다. 구글의 성공에도 1개의 이미지로 승부하는 속도가 커다란 몫을 했었죠.

table은 유지하기 힘들다

속도 뿐만이 아닙니다. 어찌 유지 하렵니까?
속도는 인터넷을 더 빨리 돌려버리면 된다고 해도, ‘유지’ 의 문제는 어쩔수 없습니다. 상상만 해도 울컥 솟아 오릅니다. 테이블 안에 수도 없이 이루어진 그 얽히고 얽힌 그 문제를 어떻게 유지를 할수 있을지. 새 웹마스터가 와서 웹사이트를 유지하려해도 이해할수 없는 수 많은 테이블의 tr, td 들을 그리고 그 안에 들어있는 테이블들을 어떻게 이해를 해서 하는지. 아직도 하고 계신분들에게 경의를 표합니다. 이럴때에 가끔은 프리렌서가 좋다는 생각을 합니다. 이 말도 안되는 것들만 보아도 왜 이렇게 되어야 하는지 궁금할 뿐입니다. div도 사이트가 클수록 유지하기에 복잡하지 않냐 라는 반문을 하신다면 div를 써보지 않으신 분들입니다. 각각의 레이아웃 div에는 이름을 주어서 css로 간단히 조절이 가능하기에 각각의 이름들만 알아도 새로운 css를 써버려서 내용은 그대로이되 모든 디자인이 바뀌어 버리는 놀라운 일을 할수가 있습니다. ‘스킨’ 의 개념이 보통의 html문서에서 이용되는 것입니다. 이에대해 아시는 분들은 아시지만 젠가든 이라는 곳이 그 예들을 보여줍니다. 내용은 같지만 수많은 유저들이 자신들의 css를 제출해 뽑히면 그 사이트의 디자인CSS 파일만을 바꾸어 보여줌으로써 확연히 다른 사이트로 변모하는것을 보면 확실히 이해가 가실겁니다.

CSS3?

이제 곧 나오게 될 CSS3를 살펴보니 레이어들 사이에도 이제 x, y 좌우의 위치 뿐만이 아닌 진정한 케스케이딩, 차곡차곡 쌓인 문서들 처럼 앞, 뒤 의 z 위치를 정할수 있게 되어 있습니다. 아무리 테이블이 레이아웃에 좋다고 우겨도 CSS3가 출시되는 날 부터는 ‘바보’로 취급받게 될것입니다. 투명한 PNG의 사용도 가능케 했으니, 그림자 div 위에 문서 1 div을 놓고, 그 위에 문서 2 div 를 놓고 겹치게 해 놓았다고 생각해 보십시오. 그리고 다음 페이지로 넘어갈때엔 그저 CSS의 Z 속성만 바꾸어 주면 순간에 문서 1이 2의 위에 올라가게 되니, 이거 언제 css3이 출시되나 기다려 지지 않을수가 없습니다.

table은 이제 쉬어야 할때

테이블은 이제 슬슬 좀 쉬어야 할때 입니다. 너무 큰일을 감당케 했습니다. 반대로 원래 그 일을 해야할 div를 너무 놀게했습니다. 위에서 주욱 길게 설명을 했듯이 테이블의 노동착취는 그만하시고 공평한 일자리를 주어야 할 때가 아닐까 생각합니다. 아니 그래야 합니다. 그것이 미래를, 앞을 바라보는 선경지명이겠습니다.

출처 : http://ilmol.com/wp/2005/06/09/25/

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

Blog

웹표준가이드(11)/테이블(Table)

2013.05.30 08:38 Development/HTML / XHTML


table의 구성

 

<thead>, <tbody>, <tfoot>, <th>, <td>등을 적합하게 사용한 작업은 접근성을 높이며

효율적인 css 참조도 쉬워진다.

 

 

1. cellpadding, cellspacing / border-collapse, padding

 

내용 예전 태그추천 css
cellpadding컨텐츠와 cell경계 사이의 영역 cellpadding="0"border-collapse: collapse; 
cellspacingcell 간의 간격 cellspacing="0" table th, table td {padding: 0;} 
bordercell 경계선 border="0" 생략무방 

 

 

 

 

2. 테이블 고정(table-layout: fixed)

 

width값을 정확하게 입력했는데 입력한데로 표현되지 않을 수 있다.

이때문에 <img src="blank.gif" width="100">을 이용해서 width를 강제로 고정하는 방법을 사용했었다. 이를 보완하는 것이 table-layout 속성

table {

table-layout : fixed;

}

 

주의사항 

 

table-layout: fixed;로 width값을 조정할 경우 첫번째 줄 외에 다른 값은 무시된다.

 


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

Blog

웹표준가이드(10)/박스모델(Box Model)

2013.05.30 08:37 Development/HTML / XHTML


박스모델 (Box Model)

 

 

<박스모델>

 

 

 박스의 구성content + padding + border + margin + offset로 구성 
 비주얼
1. 화면에서 보이는 부분 : content + padding + border 
2. 화면에서 보이지 않는 부분 : margin + offset
 width값의 범위

1. 잘못된 width 값 : content + padding + border ⇒ 화면에 커지게 된다.

2. 올바른 width 값 : padding, border를 제외한 순수한 content 영역 

 

 

 

 

 

1. IE DOCTYPE Switching

 

숙지사항

 

DOCTYPE선언에 따라 호환 혹은 표준으로 랜더링 된다.

호환랜더링이 되는

3가지 경우

비표준DTD선언 혹은 선언하지 않을 경우,

DOCTYPE선언 앞에 다른 문자열 혹은 공백이 들어갈 경우 

표준랜더링HTML 4.01, XHTML 1.0과 같이 W3C의 선언을 정확하게 할 경우 

 

 

랜더링에 따른 width, height 차이

 호환랜더링widht, height값이 줄어든다. 
 표준랜더링width, height영역이 변화 없이 컨텐츠의 영역을 나타낸다. 

 

 

 

 

2. 중앙정열

 

Mark Up 

<table>를 사용해서 중앙정열을 할 경우 align="center"를 사용했지만 css를 이용한 레이아웃에서는

align="center" 대신 margin="10px auto;" 적용

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<title>center alignment</title>
<style type="text/css">

body {

text-align: center;

}

#content {

width: 300px;

padding: 1em;

border: 1px solid #999;

margin: 0 auto;

line-height: 1.5em;

text-align: left;

}

</style>
</head>
<body>
<div id="content">
<p>margin 의 auto 값을 이용해서 보다 다양한 레이아웃을 제작 할 수
있다.</p>
</div>
</body>
</html>

 

 

 

CSS 

body {

text-align: center;

}

#content의 margin: 0 auto;가 ie5에서 적용되지 않는다. 따라서 body{text-align: center; }추가

#content {

width: 300px;

padding: 1em;

border: 1px solid #999;

margin: 0 auto;

line-height: 1.5em;

text-align: left;

}

텍스트 역시 가운데 정렬 됨으로 다시  text-align: left;

가운데 정렬시켜준다.

 

 

 

 

 

3. 화면 정 중앙 위치시키기

 

<table> 엘리먼트를 이용할 때는 valign 혹은 height="100%"와 같은 속성을 이용 세로정렬이

자유롭지만 css에서는 쉽지 않다.

 

 

 

vertical-align속성 

 

1. vertical-align 특성

 vertical-align 속성을 사용할 수 있는 범위는 td 와 inline 속성에서 적용 가능<td>, <img>,<input>

 

2. <예제>

  
<style type="text/css">
body {
font-size: 0.75em;
}

</style>

-----------------------


<form action="">
<p>
<label>내용 검사</label>
<select>
<option>전체</option>
<option>제목</option>
<option>이름</option>
<option>내용</option>
</select>
<input type="text" />
<input type="image" src="btnsearch.gif" alt="검색" />
</p>
</form>

 

<style type="text/css">
body {
font-size: 0.75em;
}

img, input, select {
vertical-align: middle;
}
</style>


-----------------------

<form action="">
<p>
<label>내용 검사</label>
<select>
<option>전체</option>
<option>제목</option>
<option>이름</option>
<option>내용</option>
</select>
<input type="text" />
<input type="image" src="btnsearch.gif" alt="검색" />
</p>
</form>

 

중앙정렬을 위해

img, input, select {
vertical-align: middle;
}를 추가해준다.

* vertical-align은 input, img와 같은 inline 속성에서 사용되며

  이는 완벽한 중앙 정렬이 될 수 있다

 

 

 

 

 

4. position 속성과 negative margin

 

<style type="text/css">
#middle {
position: absolute;
top: 50%;
left: 50%;
border: solid 1px #aaa;
width: 155px;
height: 155px;

margin: -77px 0 0 -77px;
}
</style>

1. position: absolute; 브라우저를 중심으로 

   offset 지정 가능

 

2. top 50%; left: 50%;

   브라우저의 상단과 왼쪽에 의 50%에 위치

 

3. 블럭크기의 절반만큼 음수마진을 주게 되면

    엘리먼트의 정중앙이 화면의 정중앙과 일치

 <body>

<div id="middle">
<img src="docyen.jpg" alt="test" />
</div>

</body>

 

 

<결과>

 

 

 

 

 

5. 100% 높이 유지하는 레이아웃

 

div {height: 100%:}가 적용되지 않는 이유 


 div 속성에서 height: 100%;를 주었음에도 랜더링시 적용되지 않는 이유는 
height 값의 기본은 상위 엘리먼트 이기 때문 따라서 
body의 height: 100%;로 지정되어 있지 않을 경우 하위 div {height: 100%;}는 랜더링 불가 
마찬가지로 html역시 height: 1000%;로 지정되어 있어야 한다.
 html > body > div 순서로 height: 100%로 지정


<예제>

<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 0;
}
#content-area {
padding: 100px 0 50px 0;
}
#foot {
height: 50px;
background: #ddd;
}
</style>
<!--[if IE]>
<style type="text/css">
#body {
height: 100%;
}
</style>
<![endif]-->
 1. 가장 상위 html 부터 차례대로 height: 100%적용 
     ⇒html, body {height: 100%;}

2. #head
    일정한 높이를 가지게 됨으로 position: relative로 한다.

3. #body
   선택자 head가 relative 속성을 가짐으로 
   선택자 body에 해당하는 div는 head 밑에 놓이게 된다.
   따라서 margin을 선택자head의 높이에 해당하는 만큼
  음수값으로 지정(margin-bottom 동일한 이유)
   이후 최소 높이 min-height: 100%;를 지정

4. 컨디셔널 코멘트 사용
    l------------------------------
    l <!--[if IE]>                            
    l <code for Internet Explorer>     
    l <![endif]-->                           
    l------------------------------

     IE는 min-height의 속성이 구현되지 않는다
     따라서 IE를 위한 컨디셔널 코멘트 사용
     
    

<div id="head">
 head (height 100px)
</div>
<div id="body">
<div id="content-area">
content area
</div>
</div>
<div id="foot">
foot( 50px)
</div>


<랜더링 결과>

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

Blog

웹표준가이드(9)/List (ul, ol, dl, dt, dd)

2013.05.29 18:18 Development/HTML / XHTML


출처 : http://blog.naver.com/maglitt/60053124686

목록 (List)

 

세가지 목록

 ul(unordered list)순서가 없는 리스트
 ol(ordered list)순서가 있는 리스트 
 dl(definition list)dt = term , dd = definition 쌍으로 이루어진 리스트 

 

각 브라우저별 특징

 <ol>, <ul><li>좌측 기본마진 발생, 브라우저별 블릿 다름 (background-image로 해결)
 <dl>출력사항 없음 단 <dd>에서 기본마진 있음 

 

 <!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>Unordered List</title>
<style type="text/css">
ul {
margin: 0;
padding: 0;
list-style: none;
}
</style>
</head>
<body>
<ul>
<li>list item1</li>
<li>list item2</li>
<li>list item3</li>
</ul>
</body>
</html>

 

아무런 블릿 스타일도 적용되지 않은 세줄의 텍스트가 나옴

여기에 아래 스타일을 적용시키면 블릿을 가진 리스트가 생긴다.

 li {

background: url(bullet.gif) no-rpeat 0 0.25em;

padding-left: 15px;

}


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

Blog

웹표준가이드(8)/css 레이아웃기초-2

2013.05.29 18:17 Development/HTML / XHTML


출처 : http://blog.naver.com/maglitt/60053121781

컬럼형 레이아웃 - 블러그형 / float가 적합

 

마크업(markup) 

 

 <div id="wrapper">
        <div id="head">Site Top Area</div>
        <hr />
        <div id="sub">Site Left Area</div>
        <hr />
        <div id="body">Site MainContent</div>
        <hr />
        <div id="sidebar">Side Bar</div>
        <hr />
        <div id="foot">Site Bottom Area</div>
</div>

 

  1. 컬럼전체를 고절할 수 있는 블럭 하나를 만든다. ⇒ (#wrapper)
  2. side bar를 하나 더 추가한다.
  3. 렌더링시 기본 레이아웃과 커다란 차이 없음 (웹표준가이드(8)/css 레이아웃기초-2 참고)

 

 

 

 

CSS 

body {

margin: 0;

padding: 0;

}

브라우저 마다 body의 기본값을 통일시켜준다.

hr {

display: none;

}

각부분을 구분지어 주는 역활을 하므로

디자인상 화면에 나타나지 않도록 display:none; 시켜준다.

#wrapper{

width: 700px;

border: solid 1px #eee;

margin: 20px auto;

}

1. 컬럼 전체의 폭고정을 위해 사용

2. 화면을 가운데 배치하기 위해 ⇒ (margin: 20px auto;)

#head {

height: 80px;

background: #eee;

}

높이와 배경색 지정

#foot {

height: 30px;

background: #eee;

}

 높이와 배경색 지정

#sub, #body, #sidebar {

float: left;

}

Site Lefr Area, Site Main Area, Side Bar를 모두 왼쪽으로 띄운다.

#sub, #sidebar {

width: 150px;

}

 

#body {

width: 400px;

height: 450px;

}

 

#foot {

clear: both;

}

float 된  블록 다음에 오는 엘리먼트는 clear: both시켜서

전체모양이 일그러지지 않게 한다. 

 float 시킬때는 항상 width height를 지정해 주어서 확실한 영역을 만들어 준다. 

 

<결과>

 

 

float를 이용하여 레이아웃을 잡을 때 배경이 보이지 않는 경우 overflow: auto;로 해결 

 

float를 이용하여 레이아웃을 잡을 경우 배경색이 나타나지 않아 다른 엘리먼트를 추가하거나 컨텐츠 속성을 이용하곤 했다.

이는 아래 보이는 float된 div의 하위 엘리먼트 ul의 내용이 없을 경우 높이를 0으로 취급하기 때문이다. 이는 overflow: auto를 사용하면 쉽게 해결할 수 있다.

<div id="articles">
<ul id="notice">
...
</ul>
<ul id="news">
...
</ul>
<ul id="stats">
...
</ul>
</div>

 

 #articles {
width: 700px;
margin: 20px auto;
background: #ddd;
overflow: auto;
}

 

overflow: auto;적용으로 배경색을 표현할 수 있다.

만약 overflow: auto; 미 적용시  화면에 아무것도 나타나지 않게 된다.


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

Blog

웹표준가이드(7)/css 레이아웃기초-1

2013.05.29 18:16 Development/HTML / XHTML


출처 : http://blog.naver.com/maglitt/60053112481

기본레이아웃

 

 

마크업(markup)

 

1.시작 단계에서 고려할점

 

디자인, css에 우선하여 페이지의 구성요소, 그룹에 적합하게 분리하여 적합한 태그 id, span으로 마크업한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<title>Simple CSS Layout</title>
</head>
<body>
<div id="head">Site Top Area</div>
<hr>
<div id="sub">Site Left Area</div>
<hr>
<div id="body">Main Content Area
</div>
<hr>
<div id="foot">Site Bottom Area</div>
</body>
</html>

 

 

 

CSS 

body {

margin: 0;

padding: 0;

}

브라우저 마다 다른 body값의 통일 

hr {

display: noen;

}

각부분을 구분지어 주는 역활을 하므로

디자인상 화면에 나타나지 않도록 display:none; 시켜준다.

#head {

height: 170px;

background: #eee;

}

상단 로고, 메뉴 등은 고정된 높이를 갖는 경우가 많다.

따라서 높이를 지정하고 배경색만 지정해준다.

#sub {

postioin: absolute;

top: 170px;

left: 0;

width: 160px;

background: #c4e8fd;

}

1. 일정한 높이를 가지고 있는 경우

2. head 부분 바로 아래 , 왼쪽에 위치시킨다. (top: 170px; left: 0;)

3. main content영역과 겹치는 현상

#body

padding-left: 170px;

width: 700px;

min-height: 400px;

background: #ffff80;

}

1. 왼쪽 메뉴와 겹침 현상 방지를 위해 padding-left 지정

    margin값을 사용하지 않은 이유는 Side Left를 포함한

    body전체에 배경을 지정하기 위해서이다.

2. Main Content 높이가 Side left가 낮을 경우

   배경 footer가 Side Left에 가리는 것을 방지하기 위해서

   최소 높이 지정

<결과>

 

 

 

 

relative 와 absolute의 관계 

 

absolute position 을 relative position과 함께 사용할 경우

보다 자유롭게 offset 설정가능(하위 absolute position의 offset 기준은 더 이상 브라우저가 아닌

상위 relative postion에 있다.)

 

 <div id="board_list" class="freeboard_item">
 <ul id="board_list_item">
  <li>
   <div class="number">26</div>
   <div class="title">title</div>
   <div class="name">name</div>
   <div class="date">date</div>
   <div class="hits">hits</div>  
  </li>
  <li>
   <div class="number">26</div>
   <div class="title">title</div>
   <div class="name">name</div>
   <div class="date">date</div>
   <div class="hits">hits</div>  
  </li>
  <li>
   <div class="number">26</div>
   <div class="title">title</div>
   <div class="name">name</div>
   <div class="date">date</div>
   <div class="hits">hits</div>  
  </li>
 </ul>
 </div>

 

 #board-list-item li {
position: relative;
width: 548px;
border-bottom: 1px solid #EBDDD4;
color: inheret;
}
#board-list li div.number,
#board-list li div.date,
#board-list li div.hits {
top: 7px;
}
#board-list li div.title {
padding-top: 7px;
padding-bottom: 5px;
}
#board-list div.number {
position: absolute;
left: 0;
width: 79px;
text-align: center;
}
#board-list div.title {
margin-left: 90px;
width: 297px;
}
#board-list div.date {
position: absolute;
right: 57px;
width: 92px;
text-align: center;
}
#board-list div.hits {
position: absolute;
right: 0;
width: 57px;
text-align: center;
}
div.freeboard-item div.name {

position: absolute;
top: 10px;
right: 150px;
width: 55px;
height: 1.5em;
text-align: center;
overflow: hidden;
}
div.freeboard-item div.title {
width: 252px !important;
}


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

Blog

웹표준가이드(6)/css 레이아웃기초

2013.05.29 18:14 Development/HTML / XHTML


출처 : http://blog.naver.com/maglitt/60053037339

CSS 레이아웃이란?

 

1.그리드가 아닌 구성요소의 집합                                  

웹페이지를 그리드로 바라보고 접근한 것

 

 

(좌측)과 구성요소로 구분하여 접근한 측면(우측)

 

 

 

 

 

2.레이아웃에 사용되는 두가지 속성 position 과 float

 

div 속성의 비교 

 레이아웃속성positon float 
 기본속성

static, absoulte, relative

left, right, none 
 속성내용
  1. static : 기본값
  2. absolute : 화면값에 영향을 
    주지 않고 위치지정 가능
    (layer라고 부른다.)
  3. relative : static과 비슷, 
    offset 지정가능, 
    하위엘리먼트의 기준
  1. left : 엘리먼트 왼쪽배치
  2. right : 오른족 배치
  3. none : float하지 않음

 

보통 position, float를 어디에 사용할지는 꼭 구분된것은 아니지만

  • position: 자유로운 위치선정, 블럭의  크기가 크게 유동적이지 않을 때 사용
  • float: postion에 비해 위치선정이 자유롭지는 않지만 블럭의 높이조절이 유동적이다.

라는 점을 고려하여 선택사용한다.


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

Blog

웹표준가이드(5) / css적용 체크포인트 4가지

2013.05.29 18:14 Development/HTML / XHTML


출처 : http://blog.naver.com/maglitt/60053025373

01/CSS적용 체크포인트 4가지

 

  • HTML, XHTML, XML 등의 markup 문법 확인 감사(DTD선언에 기초한 문법 확인)⇒ http://validator.w3.org
  • XHTML  의미와 구조적 구성
     <title>각각의 문서 내용에 적합하게 사용해야 한다.  
     <h1>~<h6>

    문서내 중요도의 단계에

     <ol>,<ul>,<p>

    <blockquote>,<del>

     각 엘리먼트들이 의미에 맞게 사용되도록 한다.
     <div>,<span>,id,class 문서작성 후 의미에 따라 구분해준다.

  • 표준문법사용
     주석문처리
    1. css주석처리 /*comment*/
    2. html, 다른 언어
      • <!--여러줄 주석처리-->
      • //한줄주석처리
     단위 표기
    1. 0을 제외한 모든 값에 단위표기 
    2. 구문이 끝날때는 세미콜론 표시(;)
     색상 표기

     #rrggbb형식 - color: #ff0000; (color: #f00;)

    rgb(r,g,b) 형식 - color: rgb(255,0,0); (color: rgb(100%,0%,0%);)

  •  표준에 적합한 브라우저를 기본으로 작업



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

Blog

웹표준가이드(4) / css선택자와 선언종류

2013.05.29 18:12 Development/HTML / XHTML


출처 : http://blog.naver.com/maglitt/60052974527

css제대로 사용하기

 

01 / html과 css의 관계

    • html : 컨텐츠의 내용과 구조 표시
      • 컨텐츠가 문단인지<p>, 인용문인지<blockquote>, 리스트형태<ul>인지에 따라 적합한 엘리먼트로 표기
      • 컨텐츠가 문서내에서 가지는 의미에 따라 <div>와 적절한 id, class 속성표기(나타내고자 하는 컨텐츠를 의미에 맞게 기술하여 웹페이지로의 접근성을 높이는 방법으로 markup을 만드는 것이 웹표준의 목적)
      • 웹표준의 목적 : 컨텐츠의 의미에 맞게 기술하여 웹페이지로의 접근성을 높이는 방법으로 markup하는 것.

    • css : 문서의 내용과 표현을 분리하는것
      • 문서의 내용은 html로 작성하고 표현은 css로!!

 

 

02 . css의 일반선택자

    • 일반선택자(selector) 종류
      • (*) : 공용선택자 ㅣ 모든 태그에 적용
      • (a) : 타입선택자 ㅣ 태그 <a> 지정 
      • (.A) : class 선택자 ㅣ 클래스가 A인 태그에 적용
      • (#A) : id 선택자 ㅣ 아이디가 A인 태그에 적용


    • (*)공용선택자
       * {
          margin: 0;
          padding: 0;
       }
      페이지 내의 모든 <h1>,<h2>,<p>,<form>,<blockquote> 등의 브라우져 기본 마진과 패딩을 가지고 있는 엘리먼트들의 여백을 없앤다.

       div.search * {

                          vertical-aling: middle;

       }

      div.search안의 모든 엘리먼트가 세로로 가운데 정렬이 되게 된다.


    • (a)타입선택자 : 해당엘러먼트를 선택하여 속성 부여

    • 클래스선택자 : 한페이지에서 여러번 사용가능

    • 아이디선택자 : 한페이지에 한번만 사용할 수 있다. 




03. 복합선택자(ie6/win 지원 x)

    • 종류
      • A B : 하위선택자 ㅣ 태그 A로 감싸져 있는 모든 태그 B 지정
      • A > B : 자식선택자 ㅣ 태그 A로 감싸져 있는 바로 아래 자식 태그 B 지정
      • A+B : 태그 A와 B가 연속으로 나와 있는 것을 지정

     
     
     
    • A B : 하위선택자
      • A 하위에 있는 B선택
      • id selector와 함게 사용하여 중복선언을 피함
      • 불필요한 class를 줄인다.

//하위선택자의 예//

 

<ul id="list">
<li><a href="list.html?id=34&amp;type=blah">item 34</a></li>
<li><a href="list.html?id=35&amp;type=blah">item 35</a></li>
...
...
<li><a href="list.html?id=99&amp;type=blah">item 99</a></li>
</ul>

 

------------------   ▼   아래와 같이 스타일적용 ▼ ---------------------------

ul#list a:link,
ul#list a:visited {
color: #999;
}
ul#list a:hover,
ul#list a:active {
color: #000;
}

 

 

    • A > B : 자식선택자
      • A 태그 바로 아래 있는 자신에게만 영향을 준다.
      • 중첩된 <ul>을 사용할때 유리

        //자식선택자의 예//
      • <ul class="depth1">

                  <li>
                  <a href="about.html>Company</a>
                            <ul class="depth2">
                                       <li>
                                       <a href="overview.html">Overview</a>
                                       </li>
                                       <li>
                                       <a href="ceo.html">Ceo.html</a>
                                      </li>
                             </ul>
                   </li>
        </ul>

                    위의 코드 에서 ul.depth1과 ul.depth2의 <li>에 스타일을 적용할 경우
                        ul.depth2의 <li>까지 스티일이 적용
                         ul.depth1 li {
                        background: #f9f9f9;
                        border-bottom: 1px solid #ddd;
                        }

                   

                   ul.depth1>li {
                  background: #f9f9f9;
                  border-bottom: 1px solid #ddd;
                  }

                  child selector를 사용해 주면 첫번째 뎁스의 <li>만

                  선택을 해서 스타일을 적용 할수 있다. (ie6에서는 x)

                   

                    • A+B : 인접선택자 (ie6에서는 x )

                      //인접선택자의 예//

                      <h2>브라우져 워</h2>
                      <p>초기 windows(win95?) 사용자는
                      윈도우를 설치 하더라도 … 즉 많은 브라우져가 있었고 IE 에 의한 독점이 이루어지지
                      않고 서로 시장 점유율을 높이려고 노력하던 시대를 Browser War 라고 합니다.</p>

                      <h2>브라우져 독점의 폐단과 우리의 웹시장</h2>

                      <p>우리의 웹시장이 IT 에 대한 지원과 더불어 엄청난 속도로 발전을 했다는 것은
                      모든 사람이 아는 사실입니다. ...사람들은 MS 의 IE 에서 돌아가는 javascript 를 구현하고 MS 에서 제시하는 방법론을 아무 저항없이 받아 들였습니다.</p>


                      제목 다음 문단의 첫글자를 <span>등을 이용하지 않고 크게 하고자 할 경우
                      h2+p:first-letter {
                      float: left;
                      font-size: 2.2em;
                      }

                   

                   

                   

                   

                  04 / 가상클래스 선택자

                    • p:first-child{background: #4788c4;} ⇒ ( first-child 수도 클래스)
                      • p태그로 감싸 있는 것중 가장 처음 태그에 적용
                      • 리스트의 디자인을 만들때 유용
                      • ie6에서는 x
                    • P:lang(ko-KR) {background: $4788c4;} ⇒ (언어 수도 클래스)
                      • 언어가 (ko-KR)인 p엘리먼트를 선택한다.
                      • 문서에 여러 언어가 있을 경우 스타일 적용에 적합
                      • ie6에서는 x
                    • a:link, a:visited ⇒ 링크수도 클래스
                      • html4.01 또는 xhtml1.0의 경우 a엘리먼트에 해당
                    • a:active, a:hover, a:focus ⇒ 동적수도 클래스
                      • focus는 ie6에서는 x

                   

                   

                   

                  05 / 속성선택자(ie6지원 x)

                    • p[foo], p[foo="warning"], p[foo~="warning"], p[langl="en"]
                      • foo라는 속성과 warning값을 가진 p엘리먼트 선택

                      • <input type="text" />

                        <textarea></textarea>

                        ----------------------[스타일적용]------------------------

                        input[type="text"], textarea {

                             border: solid 1px #eee;

                        }

                   

                   

                   

                   

                  06 / 동적선택자

                   

                    • :link, :visited, :hover, :active, :focus 수도클래스
                      • 일반적으로 링크<a>에서 사용하지만 tr 등 다른 엘리먼트에서도 사용가능

                        //동적선택자를 이용//javascript없이 마우스 오버시 td색을 바꿀수 있다.

                        tr:hover td {

                                        background: #eee;

                        }


                      • input, select에 적용해서 자신의 위치를 알려줄 수 있다.
                    • :first-child 수도 클래스
                      • first-child 수도 클래스로 첫번째 엘리먼트를 선택하여 디자인 적용에 동적기능 부여
                      • focus 수도 클래스의 리스트 예제에서 <li> 엘리먼트에 border-top 속성을 사용하여 원하는 결과물을 얻기 힘들다 이때 first-child수도 클래스를 사용하면 쉽게 해결 가능<ie6지원 x>

                        <style type="text/css">
                        li {
                        border-top: 1px solid #999;
                        padding: 0.2em 0;
                        }
                        li:first-child {
                        border-top: 0 none;
                        }
                        </style>


                    • :first-line, :first-letter 수도 클래스
                      • :first-line ⇒ 첫번째 라인 선택 가능
                      • :first-letter ⇒ 첫번째 글자를 선택 가능
                      • :first-line과 first-letter 모두 first-child와 달리 특정 엘리먼트를 필요로 하지 않는다

                        <style type="text/css">
                        p {
                        margin: 3em;
                        line-height: 1.6em;
                        font-family: AppleMyungJo, serif;
                        }
                        p:first-line {
                        text-decoration: underline;
                        }
                        p:first-letter {
                        float: left;
                        font-weight: bold;

                        font-size: 3.5em;
                        }
                        </style>

                         

                        ---------------------------------------------------------------------

                        <body>
                        <p>원칙은 매사가 순조롭고 편안할 때는 누구나 지킬 수 있다. 그런데 원칙을 원칙이게
                        하는 것은 어려운 상황, 손해를 볼 것이 예상되는 상황에서도 그것을 지키는 것이다.
                        앞으로도 나는 원칙을 지키기 위해 어떤 손해를 보게 될지 모른다. 하지만 나의
                        판단기준과 선택은 크게 달라지지 않을 것이다. - 안철수</p>
                        </body>

                   

                   

                   

                   

                  CSS 선언방법 3가지 

                  • 외부선언 (external css)  우선 순위 가장 낮음
                     <link rel="stylesheet" type="text/css" href="test.css" />
                    문서안에 포함 (embeded css)

                    <head>

                    <style type="text/css">

                    이곳에 선언

                    </style>

                    </head>

                  • 엘리먼트 직접 선언 (inline css)
                     <div style=""></div>
                  • 사용자 정의 스타일 (user defined css)  우선 순위 가장 높음
                    유저 직접 선언



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

                  Blog

                  웹표준가이드(3) / 올바른 마크업을 위한 준수사항

                  2013.05.29 18:11 Development/HTML / XHTML


                  출처 : http://blog.naver.com/maglitt/60052954929

                  01 / 무분별한 table의 사용금지

                   

                   

                   

                  02 / 잘못된 위치, 태그, 스크립트 사용

                  • form태그 tr태그 사이에 넣지 않기
                    • ⇒ 오류의 원인 (form태그의 공배해결을 위해)
                    • ⇒ 해결책 form {margin:0;}

                  • form submit 자바스크립트로 하지 않기
                    • ⇒ 잘못된 표현예 <a href="javascript:search()"><img src="test.gif" /></a>
                    • ⇒ 해결책  <input type="submit" /> 혹은 <input type="image" />

                      <form action="/search/" method="get" onsubmit="validation(this)">
                      <div class="search">
                      <select>
                      <option>제목</option>
                      <option>내용</option>
                      <option>작성자</option>
                      </select>
                      <input type="text" size="10" class="type-text" />
                      <inpyt type="image" src="button_search.gif" alt="검색" />
                      </div>
                      </form>

                   

                   

                   

                  03 / 올바른 그룹요소의 사용 (div, span)

                  • div등 일부 태그를 table 대용으로 사용하지 않도록 한다. (의미에 맞는 태그사용)
                  • block / inline 예
                    • block 요소 ⇒ <div>, <form>, <ul>, <ol>, <li>, <dl>, <dt>, <dd>
                    • inline 요소 ⇒ <span>, <a>, <img>, <slect>, <input>

                   

                   

                   

                  04 / 표제의 사용(Heading)

                  • <h1>~<h6> 문서내 가장 중요한 제목을 <h1>에서 부터 차례대로 하위 heading 지정
                  • <h1> 하위 heading은 <h3>로 건너띄어서는 안된다.

                   

                   

                   

                  05 / 올바른 문단작성을 위한<p>태그

                  • <p>올바른 문단작성을 위해 P태그 사용해라</p>
                  • <p>태그는 inline요소만을 포함할 수 있다.⇒

                   

                   

                   

                  06 / 구문을 분리해서 사용하라 (em,strong,dfn,code,samp,kbd,var,cite,abbr,acronym)

                  • 의미에 있어 강조(em, strong)
                    • <em> ⇒ 이탤릭체로 표현
                    • <strong> ⇒ 볼드체로 표현
                    • <i> 또는 <b> 단순히 표현을 이탤릭이나 볼드로 표현 
                      • <i> 이탤릭
                      • <b> 볼드

                  • 용어정의를 나타는 <dfn>
                    • <dfn> DDR(dial-on-demand routing) </dfn> 이란 어쩌구 저쩌구....

                  • 코드표현 <code>
                    • <code> ⇒ 컴퓨터 코드를 나타냄
                    • <samp> ⇒ 코드의 결과 출력물을 나타냄

                  • 값을 표현하는 <kbd>
                    • <kbd> ⇒ 유저키보드 입력
                    • <kbd>Enter</kbd>키를 누르세요.
                    • <var> ⇒ 프로그램에서의 변수선언

                  • 인용이나 출처를 나타내는 <cite>

                  • 축약을 표현하는 <abbr>, <acronym>
                    • <abbr> ⇒ 축약어(한글자씩 읽음) ⇒ who(w.h.o로 한글자씩 발음)
                    • <acronym> ⇒ 두문자어(약어를 그대로 발음) ⇒ Dom(돔으로 발음)

                  • 인용문구표현하는 <blockquote>, <q>
                    • <blockquote> ⇒ block요소
                    • <q> ⇒ inline요소

                  • 첨자 <sup>, <sub>
                    • x<sup>2</sup> + 4x + 4 = (x+2)<sup>2</sup>



                  07 / 추가 및 삭제 <ins>, <del>

                  • 문서에 <ins>새로 추가</ins>되거나 <del>삭제된 내용</del>을 표시 할 수 있습니다.
                  • <ins> 밑줄로 표시
                  • <del> 취소선으로 표시

                  08 / 리스트항목 <ul>, <ol>, <dl> 


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

                  Blog

                  웹표준가이드(2) / 일반문법

                  2013.05.29 18:08 Development/HTML / XHTML


                  출처 : http://blog.naver.com/maglitt/60052938568


                  정확한 문서 구조 준수
                  문서의 루트 요소는 html이 되어야 하며, 이 html 요소는 XHTML 네임스페이스를 지정
                  해야 한다.

                  <html xmlns="http://www.w3.org/1999/xhtml">

                  표준 문서에는 head, title 및 body 구조 요소가 포함되어야 한다. 프레임 세트 문서에는
                  head, title 및 frameset 구조 요소가 포함되어야 한다

                   


                   

                  모든 요소의 완벽한 중첩

                  모든 요소들이 완벽하게 내포(nest) 되어야 한다.

                   

                  <p>This is a <i>bad example.</p></i>
                  <p>This is a <i>good example.</i></p>

                   

                   

                  모든 속성 값은 인용 부호“ 또는 ‘로 묶는다.

                  <a href=http://sample.com>틀린 경우</A>
                  <a href="http://sample.com">맞는 경우</a>


                   

                   

                  모든 요소와 속성 소문자표기 - <li>와<LI>는 서로 다른 태그다!


                  <A HREF="http://sample.com">틀린 경우</A>
                  <a href="http://sample.com">맞는 경우</a>

                   

                   

                  모든 요소는 닫아야 한다.

                  • DTD에서 EMPTY로 선언된 경우를 제외하고 모든 요소에는 종료 필요
                  • 빈 요소에는 종료 태그가 포함되거나 시작 태그가 />로 끝나야 한다. 
                  • <br>은 잘못된 것 ------x

                    <br></br> 또는 <br/>이 올바른 표기 -----o

                  • 빈 요소의 종류 
                    area, 
                    base,
                    basefont, 
                    br, 
                    col, 
                    frame, 
                    hr, 
                    img, 
                    input, 
                    isindex, 
                    link, 
                    meta  
                    param

                  •  /> 앞에 공백이 필요 (XML을 사용할 수 없는 이전 브라우저와의 호환성을 위해)
                    한다(예: <br/>가 아니라 <br />)

                     <img src="http://sample.com/wrong.jpg">----x

                     <img src="http://sample.com/right.jpg" />----o

                   


                  모든 속성값은 속성이 함께 선언되어야 한다.

                  • 모든 속성은 최소화되어 표기 하지 않는다.
                  • a, applet, form, frame, iframe, img, map 등의 요소에는 name외에 id속성이 있어야한다

                   <option value="wrong" selected>틀린 경우</option> ---- x
                   <option value="right" selected="selected">맞는 경우</option> ----o

                   

                   

                  script 및 style에는 type 및 lanage가 표시되어야 한다.

                  <script type="text/javascript” language="javascript"></script>
                  <style type="text/css"></style>

                   

                  img, area에는 alt 속성 표현

                  <option value="wrong" selected>틀린 경우</option>
                  <option value="right" selected="selected">맞는 경우</option>

                   

                   

                   

                  script에서 태그는 escape 시킨다.

                  <script type="text/javascript">
                  <!--
                  // 틀린 표현!
                  document.write("</P>");
                  // -->
                  </script>

                   

                  ------------------------------------------------------------------

                  <script type="text/javascript">
                  <!—
                  // 맞는 표현!
                  document.write("<\/P>");
                  // -->
                  </script>

                   

                   

                   

                  url에서는 & 사용금지

                  <!—에러! --> <a href="foo.cgi?chapter=1&section=2">...</a>
                  <!—적합! --> <a href="foo.cgi?chapter=1&amp;section=2">...</a>


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

                  Blog

                  웹표준가이드(1) / 올바른 DOCTYPE 사용

                  2013.05.29 18:08 Development/HTML / XHTML


                  출처 : http://blog.naver.com/maglitt/60052938048


                  HTML 3.2 표준 문서 형식

                  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">



                  HTML 4.01 표준 문서 형식

                   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                  "http://www.w3.org/TR/html4/strict.dtd">
                  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                  "http://www.w3.org/TR/html4/loose.dtd">
                  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
                  "http://www.w3.org/TR/html4/frameset.dtd">

                   

                   

                  XHTML 1.0 표준 문서 형식

                   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
                  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
                  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

                   

                  가장 최상의 브라우저 호환성을 제공해 주는 문서 형식은 XHTML 1.0
                  Transitional을 사용하는 것이다.



                  XHTML 1.1 표준 문서 형식

                   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
                  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">



                  표준 문서 형식(Doctype)을 기반한 웹페이지에 대한 정확한 사용법

                   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
                  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
                  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko-KR">
                  <head>
                  <title> ... </title>
                  </head>
                  <body>
                  ...
                  </body>
                  </html>



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

                  Blog

                  반응형 웹디자인의 조건 글꼴 크기

                  2013.05.28 09:34 Development/HTML / XHTML


                  출처 : http://demun.tistory.com/2212


                  반응형 웹디자인을 적용하려면 제일 먼저 글꼴 크기를 정해줘야 한다.

                  예전에 방탄웹에서는 키워드를 사용하는 방법을 말했다. 

                  이유는 키워드는 어떤 브라우져에서 봐도 동일하나는 결론이였죠.


                  하지만 이제는 환경이 좀 변했습니다.

                  바로 반응형이죠.


                  브라우져의 크기, 보는 기기의 크기에 따라 웹페이지가 변해야 한다는 점입니다.

                  그 조건에 가장먼저 적용해야 하는 것이 바로 글꼴의 크기 입니다.

                  글꼴의 크기에 따라서 컨텐츠의 크기도 달라지고, 여백도 달라집니다.

                  즉 모든 것이 달라지기 때문에 레이아웃이 변합니다.


                  기존의 px 로 되어 있는 크기를 em 으로 변환해야 합니다.

                  그런 어떤식으로 변환해야 올바른 것일까??


                  특별히 다른 값을 명시하지 않는 한 모든 최신 브라우져는 디폴트 폰트 크기로 16px 를 사용합니다.

                  따라서 최초에 body 태그에 다음의 어떤 규칙을 적용해도 동일한 결과를 가져옵니다.

                  font-size: 100%;
                  font-size: 16px;
                  font-size: 1em;

                  예를들어 스타일시트에서 제일 먼저 정하는 블로그 타이틀에 대해서 살펴보겠습니다.


                  h1 {
                  	font-size: 69px; 
                  }
                  


                  이걸 em 으로 변환하면 아래의 공식을 따릅니다.

                  타킷(target) ÷ 컨텍스트(context) = 결과(result)

                  그러니 69 ÷ 16 = 4.3125 이 됩니다. 이처럼 스타일을 변경하면 아래처럼 되겠죠.


                  h1 { font-size: 4.3125em; /* 69 ÷ 16 */ }


                  만약에 h1 하위에 span 요소가 있다고 가정합니다.


                  h1 span {
                  	font-size: 38px; 
                  }
                  

                  그럼 변환하면 아래처럼 됩니다.

                  h1 span {
                  	font-size: .550724638em; /* 38 ÷ 69 */ 
                  }
                  


                  span 요소의 글꼴크기(38px)가 부모 요소(69px)와 연관되어 있다는 사실을 알 수 있습니다.

                  왜냐면 em 은 상대적크기이기 때문입니다. 


                  부모요소의 크기를 100% 잡고 상대적 크기를 정하기 때문입니다. 이점 놓치면 안됩니다.

                  또한 line-height: 도 같습니다.


                  이렇듯 반응형 웹디자인을 적용하려면 첫번째 글꼴 크기를 상대적 크기인 em 로 변경해야 한다.


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

                  Blog

                  반응형 웹디자인의 조건 너비 width

                  2013.05.28 09:31 Development/HTML / XHTML


                  출처 : http://demun.tistory.com/2213


                  반응형 웹디자인의 첫번째 조건인 글꼴 크기를 정하는 방법에 대해서 알아봤습니다.

                  이제 글꼴 크기를 정했으니 레이아웃에 반영되는 너비 width 를 지정하는 방법에 대해서 알아보겠습니다.


                  예를들어 아래와 같은 px 로 지정한 css 설정이 있다고 가정합니다.


                  <!doctype html>
                  <html lang="ko">
                  <head>
                  	<meta charset="utf-8" />
                  	<title>반응형 웹디자인의 조건 - 너비</title>
                  	<style>
                  		#wrapper {
                  			width: 960px;
                  			margin: 0 auto;
                  		}
                  		#header {
                  			width: 940px;
                  			margin: 10px;
                  		}
                  		#content {
                  			width: 698px;
                  			float: left;
                  		}
                  		#sidebar {
                  			width: 218px; 
                  		}
                  		#footer {
                  			width: 940px;
                  			margin: 10px;
                  			clear: both;
                  		}
                  	</style>
                  </head>
                  <body>
                  <div id="wrapper">
                  	<div id="header">header</div>
                  	<div id="content">content</div>
                  	<div id="sidebar">sidebar</div>
                  	<div id="footer">footer</div>
                  </div>
                  </body>
                  </html>
                  


                  기본만 정했으니 참고하시고 여기서도 타킷 ÷ 컨텍스트 = 결과 공식을 사용해서 width를 반응형으로 수정해보겠습니다.


                  css

                  #wrapper {
                  	width: 96%; /* 가장큰것이 100%라고 가정하고 96%로 지정합니다. */
                  	margin: 0 auto;
                  }
                  #header {
                  	width: 97.9166667%; /* 940 ÷ 960 */
                  	margin: 10px;
                  }
                  #content {
                  	width: 72.7083333%; /* 698 ÷ 960 */
                  	float: left;
                  }
                  #sidebar {
                  	width: 22.7083333%; /* 218 ÷ 960 */
                  }
                  #footer {
                  	width: 97.9466667%; /* 940 ÷ 960 */
                  	margin: 10px;
                  	clear: both;
                  }
                  


                  여기서 마진값도 %해도 되는데 고정적으로 마진을 사용해도 무방해서 이처럼 처리했습니다.

                  중요한것은 바로 target ÷ context = result 라는 것입니다.

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

                  Blog

                  IE8 이하에 HTML5 적용

                  2012.07.25 17:29 Development/HTML / XHTML


                  아직까지 불안감이 없지 않아 있는 IE9 이하에서의 HTML5 문서적용이다.

                  해서 구글링을 하다보니, 구글에서 HTML5 문서구조를 지킬 수 있는 형태의 스크립트를

                  제시하고 있었다.


                  먼저 기본적으로 많이 알려진 IE8 이하에서 존재하지 않는 HTML5의 요소들.

                  nav , article, section 등등의 요소들을 사용가능토록 하는 스크립트이다.


                  http://html5shiv.googlecode.com/svn/trunk/html5.js


                  이 스크립트 파일로 인해서 HTML5 에 요소가 활성화 된다.

                  여기서 주의할것은 본래 스크립트는 파싱절차가 있기에 문서 하위단에

                  링크를 연결해주도록 하는게 좋으나, 위 스크립트는 아마도 요소 재정의에

                  가깝기에 head 단에서 연결해주도록 하는 것이 맞는것 같다.

                  여기서도 이 스크립트를 로드할때는 조건부 주석으로 제어하여 로그하는게 옳다.


                  <!--[if lt IE 9]>

                  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

                  <![endif]-->


                  CDN 이 싫을 경우에는 스크립트 파일을 받아서 링크하는것도 괜찮다. 개인적으로는 CDN 보다는

                  받아서 캐쉬를 이용하는게 더 빠른 느낌이다.

                  어디까지나 개인적이니, 테스트가 필요.


                  그러나 동적으로 head 단에 link 요소를 이용하여 추가하는데에는 IE8에서는 무리다. 최초

                  이 스크립트가 먼저 작동을 해야 하기 떄문이다.


                  그리고 이 스크립트로 추가된 엘리먼트에는 기본적으로 display:block 속성이 설정되어있어야 한다.


                  article,aside,canvas,details,figcaption,figure, footer,header,hgroup,menu,nav,section,summary { 

                      display:block;

                  }






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

                  Blog

                  Visual Studio 2010 HTML 유효성 검사

                  2012.07.09 09:42 Development/HTML / XHTML



                  비쥬얼 스튜디오 2010 에서 HTML5 코드를 작성하다 보니,

                  자꾸 인텔리센스및 유효성 검사에 걸린다.


                  최초 기본은 XHTML 1.0 기반으로 설정되어 있다. 아무래도 가장 활성화 되어있는 표준코드 작성양식은

                  XHTML 1.0 Transitional 이기에 기본설정되어 있는 것 같다.






                  그러다 그러다보면 HTML5 코드작성하는데 자꾸밑줄 뜨고..ㅡㅡ;;

                  그래서 아래 경로에서 플러그인을 다운로드 받는다. 구찮으면 아래 파일 다운로드받으시고~

                  http://visualstudiogallery.msdn.microsoft.com/d771cbc8-d60a-40b0-a1d8-f19fc393127d/



                   VS2010유효성검사_HTML5Setup.msi





                  해서 해당 플러그인을 다운로드 받아 설치하고 나서 다시 옵션 > 유효성 검사란 확인해보면



                  ㅎㅎㅎ 이제 밑줄 사라졌다.

                  요새는 이런거에도 민감하고 좀 짜증이 잔잔히 인다.

                  그래서 구글링하다보니 고맙게도 계시더군. ㅎㅎㅎ

                  이제 인건비도 안나오는 포스팅한 사람에게 댓글을~ 달아주면 마무리다.



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

                  도발 2014.07.22 11:28 신고

                  도움 잘 받았습니다. ^^


                  Comment

                  Blog

                  HTML UI 에 대해서

                  2012.03.12 07:18 Development/HTML / XHTML


                  정말로 그 동안 계속 개발을 해오며, HTML UI 때문에 이만저만 고생한것이 아니다.
                  박스모델 등.. 테이블 코드를 이용한 그리드 레이아웃등.

                  어쨌건.. 그 동안 이런 저러한 테스트들을 통하여 결과를 다시 작성해 본다.

                  먼저 기본적이 웹사이트 UI 에 가장 많이 사용되는 UI 형태이다.


                  작성된 HTML코드는 다음과 같다.


                  이제 이와 같은 형태에서 많은 각각의 요소(엘리먼트) 안에 내용들이 할당된다.
                  HEADER 부분에는 평균적으로 메뉴가 들어가게 될것이고,
                  LEFT 부분에는 로그인및 배너및 기타요소가 들어가게 될것이고,
                  CONTENT 부분에는 말 그대로 컨텐츠등이 들어가게 될것이다.
                  FOOTER 에는 카피라이트 문구나, 소개형태의 내용이 들어가게 된다.

                  그런데 이와같은 형태의 UI에서 빈번하게 삽질하게 되는 경우는 내용에 따른 FOOTER 위치 변동과,
                  CONTENT와 LEFT 를 포함하고 있는 CONTAINER 의 세로 변동이었다.
                  이에 간단하게 테스트를 해보았다.

                  나는 레이아웃 모델중 요소를 각각의 위치에 배치하는 형태의 레이아웃 모델을 훨씬 선호하기 떄문에,
                  위와 같은 형태로 코드를 작성하고 테스트를 하게 되었다.

                  먼저 위 엘리먼트에 대한 스타일시트(CSS) 코드는 다음과 같다.

                  하이라이트 처리가 좀 귀찮은 관계로 캡쳐로 합니다잉.ㅎㅎ;;;

                  그럼 맨처음 이미지와 같은 형태로 레이아웃이 구성이 된다.
                  이제 여기에 아래와 같은 테스트 스크립트를 삽입해 보자.


                  그냥 CONTENT 요소에 넘버링을 찍는 간단한 for 문이다.
                  그리고 결과는... ㅎㅎ
                  아래와 같다. 만족스럽다. ㅎㅎㅎ


                  100까지 찍으면 캡쳐가 힘들어서 루프를 70까지만 돌린다.

                  테스트한 브라우저는 IE6,7,8,9 / 구글크롬, 오페라, 파이어폭스, 사파리 등 IE의 쿼크모드 렌더링을
                  제외하고는 모두 동일한 결과를 나타냈다.
                  다음으로 이렇게 작성해준 사람을 생각해서 댓글을 작성해주는 센서를 발휘하면 테스트 완료다.ㅎㅎ
                  어쨌건 백문이불여일타. 테스트를 많이하자~ 

                  CSS레이아웃,div레이아웃,css세로100%,footer하단고정,ui개발,css layout,박스모델

                  이에 더 괜찮은 방법이나 틀린점은 지적 부탁드립니다. ^^; 
                  저작자 표시
                  신고

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

                  IE8 이하에 HTML5 적용  (0) 2012.07.25
                  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
                  현재 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

                  3D로 강력해진 구글 ‘크롬9′ 공개

                  2011.02.10 14:33 Development/HTML / XHTML


                  구글이 2월3일(현지시각) 웹기반 3D와 웹스토어 등의 기능이 추가된 웹브라우저 ‘크롬9′ 정식 버전을 공개했다. 이전 크롬 이용자는 크롬9 설치 프로그램을 따로 내려받지 않아도 자동으로 판올림된다.

                  이번 크롬9 정식 버전에서 우선 눈에 띄는 점은 웹기반 3D를 지원한다는 점이다. ‘웹GL’로 불리는 이 응용프로그램 인터페이스(API)는 3D 그래픽 표준인 ‘오픈GL’ API를 만든 크로노스그룹이 앞장서 개발하고 있다.

                  웹GL을 사용하면 별도의 플러그인 없이 크롬 브라우저에서 3D 그래픽을 이용할 수 있다. 웹GL 표준이 브라우저 자체에서 하드웨어 가속을 지원하기 때문이다.

                  구글은 크롬9 정식 버전 공개에 앞서 크롬 개발자 버전 및 베타 버전에서만 웹GL을 선보인 바 있다. 2010년 12월 서비스를 시작한 ‘바디브라우저‘가 웹GL을 이용한 대표적인 3D 애플리케이션이다.

                  아직은 웹GL 표준을 이용한 애플리케이션이 많지 않지만 ‘크롬 실험실‘ 홈페이지에서 웹GL 성능을 직접 확인해 볼 수 있는 3D 애플리케이션 샘플을 사용해볼 수 있다.

                  이번 크롬9 정식 버전은 브라우저 주소 입력창에서 구글 순간검색을 지원한다. 순간검색 기능이란 검색어를 입력할 때 키워드를 완성하기 전에 검색 결과를 예측해 보여주는 기능이다. 가령 크롬 브라우저 주소 입력창에 ‘Micro’를 입력하면 순간검색 기능이 ‘Microsoft’를 예측하고 해당 검색 결과를 미리 보여주는 식이다. 상위 추천 검색어가 웹사이트 주소일 경우 곧바로 해당 웹사이트를 미리보기 형태로 보여준다. (아래 그림 참조)

                  그동안 구글은 순간검색 기능을 구글 홈페이지 구글 검색창과 크롬9 베타버전의 주소입력창에서만 지원해 왔다. 기본 검색 제공자를 구글 이외에 다른 검색 서비스로 바꿔 사용할 수 있다는 점도 유용하다.

                  구글 클라우드 프린트 서비스도 크롬9 정식 버전에서 사용할 수 있다. 프린터 드라이버 설치 과정 없이 크롬 브라우저만 있으면 어디서든 구글 문서도구와 구글 메일의 인쇄가 가능하다는 점이 장점이다.

                  구글 클라우드 프린트를 사용하기 위해서는 우선 크롬 브라우저에서 사용자의 구글 계정을 통해 클라우드 프린터 서비스에 등록해야 한다. 사용자의 계정에 프린터를 등록하면 해당 계정으로 접속하는 다른 기기에서 이 프린터로 문서를 원격 출력할 수 있다.

                  구글 클라우드 프린트 서비스는 모바일에서 특히 유용하다. 스마트폰이나 태블릿의 웹브라우저를 통해 지메일에 접속하면 클라우드 프린트 서비스를 이용할 수 있다.

                  하지만 아직 한글 지원이 완전하지 않다는 점은 앞으로 해결해야 할 문제다. 또한 지금은 윈도우 운영체제에서만 지원한다. 구글은 앞으로 맥이나 리눅스 환경에서도 사용 가능하도록 서비스 제공 범위를 확대할 예정이다.

                  크롬 웹스토어‘를 이용할 수 있게 된 점도 크롬9 버전에서 추가된 기능이다. 구글이 2010년 12월 공개한 크롬 웹스토어는 크롬 브라우저에서 동작하는 ‘웹 앱’을 제공한다. 웹 앱은 크롬 확장 프로그램이나 파이어폭스 부가기능처럼 웹브라우저를 기반으로 동작하는 것이 특징이다. 이번 크롬9 정식 버전에서 웹스토어를 지원함에 따라 모바일 환경에 한정되어 있던 앱 개발 환경이 PC 쪽으로도 확대될 전망이다.

                  저작자 표시
                  신고

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

                  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
                  HTML UI :: 세로 100% 설정  (0) 2010.10.29
                  현재 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

                  UI : 엘리먼트 배치

                  2010.11.10 15:51 Development/HTML / XHTML


                  작업도중 알아가는 잊고 있었던 부분을 포스팅한다.
                  문서 UI 를 구성하는 방법중 테이블로 (Table) 구성하는 Grid 접근 방식.
                  해당 위치에 요소(Element) 를 배치하는 구성요소 방식이 있다.
                  특별하게 이름지어져 명명된것은 아직까지 없는듯 하다. 
                  많이 쓰는 명칭으로는 CSS 레이아웃이라고도 하기도 하고. 틀린말도
                  아니지만.. 그냥 느낌이.. 완전 명확하게 정의되어진것 같은 느낌이 안든다.
                  엘리먼트 요소를 문서에 배치하는 것이다.
                  일단 CSS 레이아웃이란 이름으로.
                  이제 거의 왠만하면 테이블로 UI 를 구성하는 일은 없을것이다.
                  본래 목적. 순수하게 표로 사용하는게 맞기 때문이다.

                  테스트 환경 : Google Chrome, IE8, Opera, FF

                  보통 아래와 같이 버튼 박스를 배치하려 할 경우

                   버튼을 구성하는 코드를 다음과 같이 놓았다.


                  이제 여기서 부터 여러가지 방법이 있을것이다.
                  내가 본 사례로는
                  1. text-align:right
                  2. float:left; padding-left:해당크기px
                  3. float:right; (이렇게 해서 버튼 코드 위치를 바꾸는 경우도 있었다.)
                  그래도 되기는 된다. 근데 뭔가 찝찝하다..
                  만일 이미지로 버튼을 구성해놓고 버튼안에 텍스트를 동적으로 바꿔서 재사용하게 해야 하는 경우,
                  span 엘리먼트에 float:left 속성을 주어야 하는 경우일때는 
                  위 1 번방법은 사용불가. 2번은.. 완전 명확하게 UI 사이즈들이 명확하게 정의되어 있을때는 사용이
                  가능해진다. 근데 항상 반드시 그럴수 있는것만은 아니다. 그리고 브라우저별로 렌더링이 다를경우도
                  난감해지고. 크로스브라우징이 좀 난감해지는 경우도 있다.
                  그리고 3번은 개인적으로 정말로 아니라고 본다. 
                  저대로 작성해놓고 적용시켜 놓고 보면 알 것이다. 이미 알고 있는 사람들도 많을것이고.

                  그래서 다시 근본적인 UI 구성하는 논리를 생각하면 "요소들의 배치" 이다.
                  이에 아주 친절한 속성인 margin:0 0 0 auto 을 이용해보자.
                  대신 그러기엔 위 ButtonBox 엘리먼트에 width 와 height 속성이 지정되어 있어야 한다.
                  그렇게 작성해보면.. 왠지 작성느낌이 상당히 명시적인 느낌이 든다.
                  그리고 요소가 배치되는 느낌도 들고.
                  이미 많이 알고 있는 사람들도 있을것이지만.. 삽질은 피하기 위해서 포스팅을 한다..ㅎㅎ;;
                  저작자 표시
                  신고

                  '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

                  Blog

                  HTML5의 모든 것

                  2010.07.29 14:06 Development/HTML / XHTML


                  출처 : http://channy.creation.net/blog/776

                  애플 iPad 논란과 유튜브 HTML5 지원 이슈와 Flash vs. HTML 5 이슈를 거치면서 HTML 5에 대한 반응이 국내에서 커지고 있군요.

                  지난 주에 했던 블로터 포럼 인터뷰가 어제 올라간 후 저에게 이런 저런 문의를 해 주신 분들이 많습니다. 제가 가지고 있는 지식이나 경험은 짧지만 최대한 가지고 있는 것을 하나의 글에 제공해 드려 보도록 하겠습니다. 아래 글은 개인적으로 관리하던 HTML 자료 모음집을 합친 것입니다.

                  트위터를 검색하면 맨 위에 있는 Twitter의 모든 것 처럼 HTML5에 궁금증이 있으신 분들을 위해 모아서 공유 합니다. 앞으로 좋은 자료를 찾는 대로 계속 업데이트 해 보겠습니다.

                  실전 HTML5 가이드

                  국내 웹 표준 커뮤니티에서 HTML5 오픈 콘퍼런스를 개최하고 강사들이 발표 자료 및 실전 가이드를 공개하였습니다.

                  본 가이드는 HTML5의 기본 개념을 배우고 모바일 웹에서 실질적으로 사용할 수 있도록 다섯명의 발표자들이 각자 자원 봉사로 작성하였습니다. 총 5장으로 구성 되어 있으며, HTML5 소개 및 마크업, CSS3, HTML5 APIs 및 iPhone에서의 웹 앱 개발이 포함되어 있습니다.

                  A4크기로 총 170페이지이고, B5크기로 206페이지입니다. 우선 A4에서 출력가능한 PDF 파일을 배포합니다. 많은 이용 바랍니다.
                  실전 HTML5 가이드 다운로드(A4 인쇄용) | B5 인쇄용

                  I. HTML 5 소개

                  HTML 5는 W3C에서 만들고 있는 차세대 웹 표준으로서 마이크로소프트, 모질라, 애플, 구글, 오페라 등 모든 웹 브라우저 벤더가 참여하고 있는 산업 표준이기도 합니다. 2004년 WHATWG의 초안으로 부터 시작된 이 표준안은 시맨틱 마크업, 편리한 웹폼 기능, 리치 웹 애플리케이션 API 들을 담고 있으며 2007년 부터 W3C HTML W/G에서 표준안이 만들어 지고 있습니다.

                  HTML5의 주요 목적은 과거 HTML의 호환성을 유지하면서 웹 개발자들이 실질적으로 부딫히는 문제를 해결 하고 HTML 문서가 좀더 의미 있으면서도 리치 웹 애플리케이션 기능을 수행할 수 있는 범용 표준을 만드는 데 있습니다. 즉, 웹 문서 기반을 그대로 유지하면서 웹 브라우저 간의 상호 운용성을 위한 세부적인 지침을 담고 있으며 필요에 따라 각 이해 관계자를 위한 별도 문서도 제작해서 배포하고 있습니다.

                  HTML5는 향후 웹 브라우저의 가장 표준 기반 렌더링 엔진의 문서 타입이 될 것입니다.

                  <!doctype html>
                  <html>
                    <head>
                      <meta charset="UTF-8">
                      <title>예제 문서</title>
                    </head>
                  
                    <body>
                      <p>예제 단락</p>
                    </body>
                  </html>

                  1. 시맨틱 마크업

                  HTML 5에서는 기존의 HTML4 보다 확장된 태그들을 지원합니다. 특히, 문서 구조에 적합하게 header, footer, nav, section 같은 구조화 마크업을 사용할 수 있습니다.

                  또한, time, mark, meter, datalist 등과 같은 특정 의미 기반 태그들이 추가로 지원 됩니다. b의 경우 b는 키워드, i는 학명에 사용하도록 기존 많이 사용하는 요소도 그대로 이용할 수 있습니다.

                  하지만, CSS로 완전 대체 가능한 big, center, font, s, strike 같은 스타일 기반 요소는 완전히 없어집니다. 또한, frame과 applet, acronym 같은 부정적인 요소들도 사용하지 않습니다.

                  2. 편리한 웹 폼(WebForm) 기능

                  HTML5는 개발자의 수고를 들어 줄 Form 기능 개선을 담고 있습니다. input 태그의 각종 type 속성이 추가되어 다양한 기능을 제공해 줍니다.

                  datetime 속성값을 사용하면 달력을 웹 브라우저에서 제공해 주며, range 속성은 스크롤바를, url은 웹 사이트 목록, email은 메일 주소 유효성 확인을 해 주기도 합니다. color 속성은 색상표를 별도 개발 없이 사용할 수 있습니다.

                  Form 양식은 모두 유효성 확인 기능을 켜거나 끌 수 있어 클라이언트 데이터 검증에 매우 도움을 주게 됩니다.

                  3. 리치 웹 애플리케이션

                  HTML 5는 웹 어플리케이션 작성에 도움을 줄 다양한 API를 제공 합니다. 새로 만든 HTML 요소들과 함께 더 좋은 어플리케이션 개발에 사용할 수 있습니다.

                  • 2차원 그래픽 API에 사용할 수 있는 canvas 요소.
                  • 내장 비디오 및 오디오 재생을 위한 video, audio 요소.
                  • 내장 저장소. 키/값이나 SQL 기반 데이터베이스 지원을 위한 기능.
                  • 오프라인 웹 애플리케이션 기반 API.
                  • 웹 애플리케이션이 독립적으로 특정 프로토콜 및 미디어 형식을 등록할 수 있는 API.
                  • contenteditable 속성과 함께 지원 되는 편집 API 기능.
                  • draggable 속성과 함께 지원 되는 드래그앤 드롭 API 기능.
                  • 페이지 앞/뒤 네비게이션을 지원할 방문 기록 표시용 API 기능. (보안 제한 모델이 있음)
                  • (원격) 다중 메시징 처리 기능.

                  II. HTML 5 표준 문서 소개

                  웹 표준을 만드는 웹 컨소시움(W3C)의 표준 문서들은 대체로 읽기 어려운 것으로 알려져 있다. HTML 워킹그룹에서는 이용자와 가장 친숙하게 접근할 수 있도록 이러한 문제점을 보완하기 다양한 관점에서 각기 다른 표준 문서를 제공하고 있습니다.

                  본 문서는 HTML5를 접하는 이용자들을 위해 어떠한 표준 문서가 제작되고 있는지 소개해 주고자 한다. 2009년 4월 이전에는 아래 소개된 문서들이 HTML 5 표준안에 함께 담겨 있었으나 분량이 많고 기존 마크업 기반 내용과 혼란을 준다는 측면에서 분리해서 관리하고 있습니다.

                  1. 일반 문서

                  1.1 HTML 5 :A vocabulary and associated APIs for HTML and XHTML
                  HTML 5의 원래 표준안으로 분량이나 내용이 모두 웹 브라우저 개발자를 위해서 만들어져 있다. 가급적이면 HTML 5 표준안 보다 아래에 있는 대로 관점에 따라 적당한 문서를 보는 것이 좋겠다.

                  1.2 HTML 4와 HTML 5의 차이점 (한국어)
                  HTML 5 differences from HTML 4라는 문서는 기존 HTML에 익숙하던 사람들이 HTML5에서 무엇이 바뀌었는지 알 수 있도록 만든 소개 문서이다. 이 문서는 HTML 5 입문자들이 읽기에 적당하며 연도별 주요 변경 내용도 담고 있으며 한국어로 번역되어 제공된다.

                  1.3 HTML 디자인 원칙
                  이 문서는 HTML5 표준을 만드는 데 있어, 의사 결정의 기본 원칙이 되는 사항을 모아 두고 있다.

                  1. 호환성 – 기존의 HTML 문서를 최대한 지원, 단계적 기능 축소(Graceful degradation), 기존 기능 재사용 및 엄격한 잣대를 대지 않는 것
                  2. 유용성 – 실제 웹 개발자들이 겪고 있는 가장 중요한 문제를 순위에 따라 나누되 문제점을 분리해서 독립적으로 해결 함.
                  3. 상호 호환성 – 브라우저 엔진 호환을 위해 최대한 자세한 스펙을 기술하되 복잡하지 않고 오류 처리 방법을 꼭 기술.
                  4. 보편적 접근성 – 미디어 포맷 독립성, 전 세계 언어 지원, 웹 접근성 보장

                  2. 웹 퍼블리셔

                  2.1 HTML5 표준안(웹 개발자 관점)
                  기존 HTML 5 스펙은 웹 브라우저 개발 회사를 위해 기술된 표준안이다. 개발자 관점에서 무엇이 어떻게 바뀌었고 어떻게 사용할 수 있는지 보여 줄 수 있는 문서가 필요하다. 과거 W3C 표준안들의 문제점이 바로 이용자가 아닌 개발자 위주로 만들어져 있어 읽기 어려웠다는 것이다. 이 문서는 바로 이용자 즉, 웹 개발자를 위한 스펙이다.

                  2.2 HTML 마크업(저작자 관점)
                  이 문서는 HTML5 표준안(웹 개발자 관점)의 하부 문서로서 HTML 문서를 주로 저작하는 웹 퍼블리셔 혹은 HTML 코더를 위해 만들어진 문서이다.

                  2.3 HTML Microdata
                  마이크로 데이터는 흔히 마이크로 포맷으로 알려진 시맨틱 데이터 정의를 범용적으로 만든 것이다. itemprop라는 속성을 통해 사용자 정의로 의미를 부여해 검색 엔진이나 시맨틱 엔진이 이를 처리할 수 있게 하였다. 사실상 비슷한 역할을 하는 RDFa와 함께 논의 되고 있는 중이다.

                  3. Rich UI 개발자

                  3.1 HTML Canvas 2D API
                  HTML5의 Canvas 태그 내 각종 객체를 그리고 생성하는 데 필요한 API를 기술하고 있다.

                  3.2 HTML Canvas 2D Context
                  HTML5의 Canvas 태그 내 각종 객체를 회전, 변환하고 그레디언트, 이미지 생성 등 각종 효과를 주는 기능 부분을 기술하고 있다.

                  참고로 Mozilla의 Canvas 튜토리얼이나 애플의 Canvas 예제를 보면 편할 것이다.

                  4. 웹 애플리케이션 및 백엔드 개발자

                  4.1 Server-Sent Events
                  웹 서버로 부터 전달(Push)되는 데이터 예를 들어 SMS 같은 것을 받을 수 있도록 EventSource를 정의하고 이벤트를 기다릴 수 있도록 하는 API를 기술하고 있다.

                  4.2 HTML5 Communications
                  이 스펙은 기존 Ajax의 단점으로 알려진 크로스 도메인 문서 접근을 가능하게 해 주는 스펙이다. 마이크로소프트의 XHR 때문에 약간 논의가 지지부진한 면이 있지만 텍스트를 위한 서버 통신을 지원해 준다. 물론 보안 사항에 대한 부분도 중요하게 다루어지고 있다.

                  4.3 Web SQL Database
                  자바 스크립트를 이용해 웹 브라우저 내장 데이터베이스에 SQL을 통해 질의하는 API이다. 오프라인 웹 애플리케이션 개발이나 모바일에서 로컬 데이터 캐싱이 필요할 때 유용하게 사용할 수 있으며, 일반적인 DB 라이브러리 수준의 메소드를 지원해 준다.

                  4.4 Web Sockets API
                  한 웹 페이지에서 서로 다른 서버에 있는 웹 페이지에 양방향 통신을 할 수 있는 별도 프로토콜을 정의할 수 있는 API이다.

                  4.5 Web Workers
                  웹 애플리케이션이 주 문서와 병렬적으로 스크립트를 백그라운드로 수행할 수 있게 해 주는 API. 쓰레드 기반 메시지 처리를 가능하게 해 준다. CPU 부하를 많이 잡는 작업을 여러 워커(worker)로 나누어 작업하거나 클라이언트 DB를 업데이트 하거나 나누어서 작업이 가능한 자바 스크립트 API를 제공해 준다. 흥미로운 점은 암호화 작업에 대한 유즈케이스를 담고 있어서 웹 브라우저들이 지원만 한다면 향후 전자 서명 기능을 제공해 줄 수도 있을 듯.

                  III. HTML 5 관련 발표 자료 및 글모음

                  본 문서는 제가 2005년 부터 HTML 5에 관심을 가져 오면서 만들었던 자료와 블로그 글 모음입니다. 예전 자료들인 만큼 낡은 내용도 있지만, 그간의 발전 과정 및 관련 이슈를 상세하게 다루고 있으므로 HTML 5의 역사를 파악하는데 도움이 될 것 입니다.

                  1. 발표 자료

                  HTML5와 모바일 웹 (2009)

                  View more presentations from Channy Yun.

                  HTML5 역사와 현황 (2008)

                  History and Status of HTML5
                  View more presentations from Channy Yun.

                  웹 표준의 미래 – HTMl5 (2006)

                  View more presentations from Channy Yun.

                  2. 블로그 글 모음

                  1. IE9, HTML5 준수한다! 2009-11-19
                  2. 요즘 HTML5에 무슨 일이… 2009-09-27
                  3. 모바일과 HTML5 – 미래웹포럼 후기 2009-09-10
                  4. HTML5 킬러앱은 ‘모바일’? 2009-08-28
                  5. 마크업의 미래에 대한 오해 2009-08-24
                  6. 구글은 왜 on2를 샀을까? 2009-08-07
                  7. XHTML2.0 역사속으로? 2009-07-03
                  8. Mozilla, 오픈 비디오 지원 10만불 쏜다! 2009-01-28
                  9. 웹 애플리케이션은 전쟁 중! 2008-02-28
                  10. 웹 표준, 나쁜 뉴스와 좋은 뉴스 2008-01-24
                  11. HTML5에서 미디어 포맷 논쟁 중… 2007-12-12
                  12. 반론: 차세대 웹은 브라우저를 초월하여… 2007-11-28
                  13. 파이어폭스 SVG 비디오 시연 2007-08-22
                  14. HTML5를 주목해야 하는 이유 2007-07-11
                  15. HTML5와 HTML4의 차이점 2007-07-01
                  16. 웹어플리케이션 전쟁 본격화 되나? 2007-06-07
                  17. W3C HTML 워킹 그룹 부활! 2007-03-14
                  18. HTML5와 웹 표준 전망에 대한 발표 자료 2006-12-04
                  19. 팀 버너스리, 위기의 W3C 구하기 (2) 2006/11/09
                  20. 팀 버너스리, 위기의 W3C 구하기 (1) 2006/11/03
                  21. RFC: 새 HTML에 대한 의견 청취 2006-11-10
                  22. 2차 웹 브라우저 전쟁, 관전 포인트는? 2006-11-01
                  23. WHATWG의 도전 2005-9-15

                  3. 외부 기고

                  4. 만화

                  HTML 5가 대두되면서 기존 XHTML과의 관계에 대한 이야기를 만화로 만든 것으로 Jeremy Keith 원작이며 마크업의 미래에 대한 오해에 한국어 전문이 있다.

                  IV. HTML5 외부 자료

                  본 문서는 HTML5에 대한 외국에 있는 각종 웹 사이트, 튜토리얼, 데모, 참고 문헌 등을 모은 것입니다. 모두 영문으로 되어 있지만 많은 것을 얻을 수 있습니다. 관련 자료가 한국어로도 제공됐으면 하는 바램이 있습니다.

                  1. 웹 사이트

                  • HTML5 Doctor – HTML5 이용 시 궁금증에 대한 해답을 제공.
                  • HTML FIVE – HTML5에 대한 일반적인 정보 제공
                  • HTML5 Gallery – HTML5 문서 형식으로 만든 웹 사이트 모음
                  • HTML5 Tutorials- 간단한 예제를 튜토리얼 형식으로 소개
                  • Planet HTML5 – HTML5 관련 전문가 블로그 모음

                  2. 문서 저작 튜토리얼

                  HTML5 기반 WordPress 테마

                  3. 리치 기능 데모

                  1. SketchPad – HTML 5 Canvas 기반 그래픽 저작 도구 – by Colorjack
                  2. Sublime Video Player – HTML 5 Video Player (H.264만 지원)
                  3. RGraph – HTML5 Canvas Graph 라이브러리
                  4. Offline Image Editor and Uploader – Drag & Drop API, DOM Storage, Application Cache, Canvas, Cross Domain Sharing 기능 등을 활용. by Mozilla Hack
                  5. HTML5 Adventure – Google I/O 2009 컨퍼런스 때 선 보였던 데모 모음.
                  6. HTML 5 Demos and Examples Remy Sharp가 만드는 간단한 데모 사이트
                  7. Mozilla Hack Demos Firefox에 탑재된 HTML5 등 신 기능 기반 데모 모음

                  4. 참고 자료

                  각 웹 브라우저에서 HTML5의 기능을 어디까지 구현하고 있는 지 현황을 담은 문서를 제공한다.

                  1. When can I use… HTML5, CSS3, SVG 등 최신 기술에 대한 브라우저 호환도표
                  2. HTML5 Comparison of Layout Engines 위키피디아의 HTML5 기능별 렌더링 엔진 호환도표
                  3. List of Known Implementations of HTML 5 in Web Browsers WHATWG에서 관리하고 있는 웹 브라우저 구현 문제점 목록
                  4. HTML 5 coverage WHATWG 표준안 기초 호환 도표
                  5. HTML5 Compatibility Quirksmode에서 관리하는 HTML5 DOM 관련 기능 호환표.
                  6. HTML5 Cheat Sheet

                   

                  저작자 표시
                  신고

                  '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