Rounded Corners Rounded Corners without images Creating a Netflix style star ratings Tableless forms Styling Lists with CSS 2 Column Layout Technique 3 Column Layout with CSS 3 Column Fixed width centered layout Printing with CSS Adding a CSS stylesheet to an RSS feed Footer Stick CSS Element Hover Effect Styling Horizontal Rules Clearing Floats CSS Popups Box Punch CSS Badge Orange RSS Buttons ..

출처: http://www.adesdesign.net/php/tutorials/css/page_scrollbar.php

Effect of CSS property text-overflow Each box (DIV element) below contains the following text: We hold these truths to be self-evident, that all people are created equal. Note how the STYLE settings effect the rendering of the text STYLE ="text-overflow : clip; overflow : hidden" We hold these truths to be self-evident, that all people are created equal. STYLE ="text-overflow : ellipsis; overflo..

화면에 나타나는 글꼴 속성과 인쇄시 글꼴 속성을 서로 다르게 나타낼 수 있습니다. 이 문서를 인쇄한 후 이 부분을 비교해 보세요!! 위의 소스 코드에서 가장 중요한 부분은 바로 @media 부분이다. CSS는 서로 다른 미디어 타입을 가질 수 있다. 대표적인 미디어로는 스크린(screen)과 프린트(print)가 있다. 위의 예에서 @media screen 부분은 화면에 표시될 부분에 대한 CSS 정의의고, @media print 부분은 프린트시 표시될 부분에 대한 CSS 정의이다. CSS에 대한 어느 정도의 지식이 있는 사람이라면 위의 사실을 통해 얼마든지 화면에서의 CSS와 인쇄에서의 CSS를 다르게 정의할 수 있을 것이다. 출처: http://korea.internet.com/channel/cont..

Can you take a simple list and use different Cascading Style Sheets to create radically different list options? The Listamatic shows the power of CSS when applied to one simple list. Vertical lists Simple list Simple list with square bullets Simple list with circle bullets Using images for bullets Using CSS background images for bullets Eric Meyer's simple separators Eric Meyer's Panelise Rollov..

Rounding Tab Corners In the past year or so, it's become somewhat fashionable to use unordered lists to create "navbars;" that is, collections of navigation links.[1] A good example of a navbar is the horizontal stripe across the page tops of this very site, where you can find links to the major areas of Complex Spiral Consulting. In most cases where a horizontal stripe is created, the links are..

1. 코드 Only FireFox 이놈의 IE는 언제쯤 표준을 잘 지킬까. 양쪽 브라우저 작업 열라 힘들다. IE max-width expression 구문을 활용하여 최대값을 설정하자. Only Firefox - 문자열로 최대값 설정 012345678901234567890123456789012345678901234567890123456789 가나다라바마사아자카가나다라바마사아자카가나다라바마사아자카 30em 일때 숫자와 영문의 60자 , 한글은 30자네.. IE max-width - 문자열로 최대값 설정 012345678901234567890123456789012345678901234567890123456789 가나다라바마사아자카가나다라바마사아자카가나다라바마사아자카 document.body.clientWi..

브라우져 화면의 100% 높이를 유지하는 레이아웃 우선 height 100%를 사용하려면 html element와 body element의 높이를 100%로 확보해 주어야 합니다. #body 는 min-height 로 100%높이를 유지 해주고, #content-area 는 원하고자 하는 컨텐츠 영역을 확보 합니다. 이때, IE 는 min-height 를 지원하지 않으므로, conditional comment를 사용하여 height를 100% 로 확보 합니다. (주석같이 보이는 부분) #head 의 높이와 #foot 의 높이가 고정이어야 한다는 제약이 있습니다...만, 거의 대부분의 웹사이트가 고정이므로 별 문제는 없으리라 봅니다. 예시 요건 100px 높이 헤드 컨텐츠 영역 1 컨텐츠 영역 2 컨텐츠 ..

Tag Name Example(s) & Description Author The author's name. cache-control HTTP 1.1. Allowed values = PUBLIC | PRIVATE | NO-CACHE | NO-STORE. Public - may be cached in public shared caches Private - may only be cached in private cache no-Cache - may not be cached no-Store - may be cached but not archived The directive CACHE-CONTROL:NO-CACHE indicates cached information should not be used and inst..

아래의 구문을 head 태그 중에 삽입하시면 IE7.0 RSS 피드 아이콘이 활성화 됩니다.