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

예문을 8가지나 들어 데모페이지를 제공하고 있으므로 누구나 쉽게 가장 마음에 드는 데코레이션 기법을 사용해 볼 수 있다.
by Anna 안나 2008. 11. 13. 00:59
오호..이거좀 실용적인데.

<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>


이런 기발한 :-)
by Anna 안나 2008. 11. 9. 18:43
본 글은 프라데이에 의해 작성되었습니다.



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

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

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


음..뭐 차례차례 수정하며 추가할 예정이다.^^
by Anna 안나 2008. 11. 9. 18:42
오페라가 빠르다고 하는데 jwBrowser보다는 좀 불편하네요.

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

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




한글로 바꾸는 방법

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




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




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




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







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


그럼, 즐거운 웹써핑하시길 바랍니다.^^
by Anna 안나 2008. 11. 9. 18:27
정확한 문서 구조 준수
문서의 루트 요소는 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;가 아니라 &만을 인식하기 때문이다.
by Anna 안나 2008. 11. 9. 15:39
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>
by Anna 안나 2008. 11. 9. 15:37
"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)
by Anna 안나 2008. 11. 9. 15:34
해외 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
by Anna 안나 2008. 11. 9. 15:33
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. 경고를 뜻하는 붉은색을 아이콘에 사용하라. 시각적 판단이 쉽도록 하기 위해 아이콘을 사용할 때에는 눈에 띄는 붉은 색 계통을 주로 사용하는 것이 좋다는 것입니다. 메타포를 이용한 아이콘이 주류를 이루는 우리나라 실정에는 조금 뒤떨어진 얘기입니다만, 그 취지는 충분히 이해가 가능하실 거라 믿습니다.
by Anna 안나 2008. 11. 9. 15:32
일찍 일어나는 새가 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.
by Anna 안나 2008. 11. 9. 15:31
간단합니다.

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


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

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


맨끝에는 textarea 도 적용해보았습니다.^^
by Anna 안나 2008. 11. 8. 23:45
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형이 되어 글자공간에만 노란배경색이 들어가게 되었다.
by Anna 안나 2008. 11. 8. 19:15
디자이너 Ross Johnsson의 디자인 블로그 사이트 3point7designs에서 10개의 화면용 폰토 설정 지침인 10 Examples of Beautiful CSS Typography and how they did it…을 선보였다. CSS의 기본 타이포 스타일을 토대로 모든 기종의 컴퓨터와 OS에 탑재되어 있는 안전 폰트를 이용하여 글자 주위가 픽셀단위로 파괴되지 않고 가장 미려하게 보이는 셋팅을 기준으로 한 것.
by Anna 안나 2008. 11. 2. 00:24
체크박스와 라디오버튼을 이미지로 바꾸는 것입니다.

샘플 보기

설치
- MyUI.js를 다운로드 받습니다. (다운로드)
- MyUI.zip을 다운로드 받습니다. 이미지 파일입니다. (다운로드)
- 업로드 한 후 HTML 페이지에 아래의 코드를 맨 위에 추가합니다. <script type="text/javascript" src="MyUI.js"></script>
사용법
용도에 따라 아래의 스크립트를 페이지 하단에 추가합니다.

1. 특정한 체크박스만 이미지로 바꾸고 싶으시면new MyCheckBox(document.forms['폼이름'].elements['체크박스이름']);
2. 특정 폼의 모든 체크박스를 이미지로 바꾸고 싶으시면new MyCheckBoxes(document.forms['폼이름']);
3. 특정한 라디오버튼만 이미지로 바꾸고 싶으시면new MyRadioButton(document.forms['폼이름'].elements['체크박스이름']);
4. 특정 폼의 모든 라디오버튼을 이미지로 바꾸고 싶으시면new MyRadioButtons(document.forms['폼이름']);

이미지 바꾸기
자신이 만든 이미지로 바꾸시려면 MyUI.js 소스안에 있는 resources와 styles 부분을 수정하시면 됩니다. 한번 보시면 바로 이해하실 수 있을 겁니다. http://blog.miniwini.com/archives/2006/06/@12-32-11.php
by Anna 안나 2008. 10. 17. 23:34
Fun with forms ? customized input elements By Søren Madsen

