All Scrap

전통적으로 표를 많이 사용하는 한국의 문서 스타일 때문에, 웹페이지에도 테이블 태그를 이용한 표작업이 빈번한 편입니다. 다음은, HTML/CSS를 이용한 테이블(표)디자인에 대해 살펴봅니다. [ border="1"의 일반적인 테이블(표) ]NoSubjectDate1http://www.naver.com 2006.112http://kr.yahoo.com 2006.11<table width="500" border="1" cellspacing="0" cellpadding="3" bordercolor="#999999"> 위와 같이, 테이블 테두리값 1px로 설정한다 하더라도 실제 웹브라우저 상에서는 테두리가 2px로 보입니다.그러한 까닭은, 이 각각의 1px셀 테두리가 서로 만나면서 2px(1px+1px)이 되기 때문입니다. 아래 테이블에서와 같이 "셀 간격"을 띄워놓고 보면 그 이유를 좀 더 분명하게 이해할 수 있습니다. NoSubjectDate1http://www.naver.com 2006.112http://kr.yahoo.com 2006.11<table width="500" border="1" cellspacing="5" cellpadding="3" bordercolor="#999999"> border-collapse셀 및 테이블 테두리를 포개는 설정에 관한 TABLE태그에 대한 CSS입니다. 먼저, 적용된 모습을 살펴봅니다.NoSubjectDate1http://www.naver.com 2006.112http://kr.yahoo.com 2006.11<table width="500" border="1" cellspacing="0" cellpadding="3" bordercolor="#999999" style="border-collapse:collapse;"> - separate : 테이블 전체의 외곽선과 각 셀의 외곽선을 각각 표시합니다.
- collapse : 테이블 전체의 외곽 및, 각 셀의 외곽선을 경계에서 중복하여 표시합니다.
ex) TABLE { border-collapse: separate } 위와 같이, 아주 간단하게, 1px 외곽선 테이블(표)를 만들 수 있습니다. 해당 CSS는 IE5이상부터 지원되는 기능이며, FireFox 2.0의 경우도 지원되고 있습니다. (단, border="1"이 아닌 경우, 즉 그 이상의 값을 설정한 경우, FireFox에서는 여유선이 표시됩니다)참고) 너비나 형식이 다른 외곽선이 포개질 때는 다음과 같은 우선 순위를 가집니다.border-style:hidden설정 외곽선이 최우선, 너비가 넓은 외곽선이 그 다음의 우선 순위를 가집니다.너비가 같은 경우에는 double, solid, dashed, dotted, ridge, outset, groove, inset 순서로 표기되며,색상만 다른 경우에는 셀, 가로열, 가로열 그룹, 세로열, 세로열 그룹, 테이블 순서로 표시됩니다. Rules표 내부 셀간의 구분선을 어떻게 표시할 지에 대한, TABLE태그의 속성입니다. 먼저, 적용된 모습을 살펴봅니다.NoSubjectDate1http://www.naver.com 2006.112http://kr.yahoo.com 2006.11<table width="500" border="1" cellspacing="0" cellpadding="3" bordercolor="#999999" style="border-collapse:collapse;" rules="none"> - none : 선없음- groups : thead, tbody, tfoot, colgroup요소의 경계 표시- rows : 가로열의 경계 표시- cols : 세로열의 경계 표시- all : 모든 경계 표시 Frame표 외곽 테두리를 어떻게 표시할 지에 대한, TABLE태그의 속성입니다. 먼저, 적용된 모습을 살펴봅니다.NoSubjectDate1http://www.naver.com 2006.112http://kr.yahoo.com 2006.11<table width="500" border="1" cellspacing="0" cellpadding="3" bordercolor="#999999" style="border-collapse:collapse;" rules="none" frame="hsides"> - void : 테두리 없음- above : 윗 부분만 테두리 표시- below : 아래 부분만 테두리 표시- hsides : 위, 아래 부분만 테두리 표시- lhs : 왼쪽만 테두리 표시- rhs : 오른쪽만 테두리 표시- vsides : 좌/우 테두리만 표시- box, border : 상하좌우 모든 테두리 표시 NoSubjectDate1http://www.naver.com 2006.112http://kr.yahoo.com 2006.11<table width="500" border="2" cellspacing="0" cellpadding="3" bordercolor="#999999" style="border-collapse:collapse;" rules="rows" frame="hsides"> 이상의 HTML 태그 속성과 CSS를 이용하면, 위와 같은 테이블(표)를 손쉽게 제작할 수 있습니다. FireFox v2.0위에서 잠깐 언급했듯이, FireFox(v2.0)의 경우, 이전의 Netscape에서 지원하지 않았던 border-collapse스타일을 지원하고 있습니다. 다만, 아래 그림에서와 같이 테두리의 border값을 2px이상으로 설정한 경우, 여유선이 표시되는 현상이 있습니다. 이 경우, 테이블 외곽 테두리를 모두 표기한 경우, 어긋나 보이게 됩니다. 그러나 border값이 1px인 경우에는 IE와 똑같은 스타일로 표시됩니다.

<table width="500" border="2" cellspacing="0" cellpadding="3" bordercolor="#999999" style="border-collapse:collapse;" rules="rows" frame="hsides">

<table width="500" border="2" cellspacing="0" cellpadding="3" bordercolor="#999999" style="border-collapse:collapse;" rules="rows">

웹 크로스 브라우징의 프레임워크 중 하나인 YAML 를 소개합니다.
http://www.yaml.de/en/home.html

ie6,ie7,ie8,firefox,opera,safari ..대부분의 브라우저를 지원합니다.

가끔 워드프레스나 텍스트큐브 가 제공하는 블로그에 갔을때 지금 제 블로그처럼 링크옆에 조그만 화살표나 작은 이미지가 달린 것을 볼 수 있었습니다. 아마도 '외부링크(external link)' 라는 플러그인(plugin)이 따로 제공되는 것 같습니만 티스토리 유저로서 그냥 부러울따름이었습니다.

왜냐하면, 링크를 걸어놓은 텍스트가 독자에게 뚜렷이 부각이 되지 않으면 글쓴이가 준비한 다양한 정보를 제대로 흡수하지 못할 수도 있고 링크가 걸린 텍스트를 본문내용과 '다른 색'이나 '밑줄'등으로 꾸몄다 해도 링크가 아닌 강조부분에서 사용된 '글자색', '밑줄'등과 혼동할 수도 있기 때문입니다.

덧) '무지개링크' 플러그인이 제공되긴 하지만 링크위에 마우스 커서를 올려놓아야 비로소 링크임을 알 수 있죠.

그러다 우연히 css를 수정하는 방법을 알게 되었고 시험삼아 블로그에 적용해봤습니다. 혹시 궁금해하는 분이 계시면 포스팅하려고 했었는데 때마침 PPoZZak님께서 질문을 해주셔서 글을 쓰게 되었습니다. (아싸!월척이다!ㅎㅎ)

단, 제가 하는 방법이 제대로 된 방법인지, 더 간단한 방법이 있는지는 잘 모르겠습니다. 더 나은 방법이 있다면 알려주세요. 제일 간단한 방법은 티스토리에서 공식 플러그인을 지원하는 것이겠죠. ^^


보통 티스토리 스킨의 style.CSS 파일을 보면 다음과 같이 링크걸린 텍스트를 꾸며주는 '앵커노드'(?)를 볼 수 있습니다.


link 는 링크걸린 텍스트, active는 마우스로 클릭(방문)하는 순간, visited는 방문(클릭)했던 링크, hover는 커서(cursor)를 링크위에 올렸을때의 액션을 지정해주죠.

처음엔 저도 이것을 변경해주면 될것이라 생각했는데 막상 적용한 결과는 실망이더군요. 블로그 페이지 전체의 모든 링크에 적용이 되어서 본문외에도 블로그제목, 사이드바의 카테고리, 태그, 최신글목록, 최신댓글목록, 등등 클릭하면 이동하는 모든 텍스트에 링크 이미지가 달려서 굉장히 지저분해집니다.

┌ 그럼 우짜란 말이여~

■ 포스트 본문내용내의 링크에만 링크표시를 다는 방법

Step1
☞ 역시 만에 하나를 위해서 HTML에 익숙하지 않으신 분들은 먼저 스킨을 백업해 주세요.

Step2
☞ 먼저, 티스토리 관리자 모드, 스킨 HTML/CSS 편집으로 이동합니다. skin.html 에서 " article_rep_desc " 를 검색(Ctrl+F)하여 해당 위치로 갑니다. 그리고 다음과 같이 앞뒤로 div를 지정해줍니다. (첨부된 txt 화일 참조, 복사후 붙여넣기 ctrl+c, ctrl+v 신공)

div.txt

Step3
☞ 그 다음, style.css의 가장 끝에다가 다음과 같이 입력해 줍니다. (첨부된 txt 화일 참조)

external.txt

Step4
☞ step3 에서의 background:url 뒷부분 ( ) 안의 주소는 넣고 싶은 이미지의 주소를 임의대로 넣으시면 됩니다. 단, 작은 이미지가 보기 이쁘겠죠. (화살표,네모,세모등 16x16 사이즈권장)

☞ padding-right: 와 padding-top: 뒤의 숫자를 조절해 가면서 텍스트와 이미지간의 배치를 적당히 조절하시면 됩니다.

☞ 4가지 (link, active, visited, hover) 모두 동일하게 하는 것이 깔끔하나 각자의 기호에 따라 조절해보세요.

예제는 여기서..

Luca Manno씨는 jQuery를 이용해서 매우 흥미로운 자바스크립트 애니메이션 효과인 Flip!을 만들었습니다. 위 예제는 실행가능한 예제입니다. 직접 실행해 보세요. 저 사선은 어떻게 그려지는 것일까요? 저는 당연히 Canvas태그를 사용했으려니 했답니다. 소스를 뜯어보고 그 기발한 발상에 무릎을 쳤습니다. 보더에서 만들어지는 사선을 이용해서 만들어낸 것이었습니다. 캬~

내친 김에 Prototype과 Scriptaculous에 서도 사용할 수 있도록 만들었습니다. 'Flip'이란 클래스를 만들고 Effect.Morph 메서드를 사용하여 애니메이션을 구현했습니다. 시작/끝으로 구분된 Transition 효과와 빠르기를 구분 설정하도록 하여 조금더 세부적으로 커스토마이즈 할 수 있게 한 것이 특징입니다. 다음 예제코드를 참고하세요.

Examples :// Flip the flipbox from bottom to top



$("flipBT").observe('click', function(){



new Flip($("flipBox"), {



direction: 'bt',



color: '#D46419',



content: '<div class="demo-one">Hello!<br/>I\'m a flip-box!<br/> :) </div>'



});



});







// Flip the flipbox from top to bottom



$("flipTB").observe('click', function(){



new Flip($("flipBox"), {



direction: 'tb',



color: '#B34212',



startSpeed: 0.6,



endSpeed: 0.4,



content: '<div class="demo-two">Hey!<br/><span style="font-size:14px">You can change me with<br/><code style="font-family:monospace;padding-left:10px">content: $("myId").innerHTML</code></span><br/><br/>Enjoy!</div>'



});



});







// Flip the flipbox from left to right



$("flipLR").observe('click', function(){



new Flip($("flipBox"), {



direction: 'lr',



color: '#341405',



content: '<div class="demo-three">I\'m simple html!</div>'



});



});







// Flip the flipbox from right to left



$("flipRL").observe('click', function(){



new Flip($("flipBox"), {



direction: 'rl',



startSpeed: 1.0,



endSpeed: 1.0,



color: '#166665',



content: '<div class="demo-four">' + $('logo').up('a').title + '<br/><span style="font-size:11px">This is a taken directly from this page<code style="display:block;color:#fff;padding:5px;font-family:monospace">$("logo").up("a").title</code></span></div>'



});



});







// Example 1



$("flipEx1").observe('click', function(){



new Flip($("flipBox"), {



direction: 'tb',



startFx: Effect.Transitions.pulse,



endFx: Prototype.Browser.IE ? Effect.Transitions.linear : Effect.Transitions.spring,



startSpeed: 0.8,



endSpeed: 0.3,



color: '#341405',



content: '<div class="demo-one">Example 1</div>'



});



});







// Example 2



$("flipEx2").observe('click', function(){



new Flip($("flipBox"), {



direction: 'bt',



startFx: Effect.Transitions.circIn,



endFx: Effect.Transitions.circOut,



color: '#341405',



content: '<div class="demo-two">Example 2</div>'



});



});







// Example 3



$("flipEx2").observe('click', function(){



new Flip($("flipBox"), {



startFx: Effect.Transitions.backIn,



endFx: Effect.Transitions.backOut,



startSpeed: 0.3,



endSpeed: 0.3,



color: '#166665',



content: '<div class="demo-three">Example 3</div>'



});



});




오래전에 보더가지고 하드코딩 하던 분들(Triangles in Javascript, 3D Renderring via CSS, DHTML Polygon Rendering Demo, CSS House)이 문득 떠오릅니다.

Downloads : * original - flip.js (5.82kb)
* minified - flip.js (4.93kb)

Updates : * 2008.10.15 - IE에서 발생하는 Transition 오류를 수정하였습니다.
* 2008.10.15 - 구글 크롬에서 발생하는 보더 배경색 문제를 수정하였습니다.
* 2008.10.15 - 애니메이션이 일어나는 중에 클래스를 호출하는 경우 초기화하지 않습니다.

http://www.tumuski.com/code/3dCSS.php

깜!짝 놀라실겁니다..



참고로, 위 사이트의 도형은 ONLY CSS코드로만 만들어진겁니다.

세상 만사 모든일에는 동기가 있습니다. 하지만 그 동기를 추측할 수 없는 일들을 보면 우리는 괴팍하다거나 이해할 수 없다는 말들을 하곤 하죠. 오늘은 제가 그런 소리를 좀 들어볼 각오로 괴상한 퀴즈 하나를 준비 했습니다. CSS(Cascading Style Sheet)를 이용하여 도무지 이해할 수 없는 일을 하려고 합니다. 이것은 실무에 거의 도움이 되지 않을지도 모릅니다. 하지만 정답을 알게 된 순간 여러분들은 생각의 가지를 펼쳐서 창의적으로 이것을 실무에 적용할 수도 있습니다. CSS에 자신있는 분들은 도전하세요!

HTML/CSS를 이용하여 화면에 보이는 삼각형의 너비와 높이 및 꼭지점 위치가 동일한 도형을 만들어 보세요. 단, 이것을 만들기 위하여 준수해야 하는 조건은 다음과 같습니다. HTML과 CSS만을 사용하고 문법적으로 유효해야 합니다. HTML Validation Test, CSS Validation TestImage, Javascript, SVGScalable Vector Graphics 등 다른 언어는 전혀 사용하지 않습니다.body 엘리먼트 안쪽에는 다른 엘리먼트나 문자등 아무것도 넣지 않습니다.Internet Explorer 6~8, Firefox 2~3, Safari 3.x, Opera 9.x, Chrome 브라우저에서 동일하게 보여야 합니다. 조건이 좀 까다롭죠? ^^; 아주 조금 힌트를 드리자면 실무에서는 거의 사용되지 않는 기교라서 여러분들은 고정관념에서 벗어나셔야 할껍니다.

메모장을 열고 아래와 같이 입력한 후 css0013.htm으로 저장합니다.




