하늘 아래 세상 이야기.

- Install files & The Code

지도 HTC 서비스를 위해서는 몇가지 파일이 필요합니다.
     1. [ bindings.xml ]- FireFox 용 HTC binding file
     2. [ moz-behaviors.xml ] - FireFox 용 HTC behaviors
     3. [ rainmap.htc ] - 레인맵 HTC 파일
     4. 당 서비스는 비상업용 사이트에서는 이용가능하나 상업용 사이트는 사용을 불허합니다.

<style>

.rainmap {

    behavior: url(/HTCCSS/rainmap.htc); /* for IE */

    -moz-binding: url(/HTCCSS/bindings.xml#rainmap.htc); /* for FireFox */

}

</style>

- Yahoo Map

야후 맵을 가져오기
     . 장점 : 검색정보가 아주 좋음, 위성 지도가 지원됨(성능은 별로)
     . 단점 : 위성 지도가 별로 선명 하지 않음, 지도 색상이 좋음(내생각)

    <div class="rainmap">

<m_type data='Y' ></m_type>

<m_zoom data='15' ></m_zoom>

<m_view data='1' ></m_view>

</div>

- Google Map

구글 맵을 가져오기

     . 장점 : 위성 사진이 선명함
     . 단점 : 한국 지도가 거의 사용이 불가함(쓸모가 없음)

<div class="rainmap">

<m_type data='G' ></m_type>

<m_zoom data='15' ></m_zoom>

<m_view data='1' ></m_view>

</div>

- Naver Map

네이버 맵을 가져오기
     . 장점 : 도로 정보가 좋음
     . 단점 : 위성 지도가 없음. 한국 지도만 지원됨

    <div class="rainmap">

        <m_type data='N' ></m_type>

        <m_zoom data='15' ></m_zoom>

        <m_view data='1' ></m_view>

    </div>

- Code Explain

기본 태그의 사용 규칙은 다음과 같습니다.
     . 구조 : <tag data='value' ></tag>
     . 주의 : <tag data='value' /> // 이런 방식은 FireFox 에서 안됨    

<div class="rainmap" style="width:500px;height:300px" > // 지도의 크기 지정

<m_type data='N' ></m_type> // 지도 API 서비스 회사 (N: 네이버, G : 구글, Y : 야후)

<m_zoom data='15' ></m_zoom> // 확대 레벨 (1 - 20)

<m_view data='1' ></m_view> // 0 : 지도, 1 : 위성지도, 2, 하이브리드 지도

<m_lat data='375559080' ></m_lat> // 위도 37.5559080 X 10000000

<m_lon data='1269706150' ></m_lon> // 경도 126.9706150 X 10000000

</div>

rainhtcMAP_API.zip

HTC for rainEditor v 10(위즈윅 웹편집기)

- Install files & The Code

- 짧은 메모형 에디터

- 단순형 에디터

- 무첨부 에디터

- 기본형 에디터

- 고급형 에디터

invalid-file

HTC for OFCJS
- (Open Flash Chart for Javascript)

- Install files & The Code

- [ Charts ] - Data

- [ Charts ] - Bar Chart

- [ Charts ] - Bar Chart 2

- [ Charts ] - Bar Chart Glass

- [ Charts ] - Bar Chart 3D

- [ Charts ] - Bar Chart Sketch

- [ Charts ] - Bar + Line Chart

- [ Charts ] - Pie Chart

- [ Charts ] - Scatter Chart

invalid-file

XHTML1.0 와 XHTML1.1의 차이

HTML4.01의 특징
HTML은 웹에 필요한 기본적인 항목들을 DTD를 활용하여 선언하여 놓고 그에 따라 문서를 작성하는 방식입니다. 즉 문서를 만드는데 필요한 도구들의 집합이라고 볼수 있습니다. 확장이 불가능하지만 정보를 보여주고 표현하는데에는 문제점이 없을정도로 확장되어있습니다.

XML1.0 (Extensible Markup Language)
XML의 기본 배경은 SGML에서 가장 간단하고 손쉽게 정보의 정의를 선언할수 있도록 한 언어로 자유롭게 정보를 확장할수 있습니다.

XML의 특징
XML 은 특별한 형식을 가지고 있지는 않습니다. 하지만 작성된 웹문서를 재활용할수 있는 방안들이 많습니다.(XST , Xpath , XLink 등) 이유는 만들어진 계기 자체가 정보를 작성함에 있어 간단하고 손쉽게 작성할수 있도록 하기 위해 HTML처럼 미리 정의해 놓은 엘리먼트가 없기 때문입니다. 그렇기 떄문에 정보를 담기에는 최적의 환경을 제공합니다. 하지만 반대로 말한다면 정보가 어떠한 의미로 어떠하게 사용해야 하는것인지에 대해 정확하게 선언해야 합니다.(DTD를 활용)

XHTML1.0 (The Extensible HyperText Markup Language 1.0)
XHTML1.0은 부제가 곧 XHTML의 이름인 것과 같이 “확장이 가능한 웹문서” 라는 것 이며 XML의 데이터로서의 기능과, HTML의 표현이 가능하도록 하는 방법을 가장 큰 이슈로 발전하였습니다.

XHTML1.0의 특징
XML 의 DTD작성 방법을 이용하여 기본적으로 사용하는 XHTML DTD 와는 별개로 또 추가적인 DTD를 사용(확장/Extensible)하여 데이터로서의 새로운 정보의 분류와 수없이 많은 디바이스들에게 현문서의 정보양식 및 표준, 확장을 제시합니다.
각 엘리먼트는 어떠한 의미를 가지고 어떠한 방법으로 표현하는 가에 대한 것이 중점적으로 설명되며, 그것은 XHTML을 지원하는 모든 디바이스는 지켜야만 합니다.

XHTML1.1(Module-based XHTML)
XHTML1.1 은 부제와 같이 모듈을 기본으로 하는 XHTML입니다. XHTML을 추상적인 기준에 따라 분류하여 일정한 목적에 따라 필요 있는, 없는 정보를 분류하고 그에 따른 모듈화된 엘리먼트를 적용하도록 하는 방향으로 지원합니다.
모듈화를 기본으로 하기 떄문에 실제적으로 엘리먼트의 소개 보다는 모듈적인 부분에서 접근하게 됩니다. 엘리먼트의 의미 보다는 모듈의 사용처 및 모듈에 대한 설명, 그리고 그런 모듈을 만드는 방법(XHTML 모듈방법론 / XHTML™ Modularization 1.1 )을 소개하며 이런 방법론 및 기본이 되는 모듈을 총체적으로 XHTML1.1이라 칭합니다.

XHTML1.1의 특징
가 장 큰 기준은 사용하는 엘리먼트는 XHTML1.0과 크게 틀리지 않지만. XHTML1.1에서 추가된 루비요소(ruby) 와 가상모듈(Abstract Modules) 그리고 모듈화가 되어있는 MOD파일이 리스트화 되어있으며. 1.1은 이런 MOD를 가져오거나(include) 또는 베재(igone)하여 새로운 DTD를 생성하게 됩니다.

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

XHTML1.0와 XHTML1.1의 차이
XHTML1.0 (이하 1.0)와 XHTML1.1(이하 1.1)의 실제 엘리먼트의 차이는 거의 없습니다.(1.1에 루비요소만 추가) 즉 1.0을 사용하던 퍼블리셔는 1.1의 유효성 검사를 패스하는데는 큰 문제가 없습니다. 1.0으로 검사를 통과했다면 1.1도 당연하게 패스가 됩니다. 하지만 1.0와 1.1는 접근하는 개념이 틀리며 그것이 "가상모듈"입니다. 1.0을 사용할수 있다 라는 전제하에 아래의 설명을 보셔야 합니다.

루비요소(ruby)

가상(추상)모듈(Abstract Modules)

실제적으로 모듈이 된것이 아닌, 모듈이 된거 같은 의미를 가지고 있다 라는 뜻으로 모듈 이라는 말보다는 가상모듈 이라는 것으로 실제적으로 XHTML을 모듈화를 표현 하였다.

MOD(Module Definition)

모든 웹문서는 DTD에 의해 정의되고 브라우저에 의해 표현됩니다. 가상모듈 을 포함한 모든 DTD를 분해하여 하나씩의 모듈의정의를 내린 DTD언어로 된 문서입니다. 실제적으로 1.1의 DTD는 이런 MOD들이 모여서 새로운 DTD가 됩니다.

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

XHTML1.1로의 전환의 이유

W3C에서는 이유를 아래와 같이 설명하고 있습니다.

“단 순히 웹 문서에만 사용되던 HTML이 다양한 분야와 기기(모바일 기기, 디지탈 TV 등)에 점점 더 많이 적용되고 있는데 이들 각각은 서로 요구하는 조건이나 구현상의 한계가 다르므로 기존의 규격을 일괄적으로 적용시키기가 어렵다.”

“이 런 문제를 해결하기 위해 도입된 모듈화를 통해서 서비스나 기기를 디자인할 때 표준에 맞게 만들어진 블록을 사용하고, 표준에 맞는 방법으로 어떤 블럭을 사용했는지 알려주는 방식으로 해당 기기가 어떤 모듈을 지원하는지 컨텐츠 커뮤니티(content community)에 명확하게 알려줄 수 있다. 그러면 컨텐츠 커뮤니티는 필요한 특정 모듈을 지원하는 이미 만들어진 기반(installed base)에만 신경을 써서 컨텐츠를 만들어낼 수 있다.”

“표준화된 방식을 사용함으로써 소프트웨어는 기기에 맞게 컨텐츠를 처리할 수 있고, 기기는 필요한 모듈을 처리하기 위한 소프트웨어를 자동으로 불러올(load) 수 있게 된다.”

“또한, 모듈화와 XML의 확장성을 이용해서 XHTML 표준을 어기지 않고도 XHTML 문서의 레이아웃과 디자인의 확장성을 높일 수 있다.”

즉 일괄적인 문서에 디바이스를 맞추는것이 아닌 애초에 디바이스를 고려한 웹문서를 제작할수 있도록 하는 것을 기본 목표로 합니다. 불필요한 정보와 디바이스에 따른 정확한 컨덴츠를 지원하여 표준이라는 이름에 더 맞도록 지원하도록 하는것을 기본으로 합니다. 또한 XHTML이라는 장점으로 브라우져에게는 확실하게 문서의 정보를 보여줄수 있다 라는 장점을 가질수 있습니다.

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

마치며
XHTML1.1 은 XML의 특징과 HTML의 특징을 가져온 XHTML1.0을 기반으로 하며 1.0이 웹문서의 표준화를 기본컨셉으로 하였다면 1.1은 표준화를 기본으로 하여 추상적인 정의로 엘리먼트를 모아서 새로운 모듈을 만들고 그런 모듈들끼리 모아서 사용자에게 효율적인 정보 제공을 위한 DTD 및 웹문서를 만들기 위해 만들어 진 언어입니다.

아직은 1.1이 이른 발전일지 모르지만, 이미 XHTML은 새로이 발전하고 있으며 1.1을 한단계 더 업한 XHTML2.0 에서는 모듈화 뿐만이 아니라 좀더 구조적으로 변화하고 표현하는것이 적어지는 확실한 구조적인 모습으로 새로이 변모하고 있습니다. 1.1을 좀더 확실하게 이해 하고 사용할수 있다면 새롭게 다가오는 웹문서의 미래에 좀더 유연하게 대처할수 있지 않을까 한번 생각해봅니다.

XHTML (Extensible Hypertext Markup Language)

W3C에서 설명하는 바에 따르면, "XHTML은 XML 응용으로서의 HTML 4를 다시 공식화한 것"이다. 두 가지 용어 모두가 다 생소한 독자를 위해 부연설명을 하면, HTML은 웹상에서 보일 수 있도록 작성자가 문서 내에 집어넣는 일련의 코드 (즉, 마크업 언어)들이며, HTML 4는 그것의 최신 버전이다. XML은 웹상에서 공유될 어떤 종류의 데이터를 정의하는 방법에 관한, 일련의 구조화된 규칙이다. 그것은 누구라도 특정한 목적을 위한 일련의 마크업 세트를 발명할 수 있으므로, "확장될 수 있는" 마크업 언어라고 불리는데, 모든 사람들이 그것을 사용하는 한, XML은 웹페이지의 표현을 묘사하는 것을 포함하여, 여러 가지 목적에 채택되고, 또 사용될 수 있다. 그러한 경우로, XML의 형태로 HTML을 다시 구성하는 것이 바람직하게 보였다. 그 결과가 바로, 웹페이지를 표현하기 위한 XML의 특별한 응용인 XHTML인 것이다.

XHTML은 실제로, HTML 4의 후속 버전이다. 비록 이것이 XHTML 1.0으로 불리지만, HTML 5라고 생각해도 좋을 것이다. XHTML에서는, 모든 HTML 4 마크업 태그들과 속성들이 계속 지원될 것이다. 그러나, HTML과는 달리, XHTML은 그것을 사용하는 누구에 의해서라도 확장하는 것이 가능하다. 이미 존재하는 것에 새로운 태그와 속성들이 정의되고, 추가될 수 있으며, 웹페이지 내에 콘텐츠와 프로그램을 삽입하기 위한 새로운 방법을 만드는 것도 가능하다. 외관상으로는, XHTML 파일이 다소 더 정교한 HTML 파일처럼 보인다.


장 점
W3C의 얘기를 다시 인용하면, 장점은 "확장성과 이식성"이다. 확장성이란, 웹 전달과 표현에 관한 새로운 아이디어가 생기면, 다음 버전의 HTML이나 브라우저의 지원을 기다리지 않고서도 즉시 구현할 수 있게된다. 새로운 태그들이나 속성들이 새로운 가능성들을 표현하기 위해 정의될 수 있으며, 수신 측의 일부 프로그램이 그것을 이해할 수 있고 그것들 상에서 동작할 수 있다고 가정하면, 이전에는 절대로 일어나지 않았던 웹페이지 상에 새로운 것들이 일어날 수도 있다. XHTML에 관한 특이한 확장 판들로는, 수학적인 표현, 벡터그래픽, 그리고 멀티미디어 애플리케이션 등이 예정되어 있다.

만약 확장성이 보다 복잡한 페이지와 더 큰 프로그램으로 가게 될 것 같으면, 웹페이지들이 이전에 비해 더 간단하게 만들어짐으로써 소형장치들이 그것을 처리할 수 있도록 하기 위한, 이식성에 관한 장점이 중요성을 갖는다. 이것은 이동형 장비와, 마이크로프로세서, 프로그램 및 소형 메모리가 내장된 가정용 제품들 들에서는 중요하다. XHTML은 마크업 복잡도에 몇 개의 수준을 정의하며, 각 문서의 시작부분에는 복잡도 수준을 나타낸다. 소형 장치들 내의 프로그램은 소형 프로그램과 메모리로도 처리할 수 있도록, 복잡도가 가장 낮은 수준으로 기술된 XHTML 파일들을 기대할 수 있다.


차이점과 특색
규격과 지침서를 읽으면 더 많은 내용을 알 수 있겠지만, 여기에서는 XHTML의 일부 특색과, HTML 4와의 차이점만을 기술한다.

XHTML은 코딩 규칙을 엄격하게 준수할 것을 요구한다. 특히, 그 중에서도, 태그를 열었으면, 닫는 태그도 반드시 사용해야하고, 모든 태그들은 소문자로 기술되어야한다. HTML은 표기에 관한 한 훨씬 덜 엄격했으며, 브라우저들은 이에 관해 더욱 관대한 경향이 있었다.

이것은 XHTML 파일이 HTML 보다 분주해지는 경향이 있을 거라는 것을 의미한다. 그러나, 그들은 코딩에 있어 더 많은 정돈을 엄격히 요구하므로 읽기에 반드시 어렵지만은 않을 것이다. 추가로, 주요 편집 및 파일 작성도구들은 아마도 읽기 쉽도록 페이지를 배치할 것이다.

XHTML은 콘텐츠와 스타일시트와의 결합에 관한 생각을 보다 구조적이고 개념적인 방법으로 그리고 그것을 표현하는 보다 창조적인 방법 등을 장려하는 듯하다.

XHTML은 문득 새로운 태그들을 생각해내고 추가하는 사람들, 그리고 브라우저나, 그것을 지원하는 다른 애플리케이션들을 개발하는 사람들을 위한 쉬운 방법을 제공할 것이다.

XHTML 규격은 현재 W3C의 실무초안 단계에 있다.

CSS의 display 속성은 해당 엘레멘트가 화면에 어떻게 보여지는지를 결정하는 역할을 합니다.
display 속성의 값은 다 따지면 19가지나 되지만, 실제로 자주 쓰이는 것은 inline과 block, inline-block, none 값이며, 이외의 것은 브라우저에서 지원하지 않는 것도 많기 때문에 불안정해서 사용되지 않는다고 하네요.

기본적으로 모든 요소들은 디폴트 display 속성이 지정되어 있으며 이를 자유롭게 변경할 수 있습니다. 예를 들면, 인라인 요소인 <span>요소에 display속성을 block으로 지정하면 <div>태그와 같은 역할을 하게 되는 것이죠.
사실 이번 기회에 책이나 인터넷을 찾아보고 조사하긴 했지만, 저도 실제로 사용하는 것은 위쪽의 다섯가지 정도밖에 안되는 것 같습니다.

display 속성 중에 주목할 만한 것은 table-cell 이라는 값인데요... 이게 테이블에서 <td>태그와 같은 속성을 가지게 해줍니다. 아시다시피 <td>태그는 기본적으로 상하 중앙 정렬이 됩니다.
레이아웃을 잡아보셨다면 아시겠지만, <div>태그는 상하 중앙정렬이 지원되지 않지요. 이럴 때 div태그에 display:table-cell; 속성을 주시면, 상하로 중앙 정렬이 가능하게 됩니다.
다만 이게 또 문제많은 IE에서 지원하지 않는다는 것이 참 아쉽습니다. -_-;;; (FF는 지원됩니다.) 레이아웃에서 상하 중앙정렬에 관한 포스트는 다음 기회로 미루기로 하지요.

아무튼 float 속성과 마찬가지로 display 속성을 잘 활용하면 CSS로 더 정밀한 레이아웃을 잡을 수 있습니다. 모르고 막 쓰던 display 속성을 이제는 제대로 알고 사용하는 것은 어떨까요?

최근 웹 2.0 시대에 들어서 RIA가 대세가 됨에 따라... 마치 플래시와 같은 동적인 UI를 구현하기 위해서 자바스크립트 개발의 중요성이 많이 부각되었습니다.
이러한 개발을 도와주는 도구로 각종 컴포넌트와 편리한 명령어를 담은 자바스크립트 프레임워크가 많이 개발되어 있습니다. 잘 알려진 자바스크립트 프레임워크로는 Prototype.js, Dojo Toolkit, MooTools, jQuery 등이 사용되고 있죠.

CSS에서 사용하는 다중 선택자(Multi Class)란 동일 엘리먼트에 여러개의 선택자(id, class)를 동시에 적용하기 위한 목적으로 여러개의 선택자를 사용하는 것을 말합니다.
CSS1에서 선택자의 개념이 사용된 후, CSS2에서 다중 선택자가 추가되어 사용되고 있는데요, CSS를 사용해 웹사이트를 개발하다 보면 다중선택자는 정말 편리한 존재입니다.

<style>
.foo { background:yellow; }
.bar { border:solid 4px red; }
.foo.bar { border-style: dashed; }
</style>

<div class="foo">foo</div>
<div class="bar">bar</div>
<div class="foo bar">foo bar</div>

아마 기존에 다중 선택자에 대한 자료를 찾아보셔서 알고 계신 분은 foobar 라는 단어가 익숙하실 지도 모르겠습니다. (웃음)
위의 코드는 다중 선택자를 적용하여 foo 클래스와 bar 클래스의 속성을 하나의 엘리먼트에 동시에 적용한 예제입니다. 또한 클래스를 붙여서 선언하게 되면 평소에는 적용되지 않다가 두 클래스가 동시에 적용될 경우에만 별도의 효과를 주는 것도 가능합니다.
이렇게 여러 개의 클래스를 하나의 엘리먼트에 적용하여 서로 다른 효과를 동시에 적용할 수 있고, 이 다중 선택자는 3개 이상도 사용이 가능합니다.
만약 클래스 내의 css속성이 겹친다면 뒷쪽에 선언된 클래스의 css속성을 우선하지만(덮어쓰기 효과) 만약 !important 가 속성에 포함되어 있을 경우 순서에 상관없이 해당 속성을 우선 적용하게 됩니다.

그래서 CSS개발하시는 분은 대부분 다중 선택자를 매우 유용하게 사용하고 있지만, IE6에서는 관련 버그가 존재하기 때문에 사용에 주의해야 합니다. (또 IE6이 문제입니다! -_-)


1. id와 class 를 동시 조합하여 이용시, 나중에 선언된 다중 선택자 구문 무시
이 부분은 NHN NULI의 css가이드를 참고하였습니다. IE6의 경우 id와 class를 다중 선택자로 적용할 때에 나중에 선언된 다중 선택자를 무시하는 버그가 존재합니다.

<style>
#id.class1{background:#f00;}
#id.class2{background:#0f0; width:200px;} /* Does not exist in the IE6 */
#id2.class2{background:#00f; width:200px;}
#id2.class3{background:#0f0; width:300px;} /* Does not exist in the IE6 */
#id.class3{background:#f00; width:300px; font-weight:bold;} /* Does not exist in the IE6 */
</style>
<div id="id" class="class1">class1</div>
<div id="id" class="class2">class2</div>
<div id="id2" class="class2">class2</div>
<div id="id2" class="class3">class3</div>
<div id="id" class="class3">class3</div>

원래 위의 예제에서는 그림처럼 보이는 것이 바른 렌더링입니다. 하지만 IE6에서는 예제에서 2, 4, 5번째 줄에 해당하는 부분을 무시하게 됩니다. 아래 이미지처럼요.

원래 코드
.foo { background:yellow; }
.bar { border:solid 4px red; }
.foo.bar { border-style: dashed; }
IE6이 인식하는 코드
.foo { background:yellow; }
.bar { border:solid 4px red; } /* border 속성 중 border-style 속성이 삭제됨 */
.foo.bar { border-style: dashed; } /* bar class의 border-style 속성이 오버라이딩됨 */

이를 이미지로 보여드리면 다음과 같습니다.

<style>
.foo { background: yellow; }
.bar { border: solid 4px red; }
.foo.bar { border-style: dashed; }
</style>
<div class="foo">foo!</div>
<div class="bar">bar!</div>
<div class="foo bar">foo bar!</div>

위에서 foo bar 라는 유명한 예제(?)를 보여드렸는데요, 이게 IE6에서 다중선택자의 버그가 있다는 것을 적나라하게 보여주고 있죠. 원래 bar class의 경우 border-style 속성이 solid임에도 불구하고 IE6에선 .foo.bar 를 .bar로 인식함에 따라 border-style이 dashed 로 모두 교체된 것을 확인할 수 있습니다. 1번 항에서 다루었던 버그도 이 버그의 영향이 겹쳐서 생긴 문제가 아닐까 하는데요, 정확히는 잘 모르겠습니다.
이 버그를 회피하기 위해서는 class를 붙여서 선언하는 다중 선택자를 사용하지 않는 것이 최선입니다. 하지만 CSS작성 중의 편의를 위해서 붙여서 선언해야 할 경우엔 뒤에 붙이는 class명을 겹치지 않도록 사용하는 것도 방법입니다.

기존
.dx.class {}
.dy.class {} /* 별도의 class로 인식되지만, IE버그로 dy.class{}만 인식 */
수정(버그 회피)
.dx.classx {}
.dy.classy {} /* 최종 class명을 다른 이름과 겹치지 않는 고유의 클래스명으로 사용 */

이렇게 수정하는 방법은 다중 선택자의 장점을 완전히 무시하는 비효율적인 방법이긴 하지만, 어쩌겠습니까... 이놈의 IE6이 도와주지 않는걸요...

물론, IE7은 위에 나타나는 다중클래스의 버그는 해결하였습니다. 하지만, 표준모드(HTML 4.01, XHTML 1.0)로 동작할 때에만 버그가 나타나지 않게 되어 있으며, Quirks mode DTD로 동작될 때에는 IE6과의 호환을 위해 (또는 미처 쿽스모드 엔진을 고치지 못했을 수도 있죠) 이 버그가 그대로 나타나도록 되어있습니다.

IE6은 언제까지 우리 UI개발자를 괴롭히게 될까요? ㅠ_ㅠ

Although you may not realize it, the Web is a multi-medium information source. No, I'm not talking about multimedia-- audio and video streams, for example-- but the actual medium through which the Web's content is conveyed to us. For the vast majority of users, the medium is visual: the monitors we use every day to display pages. But there are many who also turn to the medium of print, creating "hard copies" of pages using their laser printers.

However, the overwhelming aim of Web design is visual, and many Web page designs don't print out very well. Navigation bars, ad banners, and other such things clutter up printouts and make them much harder to read. How many times have you seen a page on the Web which has, off to one side, a link which says, "Click here for a printer-friendly version"?

There are certainly other media-- audio browsers and handheld devices are two such examples-- but the output medium which most concerns authors is still the printer. CSS2 offers a way to address this, giving authors the ability to create stylesheets which are medium-specific. This month, we'll look how you can style a single page for both screen (monitor) and print output, and provide an example you can try using Internet Explorer 5 for Windows, or MSIE 4.5 for the Macintosh.

Making the Association

There are a variety of ways to associate media-specific stylesheets to a document. The most familiar way is to use the LINK element and simply add the media attribute:

<LINK rel="stylesheet" type"text/css"
     href="print.css" media="print">

In the previous example, we see that the stylesheet print.css has been given a media of print; thus, its styles will be used only when the document is printed. These styles will have no effect on the display of the document when viewed using a monitor, audio browser, or any other non-printing device.

There are currently ten defined media types:

• all
• aural
• braille
• embossed
• handheld
• print
• projection
• screen
• tty
• tv

These media types are described in some detail in Chapter 7 of the CSS2 specification. The most important is all, which is the default value for any stylesheet which does not have a defined media.

There are other ways to assign media to stylesheets. For example, you can list one or more media types on an @import statement:

@import url(paged.css) print,projection;

Thus, the styles in paged.css will be used in both print and projection media, both of which are known as paged media. Multiple media can be specified for LINKed stylesheets as well. The following two statements are equivalent:

<LINK rel="stylesheet" type"text/css"
     href="print.css" media="print,projection">
@import url(print.css) print,projection;

There is one other way to apply media-specific styles: the @media rule. Here's an example:

<STYLE type="text/css">
@media print {
   BODY {font-size: 10pt; line-height: 120%; background: white;}
}
@media screen {
   BODY {font-size: medium; line-height: 1em; background: silver;}
}
</STYLE>

Restyling for Print

Let's now look at a real example of alternate-media stylesheets. In order for these examples to work, you'll need to be using MSIE5/Win or MSIE4.5/Mac, and it will be helpful (though not strictly necessary) if you have a printer handy. Navigator 4.x does not support alternate media on any platform, so it won't be much help with these examples.

First, let's assume a simple page of text with some various elements: paragraphs, headings, hyperlinks, and so on. This file is called latinesque.html, and we want to display it differently depending on whether it's on a monitor, or on paper. First we write a stylesheet for screen display (remember, there's no accounting for taste):

/* screen display styles */
BODY {color: silver; background: black;}
A:link {color: yellow; background: #333333; text-decoration: none;}
A:visited {color: white; background: #333333; text-decoration: none;}
A:active {color: black; background: white; text-decoration: none;}
H1, H2, H3 {color: #CCCCCC; background: black; padding-bottom: 1px;
    border-bottom: 1px solid gray;}

This will give us a page something like that shown in Example 1. Note the ad banner, which is a feature common to so many sites.

All right, now we need to decide how the printed page should look. We decide on a simple, conventional print style, without an ad banner, and so the stylesheet turns out like this:

/* print styles */
BODY {color: black; background: white;}
A:link, A:visited {background: white; color: black; text-decoration: underline;
   font-weight: bold;}
H1, H2, H3 {background: white; color: black; padding-bottom: 1px;
   border-bottom: 1px solid gray;}
DIV.adbanner {display: none;}

We've added the last style in order to get rid of the ad banner in the printed version. To get an idea of what this will look like, take a peek at Example 2. Realize that this is a screen approximation of a printout, but for the moment, it will do.

Now, to the top of the document, we add the following LINK elements:

<LINK rel="stylesheet" type"text/css"
     href="screen.css" media="screen">
<LINK rel="stylesheet" type"text/css"
     href="print.css" media="print">

Thus we get the document shown in Example 3, which has the screen appearance of Example 1 but the printed appearance of Example 2-- load it up in MSIE, print it out, and see what happens!

(If you'd like to see another example of print-media stylesheets in action, try printing out the CSS Support Grid.)

Just the Tip of the Iceberg

Of course, the simple examples I've provided are just a beginning. There is almost no limit to what can be done with alternate-media stylesheets. Using them appropriately is the key to creating pages which can be styled for regular screen output, printing, legible display on handheld devices, special styles for the blind, and much more. As browsers add support for more media, and more ways to set up media-specific styles, we'll return to this subject for more. Until then, try out some print-media stylesheets on your pages, and see how you can make your site better-- and more accessible-- than ever.

예전에 자바스크립트는 단순히 배경색을 바꾸거나 입력형식을 검사하는 등의 용도로 사용되었으나 지금은 DHTML과 결합하여 상당히 덩치가 커지게 되었다. 그래서 이제는 성능이라는 것을 고려해야 한다. 이번장에서는 자바스크립트의 성능을 향상시킬수 있는 일반적인 방법 3가지를 살펴보겠다.

개체들을 캐싱시켜라...

자바스크립트의 성능을 향상시킬수 있는 방법중 하나는 개체를 캐싱시키는 것이다. 다음과 같이 반복적인 작업을 수행하는 스크립트가 있다고 하자.
 

위의 예에서 document.images라는 개체는 여러번 불리워지고 있다. 각각의 루프가 돌때마다 document.images가 두번씩 읽혀지고 있다. 우리가 불러들여야 되는 것은 images 뿐이다. 하지만 여기서는 document를 거쳐서 images에 도달하고 있다. 이를 조금 개선해보자.
 

이와 같은 사용예는 document.all.someobject , document.layers.somelayer 등에 사용할 수 있다.

스크립트를 캐싱하라...

성능을 향상시키는 또 다른 방법은 스크립트를 통채로 캐싱시키는 것이다. 스크립트를 js파일에 저장하고 이를 사용하면 페이지 Reload나 두번째 방문시 이후는 캐시에서 이를 꺼내 사용하게 된다.
 

아래 이미지 두개를 이용해서 깨지지 않는 라운드형 박스를 만들어 보겠습니다.

invalid-file

<script language="javascript">
<!--
//팝업윈도우, 스크린 중앙에 위치, 다중 오픈 방지
var winname_1;
var openF = 0;
function popup(fileName, intWidth, intHeight, intLeft, intTop, vScrollbars, vResizable, vStatus){
        today = new Date();
        winName = today.getTime();

        var fileName, intWidth, intHeight;
        var screenWidth = screen.availwidth;
        var screenHeight = screen.availheight;

        if(intWidth >= screenWidth){ //스크린 상태에 따라 스크롤바 자동표시
                intWidth = screenWidth - 40;
                vScrollbars = 1;
        }
        if(intHeight >= screenHeight){ //스크린 상태에 따라 스크롤바 자동표시
                intHeight = screenHeight - 40;
                intWidth = intWidth + 20;
                vScrollbars = 1;
        }
        if(intLeft == 'auto' || intTop == 'auto'){ //스크린 중앙에 위치 시키기
                var intLeft = (screenWidth - intWidth) / 2;
                var intTop = (screenHeight - intHeight / 2;
        }
        var features = eval("'width=" + intWidth + ",height=" + intHeight + ",left=" + intLeft + ",top=" + intTop + ",scrollbars=" + vScrollbars + ",resizable=" + vResizable + ",status=" + vStatus + "'");
        if(openF == 1){
                if(winname_1.closed){
                        winname_1 = window.open(fileName,winName,features);
                }else{
                        winname_1.close();
                        winname_1 = window.open(fileName,winName,features);
                }
        }else{
                winname_1 = window.open(fileName,winName,features);
                openF = 1;
        }
        winname_1.focus();
}
//-->
</script>
<style type="text/css">

<body onload="popup('http://blog4u.kr','1024','668','auto','auto','0','0','0');" leftmargin="0" marginwidth="0" topmargin="0" marginheight="0">

<a href="javascript:popup('http://blog4u.kr','1024','668','auto','auto','0','0','0')"," onFocus="this.blur();">

<script>
var c=false;
function change() {
if ( c ) return;
document.userlogin.uid.style.backgroundImage="";
c=true;
}

var c2=false;
function change2() {
if ( c2 ) return;
document.userlogin.upw.style.backgroundImage="";
c2=true;
}
</script>

스크립트에 위를 추가하고...

<TR>
<TD align=middle height=20><INPUT onmousedown="return change();" onkeydown="return change();" style="BORDER-RIGHT: #999999 1px solid; BACKGROUND-POSITION: center center; BORDER-TOP: #999999 1px solid; FONT-SIZE: 12px; BACKGROUND-IMAGE: url(subpage/imgs/id.gif); BORDER-LEFT: #999999 1px solid; WIDTH: 120px; BORDER-BOTTOM: #999999 1px solid; BACKGROUND-REPEAT: no-repeat; FONT-FAMILY: Verdana, 굴림; HEIGHT: 20px" maxLength=6 name=uid></TD></TR>
<TR>
<TD vAlign=bottom align=middle height=24><INPUT onmousedown="return change2();" onkeydown="return change2();" style="BORDER-RIGHT: #999999 1px solid; BACKGROUND-POSITION: center center; BORDER-TOP: #999999 1px solid; FONT-SIZE: 12px; BACKGROUND-IMAGE: url(subpage/imgs/pw.gif); BORDER-LEFT: #999999 1px solid; WIDTH: 120px; BORDER-BOTTOM: #999999 1px solid; BACKGROUND-REPEAT: no-repeat; FONT-FAMILY: Verdana, 굴림; HEIGHT: 20px" maxLength=7 name=upw></TD></TR>

인풋쪽에 위처럼 설정하면 인풋배경이미지가 들어간다.
당연히 이미지 파일이 있어야 함.

애초부터 의식적으로 수정과 유지보수를 고려한 것이라면 좋았을 것이지만, 딱히 그런것은 아니고 단지 반복적인 프로세스를 통해서 경험적으로 형성된 결과이다.

모든 스타일시트를 열어보고, 확인해 볼 수는 없었지만 최근의 것들을 살펴보니까 나는 다음과 같은 순서를 가지고 있었다.

1. display
2. position
3. clear
4. float
5. width / height
6. margin / padding
7. border / background
8. color / font
9. align / etc

모질라의 CSS 순서 제안을 찾아봤는데 다행인지 요행인지 나의 작성순서와 크게 다르지는 않았다.

1. display
2. list-style
3. position
4. float
5. clear
6. width / height
7. padding / margin
8. border / background
9. color / font
10. text-decoration
11. text-align / vertical-align
12. white-space
13. other text
14. content

간단히 분석을 해보자면, 모질라의 제안이나 내 방식이나 레이아웃을 설정하는 것을 최우선으루 두고, 영역을 이루는 객체의 크기를 잡고, 텍스트 단위의 색과 모양, 정렬을 설정하는 형태가 된다. 조금 더 세세히 들어가면 유지보수를 위해서 수정이 자주 일어날 수 있는 속성들을 상대적으로 앞으로 배치하게 된다. 예전에는 디자인을 완벽하게 스타일시트로 분리하여 제작하는 경우가 없어 대부분 링크나 텍스트 컬러만을 다루는 정도여서 스타일시트의 분량이 적었고, 따라서 속성 하나당 한줄씩 잡는 코딩 방식을 썼지만 최근에는 분량이 많이 늘어나 한 스타일을 한줄로 이어 붙이는 방식을 많이 사용하는 것 같다. 그래서 가로로 스크롤이 생기거나 두줄 이상으로 이어지는 경우가 많은데 이런 경우 바로 수정할 속성이 비교적 앞쪽에 위치해 있는 것이 편리하다. 더불어, 속성명과 값을 붙이는 것보다 한 칸 띄우는 것이 가독성에도 좋고, 수정에도 용이한 것 같다. 다만, 최종적인 스타일시트의 경우 용량이 커질 수 있으므로 빈 칸을 모두 제거하여 한 줄로 만드는 CSS압축방식을 적용하면 좋을것 같다.

//이미지 용량체크
    var isFileChecked = false;
    var isImgFile = false;
    var isEnableFileSize = false;
    var maxSize = 1*1024*1024;       //1M
    function checkFileSize(uploadImgObj){
        //
        var enableUploadFileExt=new Array("bmp","jpg","jpeg","gif");
        var uploadImgObjName = uploadImgObj.value;
        var startPoint = 0;
        var isImageFile = false;

        //File 체크확인
        isFileChecked = true;

        if(uploadImgObj.value == ""){
            return;
        }

        //이미지파일 확장자 체크
        for(var i=uploadImgObjName.length-1; i>=0; i--) {
            if(uploadImgObjName.charAt(i) == ".") {
                startPoint = i;
                break;
            }
        }
        var uploadImgObjExt = uploadImgObjName.substring(startPoint+1,uploadImgObjName.length);

        for(i=0; i<enableUploadFileExt.length; i++) {
            if(uploadImgObjExt.toLowerCase() == enableUploadFileExt[i]){
                isImageFile = true;
                break;
            }
        }
        if(!isImageFile){
            alert("이미지 파일이 아닙니다.     ");
            uploadImgObj.value="";
            isImgFile = false;
            return;
        }else{
            isImgFile = true;
        }

        //파일용량 체크
        var img = new Image();
        img.dynsrc = uploadImgObj.value;
        var filesize = img.fileSize;
        //alert(filesize);
        if(filesize > maxSize) {
            alert("파일업로드 허용용량 "+maxSize/1024+"Kbyte를 초과되었습니다.     ");
            isEnableFileSize = false;
        }else{
            isEnableFileSize = true;
        }
        //
    }

    //업로드승인체크
    function goFileUploadCheck(){
        if(!isFileChecked){
            alert("업로드할 파일을 지정해주셔야 합니다.     ");
            return;
        }

        if(!isImgFile){
            alert("이미지 파일이 아닙니다.     ");
            return;
        }

        if(!isEnableFileSize){
            alert("파일업로드 허용용량 "+maxSize/1024+"Kbyte를 초과되었습니다.     ");
            return;
        }
    }

<input id="txtUploadFile" style="width: 100%" type="file" size="40" name="NewFile"  onchange="javascript:checkFileSize(this);" />
 <input type="button" value="Upload" onclick="javascript:goFileUploadCheck();" />

추신 : 반드시 이것으로 만족하여 프로그래밍 하지 말고 반드시 서버단에서도 validation을 해주어야 한다!!!

그래도 발생하는 에러의 90%는  UI단에서 막을수 있다.