Ever wanted to match the look of your HTML forms with the rest of your website? This article demonstrates how to apply customized backgrounds to HTML forms, while preserving stucturally clean markup and accesibility.
A few considerations before we begin Before you throw yourself at this, there are some important considerations you have be aware of. Usability Users trust their credit card and personal information with forms on the internet, and that trust is sacred. So changing the appearance of well-known and recognizable browser elements like the basic input elements, may therefore not always be advisable. If you know your audience well enough, and you're confident that changing the appearance of form elements won't confuse or distract said audience from ie. an online purchase, please read on. Differences in user agents The techniques we're about to demonstrate are not generic. Form elements are "replaced elements", which means they come directly from the heart of your OS, and not the browser itself. The CSS specifications do therefore not require that form elements should be able to receive styling.
Most popular browsers have however provided us with options to do so, but not all of them. In fact, the following won't work at all in browsers like Safari , since eg. Safaris form elements are tied closely to the Mac OS presentation system, and therefore doesn't allow styling form elements much more than basic height and width. (Update: The following technique does indeed work in the new Safari 1.2 - Argh, I received contradictory reports! No, it doesn't)
So what are we left with? Well ? from what yours truly has been able to test, the following works in IE5+, partially in Opera, and gecko-based browsers (Netscape, Mozilla/Firebirdfox). Logical restrictions With this technique, we basically hide the given form element, and replace it with graphic backgrounds. Since that doesn't really make sense with all form elements like select, file fields, radio buttons and check boxes due to their behaviour and functions, I've restricted the scope of this article to work with input fields, text areas and submit buttons, and if you're fine with that ? by all means, read on. Some form basics ? the <fieldset> and <legend> elements The fieldset element functions as a structural container for different sections within a form element. An example would be an order form, which is divided in several structural sections, such as personal information, credit card information and shipping information ? but all part of the same form element. To provide meaningful structure between these sections, you would use the fieldset element. The legend element provides a feature to give each of these fieldset groupings a caption/title. Here's what it might look like: <form method="post" action="handle.ext">
<fieldset>
<legend>Personal information</legend>
input fields here ...
</fieldset>
<fieldset>
<legend>Credit card information</legend>
input fields here ...
</fieldset>
<fieldset>
<legend>Shipping information</legend>
input fields here ...
</fieldset>
<fieldset>
submit/reset buttons here ...
</fieldset>
</form> Note that the legend element is optional. ? the <label> element Some form elements have an implicit labelling feature, like the value attribute of submit buttons ? but most do not. The label element attaches descriptive information to form elements like input fields, radiobuttons, textareas etc. The label element also provides interactivity by focusing/selecting the form element it describes, when it is clicked on with the mouse.
One or more label elements can be attached to a given form element with the labels for attribute. <label for="tf1">Name: </label><br />
<input type="text" id="tf1" value="" /><br />
<label for="tf2">Email: </label><br />
<input type="text" id="tf2" value="" />

Choose <label for="rb1">Yes</label>
or <label for="rb2">No</label>:<br />
<input id="rb1" name="nlrb" type="radio" value="yes" />
<label for="rb1"> Yes</label><br />
<input id="rb2" name="nlrb" type="radio" value="no" />
<label for="rb2">No</label> The HTML above produces the following result: Name:

Email:

Choose Yes or No:
Yes
No Notice that, by clicking the assigned labels, the appropriate form element is focused/selected - try it out! The labels can be placed anywhere - try choosing Yes or No right here. Styling the contact form For this article, let's do something fairly simple and often needed, the contact form. <form action="default.asp" method="post">
<fieldset>
<legend>Contact form </legend>
<label for="name">Name:</label><br />
<input type="text" id="name" name="name" />
<br />
<label for="email">Email:</label><br />
<input type="text" id="email" name="email" /><br/>
<label for="website">Website:</label><br />
<input type="text" id="website" name="website" value="http://" />
<br />
<label for="comment">Comment:</label><br />
<textarea cols="30" rows="15" name="comment" id="comment">
</textarea>
<br /><label for="submit">&nbsp;</label><br />
<input id="submit" name="submit" type="submit" value="submit" />
</fieldset>
</form> ? See step I ? primary markup First step - positioning the elements Guess what? We received an email from our graphic designer again. He attached an illustration and wrote:
“We have a client whose wife told him that everything we'd done with his new website was just dandy; except for that contact form. She hated that. So the client asked whether it would be possible to do something about those standard boring form elements? I told him I'd look into it ... sigh. You told me you like challenges, so what do you say? Can you make the contact form look something like the illustration I attached?” “Sure! I'll get back to you” I replied, while biting my lips. Our basic form in step 1 works well, and makes sense in all its non-styled glory. The labels are followed by a <br />, so everything's lined up nicely - line by line. But in the illustration we were sent, the labels are positioned to the left of the assigned input field; almost like a column. We'll solve that by assigning the <br />'s we do not want to affect our layout a class <br class="nobr" /> ? and that class simply specifies display:none;.
To give our labels the column behaviour, we give them a shared width, float them to the left, and right align them. Here is what we have so far; general design parameters and a primary layout for the form: body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:60%;
margin:50px;
color:#666; }
.fieldset {
width:300px; }
.fieldset .label {
text-align:right;
width:70px;
float:left;
padding:0.2em;
margin:0;
margin-top:0.3em; }
.fieldset .nobr {
display:none; }
.fieldset .textfield {
margin:3px;
height:20px;
width:200px; }
.fieldset .textarea {
margin:3px;
height:165px;
width:200px; } We've obviously also assigned class names to the elements we want to target with CSS. Don't trust us; See for yourself: ? See step II ? Basic layout and structure Next step ? "hiding" the respective form elements So far so good. What we want to do now, is hide the input and textarea elements. Well; not excactly hide, but for this exercise, we don't want to keep anything other than their functionality (areas to fill in text) ? and then we'll decide what their graphical manifestation will be, by the use of background images. In this case; easier done than said, but this is also where our crossbrowser compliancy stops. We've been able to confirm that the following trick works in IE5+, Opera(?) and Gecko based browsers(?), but not in eg. the popular Safari browser for Mac, sorry.
The trick is really simple actually. It turns out that it takes nothing more than a border:solid 0 #fff; applied to the input elements, will hide their manifestation - but not their functionality. The color you specify for the border could be a flaming pink for what it matters, but it doesn't really matter - it won't display. See the following ? the fields are there, you just can't see them: ? See step III ? Input fields are "hidden", except for their functionality Third step ? placing background images in the input elements Placing background images in the input fields, works just like it normally does, with one small exception we'll get back to. The CSS for our .texfield class looks like this for instance: .fieldset .textfield {
margin:3px;
height:20px;
width:200px;
border:solid 0 #fff;
background: transparent
url("graphics/textfield_bg.gif") no-repeat; } See what it looks like: ? See step IV ? input elements with backgrounds replaced with images Looks nice, eh? We obviously have to add some padding to our input and textarea elements, and we'll get back to that ? but right now that's not our biggest concern. Fourth step ? dealing with a few browser differences If you're viewing this article in IE5+ on Windows, you'll notice that the background images in step 4 start scrolling once the input fields are filled up with text. In other browsers the background images stay in place. We don't want that to happen, so we asked ourselves: “What happens if we add fixed to the background rule?” Well ? it did the job solving our problem in IE5+, but caused even bigger problems in other browsers like Mozilla Firefox, because the background images becomes absolutely fixed. So what we'll do, is mix the two solution we now know works in different browsers: .fieldset .textfield {
margin:3px;
height:20px;
width:200px;
border:solid 0 #fff;
background: transparent
url("graphics/textfield_bg.gif") no-repeat fixed; }
fieldset>input.textfield {
background: transparent
url("graphics/textfield_bg.gif") no-repeat; } IE5+ doesn't get the fieldset>input.textfield selector, but other browsers do, so within that selector we'll hide rules from IE5+. And that was pretty much it! The final layout is available below. Adding padding to our input elements, triggered the usual box model problems, so the Tantek box model hack is used to feed appropiate width values to different browsers - but besides that, the remaining new rules are general styling parameters like font-size and color, and some excessive styling of the legend element, that you may disregard. View the source for details on the finished layout: ? See step V ? The final result Final thoughts We sincerely hope this article inspired you / gave you ideas on how to customize the layout and appearance of your online forms. We' do however stress the points raised in the beginning of this article - the considerations about usability and browser differences. Input elements are very hard to style, because todays browsers handles these elements very differently, but if the scope of browsers that this technique was written for, is satisfactory to you, we're glad we could help! Article published 24, Feb, 2004. Please leave comments at corresponding newspost.
Søren Madsen - www.picment.com
http://www.picment.com/articles/css/funwithforms/
by Anna 안나 2008. 10. 17. 22:26
http://kin.naver.com/detail/detail.php?d1id=1&dir_id=109&eid=sCEo8JMc3J9QMIW4U4TZw7aN1s2Au/T7&qb=c2hvdXRib3g= http://blog.naver.com/gfeel?Redirect=Log&logNo=120010749129
by Anna 안나 2008. 10. 17. 18:49
Nick La의 디자인 블로그 WebDesignerWall에서 XHTML/CSS를 이용한 겔러리 이미지 데코레이션 CSS Decorative Gallery에 대한 기사가 올라왔다. 이미지툴에서 별도의 작업 없이 SPAN 태그만으로 다양한 이미지 데코레이팅이 가능하다는 것을 볼 수 있다. 기본적으로 PNG의 알파채널을 이용해서 눈에 보이는 부분과 투명값이 적용된 부분을 이용한 Trick인데, WTA의 겔러리에서 Flash Winner등의 뱃지가 썸네일 좌측 상단에 붙어있는 것도 이것과 마찬가지로 Span 태그를 이용한 데코레이션 기법이다.