Underline 설정
Overline 설정
Line-through 설정
왼쪽정렬
가운데정렬
오른쪽정렬
기준아랫첨자
기준윗첨자
노란색을 배경색으로 설정
파란색을 배경색으로 설정
붉은색을 배경색으로 설정

1. text-decoration:underline
밑줄을 설정합니다. 2. text-decoration:overline
윗줄을 설정합니다. 3. text-decoration:line-through
취소선을 설정합니다. 4. text-align:left
왼쪽 정렬입니다. 5. text-align:center
가운데 정렬입니다. 6. text-align:right
오른쪽 정렬입니다. 7. vertical-align:sub
윗첨자 설정입니다. 8. vertical-align:super
아랫첨자 설정입니다. 9. background-color:yellow
배경색을 노란색으로 설정 : 색상을 직접 입력했습니다. 10. background-color:rgb(0,0,255)
배경색을 파란색으로 설정 : rgb 색상 코드를 입력했습니다. 11. background-color:#ff0000
배경색을 붉은색으로 설정 : 색상 코드를 입력했습니다. ※배경색은 색상 이름을 직접 넣는 방법, rgb(수치,수치,수치)를 이용하는 방법, 그리고 색상코드를 입력하는 방법이 있습니다. ※vertical-align의 종류
baseline : 문자의 기초선에 맞추어 정렬
top : 문자열의 상단에 정렬
middle : 문자열의 중앙을 기초선으로 해서 정렬
bottom : 문자열의 하단에 정렬
text-top : 문자열의 위선을 기초선으로 해서 정렬
text-bottom : 문자열의 아래선을 기초선으로 해서 정렬
백분율 : 문자 높이의 백분율로 기초선 결정

블로그를 시작한지도 3년이 훌쩍 넘었고, 문득 한글 뿐만이 아니라 되지도 않는 영어지만 영문 블로그도 마련하고 싶다는 생각이 들었습니다. ('ㅇ') 아무래도 한국 내에서의 커뮤니케이션보다 국제적으로 통용되는 영어를 사용해서 블로깅을 하면 더욱 더 많은 사람들과 소통할 수 있지 않을까 해서 말이죠.

어쨌든 그래서 해외 무료 호스팅에 텍스트큐브가 설치되는 곳을 찾아다니기 시작했습니다. 국내 무료 계정보다 해외에서 접속할 때는 아무래도 해외에 서버를 두고 있는 곳이 좀 더 빠를거라는 생각 때문이었습니다.

나름 해외 무료 호스팅 정보의 메카인 Free Web Hosting과 FreeWebspace.net 등을 비롯해 구글과 야후를 아주 쥐잡듯이 뒤진 것 같습니다. 한번이라도 해외 무료 계정을 써보려고 검색을 해보신 적이 있다면 아시겠지만, 해외에는 무료 호스팅 사이트가 정말 많습니다. 스펙도 엄청 빵빵한 곳도 많구요. 물론, 완전 쓰레기 같은 호스팅 업체도 많고 개인정보 피싱을 목적으로 하는 곳도 있다고 하더군요. (ㅡ.ㅡ^)