예문을 8가지나 들어 데모페이지를 제공하고 있으므로 누구나 쉽게 가장 마음에 드는 데코레이션 기법을 사용해 볼 수 있다. http://www.webtrendawards.com/1337
by Anna 안나 2008. 10. 17. 18:45
VickiWorks Studio에 서 제공하는 가볍고 깔끔한 CSS 블록 네비게이션 메뉴. 단 몇줄의 코드만으로 유치하지 않은 검색엔진 친화적 메뉴를 작성 할 수 있다. Nick La의 검색 엔진 친화 최적화에 대한 블로그를 보면 왜 CSS 메뉴가 플래쉬 메뉴보다 탁월한지에 대해 아래와 같이 서술하고 있다. Many designers make this mistake by using Flash menus such as those fade-in and animated menus. They might look cool to you but they can’t be seen by the search engines; and thus the links in the Flash menu will not be followed.
SEO에 대한 보다 심청적인 내용에 대해 알고 싶다면 Nick La의 webdesignerwall.com에 기재된 SEO Guide for Designers 기사를 참고하기 바란다. 아무튼 첨부 된 파일은 다음과 같이 HTML 코드와 CSS 코드를 가지고 있으니 자신의 사이트에 직접 추가해 본다. XHTML / CSS Code HTML Code
view plaincopy to clipboardprint? <ul class="menu"> <li><a href="#">Menu01<br /><span>Short desc</span></a></li> <li><a href="#">Menu02<br /><span>Short desc</span></a></li> <li><a href="#">Menu03<br /><span>Short desc</span></a></li> </ul> <ul class="menu"> <li><a href="#">Menu01<br /><span>Short desc</span></a></li> <li><a href="#">Menu02<br /><span>Short desc</span></a></li> <li><a href="#">Menu03<br /><span>Short desc</span></a></li> </ul>
CSS Code
view plaincopy to clipboardprint? ul.menu { margin:0;padding:0; } ul.menu li { display:block;padding:0; float:left;text-align:left;margin-right:2em; } ul.menu li a { color:#fff;font:bold14px georgia;text-decoration:none;line-height: 1.3em; display:block; } ul.menu li a:hover { color:#ffc300; } ul.menu li span { font:11pxarial; color:#666; margin:0; } ul.menu li span:hover {color:#999;} ul.menu { margin:0;padding:0; } ul.menu li { display:block;padding:0; float:left;text-align:left;margin-right:2em; } ul.menu li a { color:#fff;font:bold 14px georgia;text-decoration:none;line-height: 1.3em; display:block; } ul.menu li a:hover { color:#ffc300; } ul.menu li span { font:11px arial; color:#666; margin:0; } ul.menu li span:hover {color:#999;} http://www.webtrendawards.com/818
by Anna 안나 2008. 10. 17. 18:43
css_vmenu.zip 필자가 IAC Korea 웹사이트에 사용한 CSS Vertical Menu. 특별한 Generator의 도움 없이 CSS의 ID만으로 Selected 효과(클릭한 메뉴가 하이라이트)가 가능한 간단하면서도 검색엔진 친화적 메뉴다. css_vmenu.zip 파일을 다운로드 받으면 다음과 같은 소스가 포함되어 있다. 참 고로 클릭한 메뉴가 다음 페이지에서 Selected On으로 표시하고 싶다면 HTML 문서에서 body 태그에 cars-black이라는 이름의 ID를 부여 해 놓은 후, CSS 파일에서는 아래와 같이 cars-black이라는 ID에 대해 Selected 되었을 경우에 해당 LI 태그의 배경색이 바뀌게끔 정의한다. view plaincopy to clipboardprint? body#cars-black a#black, { background-color: #1c1c1c; } body#cars-black a#black, { background-color: #1c1c1c; } XHML & CSS Code XHTML Code
view plaincopy to clipboardprint? <body id="cars-black"> <ul id="vmenu"> <li class="top"><a href="#">Cars Category</a></li> <li><a href="#" id="black-plus">Black Plus+ Membership</a></li> <li><a href="#" id="black">Black membership</a></li> <ul> <li><a href="#">Group A</a></li> <li><a href="#">Group B</a></li> <li><a href="#">Group C</a></li> </ul> <li><a href="#" id="corporate">Corporate Membership</a></li> <li><a href="#" id="platinum">Platinum Membership</a></li> <li class="bottom"><a href="javascript:history.back();">Back to previous</a></li> </ul> </body> <body id="cars-black"> <ul id="vmenu"> <li class="top"><a href="#">Cars Category</a></li> <li><a href="#" id="black-plus">Black Plus+ Membership</a></li> <li><a href="#" id="black">Black membership</a></li> <ul> <li><a href="#">Group A</a></li> <li><a href="#">Group B</a></li> <li><a href="#">Group C</a></li> </ul> <li><a href="#" id="corporate">Corporate Membership</a></li> <li><a href="#" id="platinum">Platinum Membership</a></li> <li class="bottom"><a href="javascript:history.back();">Back to previous</a></li> </ul> </body>
CSS Code
view plaincopy to clipboardprint? <!-- body {background-color:#000000} body#cars-black a#black, { background-color: #1c1c1c; } #vmenu { font: 11px"Lucida Grande", Geneva, Arial, Verdana, sans-serifsans-serif; list-style-type: none; width: 291px; margin: 25px0px20px0px; padding: 0px; background-color: #2a2a2a; } #vmenu li a { color: #949494; height: 22px; border:1pxsolid#000000; border-bottom: none; padding: 10px0px0px15px; display:block; text-decoration:none} #vmenu li a:hover { color: #ffffff; text-decoration: none; background-color: #1c1c1c; } #vmenu li.top a { background: #2a2a2aurl(btop.gif) no-repeattop; font-weight: bold; display:block; } #vmenu li.bottom a{ color: #666666; background: #2a2a2aurl(bbottom.gif) no-repeatbottom; display:block; } #vmenu ul {margin: 0px; padding: 0px; list-style-type: none; border: 1pxsolid#000000; border-bottom: none; background-image: url(/images/sample/vmenu_bg.gif); } #vmenu ul li a { height: 15px; color: #949494; padding: 5px0px5px15px; border: none; background-color: #333333; background-image: none; text-decoration:none} #vmenu ul li a:hover { color: #ffffff; text-decoration: underline; background-color: #333333; background-image: none; } --> </style> <!-- body {background-color:#000000} body#cars-black a#black, { background-color: #1c1c1c; } #vmenu { font: 11px "Lucida Grande", Geneva, Arial, Verdana, sans-serif; list-style-type: none; width: 291px; margin: 25px 0px 20px 0px; padding: 0px; background-color: #2a2a2a; } #vmenu li a { color: #949494; height: 22px; border:1px solid #000000; border-bottom: none; padding: 10px 0px 0px 15px; display:block; text-decoration:none} #vmenu li a:hover { color: #ffffff; text-decoration: none; background-color: #1c1c1c; } #vmenu li.top a { background: #2a2a2a url(btop.gif) no-repeat top; font-weight: bold; display:block; } #vmenu li.bottom a{ color: #666666; background: #2a2a2a url(bbottom.gif) no-repeat bottom; display:block; } #vmenu ul {margin: 0px; padding: 0px; list-style-type: none; border: 1px solid #000000; border-bottom: none; background-image: url(/images/sample/vmenu_bg.gif); } #vmenu ul li a { height: 15px; color: #949494; padding: 5px 0px 5px 15px; border: none; background-color: #333333; background-image: none; text-decoration:none} #vmenu ul li a:hover { color: #ffffff; text-decoration: underline; background-color: #333333; background-image: none; } --> </style> written by..http://www.webtrendawards.com/838
by Anna 안나 2008. 10. 17. 18:42
XHTML및 HTML 4.01부터 사용 불가능한 태그 :
center, s, strike, u 등이 있습니다.

center의 대책!..
CSS로 바꾸어 씁니다.
text-align: center;

s의 대책!..[strike 포함]
CSS로 바꾸어 씁니다.
text-decoration: line-through;

u의 대책!..
CSS로 바꾸어 씁니다.
text-decoration: underline;

++
윗줄을 한번 쳐봅시다~^^..
text-decoration: overline;

윗줄 밑줄을 동시에 치려면?
text-decoration: overline underline;
?죠?^^..


가장 오해하는 몇가지!...
blockquote는, 들여쓰기 할때 쓴다? 도대체 누가 그런 발상을 -_-;
이렇게 쓰시는 분들.. 모두 아니 무조건 반성하십시요.

blockquote의 쓰임을 아시는 지요.. 바로 인용문을 나타낼때 사용하는 겁니다.
즉, 어떠한 글을 인용하거나 할때 blockquote를 사용해서 알려주지죠.

그런데 어떻게 이것을 들여쓰기용으로 사용하시는 지..
text-indent: 1em;
이렇게 하시면 한글자 들여쓰기 됩니다.

비표준 속성-_-;;;;;;;;;
cursor: hand;
이거 표준아닙니다. FF에서 보면 이거 잘못되었다고 나오고요.
표준은, hand가 아닌, pointer입니다. IE에서 이상한 것만 만들어 내서 원..


그리고, 태그를 쓸적에.. 대/소문자 구문안한다고 했는데요.
XHTML넘어와서는 무조건!.. 소문자로 써주셔야 합니다.
속성은 모두 "등으로 묶어주고요~
by Anna 안나 2008. 7. 29. 16:19
보통 CSS를 사용하면 파폭, 사파리, 오페라에서는 잘 보이는데 IE에서는 깨진다거나 IE7까지는 맞출 수 있지만 IE6까지 맞출 방법이 없다거나 그렇다고 IE6에다 맞추면 다른 브라우저에서 전부 깨져보인다던가 하는 난감한 일이 발생합니다. 그런 경우를 위한 팁을 적어보겠습니다.

***HTML명령어 if IE 와 COMMENT***

if IE와 COMMENT가 무엇인가요?

두 명령어는 익스플로러에서만 지원하는 특수 명령어입니다. 다만 if IE는 웹표준 검사 시에 주석으로 인식 되어 통과가 되지만 comment는 비표준 태그에 해당하기 때문에 얄짤없이 테스트에 탈락하게 되니 웹표준 테스트에 신경을 쓰시는 분이라면 다른 종류의 방법. 이를테면 CSS핵 등을 사용하시길 권해 드립니다.

if IE는 HTML코드 사이에 IE에서만 작동하는 코드를 포함시킬 수 있는 명령어입니다. 기본적으로 주석의 형태를 가지고 있기 때문에 다른 브라우저에서는 이 명령어가 포함된 문장은 실행이 되지 않습니다. if IE가 더욱 마음에 드는 점이라면 익스플로러의 버전별로 다 명령어를 설정해 줄 수 있다는 것이지요.

COMMENT는 if IE와는 반대 되는 성격을 가진 명령어입니다. if IE가 쓰인 행이 IE에서만 인식이 되고 기타 브라우저에서는 주석으로 인식해서 비활성 처리가 되는 것에 반해 COMMENT는 IE 전용 주석 설정태그로써 이 태그가 사용된 행은 IE에서는 주석으로 인식되지만 기타 브라우저에서는 COMMENT를 비표준 태그로 인식해서 COMMENT 안에 들어간 내용을 전부 실행해 버리지요.

어떻게 사용하나요?

if IE 명령어는 이런 식으로 사용합니다.
<!--[if IE]>

IE 유저에게만 표시할 내용

<![endif]-->

IE에서만 실행 할 내용.


버전별로 따로 설정을 할 수도 있습니다.
<!--[if IE 6]>
IE6 유저에게만 표시할 내용
<![endif]-->

같은 방법으로 <!--[if IE 7]>이라고 하면 IE7 유저에게만 보이겠지요?


comment 명령어의 사용법은 더 쉽습니다.
<comment>
기타 브라우저 사용자에게만 표시할 내용
</comment>

실제로 사용되는 사례를 가르쳐 주세요.

각 브라우저 별로 전혀 다른 페이지를 보여주는 것도 물론 가능하기는 합니다만 저는 각 브라우저별로 다른 CSS를 사용하는 데에 많이 사용합니다.

이를테면 이런 경우입니다.
<style>
.test { font-weight:bold; }
.test_IE6 { text-decoration:underline; }
.test_IE7 { color:#CCCCCC; }
</style>

<html>

<!--[if IE 6]>
<div class = "test_IE6">
<![endif]-->

<!--[if IE 7]>
<div class = "test_IE7">
<![endif]-->

<comment>
<div class = "test">
</comment>

이 글자가 어떻게 보이십니까?
</div>

</html>



이 코드를 브라우저 별로 실행시켜 보시면 IE6에선 밑줄이, IE7에서는 글씨가 회색으로, 파이어폭스 등 기타 브라우저에서는 글씨가 굵게 보일겁니다. 이런 식으로 브라우저별로 다른 CSS를 설정해 줄 수가 있는 것이지요. 그 중에서도 버그 상습범인 IE는 이런 식으로 CSS 클래스 자체를 다르게 주어서 격리를 시키는 것이 최고이지요.
참고할만한 사이트 : http://www.quirksmode.org/css/condcom.html
by Anna 안나 2008. 7. 29. 16:17
CSS에는 position:fixed 라는 속성이 존재하고 이 속성이 부여된 엘리먼트는 화면에 고정되어 스크롤을 해도 움직이지 않고 항상 같은 자리에 머물게 됩니다. 흔히 "스크롤을 따라다니는 배너" 라고 표현하는 이런 UIO(User Interface Object) 따위를 코딩할 때 이 속성을 사용할 수 있는데 보통의 경우 IE6에서 지원하지 않기 때문에 별도의 자바스크립트를 추가하여 이 기능을 구현해 왔습니다. 하지만 이제는 더이상 그럴 필요가 없을것 같습니다. 자바스크립트는 전혀 사용하지 않고 CSS Hack을 사용하여 IE6 에서 position:fixed 상태의 레이어를 구현할 수 있는 팁을 발견하였습니다. 예제 미리보기 http://naradesign.net/open_content/reference/fixedLayer/index.html CSS Code * { margin:0; padding:0;} /* html, body 사이의 간격을 제거 */
html { _overflow:hidden;} /* 기본 스크롤 제거 */
body{ _height:100%; _width:100%; _overflow:auto;} /* 대체 스크롤 생성 */
#content { width:580px; height:1000px; margin:20px; padding:10px; background:#eeeeee;}
#aside { position:fixed; _position:absolute; _z-index:-1; left:650px; top:20px; width:100px; height:300px; padding:10px; background:#dddddd;}
HTML Code <div id="content">
<h1>Fixed Layer Hack for IE6</h1>
</div>
<div id="aside">
<h2>Example</h2>
</div>
이 팁의 핵심은 <html> 요소에서 발생하는 스크롤을 제거하고 <body> 요소에 스크롤을 부여하는 것입니다. <html> 에 스크롤이 붙으면 <html> 내부의 모든 콘텐트가 스크롤과 함께 움직이지만 <body> 요소로부터 발생한 스크롤은 <html> 요소를 offset(x,y) 기준점으로 삼고있는 #aside 요소의 화면배치에 아무런 영향을 주지 않습니다. 만약 <body> 요소에 position:relative 를 주게 된다면 offset 의 기준점이 <body> 가 되기 때문에 레이어를 화면에 고정할 수 없는 상태로 다시 돌아가게 됩니다. 예제 코드에서 강조 표시된 코드가 관련 코드이며 이 팁의 내용을 더욱 자세하게 이해하고 싶으시면 관련 CSS 속성을 하나씩 제거하면서 테스트 해보시기 바랍니다. 브라우저 호환정보 Firefox2, Opera9, Safari2, IE6~7 에서 모두 동일하게 position:fixed 형태로 렌더링 합니다. IE5.0~IE5.5 버전의 브라우저에서는 position:absolute 형태로 렌더링 합니다. DTD가 Quirks Mode 상태일 때에는 적용되지 않습니다. 발견된 문제점 현재 코드는 IE6 핵으로서 #aside 영역에 _z-index:-1 속성을 사용하였기 때문에 IE6 에서는 #aside 영역의 텍스트를 자연스럽게 드래그 하거나 링크를 클릭할 수 없습니다. 다른 브라우저에서는 발생하지 않는 현상입니다. 한편 _z-index:-1 을 제거하게 되면 텍스트를 드래그 하거나 링크를 클릭하는 것이 가능하지만 화면크기를 줄였을 때 #aside 레이어가 세로 스크롤바를 덮는 현상이 발생합니다. 이 문제 역시 IE6 에서만 발생하는 현상입니다. 참조 http://www.cssplay.co.uk/layouts/fixed.html http://hiphapis.net/entry/IE6fixed http://naradesign.net/wp/2007/09/08/128/
by Anna 안나 2008. 7. 29. 15:51
사실 ‘따라다닌다’ 는 표현은 잘못된 표현이고 그 반대로 ‘고정된’ 이라고 부르는 것이 맞는 표현 같습니다. 이번 글은 언젠가 한번 정리하려고 생각해 놓은 주제였는데 모질라 커뮤니티에서 어떤분이 ‘따라다니는 배너’ 소스에 대한 질문을 하셨기에 그곳에 답변 달아드리고 이곳에도 포스팅 합니다. Javascript 가 Client Side 의 UI를 풍부하게 해주는 것만은 사실이지만 꼭 필요한 곳에만 사용해야 한다는 원칙이 필요합니다. 사실 저는 Javascript 코드를 처음부터 끝까지 직접 짜는 능력은 없지만 다행히도 특별히 코치해 주시는 선생님 과 주변의 전문가들이 계셔서 매번 어렵지 않게 문제를 해결하고 있습니다. 하지만 이마저도 싫어라 합니다. Javascript 가 동작하지 않는 환경을 고려하여 웹문서의 접근성을 높이려는 이유 입니다. 바로 본론으로 들어갑니다. 아래와 같은 코드를 사용하면 ‘CSS 만으로 따라다니는 배너 만들기(Updated_070908)‘ 가 가능합니다. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fixed Quick Link</title>
<style type="text/css">
#quickLink { position:fixed; _position:absolute; left:800px; top:200px; width:100px; height:300px; background:#CCC;}
</style>
</head> <body>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<div id="quickLink">Fixed Quick Link</div>
</body>
</html> 웹 브라우저(Vendor) 호환성 측면 검토
Firefox, Opera, Safari 브라우저와 특히 IE 7.x 도 이것을 지원합니다. 단, IE6.x 에서는 position:fixed 라는 표준속성을 지원하지 않기 때문에 예제코드에는 underscore hack ‘_’ 을 사용하였고 이것은 IE 6.x 이하의 버전에서만 position:absolute 방식으로 작동하게 된다는 것을 의미합니다. 즉, IE 6.x 이하의 버전에서는 문서의 내용에 고정되고 나머지 브라우저에서는 문서와는 별개로 창에 고정(fixed)되어 의도했던 효과대로 스크롤을 따라다니는 것처럼 보입니다. 장점
자바스크립트를 사용하는 것보다 시스템리소스를 덜 잡아먹으며 코드가 줄고 ‘깔끔’ 해진다는점 입니다. 단점 IE 6.x 브라우저에서만 다르게 렌더링 된다는 점 입니다. 하지만 이것은 큰 문제가 되지는 않는다고 생각합니다. 저같은 경우는 클라이언트를 직접 설득합니다. 그렇지 않아도 AxtiveX 나 다른 필수 Javascript 때문에 로딩속도가 느린데 그런 단순한 기능도 Javascript 를 사용해서 페이지 로딩속도에 지장주지 말고 웹 표준으로 깔끔하게 처리하자구요. 실제로 있었던 일입니다. ‘IE 6.x 에서 큰 문제가 되지 않는다’ 는 발언으로 미루어 추측하셨겠지만 특히 요즈음과 같은 경우 하위버전 호환성보다 상위버전 호환성에 무게를 두고 개발하는 편입니다. 내년 상반기부터는 IE 7.x 에 대한 자동업데이트가 시작될 테니까요. http://naradesign.net/wp/2006/12/16/101/
by Anna 안나 2008. 7. 29. 15:48
voice-family: ""}""; 위는 시각장애인용 웹브라우저에서 글자를 판독할 때 사용되는 목소리를 지정하는 속성입니다. font-family와 같이 이해하면 쉬워요. ' '사이에 사용할 수 있는 값은 'male', 'female', 'child' 으로써 남자,여자,어린이 목소리로 글을 판독하게 됩니다. 사실 저도 아직 사용해본 적이 없을 뿐더러, 시각장애인 전용 브라우저가 아닌 IE나 FF에서는 제대로 지원하지 않습니다.

voice-family:inherit; 이건 상속된다는 뜻이죠~ http://forum.standardmag.org/viewtopic.php?id=19
by Anna 안나 2008. 7. 12. 16:40
html>body #content {} 이건 인터넷익스플러 핵(hack)입니다. 전체 코드를 확인할 수 없지만, 보통 인터넷익스플러가 CSS를 제대로 랜더링 하지 못하는 박스모델링에서 사용합니다. 인터넷익스플러는 width, height 를 표준이 아닌 MS맘대로 해석하기 때문에 익스플러만 해석하는 html 을 사용한 것입니다. 그건 Tantek Hack이라고 불리우는 CSS Boxmodel Hack입니다.

css boxmodel에선 width란 padding이나 border를 제외한 순수 컨텐츠가 들어가는 박스의 폭을 얘기하지만 IE5.x에선 이 width나 height안에 padding과 border를 포함시켜버립니다.

{ width:100px; padding:10px; border: 10px; }
이런 박스가 있다고 할때 표준 브라우저에서 box의 총 width는 140px이 되지만 IE5.x에선 100px이죠.
그래서 hack이 필요한데 이경우에는 IE5.x의 또다른 버그인 parsing bug를 이용합니다.
키포인트는 ""}"" 입니다.

div.content {
width:400px; /* IE5.x용 */
voice-family: ""}"";

/*IE5.x는 다음룰 무시*/

voice-family:inherit;
width:300px; /*일반 브라우저용*/
}

여기에서 opera5같은 경우는 IE5.x와 동일한 parsing bug가 있지만 boxmodel은 표준을 지원하기때문에 별도로 스타일을 지정해줍니다. ( >주위에 스페이스가 없어야 합니다)

html>body .content {
width:300px; /* Opera 5용 */
}

이 Tantek hack을 사용하려면 반드시 nn4에서는 css가 보이지 않게 해줘야 합니다.

nn4와 opera5같은 브라우저의 문제때문에 이 핵보다는 Simplified Box model Hack이나 Tan hack을 많이 사용하는 편입니다.
by Anna 안나 2008. 7. 12. 16:40
브라우저마다 HTML렌더링하는 방식이 조금씩 차이가 나고, 때로는 버그가 존재하는 관계로(망할 IE) 모든 CSS 코드가 모든 웹브라우저에서 똑같이 보이지 않습니다.
따라서 이러한 특성을 이용하여 특정 브라우저를 제외하거나, 특정 브라우저에서만 CSS를 적용하는 기법을 CSS 핵(Hack) 이라고 부르죠...

그래서 문법적으로 맞지 않거나, 특정 브라우저에만 적용되는 비표준인 경우가 많기 때문에 이러한 CSS핵은 어쩔 수 없는 경우가 아니면 사용하지 않아야 합니다. 또한, 단순히 눈앞의 문제만을 해결하기 위해 핵을 사용하면 나중에 페이지를 수정하거나 브라우저의 버전이 올라갈 때에 문제가 생기는 경우도 있구요.