어쨌든 텍스트큐브 설치를 위해서 몇 군데(아니 수십군데(?) 가입을 했습니다. 하지만 제대로 설치 후 완벽하게 블로깅을 할 수 있는 환경은 아무데도 없었습니다. (ㅜ.ㅡ) 무료 호스팅에 한해서 말이죠. 해외에서 텍스트큐브 사용이 불가한 유형은 다음과 같습니다.


업로드 가능한 파일 확장자가 극히 제한적이다. 그래서 .po나 .tpl 심지어 .xml 파일 등도 업로드가 되지 않아 설치는 엄두조차 낼 수 없다. 계정 HDD 용량은 큰데 실제로 파일 하나당 크기를 500kb 미만으로 제한해 둔 곳이 꽤 있다. 500kb가 생각해보면 그리 작은 사이즈는 아니지만 압박이 상당하다. 모든 사진을 500kb 미만으로 리사이즈 해야 한다고 생각해보면 답이 나온다. Apache 모듈인 mod_rewrite가 로드되어 있는 경우가 드물다. 이 모듈이 설치되어 있지 않으면 설치 뿐만 아니라 블로그 운영 자체가 안된다. PHP function인 fsocketopen()을 제한해두고 있다. 국내에서 이는 별 문제가 되지 않지만 해외에서는 보안상의 문제로 100이면 98은 전부 제한을 하고 있다. 포럼에 글을 남기거나 메일을 보내면 답은 하나 뿐이다. "You Need Upgrade Premium Hosting." 보안상의 문제로 FTP나 Control Panel에서 디렉토리를 CHMOD '777' 권한을 줬음에도 반영이 되질 않는다. 고로, 첨부파일도 업로드가 되지 않고, cache 폴더 안에도 파일이 생성되지 않아 데이터 복원은 물론 무한 checkup 루프에 걸리기 십상이다. 사실 이 과정까지 오는 것도 힘들다. 왜냐하면 대개의 호스팅의 경우엔 http//yourdomain.com/blog/setup.php 을 입력하면 권한 문제로 아예 설치 페이지조차 뜨지 않기 때문이다. 설치도 되고 첨부파일이 없는 상태로 힘겹게 블로깅이 가능하면 페이지 상, 하단에 무지막지한 배너가 붙거나 팝업창이 항상 뜬다. 설치와 운영이 가능한 모든 환경을 찾았다 싶었는데, 자세히 보니 FTP가 지원되질 않는다. 7번과 같은 상황인데 가입하려고 하니 한국 IP는 BAN 당해있다.
앞서 말한 유형 외에도 해외에서는 GD나 Curl, Zend Optimizer 등 다양한 옵션을 하나하나 확인을 해야 합니다. 혹, 해외 무료 호스팅을 찾으시면서 텍스트큐브를 사용하길 원하신다면 아래 사항은 꼭 확인하시기 바랍니다. 대개 사이트마다 포럼이나 FAQ, Contact Us 메뉴가 있으니 확인하실 수 있을 겁니다. 아니면 phpinfo()를 요청해도 되구요. 물론, 이 경우엔 역시 보안상의 문제로 안되는 경우도 많습니다.

fsockopen(), mod_rewrite 지원 여부 파일 확장자를 다양하게 지원하는 지 여부 사용자가 자유롭게 디렉토리나 파일에 CHMOD 권한을 줄 수 있는지 여부 강제로 광고가 삽입되는지, 된다면 어떤식(배너, 텍스트 링크, 팝업 등)으로 나타나는지 여부 홈페이지 사용에 있어서 특정 언어 제한(예를 들면, 영어로만 되어 있어야 한다)이 있는지 여부 해외 트래픽은 한달 단위이므로 30일로 나누어서 계산해 볼 것. 6GB라고 해봐야 하루 평균 200M 정도라는 것에 염두해야 된다.
결국 위와 같은 문제로 해외 무료 호스팅을 얻는 데는 실패했습니다. (>.<)/ 죽어라 찾아봤는데도 도저히 되는 곳이 없네요. 그래서 국내 무료 호스팅 중에 하나인 호스팅랜드에서 운영토록 했습니다. 방금 전까지 텍스트 큐브 운영의 유일한 희망이었던 6te.net 관리자와 채팅을 했는데, 역시나 답은 '돈주고 업그레이드 하라' 더군요.

같은 돈이면 해외에서는 국내 스펙의 2배 이상을 뽑아낼 수 있는 곳도 상당수 있습니다만, 전 그래도 국내 호스팅 업체가 좋네요. Instant Acativation에 질려 버린 것 같습니다. ('ㅇ')

P.S 해외 포럼은 대개의 경우 PHPBB나 vBulletin, PHPNUKE 등의 게시판인데요. 이게 가입은 쉬운데, 탈퇴 메뉴 자체가 없습니다. ('' ) 이 점 유의하시기 바랍니다. 물론, 거창한 정보를 기입하는 건 아닙니다. 아이디랑 비밀번호, 메일 주소 정도니까요.



파일 저장 목적이 아닌, 배포 목적으로 4Gb까지 제공해 주는 사이트를 우연찬게 찾았네요.

현재 베타 인 것 같기도 하지만, 파일 업로드되고 다운로드 되네요.

제가 1기가 영화 파일 올려서 영국 친구들한테 보라고 하니깐 잘 나온다고 하네요.

사이트 명은 www.ufreeus.com이고 가시면 그리드 방식으로 최대 4Gb까지 배포할 수 있다고 합니다.

한번 방문해 보세요, 저도 올려서 친구들에게 파일 날려 주는데, 고화질 영화는 스트리밍으로도 되고, 일반 파일은 인터넷 다운로드 창으로 되고, 다운로드 받는 사람만 클라이언트를 까는데, 설명 보니깐, 이상한 것 같지는 않고요.

해외 친구들이 매우 좋아합니다.

가입도 간단하게 이메일 주소로 끝나고요.

짱입니다 짱!

이 사이트 운영자는 돈이 무지 많던가 아니면 제품 홍보를 하는건지, 하여간 고용량 파일 배포는 이 사이트가 현재까지 공짜로서는 최고네요.

강추합니다.

그리고 이 글은 절대 광고글 아닙니다.

1. 테이블 고정
view plaincopy to clipboardprint? <table width=100px height=5px style="table-layout:fixed"> <tr> <td> <div style="width:100%;height:100%;overflow:auto;"> 여기 내용이 테이블 길이보다 길어지면 스크롤바가 생기게 됨. </div> </td> </tr> </table> <table width=100px height=5px style="table-layout:fixed"> <tr> <td> <div style="width:100%;height:100%;overflow:auto;"> 여기 내용이 테이블 길이보다 길어지면 스크롤바가 생기게 됨. </div> </td> </tr> </table>
2. td안의 텍스트 길이 고정
view plaincopy to clipboardprint? <td height="auto" style="word-break:break-all"> 글자가 테이블길이만큼 쓰여지고 나머지는 다음줄에 이어서 쓰여짐. </td> <td height="auto" style="word-break:break-all"> 글자가 테이블길이만큼 쓰여지고 나머지는 다음줄에 이어서 쓰여짐. </td>

1. style="table-layout:fixed"

테이블의 크기를 가로세로 모두 고정시킴.

2. style="word-break:break-all;"

고정된 테이블에 긴 글을 넣을경우 가로가 고정되어 있으므로 글자가 잘려 보이는 경우가 발생.
이것을 방지하고 글의 자동 줄바꿈 효과

3. height="auto"

고정된 테이블의 세로때문에 글이 고정된 세로길이까지만 보인다.
이것을 방지하기위해 세로의 길이를 오토로 조정해줌

나는 워드프레스에서 새글을 작성할 때 Blockquote(인용문)이라는 빠른태그를 자주 사용하는 편이다. 웹서핑을 하다보면, blockquote에 스타일쉿을 사용하여 예쁘게 꾸며논 블로그나 게시판을 쉽게 찾을 수 있다. 나 역시 박스 형식의 스타일쉿을 사용하곤 했는데, Dmitri Von Klein의 블로그를 보고 따옴표로 바꿔봤다. BLOCKQUOTE 요소는 인용한 단락을 표시할 때 사용합니다. BLOCKQUOTE는 Q 요소와는 달리 P나 TABLE과 같은 블록 요소를 포함할 수 있습니다. 하지만 BLOCKQUOTE 요소는 문단이나 인라인 요소 안에 포함될 수 없습니다. 출처 : HTML 사전 문제는 LikeJazz님의 글처럼 p 태그가 2개 이상 사용된 blockquote에서는 제대로 출력되지 않는다. 이는 출처 부분의 p 태그에 클래스를 하나 더 삽입해서 해결해야 한다. 사실, CSS2의 :after, :befere를 사용하면 이런 꽁수들을 모두 해결할 수 있다. 하지만, 인터넷익스플러가 이를 표현하지 못하기 때문에 일이 복잡하게 꼬이는 것이다.

blockquote {
background: URL(/blog/wp-content/themes/Blix/images/spring_flavour/bq-bg-b.gif) no-repeat;
margin: 10px 10px;
padding: 5px 0 0 30px;
}
blockquote p {
background: URL(/blog/wp-content/themes/Blix/images/spring_flavour/bq-bg-a.gif) no-repeat right bottom;
margin: 5px;
padding: 0 30px 5px 0;
이 글의 스타일쉿은 여기에서 확인할 수 있다.

Rated-R님의 글에도 소개된 것처럼, CSS 사용할때 단축 속성을 사용하면 코드를 줄일 수 있다. 이러한 CSS의 모든 속성에 shorthand properties(단축 속성)을 사용할 수 있는 것이 아닌, 아래의 몇몇 속성에서만 사용 가능하다. font 단축 속성
구문 : { font: font-style | font-variant | font-weight | font-size | line-height | font-family }
예제 : { font: 0.75em/1.4em 돋음, san-serif; } margin 단축 속성
구문 : { margin: margin-top | margin-right | margin-bottom | margin-left }
예제 : { margin: 1em 2em 3em 4em; } padding 단축 속성
구문 : { padding: padding-top | padding-right | padding-bottom | padding-left }
예제 : { padding: 1em 2em 3em 4em; } border 단축 속성
구문 : { border: border-width | border-style | color }
예제 : { border: 1px dotted #123456; } border-top, border-right, border-botoom, border-left 단축 속성
구문 : { border-top: border-width | border-style | color }
예제 : { border-top: 1px dotted #123456; } list-style 단축 속성
구문 : { list-style: list-style-type | list-style-position | list-style-image }
예제 : { list-style: URL(”hooney.gif”) inside disc; } background 단축 속성
구문 : { background: background-color | background-image | background-repeat | background-attachment | background-position }
예제 : {background: #123456 URL(”hooney.net”) no-repeat center left; } 위의 단축속성의 구문은 순서가 바껴도 IE6, FF1, NN7 등 대부분의 최근 브라우저에서 자동으로 해석해 주지만, 구식 브라우저(NN4, IE5 등)의 경우 바르게 표현하지 않는 문제가 있으므로, 가급적 단축속성 구문을 지켜야 한다.
단, margin과 padding의 CSS 단축속성의 구문은 반드시 지켜져야 한다. (위에서부터 시계방향으로…) 톱 스타일(top style)과 같은 CSS 전문 프로그램에서는 자동으로 단축속성을 정리해주는 기능이 포함되어 있다.

웹 브라우저마다 각각 default CSS가 존재합니다. cascade한 CSS의 특성상, 제작자가 작성한 CSS도 브라우저의 디폴트 CSS의 영향을 받습니다. 웹 사이트가 브라우저마다 조금씩 다르게(경우에 따라 심각하게) 표현되는 이유가 바로 default CSS 때문입니다. ((-------IMAGE-------)) W3C에서 예제로 보여준 default CSS와 파이어폭스(FireFox)의 default CSS, 그리고 Quirks 모드에서 default CSS를 비교함으로써, 다양한 브라우저들의 default CSS를 보다 쉽게 이해할 수 있습니다. 아쉽게도 windows 환경에서 IE와 Opera, Safari는 dll 파일 형식으로 작성되어 확인하기 어렵네요. default CSS의 위치/경로 W3C의 default CSS - http://www.w3.org/TR/CSS21/sample.html 파이어폭스의 default CSS - C:\Program Files\Mozilla Firefox\res\HTML.css (windows xp) 파이어폭스의 Quirks 모드에서 default CSS - C:\Program Files\Mozilla Firefox\res\quirks.css (windows xp) W3C의 default CSS
HTML, address, blockquote, body, dd, div, dl, dt, fieldset, form, frame, frameset, h1, h2, h3, h4, h5, h6, noframes, ol, p, ul, center, dir, hr, menu, pre { display: block }
li { display: list-item }
head { display: none }
table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell }
caption { display: table-caption }
th { font-weight: bolder; text-align: center }
caption { text-align: center }
body { margin: 8px }
h1 { font-size: 2em; margin: .67em 0 }
h2 { font-size: 1.5em; margin: .75em 0 }
h3 { font-size: 1.17em; margin: .83em 0 }
h4, p, blockquote, ul, fieldset, form, ol, dl, dir, menu { margin: 1.12em 0 }
h5 { font-size: .83em; margin: 1.5em 0 }
h6 { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4, h5, h6, b, strong { font-weight: bolder }
blockquote { margin-left: 40px; margin-right: 40px }
i, cite, em, var, address { font-style: italic }
pre, tt, code, kbd, samp { font-family: monospace }
pre { white-space: pre }
button, textarea, input, select { display: inline-block }
big { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub { vertical-align: sub }
sup { vertical-align: super }
table { border-spacing: 2px; }
thead, tbody, tfoot { vertical-align: middle }
td, th { vertical-align: inherit }
s, strike, del { text-decoration: line-through }
hr { border: 1px inset }
ol, ul, dir, menu, dd { margin-left: 40px }
ol { list-style-type: decimal }
ol ul, ul ol, ul ul, ol ol { margin-top: 0; margin-bottom: 0 }
u, ins { text-decoration: underline }
br:before { content: "\A" }
:before, :after { white-space: pre-line }
center { text-align: center }
:link, :visited { text-decoration: underline }
:focus { outline: thin dotted invert }
/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override }
*[DIR="ltr"] { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"] { direction: rtl; unicode-bidi: embed }
@media print {
h1 { page-break-before: always }
h1, h2, h3, h4, h5, h6 { page-break-after: avoid }
ul, ol, dl { page-break-before: avoid }
}

파이어폭스(FireFox)의 default CSS (windows xp) *|:-moz-any-link img, img[usemap], object[usemap] {
border:2px solid;
}
[dir=ltr] {
direction:ltr;
unicode-bidi:embed;
}
[dir=rtl] {
direction:rtl;
unicode-bidi:embed;
}
abbr:focus, acronym:focus, address:focus, applet:focus, b:focus, base:focus, big:focus, blockquote:focus, br:focus, canvas:focus, caption:focus, center:focus, cite:focus, code:focus, col:focus, colgroup:focus, dd:focus, del:focus, dfn:focus, dir:focus, div:focus, dl:focus, dt:focus, em:focus, fieldset:focus, font:focus, form:focus, h1:focus, h2:focus, h3:focus, h4:focus, h5:focus, h6:focus, hr:focus, i:focus, img:focus, ins:focus, kbd:focus, label:focus, legend:focus, li:focus, link:focus, menu:focus, object:focus, ol:focus, p:focus, pre:focus, q:focus, s:focus, samp:focus, small:focus, span:focus, strike:focus, strong:focus, sub:focus, sup:focus, table:focus, tbody:focus, td:focus, tfoot:focus, th:focus, thead:focus, tr:focus, tt:focus, u:focus, ul:focus, var:focus { outline:1px dotted invert; }
abbr[title], acronym[title] { border-bottom:dotted 1px; }
address { display:block; font-style:italic; }
area, base, basefont, head, meta, script, style, title, noembed, param { display:none; }
b, strong { font-weight:bolder; }
bdo[dir] { unicode-bidi:bidi-override; }
big { font-size:larger; }
blink { text-decoration:blink; }
blockquote { display:block; margin:1em 40px; }
blockquote[type=cite] { border-color:blue; border-left:solid; border-width:thin; display:block; margin:1em 0; padding-left:1em; }
body { display:block; margin:8px; }
canvas { -moz-user-select:none; }
caption { -moz-box-sizing:border-box; display:table-caption; text-align:center; }
center { display:block; text-align:0; }
col { display:table-column; }
colgroup { display:table-column-group; }
dd { -moz-margin-start:40px; display:block; }
frame { border:none!important; }
frameset { border:none!important; display:block!important; float:none!important; overflow:0; position:static!important; }
h1 { display:block; font-size:2em; font-weight:bold; margin:.67em 0; }
h2 { display:block; font-size:1.5em; font-weight:bold; margin:.83em 0; }
h3 { display:block; font-size:1.17em; font-weight:bold; margin:1em 0; }
h4 { display:block; font-weight:bold; margin:1.33em 0; }
h5 { display:block; font-size:.83em; font-weight:bold; margin:1.67em 0; }
h6 { display:block; font-size:.67em; font-weight:bold; margin:2.33em 0; }
hr { -moz-box-sizing:border-box; -moz-float-edge:margin-box; border:1px 0; display:block; height:2px; margin:.5em auto; }
hr[size=1] {
border-style:0 none none;
}
html, div, map, dt, isindex, form { display:block; }
i, cite, em, var, dfn { font-style:italic; }
iframe { border:2px inset; }
img[usemap], object[usemap] { color:blue; }
li { -moz-float-edge:margin-box; display:list-item; }
listing { display:block; font-family:0; font-size:medium; margin:1em 0; white-space:pre; }
marquee { -moz-binding:url(chrome://xbl-marquee/content/xbl-marquee.xml#marquee-horizontal); display:block; }
marquee[direction=up], marquee[direction=down] { -moz-binding:url(chrome://xbl-marquee/content/xbl-marquee.xml#marquee-vertical); height:200px; }
nobr { white-space:nowrap; }
noframes { display:none; }
ol { -moz-padding-start:40px; display:block; list-style-type:decimal; margin:1em 0; }
ol ol ul, ol ul ul, ol menu ul, ol dir ul, ol ol menu, ol ul menu, ol menu menu, ol dir menu, ol ol dir, ol ul dir, ol menu dir, ol dir dir, ul ol ul, ul ul ul, ul menu ul, ul dir ul, ul ol menu, ul ul menu, ul menu menu, ul dir menu, ul ol dir, ul ul dir, ul menu dir, ul dir dir, menu ol ul, menu ul ul, menu menu ul, menu dir ul, menu ol menu, menu ul menu, menu menu menu, menu dir menu, menu ol dir, menu ul dir, menu menu dir, menu dir dir, dir ol ul, dir ul ul, dir menu ul, dir dir ul, dir ol menu, dir ul menu, dir menu menu, dir dir menu, dir ol dir, dir ul dir, dir menu dir, dir dir dir { list-style-type:square; }
ol ul, ul ul, menu ul, dir ul, ol menu, ul menu, menu menu, dir menu, ol dir, ul dir, menu dir, dir dir { list-style-type:circle; }
p, dl, multicol { display:block; margin:1em 0; }
pre[_moz_quote=true] { color:blue; }
q:after { content:close-quote; }
q:before { content:open-quote; }
s, strike, del { text-decoration:line-through; }
small { font-size:smaller; }
spacer { float:none!important; position:static!important; }
span[_moz_quote=true] { color:blue; }
sub { font-size:smaller; line-height:normal; vertical-align:sub; }
sup { font-size:smaller; line-height:normal; vertical-align:super; }
table { -moz-box-sizing:border-box; border-collapse:separate; border-spacing:2px; display:table; margin-bottom:0; margin-top:0; text-indent:0; }
table > tr { vertical-align:middle; }
table[align=center] > caption { margin-left:auto; margin-right:auto; }
table[align=center] > caption[align=left] { margin-right:0; }
table[align=center] > caption[align=right] { margin-left:0; }
table[align=left] { float:left; }
table[align=right] { float:right; text-align:start; }
table[rules]:not([rules=none]) {
border-collapse:collapse;
}
tbody { display:table-row-group; vertical-align:middle; }
td { display:table-cell; padding:1px; text-align:inherit; vertical-align:inherit; }
tfoot { display:table-footer-group; vertical-align:middle; }
th { display:table-cell; font-weight:bold; padding:1px; vertical-align:inherit; }
thead { display:table-header-group; vertical-align:middle; }
tr { display:table-row; vertical-align:inherit; }
tr > form:-moz-is-html, tbody > form:-moz-is-html, thead > form:-moz-is-html, tfoot > form:-moz-is-html, table > form:-moz-is-HTML {
display:none!important;
}
tt, code, kbd, samp { font-family:0; }
u, ins { text-decoration:underline; }
ul ul, ul ol, ul dir, ul menu, ul dl, ol ul, ol ol, ol dir, ol menu, ol dl, dir ul, dir ol, dir dir, dir menu, dir dl, menu ul, menu ol, menu dir, menu menu, menu dl, dl ul, dl ol, dl dir, dl menu, dl dl { margin-bottom:0; margin-top:0; }
ul, menu, dir { -moz-padding-start:40px; display:block; list-style-type:disc; margin:1em 0; }
xmp, pre, plaintext { display:block; font-family:0; margin:1em 0; white-space:pre; }
@media print {
blink { text-decoration:none; }
marquee { -moz-binding:none; }
}

파이어폭스(FireFox)의 quirks default CSS (windows xp) :not(dl) > dd { display:inline; margin:0; }
:not(dl) > dd:before { -moz-margin-end:40px; content:"\A "; display:inline; font-size:1px; line-height:0; white-space:pre; }
[_moz-rs-heading] { font-size:inherit!important; }
body > form:-moz-first-node, td > form:-moz-first-node, th > form:-moz-first-node, body > p:-moz-first-node, td > p:-moz-first-node, th > p:-moz-first-node, body > dl:-moz-first-node, td > dl:-moz-first-node, th > dl:-moz-first-node, body > multicol:-moz-first-node, td > multicol:-moz-first-node, th > multicol:-moz-first-node, body > blockquote:-moz-first-node, td > blockquote:-moz-first-node, th > blockquote:-moz-first-node, body > h1:-moz-first-node, td > h1:-moz-first-node, th > h1:-moz-first-node, body > h2:-moz-first-node, td > h2:-moz-first-node, th > h2:-moz-first-node, body > h3:-moz-first-node, td > h3:-moz-first-node, th > h3:-moz-first-node, body > h4:-moz-first-node, td > h4:-moz-first-node, th > h4:-moz-first-node, body > h5:-moz-first-node, td > h5:-moz-first-node, th > h5:-moz-first-node, body > h6:-moz-first-node, td > h6:-moz-first-node, th > h6:-moz-first-node, body > listing:-moz-first-node, td > listing:-moz-first-node, th > listing:-moz-first-node, body > plaintext:-moz-first-node, td > plaintext:-moz-first-node, th > plaintext:-moz-first-node, body > xmp:-moz-first-node, td > xmp:-moz-first-node, th > xmp:-moz-first-node, body > pre:-moz-first-node, td > pre:-moz-first-node, th > pre:-moz-first-node, body > ul:-moz-first-node, td > ul:-moz-first-node, th > ul:-moz-first-node, body > menu:-moz-first-node, td > menu:-moz-first-node, th > menu:-moz-first-node, body > dir:-moz-first-node, td > dir:-moz-first-node, th > dir:-moz-first-node, body > ol:-moz-first-node, td > ol:-moz-first-node, th > ol:-moz-first-node {
margin-top:0;
}
body > form:-moz-only-whitespace:-moz-first-node, td > form:-moz-only-whitespace:-moz-first-node, th > form:-moz-only-whitespace:-moz-first-node, body > p:-moz-only-whitespace:-moz-first-node, td > p:-moz-only-whitespace:-moz-first-node, th > p:-moz-only-whitespace:-moz-first-node, body > dl:-moz-only-whitespace:-moz-first-node, td > dl:-moz-only-whitespace:-moz-first-node, th > dl:-moz-only-whitespace:-moz-first-node, body > multicol:-moz-only-whitespace:-moz-first-node, td > multicol:-moz-only-whitespace:-moz-first-node, th > multicol:-moz-only-whitespace:-moz-first-node, body > blockquote:-moz-only-whitespace:-moz-first-node, td > blockquote:-moz-only-whitespace:-moz-first-node, th > blockquote:-moz-only-whitespace:-moz-first-node, body > h1:-moz-only-whitespace:-moz-first-node, td > h1:-moz-only-whitespace:-moz-first-node, th > h1:-moz-only-whitespace:-moz-first-node, body > h2:-moz-only-whitespace:-moz-first-node, td > h2:-moz-only-whitespace:-moz-first-node, th > h2:-moz-only-whitespace:-moz-first-node, body > h3:-moz-only-whitespace:-moz-first-node, td > h3:-moz-only-whitespace:-moz-first-node, th > h3:-moz-only-whitespace:-moz-first-node, body > h4:-moz-only-whitespace:-moz-first-node, td > h4:-moz-only-whitespace:-moz-first-node, th > h4:-moz-only-whitespace:-moz-first-node, body > h5:-moz-only-whitespace:-moz-first-node, td > h5:-moz-only-whitespace:-moz-first-node, th > h5:-moz-only-whitespace:-moz-first-node, body > h6:-moz-only-whitespace:-moz-first-node, td > h6:-moz-only-whitespace:-moz-first-node, th > h6:-moz-only-whitespace:-moz-first-node, body > listing:-moz-only-whitespace:-moz-first-node, td > listing:-moz-only-whitespace:-moz-first-node, th > listing:-moz-only-whitespace:-moz-first-node, body > plaintext:-moz-only-whitespace:-moz-first-node, td > plaintext:-moz-only-whitespace:-moz-first-node, th > plaintext:-moz-only-whitespace:-moz-first-node, body > xmp:-moz-only-whitespace:-moz-first-node, td > xmp:-moz-only-whitespace:-moz-first-node, th > xmp:-moz-only-whitespace:-moz-first-node, body > pre:-moz-only-whitespace:-moz-first-node, td > pre:-moz-only-whitespace:-moz-first-node, th > pre:-moz-only-whitespace:-moz-first-node, body > ul:-moz-only-whitespace:-moz-first-node, td > ul:-moz-only-whitespace:-moz-first-node, th > ul:-moz-only-whitespace:-moz-first-node, body > menu:-moz-only-whitespace:-moz-first-node, td > menu:-moz-only-whitespace:-moz-first-node, th > menu:-moz-only-whitespace:-moz-first-node, body > dir:-moz-only-whitespace:-moz-first-node, td > dir:-moz-only-whitespace:-moz-first-node, th > dir:-moz-only-whitespace:-moz-first-node, body > ol:-moz-only-whitespace:-moz-first-node, td > ol:-moz-only-whitespace:-moz-first-node, th > ol:-moz-only-whitespace:-moz-first-node {
margin-bottom:0;
}
dl > dl { -moz-margin-start:40px; display:block; }
form { margin:0 0 1em; }
img[align=left] { margin-right:3px; }
img[align=right] { margin-left:3px; }
input:not([type=image]), textarea { -moz-box-sizing:border-box; }
input[type=image] { border:2px solid blue; }
input[type=image][disabled] { border-color:GrayText; }
li { list-style-position:inside; }
li > ul:-moz-first-node, li > ol:-moz-first-node { padding-top:1em; }
li ul, li ol, li dir, li menu { list-style-position:outside; }
li::-moz-list-bullet { font-size:0; }
map { display:inline; }
pre[wrap], pre[cols], pre[width] { white-space:0; }
table { font-size:0; font-style:0; font-variant:0; font-weight:0; line-height:normal; text-align:start; white-space:normal; }
td > form:-moz-only-whitespace:-moz-last-node, th > form:-moz-only-whitespace:-moz-last-node, td > p:-moz-only-whitespace:-moz-last-node, th > p:-moz-only-whitespace:-moz-last-node, td > dl:-moz-only-whitespace:-moz-last-node, th > dl:-moz-only-whitespace:-moz-last-node, td > multicol:-moz-only-whitespace:-moz-last-node, th > multicol:-moz-only-whitespace:-moz-last-node, td > blockquote:-moz-only-whitespace:-moz-last-node, th > blockquote:-moz-only-whitespace:-moz-last-node, td > h1:-moz-only-whitespace:-moz-last-node, th > h1:-moz-only-whitespace:-moz-last-node, td > h2:-moz-only-whitespace:-moz-last-node, th > h2:-moz-only-whitespace:-moz-last-node, td > h3:-moz-only-whitespace:-moz-last-node, th > h3:-moz-only-whitespace:-moz-last-node, td > h4:-moz-only-whitespace:-moz-last-node, th > h4:-moz-only-whitespace:-moz-last-node, td > h5:-moz-only-whitespace:-moz-last-node, th > h5:-moz-only-whitespace:-moz-last-node, td > h6:-moz-only-whitespace:-moz-last-node, th > h6:-moz-only-whitespace:-moz-last-node, td > listing:-moz-only-whitespace:-moz-last-node, th > listing:-moz-only-whitespace:-moz-last-node, td > plaintext:-moz-only-whitespace:-moz-last-node, th > plaintext:-moz-only-whitespace:-moz-last-node, td > xmp:-moz-only-whitespace:-moz-last-node, th > xmp:-moz-only-whitespace:-moz-last-node, td > pre:-moz-only-whitespace:-moz-last-node, th > pre:-moz-only-whitespace:-moz-last-node, td > ul:-moz-only-whitespace:-moz-last-node, th > ul:-moz-only-whitespace:-moz-last-node, td > menu:-moz-only-whitespace:-moz-last-node, th > menu:-moz-only-whitespace:-moz-last-node, td > dir:-moz-only-whitespace:-moz-last-node, th > dir:-moz-only-whitespace:-moz-last-node, td > ol:-moz-only-whitespace:-moz-last-node, th > ol:-moz-only-whitespace:-moz-last-node {
margin-top:0;
}
td > p:-moz-last-node, th > p:-moz-last-node { margin-bottom:0; }
ul ul, ul ol, ul dir, ul menu, ul li, ol ul, ol ol, ol dir, ol menu, ol li, dir ul, dir ol, dir dir, dir menu, dir li, menu ul, menu ol, menu dir, menu menu, menu li { list-style-position:inherit; }
위의 CSS 코드는 Code Beautifier와 드림위버 CS3에서 제공하는 “코드 포맷 정리” 기능을 이용해서 정리했습니다.

px * 0.0626 = em For instance,
15px * 0.0626 = 0.939em
80px * 0.0626 = 5.008em

px and pt, amongst others, are absolute values.
em is a relative value (I think).

Using a pt or em font-size property instead of px allows for your site text to be resized according to the viewer's system settings.(link) 웹디자인을 하면서 글꼴(폰트) 크기를 표현하는 방법에는 pt, px, em, % 가 있다. 나는 이미지 사용이나 기존 테이블 레이아웃을 할 때의 습관으로 px 를 주로 사용하는 편이다. 하지만 해외 웹사이트의 대부분이 em 을 사용하며, 유동성 부분 때문에 em이 표준으로 자리잡아가고 있다. REEDdesign 사이트에 이들 수치에 대한 비교표가 있다.

CSS에서 사용되는 글자(폰트)크가나 width, height 등 크기를 지정할 경우 사용되는 단위로 em / px / pt / % 가 있습니다. 대부분 px 단위를 기본으로 사용하고, 글자크기는 pt, px 둘 다 사용합니다.
pt, px 가 절대적인 크기를 em, ex, %는 상위 엘리먼트에 대한 상대적인 크기를 나타내기 때문에 웹브라우저에서 글자 크기를 변경시킬수 있기 때문에 접근성이 향상됩니다.
IE에서 글자크기를 보통으로 지정했을경우 최상엘리먼트 1em은 12pt, 16px와 같습니다.

http://riddle.pl/emcalc

Points Pixels Ems Percent 6pt 8px 0.5em 50% 7pt 9px 0.55em 55% 7.5pt 10px 0.625em 62.5% 8pt 11px 0.7em 70% 9pt 12px 0.75em 75% 10pt 13px 0.8em 80% 10.5pt 14px 0.875em 87.5% 11pt 15px 0.95em 95% 12pt 16px 1em 100% 13pt 17px 1.05em 105% 13.5pt 18px 1.125em 112.5% 14pt 19px 1.2em 120% 14.5pt 20px 1.25em 125% 15pt 21px 1.3em 130% 16pt 22px 1.4em 140% 17pt 23px 1.45em 145% 18pt 24px 1.5em 150% 20pt 26px 1.6em 160% 22pt 29px 1.8em 180% 24pt 32px 2em 200% 26pt 35px 2.2em 220% 27pt 36px 2.25em 225% 28pt 37px 2.3em 230% 29pt 38px 2.35em 235% 30pt 40px 2.45em 245% 32pt 42px 2.55em 255% 34pt 45px 2.75em 275% 36pt 48px 3em 300%

http://riddle.pl/emcalc/ 즐추하시고, 필요하실때 들르시면 더욱 좋습니다. 요즘 줌브라우징 기능으로 em을 자주 쓰진 않겠다고 생각하면 큰오산이죠.. 아직도 익스플로러 6을 사용하시는 분들이 많이 계십니다. pt 단위는 절대적이지만, em은 상대적이고 상위엘리먼트와 하위엘리먼트에도 크기에 작은영향이 가는걸로 알고있는데요.ex) px 단위는 리플참고.. ㄱ- 죄송합니다. ㅎㅎㅎㅎㅎ em단위에 대해 모르신분들은.. em단위, em환산 이 키워드로 검색을 한번 해보시면 더더욱 도움이 될 것 같습니다. 도움이 많이 ?으면 좋겠군요.. 주의/ 혹시 em단위에 대해 모르시는 개발자분들이 햇갈릴 수 있으니 꼭 의견을 나누시고 em삽입 여부를 결정하시길..^^; - 웹뿐만하니라 온세상이 표준으로 통일하기 바라면서..

http://jigsaw.w3.org/css-validator/

유명한 W3 의 css validator 입니다.

Nick La의 디자인 블로그 WebDesignerWall에서 XHTML/CSS를 이용한 갤러리 이미지 데코레이션 CSS Decorative Gallery에 대한 기사가 올라왔다. 이미지툴에서 별도의 작업 없이 SPAN 태그만으로 다양한 이미지 데코레이팅이 가능하다는 것을 볼 수 있다. 기본적으로 PNG의 알파채널을 이용해서 눈에 보이는 부분과 투명값이 적용된 부분을 이용한 Trick인데, WTA의 겔러리에서 Flash Winner등의 뱃지가 썸네일 좌측 상단에 붙어있는 것도 이것과 마찬가지로 Span 태그를 이용한 데코레이션 기법이다.

예문을 8가지나 들어 데모페이지를 제공하고 있으므로 누구나 쉽게 가장 마음에 드는 데코레이션 기법을 사용해 볼 수 있다.

오호..이거좀 실용적인데.

<HTML>

<HEAD>
<TITLE> CSS RollOver </TITLE>
</HEAD>

<BODY>

<style>

a.rollover img { border-width:0px; display:inline; }
a.rollover img.over { display:none; }

a.rollover:hover { border:0px }
a.rollover:hover img { display:none; }
a.rollover:hover img.over { display:inline; }

</style>

<div class="rollover">
<a href="#test" class="rollover"><img src="http://www.blueb.co.kr/bbs/table/JS_50/upload/s_blue.gif"><img src="http://www.blueb.co.kr/bbs/table/JS_50/upload/s_yellow.gif" class="over"></a>
<a href="#test" class="rollover"><img src="http://www.blueb.co.kr/bbs/table/JS_50/upload/s_red.gif"><img src="http://www.blueb.co.kr/bbs/table/JS_50/upload/s_green.gif" class="over"></a>
</div>

</BODY>

</HTML>


이런 기발한 :-)

본 글은 프라데이에 의해 작성되었습니다.



쩡민님의 블로그 http://blog.naver.com/jeong1278 쓸만한것들 많이있다. 때로 놀라게하는 레어자료들도..

과일장수님의 블로그 http://blog.naver.com/frui2store 정말 진정한 코더들은 다른것이다. 근래 이쪽에관해 그만두었다는 말씀도 있으시던데..

나라디자인 http://naradesign.net 정찬명이라는 닉네임(성명?)을 가지시고, 정말 알찬 블로그를 키우시고계신다. 알이꼭꼭


음..뭐 차례차례 수정하며 추가할 예정이다.^^

오페라가 빠르다고 하는데 jwBrowser보다는 좀 불편하네요.

그러나 설치하지 않고 사용하고 싶으신 분들은 무설치 버전을 받아 사용하시면 좋을 것 같습니다.

한글을 원하시면 "International Version" 을 다운받으시기 바랍니다.




한글로 바꾸는 방법

1. 다운을 받고 압축을 풀어 실행합니다.




2. 상단 메뉴 중 " Tools-Preferences " 을 누르고




3. 열리는 창에서 "Details..." 를 눌러서 한글로 바꿉니다.




4. Details 를 눌러서 "opera952int" - "locale" - 'ko" 폴더 안에 있는 "ko.lng" 를 선택합니다.
그럼 아래 두 그림처럼 "User interface language" 설정이 한글로 바뀐 것을 확인하실 겁니다.







5. "OK"를 누르시면 한글로 바뀐 모습을 보실 수 있을겁니다.


그럼, 즐거운 웹써핑하시길 바랍니다.^^

정확한 문서 구조 준수
문서의 루트 요소는 html이 되어야 하며, 이 html 요소는 XHTML 네임스페이스를 지정
해야 한다.
<html xmlns="http://www.w3.org/1999/xhtml">
표준 문서에는 head, title 및 body 구조 요소가 포함되어야 한다. 프레임 세트 문서에는
head, title 및 frameset 구조 요소가 포함되어야 한다
모든 요소는 완벽하게 중첩되어야 한다.
모든 요소들이 완벽하게 내포(nest) 되어야 하는 것은 필수적이다. 중첩(overlapping)이
부적합(illegal)한 것임에도 불구하고 기존 웹 브라우저들에서 널리 관대하게 사용되었다.
<p>This is a <i>bad example.</p></i>
<p>This is a <i>good example.</i></p>
모든 속성 값은 인용 부호(“나 ‘)로 묶어야 한다.
코드를 생성하거나 XHTML을 정리할 때 코드에서 속성 값을 인용 부호로 묶는다.
<a href=http://sample.com>틀린 경우</A>
<a href="http://sample.com">맞는 경우</a>
모든 요소와 속성은 소문자여야 한다.
XHTML 코드를 생성하거나 정리할 때 태그 및 속성의 대/소문자 환경 설정에 상관 없이
XHTML 코드에서 HTML 요소 및 속성의 이름을 소문자로 강제로 설정해야 한다. 이러
한 차이는 XML은 대소문자를 구별(case-sensitive)하므로 필수적이다. 예를 들어, <li>와
<LI>는 서로 다른 태그들이다
<A HREF="http://sample.com">틀린 경우</A>
<a href="http://sample.com">맞는 경우</a>
모든 요소는 닫아야 한다.
DTD에서 EMPTY로 선언된 경우를 제외하고 모든 요소에는 종료 태그가 포함되어야 한
다. 코드를 생성하거나 XHTML을 정리할 때 코드에 닫기 태그를 삽입한다.
빈 요소에는 종료 태그가 포함되거나 시작 태그가 />로 끝나야 한다. 예를 들어, <br>은
잘못된 것이며 <br></br> 또는 <br/>이 올바른 형식이다. 빈 요소로는 area, base,
basefont, br, col, frame, hr, img, input, isindex, link, meta 및 param이 있다.
또한, XML을 사용할 수 없는 이전 브라우저와의 호환성을 위해 /> 앞에 공백이 있어야
한다(예: <br/>가 아니라 <br />).
<img src="http://sample.com/wrong.jpg">
<img src="http://sample.com/right.jpg" />
모든 속성값은 속성이 함께 선언되어야 한다.
모든 속성은 최소화되어 표기 되면 안 된다. XML은 속성의 최소화를 지원하지 않는다. 속
성 값의 짝들은 모두 작성되어야 한다.
a, applet, form, frame, iframe, img, map 등의 요소에는 name 속성뿐만 아니라 id 속
성도 있어야 한다. 예를 들어, <a name="intro">Introduction</a>는 잘못된 것이며 <a
id="intro">Introduction</a> 또는 <a id="section1" name="intro">
Introduction</a>.가 맞다.
또한 <td nowrap>은 잘못된 것이며 <td nowrap="nowrap">이 올바른 형식이다. 최소
화될 수 없는 속성으로는 checked, compact, declare, defer, disabled, ismap, multiple,
noresize, noshade, nowrap, readonly 및 selected가 있다.
<option value="wrong" selected>틀린 경우</option>
<option value="right" selected="selected">맞는 경우</option>
참고: HTML 브라우저에서 HTML 4를 지원하지 않는 경우, 부울 속성이 전체 형식으로
표시되면 브라우저에서 이들 속성을 해석하지 못할 수도 있다.
모든 script 및 style 요소에는 type 속성이 포함되어야 한다.
language 속성이 사용되지 않는 HTML 4 이후로는 script 요소의 type 속성을 반드시
지정해야 한다. 코드를 생성하거나 XHTML을 정리할 때 script 요소에서 type 및
language 속성을 설정하고 style 요소에서 type 속성을 설정한다.
<script type="text/javascript” language="javscript"></script>
<style type="text/css"></style>
모든 img 및 area 요소에는 alt 속성이 포함되어야 한다.
코드를 생성하거나 XHTML을 정리할 때 코드에서 이들 속성을 설정하고, 찾을 수 없는
alt 속성을 보고한다.
모든 SCRIPT내의 태그는 Escape 시켜야 한다.
자바 스크립트에서 HTML 태그 쓰기에서 많은 경우 오류를 낸다. 자바스크립트 내에 데
이터는 CDATA 형식으로 간주되기 때문에 HTML태그가 들어가게 되면 오류를 내게 되
어 있다. 예를 들어 아래 예제는 잘못된 방식이다.
<script type="text/javascript">
<!--
// 틀린 표현!
document.write("</P>");
// -->
</script>
HTML4에서는 SCRIPT내에 데이터 중 시작 태그나 코멘트 부분은 인식이 안되지만 종료
태그는 인식이 되기 때문에 이를 역슬래시로 표시해야 한다.
<script type="text/javascript">
<!?
// 맞는 표현!
document.write("<\/P>");
// -->
</script>
XHTML에서, 스크립트와 스타일 요소들은 #PCDATA 컨텐트를 갖는 것으로 선언된다.
결과적으로, <과 &는 마크업의 시작으로 처리되고, &lt;과 &amp;와 같은 개체(entities)들
은 XML 프로세서(processor)에 의해 각각 <과 &로의 개체 참조로서 인식되므로
CDATA로 마크업 하여 표시하는 게 좋다.
<script type="text/javascript">
<![CDATA[
... <h1>데이터</h1> ...
]]>
</script>
모든 문서 내 URL에서 &를 쓰면 안 된다.
URL에 &가 포함되어 있는 경우 에러를 낼 수 있다. 이것은 &가 XML 엔티티의 시작으
로 인식 하기 때문에 생기는 문제이다. 기존 웹브라우저는 이러한 에러를 복구해 주고 있
지만 유효성 검사기에서는 에러를 내게 된다.
<!?에러! --> <a href="foo.cgi?chapter=1&section=2">...</a>
<!?적합! --> <a href="foo.cgi?chapter=1&amp;section=2">...</a>
HTML 문서 내에서만 &를 &amp;로 바꾸어야 하며 브라우저 주소창이나 이메일 본문에
서는 &를 써야 한다. 웹 서버에서는 &amp;가 아니라 &만을 인식하기 때문이다.

Introduction W3C는 현재 표준적으로 사용하고 있는 웹 UI의 표준인 HTML 4.x 발 표 이후 HTML 5.x 대신 XHTML 1.0을 발표하였으며, HTML 표준을 이어갈 차세대 웹 UI 표준이라 칭하고 있다. HTML 5라 칭하지 않는 이유는 무엇일까? XHTML은 XML에 기반하여 HTML4를 다시 재구성한 것이기 때문이다. W3C 원문을 인용한다면, “XHTML is a family of current and future document types and modules that reproduce, subset, and extend HTML 4 [HTML4]. XHTML family document types are XML based, and ultimately are designed to work in conjunction with XML-based user agents.” W3C 말들은 대부분 애매모호한 점들이 많지만 일부 해석한다면 “XHTML은 HTML4를 재구성, 서브셋 하고 확장하여 현재와 미래의 문서 타입과 모듈..” 이러한 추상적인 표현들을 정리하여 부연 설명을 하면, “XHTML은 HTML4 문서타입들을 XML 문서 표준에 맞게 재구성하고, HTML4 규격에 맞는 사용도구들에 호환되면서 XHTML 규격에 맞는 사용도구들에서는 더 작동될 수 …” XHTML 은 차세대 UI로서 W3C 권고안이다. 구성의 특징으로는 HTML 4.01의 Element를 그대로 사용하면서 XML 문법을 따르고 있다. 즉, XM 응용분야에서 사용될 수 있는 잘 정의된 HTML이라 정의할 수 있으며, 이러한 특징은 OS, 브라우저, PDA, Mobile 등 다양한 환경에서 단일한 언어로 호환가능한 웹 표준을 적용할 수 있는 것으로 확장될 수 있다. Why XHTML? XHTML이 왜 필요한가? 차세대 UI로서 XHTML을 사용했을 경우 주는 이점은 무엇인가? W3C 원문을 인용하면 “The XHTML family is the next step in the evolution of the Internet.” 이라 정의하고 있으며, 또한 “…Alternate ways of accessing the Internet are constantly being introduced…. Ultimately, it will be possible to develop XHTML-conforming content that is usable by any XHTML-conforming user agent.” 라 하고 있다. 요약한다면 “XHTML은 인터넷 발전의 다음 단계이며, ..(앞으로도)..인터넷에 접속하는 방식들은 계속 소개 되어질 것이며, 궁극적으로 XHTML 은 이러한 모든 것을 지원 가능하게 될 것이다.” 부연 설명을 하자면 다음과 같다. HTML4가 Dynamic HTML을 위해 탄생된 것이라면 XHTML은 인터페이스에 중점을 둔 것이 아니라 유비쿼터스 환경과 같은 구동 환경에 초점을 맞추고 있다. 즉 단순히 HTML4.0을 업그레이드 한 것이 아니라 XML 응용을 바탕으로 다양한 장치와 브라우저 등에 가장 폭 넓게 웹 페이지를 적용할 수 있다는 데에서 의미를 찾을 수 있다. 또한, 기존의 HTML 문서와의 호환성 유지와 함께 더욱 강력하게 확장할 수 있도록 해주는 것이다. 이 의미를 시장의 관점에서 접근했을 때 해석한다면 PC의 모든 브라우저와 모바일 장치의 브라우저 등을 지원하는 단일 언어로서, 미래의 UI 표준 기술로서 XHTML이 위치해 있으며, 차세대 웹 표현을 위한 Markup Language 이라는 것이다. W3C(World Wide Web Consortium) 는 미래의 모든 유선 프로그래밍에 XHTML을 권장하며, 모바일 장치와 같은 작은 화면과 적은 리소스 동원이 가능한 기기인 경우 XHTML의 하위 언어인 XHTML 베이직을 권고한다. XHTML 베이직은 시장 점유율과 업체 영향력 측면에서 차세대 브라우저 표준 방향을 주도하는 WAP 포럼(WAP) NTT도코모(아이-모드)의 지원을 받고 있다. 이러한 반영은 결국 WAP 2.0 기본 표시언어로서 XHTML 베이직을 채택으로 나타나고 있다. 결론적으로 차세대 웹 UI 기술은 결국 어떠한 장치, 어떠한 브라우저 환경하에서도 동일한 언어와 기술 환경하에 표현되어야 한다는 것이며, 바로 이 방향에 XHTML이 있는 것이다. Extensibility XML documents are required to be well-formed (elements nest properly). Under HTML (an SGML application), the addition of a new group of elements requires alteration of the entire DTD. In an XML-based DTD, all that is required is that the new set of elements be internally consistent and well-formed to be added to an existing DTD. This greatly eases the development and integration of new collections of elements. Portability There will be increasing use of non-desktop devices to access Internet documents. By the year 2002 as much as 75% of Internet access could be carried out on these alternate platforms. In most cases these devices will not have the computing power of a desktop computer, and will not be designed to accommodate ill-formed HTML as current browsers tend to do. In fact, if these non-desktop browsers do not receive well-formed markup (HTML or XHTML), they may simply be unable to display the document. 위에서도 언급했지만, XForms는 전통적인 HTML Forms 기술과는 다르게 모델, 입력된 데이타, 그리고 XForms 사용자 인터페이스의 세가지 부분으로 분리함으로써 폼의 내용과 표현을 명확하게 분리하여 다음과 같은 이점을 준다. 3 Strong typing 3 Existing schema re-use 3 External schema augmentation 3 XML submission 3 Internationalization 3 Enhanced accessibility 3 Multiple device support 3 Declarative event handlers 여기서는 간단한 HTML Form Sample을 XForms으로 변환하는 과정을 통해 XForms에 대해 소개하고자 한다. œ Sample. HTML Form <html> <head> <title>eCommerce Form</title> </head> <body> <form action="http://example.com/submit" method="post"> <table summary="Payment method selector"> <tr> <td><p>Select Payment Method:</p></td> <td><label><input type="radio" name="as" value="cash"/>Cash</label> <label><input type="radio" name="as" value="credit"/>Credit</label></td> </tr> <tr> <td><label for="cc">Credit Card Number:</label></td> <td><input type="text" name="cc" id="cc"/></td> </tr> <tr> <td><label for="exp">Expiration Date:</label></td> <td><input type="text" name="exp" id="exp"/></td> </tr> <tr> <td colspan="2"><input type="submit"/></td> </tr> </table> </form> </body> </html>

HTML Form 방식은 Form 데이터, 유효성 체크 등의 제약조건, 프리젠테이션(표현) 처리를 분리하지 못하는 한계를 갖고 있으나 XForms 방법은 이러한 한계를 개선하여 제공할 수 있는 기술적 구조를 제공합니다. 다음은 위 HTML Form을 XForm으로 변환하는 과정들을 간단한 예와 함께 설명하고자 한다. 모델 요소를 추출하여 간단히 변환환 예 <xforms:model> <xforms:submitInfo action="http://examples.com/submit" id="submit"/> </xforms:model> œ Sample. 프리젠테이션 표현을 위해 XForms 방식으로 변환 <selectOne ref="as"> <caption>Select Payment Method</caption> <choices> <item> <caption>Cash</caption> <value>cash</value> </item> <item> <caption>Credit</caption> <value>credit</value> </item> </choices> </selectOne> <input ref="cc"> <caption>Credit Card Number</caption> </input> <input ref="exp"> <caption>Expiration Date</caption> </input> <submit submitInfo="submit"> <caption>Submit</caption> </submit> 변환된 코드의 특징을 보면 디바이스 비종속성을 고려하여 라디오 버튼 객체 표현을 위해 하드코딩 방식을 사용하지 않고 <selectOne> 과 같은 방식으로 표현되었을 뿐만 아니라 XML 기반의 표현 방식을 통해서 명확하고 간결하다. 또한 표현과 데이터를 표준적 스펙에 따라 완벽하게 분리함으로써 XML submission 을 가능하게 한다. Providing XML Instance Data <xforms:model> <xforms:instance> <payment as="credit" xmlns="http://commerce.example.com/payment"> <cc/> <exp/> </payment> </xforms:instance> <xforms:submitInfo action="http://example.com/submit" method="post"/> </xforms:model> 유효성 체크의 예 XForms 은 특정 객체의 Value 체크 또는 객체와 객체간의 상관 관계하의 특정 조건 체크 등을 위해 HTML 방식에서 사용했던 것처럼 스크립트를 사용할 필요가 없다. 위에서 제시된 예제를 기반으로 유효성 체크를 어떻게 처리하는지 소개한다. 조건은 Select Payment Method 에서Credit 를 선택 했을 경우이며, 그 상세 내용은 다음과 같다. 3 Cridit Card Number를 반드시 입력 3 Expiration Date를 반드시 입력 3 Credit Card Number 입력 데이터는 Digit 형이어야 하며, 14-18 자 3 Expiration Date는 month/year 형식의 날짜형 데이터 œ Sample. 유효성 체크 <xforms:bind ref="my:payment/my:cc" relevant="../my:payment/@as = 'credit'" required="true" type="my:cc"/> <xforms:bind ref="my:payment/my:exp" relevant="../my:payment/@as = 'credit'" required="true" type="xsd:gYearMonth"/> <xforms:schema> <xsd:schema ...> ... <xsd:simpleType name="cc"> <xsd:restriction base="xsd:string"> <xsd:pattern value="\d{14,18}"/> </xsd:restriction> </xsd:simpleType> ... </xsd:schema> </xforms:schema> HTML Forms을 이용하여 작성하던 구성들이 과연 XForms을 사용할 경우 어떻게 변해야 하는지 그 변화의 감을 잡기 위해 몇 가지 예제를 코드레벨에서 소개하고자 한다. œ Sample. HTML 구성의 예 <html> <head><title>Search</title></head> <body> <form action="http://example.com/search" method="get"> Find <input type="text" name="q"> <input type="submit" value="Go"> </form> </body> </html> XForm 으로 변환시 과연 무엇이 바뀌어야 하는가? 가장 중요한 차이는 하나로 표현되었던 것을 분리하는 것이다. 예를 들자면 Form 객체를 통해서 표현되었던 Submit 객체와 UI 분리 같은 것을 말한다. HTML-Form 객체를 XForm으로 변환하기 위해 기술된 아래의 부분적 코드를 보면 이해가 빠를 것이다. <model> <submission action="http://example.com/search" method="get" id="s"/> </model> <input ref="q"><label>Find</label></input> <submit submission="s"><label>Go</label></submit> œ Sample. 변환된 전체 소스를 본다면 다음과 같다 <h:html xmlns:h="http://www.w3.org/1999/xhtml"
xmlns="http://www.w3.org/2002/xforms">
<h:head>
<h:title>Search</h:title>
<model>
<submission action="http://example.com/search"
method="get" id="s"/>
</model>
</h:head>
<h:body>
<h:p>
<input ref="q"><label>Find</label></input>
<submit submission="s"><label>Go</label></submit>
</h:p>
</h:body>
</h:html> Submit HTML Form은 하나의 방법을 통해 특정서버에 한 곳에 Submit이 가능하지만 XForm은 여러 다른 서버(Different Server)에 또는 여러가지 방법으로 Submit (Multiple Submission) 하는 방법을 제공 한다. <model>
<instance>…</instance>
<submission action="http://example.com/search"
method="get" id="com"/>
<submission action="http://example.org/search"
method="get" id="org"/>
</model> <submit submission="org"><label>Search example.org</label></submit>
<submit submission="com"><label>Search example.com</label></submit> HTML Forms 유저를 위한 XForm 가이드는 전통적 HTML Form을 어떻게 변환해야 하는가에 대해서 Forms Control, Types 등 여러가지 소개하고 있으나 생략한다. 위에서도 언급했지만, XForms는 전통적인 HTML Forms 기술과는 다르게 모델, 입력된 데이타, 그리고 XForms 사용자 인터페이스의 세가지 부분으로 분리함으로써 폼의 내용과 표현을 명확하게 분리하여 다음과 같은 이점을 준다. 3 Strong typing 3 Existing schema re-use 3 External schema augmentation 3 XML submission 3 Internationalization 3 Enhanced accessibility 3 Multiple device support 3 Declarative event handlers 여기서는 간단한 HTML Form Sample을 XForms으로 변환하는 과정을 통해 XForms에 대해 소개하고자 한다. œ Sample. HTML Form <html> <head> <title>eCommerce Form</title> </head> <body> <form action="http://example.com/submit" method="post"> <table summary="Payment method selector"> <tr> <td><p>Select Payment Method:</p></td> <td><label><input type="radio" name="as" value="cash"/>Cash</label> <label><input type="radio" name="as" value="credit"/>Credit</label></td> </tr> <tr> <td><label for="cc">Credit Card Number:</label></td> <td><input type="text" name="cc" id="cc"/></td> </tr> <tr> <td><label for="exp">Expiration Date:</label></td> <td><input type="text" name="exp" id="exp"/></td> </tr> <tr> <td colspan="2"><input type="submit"/></td> </tr> </table> </form> </body> </html>
HTML Form 방식은 Form 데이터, 유효성 체크 등의 제약조건, 프리젠테이션(표현) 처리를 분리하지 못하는 한계를 갖고 있으나 XForms 방법은 이러한 한계를 개선하여 제공할 수 있는 기술적 구조를 제공합니다. 다음은 위 HTML Form을 XForm으로 변환하는 과정들을 간단한 예와 함께 설명하고자 한다. 모델 요소를 추출하여 간단히 변환환 예 <xforms:model> <xforms:submitInfo action="http://examples.com/submit" id="submit"/> </xforms:model> œ Sample. 프리젠테이션 표현을 위해 XForms 방식으로 변환 <selectOne ref="as"> <caption>Select Payment Method</caption> <choices> <item> <caption>Cash</caption> <value>cash</value> </item> <item> <caption>Credit</caption> <value>credit</value> </item> </choices> </selectOne> <input ref="cc"> <caption>Credit Card Number</caption> </input> <input ref="exp"> <caption>Expiration Date</caption> </input> <submit submitInfo="submit"> <caption>Submit</caption> </submit> 변환된 코드의 특징을 보면 디바이스 비종속성을 고려하여 라디오 버튼 객체 표현을 위해 하드코딩 방식을 사용하지 않고 <selectOne> 과 같은 방식으로 표현되었을 뿐만 아니라 XML 기반의 표현 방식을 통해서 명확하고 간결하다. 또한 표현과 데이터를 표준적 스펙에 따라 완벽하게 분리함으로써 XML submission 을 가능하게 한다. Providing XML Instance Data <xforms:model> <xforms:instance> <payment as="credit" xmlns="http://commerce.example.com/payment"> <cc/> <exp/> </payment> </xforms:instance> <xforms:submitInfo action="http://example.com/submit" method="post"/> </xforms:model> 유효성 체크의 예 XForms 은 특정 객체의 Value 체크 또는 객체와 객체간의 상관 관계하의 특정 조건 체크 등을 위해 HTML 방식에서 사용했던 것처럼 스크립트를 사용할 필요가 없다. 위에서 제시된 예제를 기반으로 유효성 체크를 어떻게 처리하는지 소개한다. 조건은 Select Payment Method 에서Credit 를 선택 했을 경우이며, 그 상세 내용은 다음과 같다. 3 Cridit Card Number를 반드시 입력 3 Expiration Date를 반드시 입력 3 Credit Card Number 입력 데이터는 Digit 형이어야 하며, 14-18 자 3 Expiration Date는 month/year 형식의 날짜형 데이터 œ Sample. 유효성 체크 <xforms:bind ref="my:payment/my:cc" relevant="../my:payment/@as = 'credit'" required="true" type="my:cc"/> <xforms:bind ref="my:payment/my:exp" relevant="../my:payment/@as = 'credit'" required="true" type="xsd:gYearMonth"/> <xforms:schema> <xsd:schema ...> ... <xsd:simpleType name="cc"> <xsd:restriction base="xsd:string"> <xsd:pattern value="\d{14,18}"/> </xsd:restriction> </xsd:simpleType> ... </xsd:schema> </xforms:schema>

"What Is RSS?"를 보고 한글로 된 쉬운 RSS 설명서가 필요할것 같아 써봅니다. 기술적인 내용은 가능한 생략하였고 주로 블로그에서 초보자들이 RSS를 이해하고 이용할수 있도록 하는 것을 목적으로 합니다. RSS란 무엇인가?
RSS는 Really Simple Syndication의 머리글자를 딴 말이며, 사이트에 새로 올라온 글을 쉽게 구독할 수 있도록 하는 일종의 규칙입니다. 사이트에서는 바뀐 내용, 새로운 글을 RSS라는 규칙에 따라 제공하면 이용자는 RSS를 읽을 수 있는 프로그램 (보통 RSS리더기로 불리웁니다.)으로 그 내용을 받아올 수 있습니다.RSS로 할 수 있는 일은 무엇인가?
흔히 RSS는 컨텐트 수집(보내는 쪽에서는 배급)의 좋은 방법이라고 말합니다. 왜그러냐면 예를 들어 10개의 사이트에서 업데이트 된 내용을 확인하려면 브라우저를 열고 10개 사이트를 하나씩 방문해서 지난번 읽었던 곳을 찾고 그 뒤로 새로운 글이 올라왔는지를 확인해야 합니다. 1시간뒤에 또 확인해보려면 이 작업을 손으로 하나씩 다시 해줘야 합니다. 그런데 만약 이 10개의 사이트에서 RSS를 제공한다면 RSS리더기를 이용해서 순식간에 확인이 가능합니다. 게다가 일정한 시간간격마다 자동으로 확인을 해주죠. RSS를 이용해서 할수 있는 일은 아주 다양합니다만 블로그에서는 자신이 구독하는 블로그에 새로운 포스트가 올라왔는지를 확인하는 용도로 유용하게 사용할 수 있습니다.이메일과 무엇이 다른가?
사이트에서 사용자에게 새로운 내용을 보내준다는 용도로 보면 이메일로 보내는 뉴스레터,이메일소식지와 비슷할 수도 있지만 RSS는 이메일과는 다릅니다. 우선 이메일은 내용을 보내주는 사이트에 나의 이메일주소를 알려주는 과정이 필요하고 나에게 뉴스레터를 이메일로 발송하면 받은편지함에서 받아봅니다. 스팸편지속에 뉴스레터가 섞일수도 있고 해당사이트에서 보관하고 있는 나의 이메일주소가 악용될 우려도 있습니다. 반면 RSS는 사이트에서 제공하는 RSS주소를 리더기에 입력하기만 하면 사용자가 일방적으로 내용을 긁어옵니다. 더이상 받고 싶지 않으면 RSS주소록에서 그 주소를 삭제하기만 하면 됩니다. 사이트에서는 강제로 RSS를 전송할 방법이 없습니다. 이것을 그림으로 그려보자면 아래와 같습니다.
(그 림에 대해 부연설명 하자면 오른쪽 그림에서 오해가 있을수 있는데, 화살표의 방향이 데이타의 방향이지 의지의 방향은 아닙니다. 즉, 사용자(RSS리더기)가 일방적으로 가져오는 것이지 이메일광고처럼 RSS를 주는 쪽에서 보내고 싶다고 보낼수 있는 것이 아닙니다. 따라서 저 화살표를 사용자는 끊을수 있지만 RSS제공자는 끊긴 화살표를 이을 수 없습니다.) RSS를 제공하는 방법은?
RSS를 제공하는 것을 "RSS Feed"라고 말하기도 합니다. RSS는 일종의 규약이므로 이 규약에 맞게 작성해놓으면 됩니다. 그러나 사이트가 업데이트될때마다 RSS를 손으로 수정해주는 것은 흔히하는 말로 개노가다이며 그래서 대부분의 블로그에서는 이 RSS를 자동으로 생성해줍니다. RSS를 보는 방법은?
RSS링크를 브라우저에서 열어봐도 되긴 하는데 사람이 보기에 그다지 편한 모양새가 아닙니다. RSS리더기를 이용해서 그 주소를 불러오면 알아서 보기편하게 정리해서 보여줍니다. 많이 쓰는 프로그램은 (이것도 그때그때 유행이 있나봅니다.) SharpReader가 있고 요즘은 웹에서 RSS리더기 기능을 구현해주는 bloglines라는 사이트에 많이 가입하시는듯 합니다. 더 많은 리더기는 RSScalendar의 RSS리더기 페이지나 Technology at Harvard Law의 Aggregators페이지에서 찾을 수 있습니다. RSS를 읽을 수 있는 프로그램이 준비되었다면 이제 RSS를 받아와야겠지요? RSS를 제공하는 사이트에서는 RSS링크를 아이콘으로 만들어서 찾기 쉽게 해놓고 있습니다. 등의 아이콘이나 "Syndicate this site" "RSS" 등의 글자로 링크를 만들어 놓고 있습니다. 이 링크의 주소를 복사해서 RSS리더기에서 불러오면 해당사이트의 RSS를 구독하게 되는 것입니다. 특정한 아이콘이나 글자링크를 써야만하는 것은 아니어서 사이트마다 조금씩 RSS링크를 지칭하는 아이콘이나 글자가 다르기도 합니다.
RSS를 제공하는 사이트 몇군데 입니다.
오마이뉴스 전체기사
중앙일보 전체기사
네이버 뉴스의 검색결과를 RSS로
드림위즈의 추천 RSS
Some sources of RSS 2.0 feeds. (Technology at Harvard Law)
Top 100 Most-Subscribed-To RSS Feeds (Radio Community Server) 참고링크들 블로그 배급과 구독을 위한 가장 쉬운 방법, RSS (호찬넷)블로그용어 - RSS와 XML 아이콘, 피드(feed), RSS 구독기 (김중태문화원)RSS 2.0 Specification (Technology at Harvard Law)What is a site feed? (blogger.com)What is RSS? (XML.com)

해외 CSS관련 테크닉들을 담은 곳을 정리해보았습니다. 좋은 사이트를 알고 계시면 코멘트 달아주세요. 이 문서는 수시로 업데이트 됩니다. 최종 업데이트 : 2004/9/30 레이아웃 Position is Everything CSS Layout - Eric Costello Layout Reservoir - Bluerobot Advanced CSS Layouts: Step by Step - Webreference.com Introduction to CSS Layout - Eric Costello CSS Layouts - Salia.com Colored boxes - one method of builiding full CSS layouts - Maxdesign Layout-o-matic - Inknoise.com CSS Creator Box Lesson 네비게이션 - 리스트 태그를 이용한 메뉴 디자인 Listamatic - Maxdesign Fast Rollovers Without Preload - Pixy Sliding Doors of CSS - Douglas Bowman Sliding Doors of CSS, Part II - Douglas Bowman Pixy-style CSS no-preload rollovers, with PNG support for IE CSS Navigation - Stu Nicholls Free Menu Design - E-lusion 이지미 대체 테크닉(Image Replacement) A New Image Replacement Technique - Stuart Langridge Image Relpacement - no span - Seamus Leahy Facts and Opinion About Fahrner Image Replacement In Defense of Farhner Image Replacement Accessible Image Replacement - Mike Rundle Glider Image Transform Techque - Tom Gilder Using Background-Image to Replace Text - Douglas Bowman Revised Image Replacement - Mezzoblue DOM Image Replacement - Quirksmode Image Replacement - Levin Image Replacement Tests IFR:An FIR Alternatve - Shaun Inman IFR: Revisited and Revised - Shaun Inman sIFR 2.0b2: The Mo’ Betta Beta - Mike Davison 접근성 향상(Accessibility) Dive Into Accessibility Accessify.com Acceessibility - Juicy Studio 폼 디자인(Forms) Styling Form Fieldsets, Legends and Labels - Pixy PNG Alpha Channel Solution in IE 32-bit PNG Degradability in IE PNG Behavior - Webfx XHTML Not Yet. 기타 Rubber Header - Pixy Styling <hr> Generated Content - Westciv

1. 레이아웃을 나누기 위해 <table>을 사용하지 말것. 대신, CSS를 이용하여 레이아웃을 구성하라. 2. <table>은 표를 보여주기 위한 용도로만 사용을 제한할 것. 최초로 HTML을 제안되었을 때 <table>은 표를 구성하기 위해서 만들어진 태그였습니다. 이것이 레이아웃을 담당하기에 그 기능이 적합했기에 많은 이들이 <table>을 레이아웃을 구성하기 위한용도로 사용하였으며, 더더욱 문제는 최근의 학원이나 책자 등에서는 당여하다는 듯이 레이아웃을 위한 태그이다..라고까지 설명하기에 이르렀습니다. 이전에 MS워드나 아래아한글같은 PC용 워드프로세서에서 "표"를 이용해서 레이아웃을 구성했던 것처럼 <table>도 그 원 기능이 변질되어 버리게 된 것입니다. 현 시점에서는 이러한 기능이 편리할지는 모르겠지만, 가까운 미래에 장애자용 브라우저라든지 논리적 근거를 둔 브라우저가 보급이 되었을 시에는 커다란 문제로 다가올 것입니다. 표와 레이아웃을 위한 예를 보십시요. 구 분 12월 1월 2월 3월 4월 5월 매출액 9,096 9,269 9,341 9,374 9,895 9,177 매출원가 7,892 7,814 7,789 7,961 8,344 7,996 매출총이익 1,204 1,455 1,552 1,413 1,551 1,181 일반관리비 443 464 368 407 463 421 영업이익 760 991 1,184 1,006 1,088 760 영업외손익 -1,088 -879 -981 -1,302 -896 -654 경상이익 -327 111 203 -296 102 106 당기순이익 -243 52 108 14 25 77 위와 같이 <table>을 표로 사용했을시, 각각의 열과 행(colume과 row)는 연계성을 가지고 있으며, 이러한 논리는 장애자용 브라우저에서 상당한 강점을 가집니다. 하지만, <table>을 단지 레이아웃만을 이용하게 사용한다면 [데스크탑]현대멀티캡, 성능/가격 두배로 만족하기!!
[MP3]아이리버 가방 증정 깜짝 이벤트!
[MP3]Yepp 신제품 온라인 런칭 기념 대축제
[MP3]아이오디오 4月 왕대박 사은품 이벤트※ 링크 누르지 마세요...^^...Copy해붙이다보니..링크가 그대로... 논리적으로 위의 예에서는 줄단위로 배열된 이미지와 text, link가 연계성을 가집니다. 하지만, 시각적으로 보았을시에만 이러한 논리를 가질 근거가 되지만, "모음전"과 "사은품"이라는 이미지가 같은 열에 있음으로서 연계성을 가지게 되고 전혀 다른 링크인 text들 마져 연계성을 가진다는 논리가 발생합니다. 혹은 전자와 후자의 반대경우에도 문제가 발생합니다. 연계성을 연산을 해야하는 프로그램으로서는 각각의 연계성을 연산하기 위한 근거가 필요하게 되고, 이러한 근거가 부족하다면 제작자 임의로 이러한 연계성의 증거를 제시해야 하고 됩니다. 이 또한 통일된 표준이라는 월드와이드에 부적합하게 되죠. 별에 별 이유로 <table>태그를 사용함에 있어 레이아웃과 표 두가지 모든용도로 사용하기에는 부적하다는 것입니다. 그래서 레이아웃은 CSS를 사용하는 것이 좋은 방법임을 제시하고 있습니다. 3. 모든 글자는 CSS를 통해 구현할 것. 이는 <font>태그의 사용을 자제하라는 w3c.org의 논조와 동일합니다. <font>태그는 그 기능상 어떠한 논리도 지니고 있지 못하고, 그 문자의 색상이나 스타일의 변화로 인해 인?게 되는 차별성, 부각성등이 시각적 인지에서만 가능하고, 연산이나 장애자들에게는 어떠한 영향도 주지 못한다는 것이죠. 또한, 사이트전체에 규격화된 문자스타일을 규정함으로서 본문, 일반, 강조, 조심...등과 같은 파별성, 부각성, 각각의 level등등, 통일된 접근을 가능하게 하자는 것입니다. 간단하게 말해서, 책하나를 샀을때, 각 chapter별로 서로 다른 문자체와 스타일이 존재한다면, 무엇이 제목이고, 본문이고, 주석이고, 설명인지....애매하게 인식되는 결과를 낳는 것과 같은 맥락입니다. 4. 페이지는 CSS를 사용하지 않아도 논리적이고 읽기가능하도록 제작하라. 논리적이라는 뜻은...각각의 태그와 text, link, image등이 중요도, 강조, history, site depth등의 차이점과 강조의 강약, 단계, level등을 구분하게 하고, 아울러 연계성이 있는 것끼리 하나의 그룹으로 만들어 브라우저가 논리적 연산이 가능하도록 하자는 데 있습니다. 5. 글의 구조는 <h1>~<h7>,<strong>,<p>등을 이용하여 글의 구조를 논리적으로 만들어라. 6. 글의 설명에는 <b>, <center>등을 사용하라. <h1>, <h2>태그는 제목을 표시하는 태그로 <h1>는 가장 중요한 제목, <h2>는 <h1>보다 한단계 낮은 중요도의 제목..같이 1~7까지 중요도의 차이를 쉽게 설명할 수 있게 하고 있습니다. <em>는 emphasis 강조의 뜻을 나타내는 논리 태그이고, <strong>은 strong mphasis <em>보다 한단계 더 강조됨을 나타내는 논리 태그입니다. 강조의 강약이 차이가 있을시에는 이를 사용해서 논리를 설명하라는 것입니다. <p>태그는 각각의 문단을 나타내는 태그로서 문단의 정의와 구분을 담당하게 됩니다. 단순히 <br>태그로 줄을 넘김으로서 시각적 판단만 가능케 하는 페이지를 만들지 말고, <p></p>를 사용하여 논리적으로 문단의 정의와 구분을 가능케 하라는 것입니다. ※ <p>태그를 사용하여 단점인 강제적으로 여백을 생성케하는 것은 CSS의 margin으로 해결이 가능합니다. 이러한 태그들을 사용함으로서 페이지 자체에 논리적 근거를 제시하라는 것입니다. <h1>제헌 헌법 (제정 ; 1948, 7, 17) <h2>대한민국 헌법</h2> <span> 悠久한歷史와傳統에빛나는우리들大韓國民은己未三一運動으로大韓民國을建立하여........... 檀紀4281年7月12日이憲法을制 定한다.</span> <h3>제 1장 </h3> <h3>제 2장 </h3> <h3>제 3장 </h3> <h3>제 4장 </h3> 반대로, 아무 의미없이 단순히 시각적 강조만을 하기 위해서 <em>, <strong>, <p>같은 태그를 사용하지 말고, <b>, <center>같이 아무런 의미가 부여되지 않은 태그를 사용하라는 것입니다. ※ 많은 분들이 착각하고 계시는...<font>, <b>, <i>, <u>, <s>, <center>같은 태그의 사용을 자제하라는 w3c.org의 충고는 any structural or any logical...meaning text에 사용하지 말라는 것입니다. 무작정 이러한 태그의 사용을 자제하라는 것이 아닙니다. HTML4.0은 html은 논리적으로, CSS를 유저의 접근성을 위한 도구로 사용하라는 것입니다. 7. 링크에는 title속성을 사용하라. 8. 이미지에는 alt속성을 사용하라. <a href=.....> 여기에 title="링크의 설명"를 붙여 시각적 판단뿐 아니라 논리적 판단이 가능하도록 하라는 것입니다. 또한 title속성은 여타 문단이나 문장, 이미지, object등에도 설명을 부여하여 논리적 판단이 가능하도록 강력 추천하고 있죠. 시각장애자의 웹서핑를 누군가 도와준다고 가정하면, 도와주는 사람은 분명히 링크명을 말하고 이에 대한 설명도 덧붙여 주겠죠. 그러한 기능을 title속성을 이용하여 하라는 것입니다. 어떤 책에서는 title속성이 풍선말을 가능케 하는 속성이라고 사기를 치는데....반성해야합니다. alt속성은 이미지가 100% load되기 이전에 그 이미지를 설명하도록 하는 속성입니다. 시각적 판단 이전에 그 이미지가 무엇을 설명하고자 하는지 인지하게 하자는 것이죠. <a href="http://blog.naver.com" title="네이버 블로그로 가는 링크">네이버 블로그</a> <img src="fan_1.jpg" alt="환상적인 묘기" title="환상적인 묘기"> 9. 감광성 간질과 같은 환자들을 위하여 반짝이는(blink) 문자, 이미지를 사용하지 말라. 감광성 간질...이게 뭔지 알아내느라 도서관에도 다녀왔습니다. 몇년전, 오락하다가 발작해서 죽은 중학생얘기...그것입니다. blink되는 문자를 판독하기 위해 과도하게 집중하다보면 이런 발작이 일어난다는 것이죠. 그러니깐, 쉽게 읽기 힘들게 만드는 모든 글자와 이미지들의 사용을 자제하자는 겁니다. 제 생각엔, 플래쉬에서도 이러한 부분은 조금 참조해야하지 않을까 싶습니다. 10. ?업을 사용하지 말라. 너무나 많이 들은 얘기인지라 다들 아실거라 믿습니다. ?업이 중요성이 짙은 이슈를 제시하는 기능으로 사용되지만, 시각적 판단으로도 거추장스러운 도구로 인식되어가고 있고, 장애자들에게는 ?업은 거추장을 넘어 장벽으로까지 다가올 것입니다. 페이지의 내용을 이해하기 위해서는 페이지 전체에 논리적인 구조와 해설이 필요한데... 이러한 논리에서 벗어난 새로운 페이지의 등장은 장애자들에게는 이해를 99.9% 불가능하게 하는 도구가 되어 버리는 것입니다. 11. 움직이는 문자를 사용하지 말라. 9번의 것과 비슷한 맥락입니다. 시각적으로도 읽기가 불편한 것이죠. 12. 경고를 뜻하는 붉은색을 아이콘에 사용하라. 시각적 판단이 쉽도록 하기 위해 아이콘을 사용할 때에는 눈에 띄는 붉은 색 계통을 주로 사용하는 것이 좋다는 것입니다. 메타포를 이용한 아이콘이 주류를 이루는 우리나라 실정에는 조금 뒤떨어진 얘기입니다만, 그 취지는 충분히 이해가 가능하실 거라 믿습니다.

일찍 일어나는 새가 CSS를 잡는다: 구조적 HTML 계획 By Virginia DeBolt
Cascading Style Sheet로 전환하는데 어려움을 겪고 있습니까? CSS를 조금 사용하지만 완벽한 CSS로의 전환은 할 수 없습니까? 당신의 문제는 아마도 Cascading Style Sheet를 웹 페이지를 만드는 과정에서 먼저 충분히 생각하지 않은 것일 겁니다. 당신의 웹 페이지가 어떻게 보일 것인지 생각을 시작하기 전에, 당신은 그 페이지의 의미적이거나 구조적인 내용에 대해서 생각해서 그 HTML이 "CSS-준비상태"가 되도록 해야합니다. 이 문서는 CSS를 위해 구조적으로 준비된 HTML을 처음 만드는 것으로 당신이 프로젝트를 시작하는데 도움을 줄 것입니다. CSS로 전환을 시도하는 몇몇 이들을 괴롭히는 두번째 문제는 그들이 cellpadding, hspace, or align="left" 같이 친숙한 HTML 표현 속성을 CSS의 동일한 표현으로 바꾸는데 익숙하지 못하다는 것입니다. CSS를 위한 HTML을 어떻게 구조화 하는지 배운 후에, 이 친숙한 HTML 속성들을 CSS의 속성으로 어떻게 대체할 수 있는지 이해할 수 있게 도와줄 표를 보여줄 것입니다. 구조적 생각 우리 중 많은 사람들은 우선 "보이는 것"을 생각하고, 그것을 이루기 위해 어떤 이미지, 폰트, 색상 계획, 그리고 그래픽 디자인 속성을 사용해야 하는지 생각하는 것으로 웹페이지 만드는 것을 배웠습니다. 우리는 포토샵이나 파이어웍스를 실행한 후 페이지가 보였으면 하는 바에 정확하게 들어맞을 때까지(픽셀단위로) 작업했습니다. 그런 계획을 가졌을 때, 우리는 HTML을 디자인의 완벽한 픽셀 렌더링으로 만들기 위해 노력하기 시작했습니다. 만약 당신의 HTML 페이지가 CSS-준비상태(혹은 CSS-친숙한 상태)가 되기를 원한다면 그런 "보이는 것"에 대한 생각을 우선 집어 던지고 그 페이지가 가지고 있는 내용의 의미나 구조에 대해 생각하는 것으로 당신의 프로세스를 시작해야 합니다. 보이는 것은 중요하지 않습니다. 당신이 이 문장에 기절해서 쓰러지기 전에, 설명을 하겠습니다. 잘 구조화된 HTML 페이지는 어떤 것으로도 완벽하게 보여질 수 있답니다. CSS Zen Garden은 HTML 페이지가 진짜 어떤 것으로도 보여질 수 있다는 것을 증명하여 웹디자인의 혁명을 일으켰습니다. 이 CSS Zen Garden이 우리를 CSS가 단순한 HTML 페이지가 어떤 식으로도 표현할 수 있게 한다는 것을 알 수 있도록 해주었습니다. HTML은 더이상 단순히 컴퓨터 모니터를 위한 것이 아닙니다. 당신이 포토샵이나 파이어웍스로 만든 훌륭한 화면은 PDA나 핸드폰이나 청각 스크린 리더 같은데서는 전혀 동작 안 할 수도 있습니다. 그렇지만 잘 구조화된 HTML 페이지는 어디로든 갈 수 있고, 어느 인터넷 가능한 장비에서 동작하고, CSS 스타일 시트로 장비에 최적화 된 방식으로 스타일 될 수 있습니다. 생각을 시작 하세요 시작점은 구조적입니다. 몇몇 사람은 의미적이라고도 합니다. 이 용어들의 의미는 당신이 연관된 의미의 블록으로서, 더 간단히 콘텐츠 블록으로서 당신의 콘텐츠를 생각할 필요가 있다는 것입니다. 당신의 다양한 콘텐츠 블록이 사용될 목적에 대해 생각하십시오. 그 다음에 당신 콘텐츠의 의미와 목적에 따른 HTML 구조를 설계하십시오. 당신이 앉아서 당신이 웹페이지에서 원하는 구조적인 조각 조각들을 계획했다면, 이런 것처럼 될 수 있을 것입니다. heading with logo and site name main page content global site navigation subsection navigation search form utility area with shopping cart and check out footer with legal stuff HTML 페이지에 구조적 문맥을 제공하는데 사용되는 일반적인 엘리먼트는 div 입니다. 페이지의 구조적 부분을 위한 id를 할당한 div 엘리먼트를 사용하십시오. 당신의 주요 구조적 콘텐츠 블록은 이렇게 될 수 있을 것 입니다: <div id="header"></div>
<div id="content"></div>
<div id="globalnav"></div>
<div id="subnav"></div>
<div id="search"></div>
<div id="shop"></div>
<div id="footer"></div> 이건 레이아웃이 아니고, 구조입니다. 이것은 콘텐츠 블록으로 정보를 의미적으로 체계화 한 것입니다. 일단 당신이 구조에 필요한 것을 이해하면, 적당한 컨텐츠를 페이지의 적당한 부분에 추가하는 것은 자동으로 됩니다. div는 심지어 다른 div까지 어떤 것이든 포함할 수 있습니다. 당신의 주된 컨텐츠 블록은 당신의 페이지 헤딩, 문단, 이미지, 테이블, 목록 같은 것들을 만드는데 필요한 HTML 엘리먼트를 포함할 것입니다. 연관된 컨텐츠의 블록의 관점에서 우선 생각하는 것을 통해 당신은 이제 페이지의 어디에서나 당신이 원하는 어떤 방식으로도 위치시키고 스타일 할 수 있는 구조적 HTML 엘리먼트를 가지게 되었습니다. 당신의 HTML에서 각 컨텐츠 블록은 페이지에 개별적으로 위치되거나 색상, 폰트, 마진, 배경, 패딩, 정렬 등을 지정할 수 있습니다. 좋습니다. 지금입니다. 당신은 마침내 레이아웃에 대해, 당신의 사이트의 "보여지는 것"에 대해 생각할 준비가 되었습니다. 예를 들어 globalnav는 왼쪽이나 오른쪽에 수평 컬럼이 될 수도 있고, 헤더 밑에 바로 수평으로 올 수도 있습니다. 이것은 어느 위치나 어느 모양이나 될 수 있습니다. 문맥적 셀렉터는 아름다운 것입니다. id 속성을 사용하여 당신의 구조적 컨텐츠 블록을 셋업하는 것은 문맥적 셀렉터를 위한 CSS-준비상태를 만들어 줍니다. 이렇게 id를 가진 div들은 헤딩인지 목록인지 이미지인지 링크인지 아니면 문단인지 페이지의 개별적인 엘리먼트를 위한 정확하고 적절한 셀렉터를 쓸 필요가 있는 문맥을 만듭니다. 예를 들어, #header img라고 쓰면 #content img 와는 완전히 다른 속성이 적용됩니다. 또 다른 예는 당신이 페이지의 다양한 부분에서 #globalnav a:link, or #subnav a:link, or #content a:link. 같은 방법으로 링크를 구분할 수 있다는 것입니다. 또는 #content p and #footer p를 이용하여 centent와 footer에서 다른 방법으로 문단을 보여줄 수도 있습니다. 구조적인 관점에서 당신의 페이지는 이미지와 링크, 리스트, 문단을 포함하고 있습니다. 이 엘리먼트는 렌더링을 위해 어떤 인터넷 장비를 사용하던지 간에, 어떤 스타일 시트를 사용하던지 간에 상관없이 남아있습니다. 조심스럽게 구조화된 HTML 페이지는 아주 심플하고 군더더기 없습니다. HTML의 각 속성은 논리적으로 구조적 목적을 위해 사용됩니다. 문단을 들여쓰기 하기 위해 진짜 인용문이 아닌 곳에 blockquote 태그를 사용하는 것 대신에, 그냥 단순히 margin을 이용해 들여쓰기 한 p 태그를 사용할 수 있습니다. p는 구조고 margin은 보여지기 위한 선택입니다. 전자는 HTML에 속해있고 후자는 CSS에 속해있는 겁니다. 잘 구조화된 페이지는 태그 안에 보여주기 위한 속성을 거의 쓰지 않은 HTML 엘리먼트를 사용합니다. 코드는 간결합니다. <table width="80%" cellpadding="3" border="2" align="left"> 를 쓰는 대신에 단순히 HTML에 <table> 만 쓰면 됩니다. table 엘리먼트를 위한 보여지는 것의 규칙은 CSS로 이동됩니다. 당신은 CSS를 가진 테이블에 당신이 원하는 어떤 모양도 만들어낼 수 있습니다. 그렇지만 구조적인 관점으로 테이블은 단지 테이블이지 그 이상은 아닙니다. 기본 컨셉을 가지고 그것을 실행해 봅시다. 이 기본 구조 컨셉화는 컨텐츠 블록을 위한 당신의 특정한 요구에 적합하게 커질 수 있을 겁니다. 당신이 CSS 스타일 페이지를 살펴본다면, div 속성이 종종 다른 여러개의 div 속성을 포함하고 있다는 것을 알게 될 것입니다. 당신은 "내용을 포함한" div, 또는 "div를 감싸는" div와 다른 타입의 포개는 div들을 볼 수 있습니다. 아래를 보세요. <div id="navcontainer"> <div id="globalnav"> <ul>a list</ul> </div> <div id="subnav"> <ul>another list</ul> </div> </div> 이 예제와 같이 포개지는 div 엘리먼트는 구조적으로는 두개의 리스트일 뿐인 것을 표현하는데 CSS 규칙을 위한 많은 옵션을 가능하게 합니다. 예를 들어 #navcontainer와 #globalnav를 보겠습니다. #navcontainer 규칙은 중앙 정렬인데도 #globalnav 규칙은 왼쪽 정렬일 수 있습니다. 그리고 물론, 구조적 문맥에 사용된 #globalnav ul 이나 #globalnav li 을 위한 표현도 설정할 수 있습니다. #subnav리스트를 위한 규칙 또한 보여지는 관점에서는 완벽하게 다르게 할 수 있습니다. 대체 부분 다음 표는 친숙했던 HTML을 대체할 수 있는 동일한 속성의 CSS를 보여줍니다. HTML attributes and the equivalent CSS properties HTML Attributes CSS Properties Notes align="left"
align="right" float: left;
float: right; With CSS anything can be floated: images, paragraphs, divs, headings, tables, lists, etc. When you float anything, be sure to assign a width to the element you floated. marginwidth="0" leftmargin="0" marginheight="0" topmargin="0" margin: 0; With CSS, margin can be set for any element, not just the body element. More importantly, margins can be set individually for the top, right, bottom and left of any element. vlink="#333399" alink="#000000" link="#3333FF" a:link #3ff;
a:visited: #339;
a:hover: #999;
a:active: #00f; In HTML, link colors were set as an attribute of the body tag and applied uniformly to every link on the page. Using descendant selectors in CSS, link colors can be set to different values in different parts of a page. bgcolor="#FFFFFF" background-color: #fff; In CSS, background-color can apply to any element, not just body and table. bordercolor="#FFFFFF" border-color: #fff; Any element can have a border, the colors of which can be set individually for top, right, bottom and left if desired. border="3"
cellspacing="3" border-width: 3px; With CSS, any element can have a border. Borders can be set uniformly as you see them in the table on this page, or the size, style and color of borders can be set individually for the top, right, bottom and left (or any combination thereof) of any element. When setting the borders for tables, use the table, td or th selectors. When setting the spacing for tables, use the table, td, and th selectors. If you want a single border line between adjacent table cells, use border-collapse: collapse; Border can replace hr when used only as border-top or border-bottom on an element. A rule for border-right and border-bottom can simulate a drop shadow. <br clear="left">
<br clear="right">
<br clear="all"> clear: left;
clear: right;
clear: both; Many two and three column layouts use float to position elements on a page. If part of your presentation depends on background colors or images behind floated elements, you may want to use clear. See the references for "Understanding how Float Behaves" following this chart. cellpadding="3"
vspace="3"
hspace="3" padding: 3px; With CSS, any element can have padding. Padding can be set uniformly or individually for the top, right, bottom and left of any element. Padding is transparent, so background-color or background-image will shine through.

간단합니다.

그냥 클래스이름을 특정 클래스이름으로 짓지말고
. 도 # 도 붙이지 말고 깔끔하게 input 을 쓰시면 됩니다.
뒤에는 똑같이 스타일 지정하시고요.


예를들자면 이렇게 되죠.
(아래는 CSS 파일에서의 기준입니다.)

/* Input Style Definition */
.inputTypeText {}
.inputTypeText:hover,
.inputTypeText:focus {}
.inputTypeTextArea {background:url(../images/form-field-bg.gif);}


맨끝에는 textarea 도 적용해보았습니다.^^

display 스타일 속성은 block element를 inline element로 혹은 inline element를 block element로 변환시켜 준다. 아래의 소스파일과 출력화면을 보면 a 태그 element는 원래 inline형인데 display:block; 라고 스타일 속성을 지정해 block형으로 바꾸었고 div 태그 element는 원래 block element인데 display:inline; 라고 스타일 속성을 지정해 inline형으로 바꾸어 줬다. 또한 display:none; 라고 지정해주면 그 element는 출력화면에 나타나지 않게 된다. 화면만 나타나지 않을 뿐만 아니라 원래 없는 것처럼 영역까지 사라지게 된다. (소스) <head>
<title> CSS 속성 익히기 </title>
<meta http-equiv="content-type" content="text/html;charset=euc-kr"/>
<style type="text/css">
/*display는 block, none, inline 세가지를 가지고 있다. */
a {
display:block; /*inline level elem을 block level elem으로 바꾸어 준다.*/
background:red;
}
div {
display:inline; /*위와 반대 역할, block를 inline로 바꾸어 준다.*/
background:yellow;
}
</style>
</head> <body>
<p>검색엔진 사이트 <a href="www.naver.com" color=blue>네이버</a>로 연결됩니다.</p>
<div>첫번째 블럭 영역</div>
<div>두번째 블럭 영역</div>
</body> (출력화면)

a 태그가 block형이 되어 배경색깔인 붉은 색이 글자공간을 넘어서 쭈욱 길어지게 되었고 div 태그는 inline형이 되어 글자공간에만 노란배경색이 들어가게 되었다.

디자이너 Ross Johnsson의 디자인 블로그 사이트 3point7designs에서 10개의 화면용 폰토 설정 지침인 10 Examples of Beautiful CSS Typography and how they did it…을 선보였다. CSS의 기본 타이포 스타일을 토대로 모든 기종의 컴퓨터와 OS에 탑재되어 있는 안전 폰트를 이용하여 글자 주위가 픽셀단위로 파괴되지 않고 가장 미려하게 보이는 셋팅을 기준으로 한 것.

[update 03.08.2008]
1. 이메일 주소 활용

G메일에는 기본적으로 제공되는 xxx@gmail.com 주소 외에도 다음과 같이 여러가지로 변형해서 사용 할 수 있습니다. 먼 저 + 표시를 넣어서 주소를 만들수 있는데요. xxx+spam@gmail.com 또는 xxx+shopping@gmail.com 처럼 기본 아이디 뒤에 "+"와 함께 다른 단어를 조합해도 xxx@gmail.com과 동일한 주소로 취급됩니다. 이 걸 이용해서 쇼핑몰등에 가입할때는 xxx+shopping으로 가입하고, G메일의 필터설정에서 xxx+shopping에서 오는 모든 이메일은 자동으로 shopping이라는 라벨이 붙게하고 보관처리 하는등 받은편지함을 보다 편리하게 관리 할 수 있습니다. 만 약 가입하려는 웹사이트에서 "+" 표시가 붙은 이메일을 받아들이지 않는 경우에는 xxx.shopping@gmail.com이나 x.xx.shopping@gmail.com 등 아이디 아무곳에서 "."을 섞어서 등록을 해도 이메일은 동일하게 xxx@gmail.com으로 들어옵니다. 두번째로, 기본적인 주소 xxx@gmail.com 외에 xxx@googlemail.com을 같은 주소로 사용 할 수 있습니다. 사이트마다 "+"나 "." 사용하는 것이 번거로울 경우 스팸이 의심되는 사이트에 이렇게 xxx@googlemail.com으로 등록하고 여기로 오는 메일은 자동으로 스팸처리되게 하면 편리합니다.
2. RSS로 구독하기

이메일을 RSS로 구독하는게 조금 낮설게 느껴지는 것이 사실이지만, 메일링리스트나 뉴스레터처럼 답장 쓸 필요없이 바로 읽고 폐기처분하는 것들은 RSS로 구독해서 보는 것도 괜찮은 것 같습니다. 먼저 RSS로 구독하고 싶은 특정 이메일 종류에 "newsletter" 같은 라벨적용 작업을 하고.. (한글 라벨은 안되는것 같습니다.) https://mail.google.com/mail/feed/atom/라벨이름 -> 라벨이름 자리에 만들어 놓은 라벨이름을 입력하고 구독하면됩니다. 그런데.. G메일을 RSS로 구독하기 위해서는 인증을 요구하기 때문에 대부분의 피드리더에서 사실 지원을 안합니다. (대표적으로 구글리더.. ;;) 한RSS도 지원을 안하는것 같고, 파이어폭스의 라이브북마크, Netvives나 FeedDemon, NetNewsWire 등이 지원을 하네요.. 파 이어폭스의 라이브북마크 같은 경우 G메일에 로그인만 되면 계속해서 북마크도구모음에서 체크 할 수 있고, about:config 페이지에서 browser.bookmarks.livemark_refresh_seconds를 원하는 초단위로 설정해 놓으면 자동으로 그 시간마다 업데이트하기 ?문에 사용하기 가장 편한것 같습니다. 이외에 특정 라벨 말고도.. http://mail.google.com/mail/feed/atom/ -> 최근의 읽지 않은 메일을 구독하는 주소입니다. http://mail.google.com/mail/feed/atom/unread/ -> 시간에 구애받지 않고 읽지 않은 메일은 모두 받을 수 있습니다.
3. 필터 설정 보낸사람 (From) 필드에 주소를 입력할때 특정 도메인으로부터 오는 모든 편지를 필터링하고 싶으면, *를 사용하면 됩니다. *@naver.com을 넣으면 naver에서 오는 모든 편지가 필터링됩니다. 보낸사람 (From) 필드에 여러개의 주소를 "OR" 연산자를 사용해 필터링 할 수 있습니다. 예) spam1@naver.com OR spam2@naver.com 첨부파일 종류도 filename:type을 검색어 필드에 넣어서 필터링 가능합니다. 만약에 .doc 파일이 들어간 이메일을 따로 보관하고 싶으면 검색어 필드에 filename:.avi를 입력하면됩니다. 이외에 보다 많은 필터 관련 연산자는 G메일의 고급검색 사용 페이지를 참조하세요.
4. 첨부 금지된 파일 보내기 많 은분들이 G메일을 싫어하는 이유중에 하나가 바로 .exe, .dll, .com 같은 실행파일을 못보내는 문제때문인데요.. 실행파일을 .zip 파일로 압축을 해도 온라인 스캐너에서 실행파일이라고 금지시키기 때문에 무척 짜증나는 문제입니다. 다음과 같은 꽁수로 번거롭긴 하지만 실행파일을 보낼수 있습니다. 파일의 확장자를 바꾸면 됩니다. a.exe 파일일 경우 a.exe.virus나 a.exe.pdf 처럼 확장자를 바꿔서 보내면 됩니다. zip 파일 대신 winrar를 이용해서 .rar로 압축하거나 7zip을 사용해서 .7z로 압축해서 보내면됩니다. 워드나 파워포인트 문서를 만들어서 거기에 실행파일을 첨부해서 보내면 됩니다. 이 밖에 G메일에서 허용된 용량인 20MB 이상의 파일을 보내거나 받을 사람이 많은 경우 YouSendIt이나 MediaFire 같은 파일호스팅 서비스를 이용해 먼저 파일을 업로드하고 링크를 첨부하는 것이 좋습니다. 덧붙여서.. 첨부 파일을 올리는데는 시간이 오래 걸리니까, 파일을 먼저 올리기 시작한 후에 메시지를 작성하는 것이 좋겠죠.. ^^;
5. 숨겨진 단축키 무슨 이유때문인지 몰라도 G메일에서는 삭제(Delete) 명령을 공식적인 단축키에 포함시키지 않았습니다. 하지만 Shift + 3 키를 누르면 메시지를 삭제 할 수 있습니다. (특정 운영체제나 브라우저에서는 작동하지 않을 수 있습니다. 제가 사용하는 파이어폭스2에서는 잘 작동하네요.) G메일을 빠르게 쓰는데 기본이 되는 기본적인 단축키와 콤보키 활용은 구글 도움말에 잘 나와있습니다. 그리고 라벨도 단축키로 대체 할 수 있는데요.. 예를들어 받은편지함의 읽지 않은 메시지를 검색 할 때 검색창에 label:inbox label:unread를 입력해서 검색하는데, l:inbox l:unread로 검색해도 동일한 결과를 보여줍니다. 라벨 명령 뒤에 붙는 쿼리도 단축키로 가능한데, 다음과 같습니다. ^b chats
^f sent mail
^i inbox
^k trash
^r draft
^s spam
^t starred messages
^u unread mail 예를 들어.. l:^i l:^u로 하면 l:inbox l:unread와 동일한 결과가 나옵니다.. ^^
6. 파이어폭스 확장기능

Better Gamil 2 - 유명한 G메일용 그리즈몽키 스크립트 몇개를 묶어서 확장기능으로 만든겁니다. G메일을 파이어폭스에서 주로 사용하신다면 적극 권장하는 파이어폭스 확장기능입니다. 주요 기능으로는.. 기본적으로 아웃룩 익스프레스에서 열리는 이메일 링크를 G메일로 보내기, 안전한 https 주소로 연결, 제목표시줄에서 받은편지함의 읽지 않은 편지 숫자를 먼저 보여주기, 키보드 매크로 지원, 구글리더와 통합, 메시지에 마우스 올릴때 롤오버 효과주기, 첨부파일 종류별 아이콘 다르게 표시하기 등등.. 이외에도 Gmail Blue와 Grays and Blues 스킨을 바로바로 바꿔서 쓸 수 있습니다.

Gmail Manager - 여러개의 G메일 계정을 한꺼번에 관리 할 수 있는 편안한 G메일 관리 확장기능입니다. 강병욱님이 만든 웹메일 알림이도 좋지만, G메일의 경우 스팸편지함도 같이 안읽은 메시지로 표시해줘서 저같은 경우는 네이버/다음/엠파스를 체크하는데 사용하고 있습니다.

Gspace - G메일의 넉넉한 용량을 FTP 사용하는 것 처럼 파일 저장 공간으로 활용 할 수 있습니다.

Gmail Search Extension - G메일을 파폭의 검색창에서 바로 검색 할 수 있습니다.
DragDropUpload - 파일을 드래그앤 드랍으로 G메일에 편리하게 추가 할 수 있습니다. 여러개 파일 올릴때 G메일 인터페이스는 솔직히 별로죠.. ;;

Customize Google - G메일의 광고제거, 보안접속, 스팸숨김 등등 몇가지 기능이 있습니다. G메일 뿐만 아니라 다른 구글 웹사이트에서도 사용 할 수 있는것이 장점

Gmail Skins - 한쪽에 날씨나 구글달력, 뉴스 같은 igoogle의 컨텐츠를 볼 수 있게 해주고, 피카사 웹앨범에서 이미지 넣기, 이모티콘/이미지/테이블/html 넣기, 첨부파일 아이콘을 종류에 맞게 변경하기, 받은편지함 색상 변경 등의 기능을 G메일 설정 화면에서 편리하게 제어 할 수 있습니다.
7. 그 밖에 다른 툴들..

GmailDrive - 윈도우에 Gmail Drive라는 가상 드라이브를 만들어줍니다. 탐색기에서 그냥 하드디스크 쓰듯이 편리하게 파일을 전송 할 수 있습니다. 맥용으로는 gDisk, 리눅스용으로는 GmailFS가 있습니다.

Gmail Notifier - 구글에서 만든 데스크탑 G메일 알리미입니다. 비슷한 툴로 Notifier2,GTray(윈도우 XP), GCount(맥), KCheckGmail(리눅스)이 있습니다.

Send To GMail - 컴퓨터에 있는 특정 파일을 바로 G메일로 보낼 수 있습니다.

You've Got Gmail - 종합 메신저 프로그램인 트릴리안에서 G메일을 확인 할 수 있습니다.

Gmail Icon Generator - 블로그나 웹사이트에 게시 할 수 있도록 G메일 아이콘을 만들어줍니다.
G메일 모빌 웹사이트 - 자바를 설치 할 수 있는 휴대폰이라면 gmail.com/app를 방문하시고, WAP으로 서핑이 가능하면 m.gmail.com을 사용하면됩니다.

Fon Gmail Uploader - 컴퓨터에 저장되어 있는 아웃룩 등의 로컬 메일을 손쉽게 G메일로 옮겨줍니다. 메일당 2초 정도씩 걸린다고하네요.

MailStore - G메일에 저장된 이메일을 내 컴퓨터의 안전한 곳으로 저장 할 수 있습니다. 윈도우 전용 유틸리티이구요.. 비단 G메일 뿐만아니라 아웃룩, 썬더버드, POP/IMAP 계정을 지원합니다. 백업된 이메일의 검색과 중복 메일의 제거도 가능합니다.


어휴.. 쓰다보니까 생각외로 길어졌네요.. 아무튼 저처럼 G메일 쓰시는 분들에게 많은 도움이 됐으면 좋겠네요.. :)