CSS핵은 이런게 있다는 것도 알아두고, CSS핵을 사용하기 이전에 근본적으로 디자인을 수정하거나 다른 표준 태그로 해결하는게 좋을 듯 하네요.

어쨌든 일단 현존 CSS핵에 대한 정리!

http://centricle.com/ref/css/filters/


서핑하다 찾은 사이트인데 CENTRICLE.COM 의 CSS filters 페이지가 가장 잘 되어 있는 것 같습니다.
이제까지 알려진 CSS핵의 종류와 현존하는 거의 모든 웹 브라우저에서 적용되는지의 여부를 알기쉽게 표로 보여줍니다. 각 항목을 눌러보면 해당 핵의 예제도 볼 수 있네요.

http://www.communis.co.uk/dithered/css_filters/


웹표준 교과서에서 소개하는 CSS 핵 & 필터 안내 페이지

그 외에 평소에 자주 사용하는 팁으로서의 CSS 핵 정리는 아래에 정리.
Netscape 4 배제하기
<link rel="stylesheet" type="text/css" href="/css/style.css" media="all" />
Netscape 는 media 속성이 screen 이 아닌 경우 외부 스타일시트를 읽지 못하는 버그가 존재함.

Win IE 3~4, Mac IE 4~4.5, Netscape 4 배제하기
@import url("/css/style.css")
Win IE 4, Mac IE 4 는 인용부호가 "가 아니면 읽지 못하는 버그 존재. IE 3과 Netscape 4는 @import 지원하지 않음.

Mac IE 5 배제하기
H1 { /* \*/ color:red; /* */ }
Holly 핵이라 하며, 주석 안의 내용이 적용되지 않음.

Win IE 4~5 배제하기
H1/**/ { color:red; }
셀렉터 뒤에 /**/ 삽입.

Win IE 4~5, Mac IE 4.5~5 배제하기
H1 { color/* */:red; }
속성과 속성값을 구분하는 콜론(:) 앞에 /* */ 삽입.

Win IE 4~6, Mac IE 4, Netscape 4 배제하기
html>body H1 { color:red; }
셀렉터 앞에 html>body 삽입.

Win IE 6 제외시키기
H1 { color /**/:red; }
속성과 속성값을 구분하는 콜론(:) 앞에 스페이스와 /**/ 삽입.

언더스코어 핵 (_)
H1 { _color:red; }
Win IE 4~6 에 적용.

닷핵 (.)
H1 { .color:red; }
속성 앞에 . 삽입. Win IE 6~7 에만 적용. 타 브라우저는 정확히 확인하지 못했습니다.
이 핵에 대해선 계속 확인중인데 블로그스피어나 여타 서적에는 전혀 언급이 없는 이상한 핵(?)입니다.

해시 핵(#)
H1 { #color:red; }
속성 앞에 # 삽입. Win IE 4~6, Mac IE 5, Opera 7, Mozilla계열, Firefox 에 적용.

스타 핵
*HTML H1 { color:red; }
셀렉터 앞에 *html 삽입. Win IE 4~6, Mac IE 4~5 에 적용.

스타7 핵
HTML*H1 { color:red; }
셀렉터 앞에 html* 삽입(공백없이). Win IE 5.5~6, Mac IE 5, Safari 에 적용.

xmlns 속성 핵
HTML[xmlns] H1 { color:red; }
셀렉터 앞에 속성 선택자를 삽입. Mozilla, Firefox, Opera, Safari 등 속성 선택자를 지원하는 브라우저에 적용.

:root 가상클래스 핵
:root H1 { color:red; }
셀렉터 앞에 :root 가상클래스 삽입. Mozilla, Firefox, Mac IE 5, Safari 등 가상클래스를 지원하는 브라우저에 적용.

Tantek 박스모델 핵
H1 {
width:500px;
voice-family: ""}"";
voice-family:inherit;
width:400px;
}Tantek Celik 이 고안한 유명한 박스모델 핵. Win IE 4~5, Mac IE 4, Netscape 4 에서는 voice-family 속성 이전의 스타일 적용. 그외의 브라우저는 뒤의 속성 적용.

단순 박스모델 핵
H1 {
width:500px;
w\idth:400px; //Win IE 6, Mac IE 5, Mozilla, Opera, Safari
\width:450px; // only Win IE 5
}
속성의 첫번째, 두번째 글자 사이에 \를 삽입하면 Win IE 6, Mac IE 5, Mozilla, Opera, Safari 에 적용.
추가로 속성의 앞에 \를 삽입하면 Win IE 5 에만 적용.

IE 7, Opera 적용하기
*+html body H1 { color:red; }
셀렉터 앞에 *+html body 삽입. IE 7, Opera 8 이후 버전 적용. Opera를 배제한 IE7 전용으로 하고 싶을 때는 *+html>/**/body 로 Opera 전용 속성 기술.

IE 7 적용하기
*:first-child+html H1 { color:red; }
셀렉터 앞에 *:first-child+html 삽입. IE 7에만 적용되고, 이외의 브라우저는 앞에서 기술한 셀렉터의 속성 적용.

Win IE 5 패스필터
@media tty {
i{content:"";/*" "*/}}; @import '/css/style.css'; {;}/*";}
}/* */

Win IE 5.5 패스필터
@media tty {
i{content:"";/*" "*/}}@m; @import '/css/style.css';/*";}
}/* */

Win IE 6 패스필터(?)
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="/css/style.css" media="all" /><![endif]-->

Win IE 7 패스필터(?)
<!--[if gte IE 7]><link rel="stylesheet" type="text/css" href="/css/style.css" media="all" /><![endif]-->

모던브라우저 패스필터 (Win IE 5.5 이하, Mac IE 5, Opera 8 이하, Netscape 4 이하 제외)
@import "null?"{";
@import "/css/style.css";
@import "null?"}";


저의 주 작업 브라우저는 IE6, IE7, FF2, OP9 입니다. 개인적으로 CSS 핵은 거의 사용하지 않지만, 폼 (특히 체크박스, 라디오 버튼) 의 형태가 각 브라우저마다 틀려서 IE 6~7 에서 폼의 마진을 조절하기 위해 언더스코어 핵, 닷핵 만을 사용하고 있습니다.
덧붙여... 우리나라에서 최고의 사용률을 보여주는 IE가 CSS Spec을 제대로 지원하지 않으면서도 이를 업데이트하지 않는 이유는, 아이러니컬하게도 브라우저간 버그를 보정하기 위한 CSS핵도 큰 이유를 차지하고 있는 듯.
IE 6에서 갑자기 IE 7 또는 표준스펙 풀 지원으로 CSS 지원 스펙을 수정하면 현재 IE 6 기준으로 만들어진 사이트나 IE 6용 패스필터, 핵을 사용한 엄청난 수의 사이트(특히 우리나라)는 어떻게 될지...
중요 포인트!!
1. 구조를 설계할 때 절대 CSS핵 위주로 설계하지 말 것.
2. 단발성 CSS 핵보다는 패스필터 사용 권장.
3. CSS핵은 어쩔 수 없는 경우에만 사용할 것. http://kaludin.egloos.com/967831
by Anna 안나 2008. 7. 11. 23:23
시작하기 전에 이미지 다운로드 - 문단이나 항목 정리에 있어서, Unorderd List 태그인 <ul>과 항목 리스트를 나타내는 <li>태그는 매우 유용한 태그입니다. 다만, 웹브라우저에 따라 여백이나 패딩의 및 불릿 이미지를 표기하는 방식이 꽤나 다르기 때문에 사용상 주의도 필요합니다. 또한, 그동안 웹페이지의 레이아웃을 유지하기 위해 그동안 테이블<table>을 많이 이용했으나, 리스트 태그와 CSS를 이용한 방법이 바람직하다고 여깁니다. 기본적으로, 여백과 패딩값은 설정해 주어야 IE7과 FireFox2사이의 레이아웃 차이를 없앨 수 있습니다. ul{ margin: 0; padding: 0;}/* li태그는 해당 내용 상속됨 */ <li> 및 display속성값이 [list-item]인 경우 다음과 같은 스타일을 적용할 수 있습니다. * <ol> <ul> 에 다음의 속성을 지정하면, 해당 태그의 서브 <li>요소에는 모두 상속됩니다. [ 리스트 속성의 일괄 지정 ] list-style: type image position; 리스트의 글머리표의 종류를 지정(type), 글머리표의 이미지를 지정(image) 글머리표의 표시위치 지정(position)을 지정합니다. 속성값인 type, image, position은 아래에서 설명할 속성값을 따릅니다. [ 글머리표의 종류 지정 ] list-style-type: disc(초기값); 글머리표의 이미지가 있는 경우에는, 이미지가 우선적으로 표시됩니다. 이미지가 없거나(none) 지정한 이미지를 표시할 수 없는 경우, 이 설정값이 유효하게 됩니다. 구버전의 IE에서는 인식되지 않으나, IE7에서는 인식이됩니다. 다음과 같은 속성값을 이용할 수 있습니다. none : 글머리표를 표시하지 않습니다. disc : 검은색 원(기본 값) circls : 선으로 그려진 원 square : 선으로 그려진 사각형 lower-roman : 로마숫자 소문자 upper-roman : 로마숫자 대문자 lower-greek : 그리스 문자 소문자 decimal : 일반 숫자 decimal-leading-zero : 첫 자리에 0을 붙인 숫자 lower-latin, lower-alpha : 알파벳 소문자 upper-latin, upper-alpha : 알파벳 대문자 hebrew : 히브리 숫자 armenian : 아르메니아 숫자 georgian : 그로지아 숫자 <ul style="list-style-type: lower-roman;"> index content postscripe [ 글머리표 이미지 지정 ] list-style-image: url(); 디폴트 값은 none입니다. 아래와 같이 사용할 수 있습니다. <ul style="list-style-image: url(ico_note.gif);"> index content postscripe [ 글머리표 이미지 표시 위치 지정 ] list-style-position: outside(초기값); 리스트 항목의 박스에 대한 글머리표의 위치를 설정하는 속성입니다. 사용할 수 있는 속성값으로는 inside 와 outside가 있으며 디폴트 값은 outside입니다. <ul style="border: 1px solid; list-style-image: url(ico_note.gif);"> index content postscripe <ul style="border: 1px solid; list-style-position: inside; list-style-image: url(ico_note.gif);"> index content postscripe 위 예의 경우, margin: 0; padding: 0; width: 200px로 지정되어 있습니다. 테두리를 1px로 설정하였으므로, 박스의 레이아웃은 가로 202px가 됩니다. 글머리표 이미지를 inside로 설정한 경우는 이 202px안에 모두 표기가 됩니다. outside의 경우는 해당 박스의 여백이나 패딩값에 관계없이 박스의 외곽에 표기됩니다. 심지어 외곽 박스의 영역 을 침범해서라도 표기가 됩니다. 다만, 외곽 박스가 <body>인 경우에는, IE7의 경우에는 패딩영역에만 표기됩니다. 즉, FireFox2경우에는 패딩영역이든 여백(margin)영역이든 표기할 공간이 있으면 표기해 주나, IE7의 경우에는 여백(margin)영역만 존재하고 패딩영역이 없는 경우 글머리표 이미지는 표기가 되지 않습니다. <ul style="border: 1px solid; list-style-position: inside; list-style-image: url(ico_note.gif);"> <li style="list-style-position: outside;">index</li> index content postscripe 이 상, 리스트 항목의 글머리표에 대한, 속성설정에 대하여 살펴보았습니다. 이 항목들만을 가지고 글머리표 레이아웃을 설정하는 방법에는 한계가 있습니다. 글머리표로 사용한 이미지의 크기에 따라, 상하 높이를 설정하는 부분이 없기 때문입니다. ul{ list-style: none; margin: 0; padding: 0;} 따라서, 레이아웃을 위한 일반적인 사용에는 위와 같이 사용할 뿐입니다. http://blog.naver.com/einmong/10011586136
by Anna 안나 2008. 7. 9. 19:25
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html; charset=euc-kr"/> <title>Tabs</title> <!-- Description : XHTML Tabs style code [ IE6 , IE7 , FF2] --> <!-- Author : blueb(http://blueb.net/blog) --> <!-- Date : 2008-05-08 --> </head> <body> <scripttype='text/javascript'> function tabs(idx){ for(i = 1; i <= 3 ; i++ ){ document.getElementById('tab'+i).className = ""; document.getElementById('content'+i).className = "content hide"; } document.getElementById('tab'+idx).className = "active"; document.getElementById('content'+idx).className = "content show"; } </script> <!--[if IE 6]> <styletype='text/css'> /* IE 6 */ div.tabs-area { position:relative; z-index:2; width:100%; height:48px; padding:0;margin:0;overflow:hidden; } div.tabs-line { position:relative; z-index:1; width:100%; height:0; top:-1px; border-top:1px solid #D3D9E6; } </style> <![endif]--> <!--[if IE 7]> <styletype='text/css'> /* IE 7 */ div.tabs-area { position:relative; z-index:2; height:48px;width:100%;padding:0;margin:0 } div.tabs-line { position:relative; z-index:1; width:100%; height:1px; top:-2px; border-bottom:1px solid #D3D9E6; } </style> <![endif]--> <!--[if !IE]>--> <styletype='text/css'> div.tabs-area { position:relative; z-index:2; width:100%; height:45px; padding:0;margin:0;overflow:hidden; } div.tabs-line { position:relative; z-index:1; width:100%; height:1px; top:-1px; border-top:1px solid #D3D9E6; } </style> <!--<![endif]--> <styletype='text/css'> ul.tabs { padding:0px;margin:0px; z-index:2; } ul.tabs li { list-style:none; display:inline; height:50px; } ul.tabs li a { padding:5px 20px 3px 20px; border:1px solid #D3D9E6; text-decoration:none; font-size:9pt; line-height:30px; color:#4B69AF; background:#E9ECF2; } ul.tabs li a:hover { background:#E8FFFF; } ul.tabs li a.active { background:#fff; color:#4B69AF; border:1px solid #D3D9E6; border-bottom: 1px solid #ffffff; padding:10px 20px 3px 20px; font-weight:bold; line-height:70px; } div.content { /* 컨텐츠 영역 박스 스타일 지정 하는곳 */ } div.show { display:block;} div.hide { display:none; } </style> <h3>IE6, IE7, FF2 Tabs</h3> <div> <divclass='tabs-area'> <ulclass='tabs'> <li></li> <li><aid='tab1'title="Tab1 Desc"href="javascript:tabs('1');"class='active'>Tab 1</a></li> <li><aid='tab2'title="Tab2 Desc"href="javascript:tabs('2');">Tab 2</a></li> <li><aid='tab3'title="Tab3 Desc"href="javascript:tabs('3');">Tab 3</a></li> </ul> </div> <divclass='tabs-line'></div> </div> <divid='content1'class='content show'> <h1>Content 1</h1> </div> <divid='content2'class='content hide'> <h1>Content 2</h1> </div> <divid='content3'class='content hide'> <h1>Content 3</h1> </div> </body> </html> http://blueb.net/blog/1224
by Anna 안나 2008. 7. 9. 19:21
<head>
<STYLE type='text/css'>
li.1 { list-style-type : lower-roman } /* 로마숫자 소문자으로된 목록 */
li.2 { list-style-type : upper-roman } /* 로마숫자 대문자으로된 목록 */li.3 { list-style-type : lower-alpha } /* 알파벳 소문자으로된 목록 */
li.4 { list-style-type : upper-alpha } /* 알파벳 대문자으로된 목록 */
li.5 { list-style-type : disc } /* 점으로 된 목록 */
li.6 { list-style-type : circle } /* 속이 하얀색 원으로 된 목록 */li.7 { list-style-type : square } /* 사각형으로 된 목록 */li.8 { list-style-type : decimal } /* 숫자로 된 목록 */li.9 { list-style-type : none } /* 아무 표시 없음 */</STYLE>
</head> 리스트 태그(ul, ol, li)와 같은 기능을 CSS로 만들기.(list-style-type)

<ol>
<LI class='1'>리스트 항목 lower-roman</LI>
<LI class='2'>리스트 항목 upper-roman</LI>
<LI class='3'>리스트 항목 lower-alpha</LI>
<LI class='4'>리스트 항목 upper-alpha</LI>
<LI class='5'>리스트 항목 upper-alpha</LI>
<LI class='6'>리스트 항목 disc</LI>
<LI class='7'>리스트 항목 circle</LI>
<LI class='8'>리스트 항목 square</LI>
<LI class='9'>리스트 항목 none</LI>
</ol> 출처 : http://bbs.freecount.net/bbs/bbs.php?m=view&bid=study_2&id=21&page=1&cate=&q=
by Anna 안나 2008. 7. 9. 19:20
웹에서 리스트를 만들면 때로는 제목이나 기타등등이 길어질 때가 있다
이때 많은 사람들이 substring 을 해서 점을 붙이는 형태로 작업을 하는데, 영어나 한글 등의 언어에 따라 길이가 제각각이 되므로 보기에 상당히 안 좋다.

제목이 긴경우 ... 으로 해준다
<div style="position:relative; width:100px; text-overflow:ellipsis; overflow:hidden; cursor:hand"><nobr>텍스트 어쩌구저쩌구 이러쿵 저러쿵...</nobr><div>


<table width="100%" border="1" class="v1" style='table-layout:fixed'>
<tr>
<td width="50"><img src="<?=$strImage?>" width="50" height="50"></td>
<td width="100%">
<div style='width:100%;height:16px;overflow:hidden;text-overflow:ellipsis'><nobr><b><?=$strTitle?></b></nobr></div>
</td>
</tr>
</table>
by Anna 안나 2008. 7. 6. 01:38
| 1 2 3 |