꼴뚜기씨놀이터

<사이트>

W3C

www.w3.org

월드와이드웹 컨소시엄.웹표준개발.웹표준관련 기술적인 내용에 대한 참고자료 제공.

웹유효성검사서비스제공( validator.w3.org )

Web Standard Project

www.webstandards.orhg

WaSP(웹표준프로젝트)는 웹표준을 대중에게 널리알리고 웹디자이너와 개발자들이 표준에 따라 개발할 수 있는 교육자료를 제공합니다. 웹브라우저 제조업체나 소프트웨어 제조업체와 협력해 웹표준을 준수하도록 추진

A List Apart

www.alistapat.com

매거진. 웹표준으로디자인하기 위한 테크닉과 장점에 초점을 맞춰 웹컨텐츠를 만들기 위한 디자인, 개발에 관련된 내용을 소개.

웹표준과 관련된 디자인,개발, 사업 분야의 매우 훌륭한 티과 테크닉에 관련된 기사를 제공

Css Zen Garden

www.csszengarden.com

CSS기반디자인으로 어떤 일을 할수있는지 보여주는 사이트

여기에 참가하는 디자이너는 동일한 마크업구조를 사용하는 자기만의 CSS디자인을 만들어 제출합니다.

첨단의 CSS디자인 쇼케이스 (지속적으로 추가되고 있다)

Dive Into Accessibility

www.diveintoaccessibility.org

웹접근성은 매우 쉽게 구현할 수 있으며 이 기능을 통해 어떤 사람들이 혜택을 보는지 이해할 수있는 자료들을 소개합니다.

CSS-discuss

www.css-discuss.org

CSS와 실제 프로젝트에서 이를 사용하면서 생기는 일에 대한 이야기를 나눌 수 잇는 메일링 리스트

CSS를 이용하면서 생기는 의문사항을 즐의답변

Wevb-Graphics

www.web-graphics.com

하이퍼텍스트 디자인 자료, 링크, 설명들을 모아놓은 곳

매우 유명한 편집자들이 표준에 관련된 디자인과 개발분야의 새로운 소식을 전해준다.

Digital Web magazine

www.dugutal-web.com

웹디자이너들을 위한 컬럼, 뉴스, 튜토리얼을 제공하는 온라인 잡지

The Weekly Standards

www.weeklystandards.com

주간단위로 웹표준으로 만든 멋진 사이트들의 소식을 전해준다.

<블로그>

www.zeldman.com

웹표준의 대부라고 불리우는 제프리 젤드만이 운영하는 블로그

www.stopdesign.com

www.wired.com과 www.adaptivepath.com을 표준기반으로 리뉴얼한 더글라스 바우맨의 웹사이트

유용한 튜토리얼과 해설을 업데이트

www.mezzoblue.com

CSS젠가든의 관리자-Dave Shea가 운영

표준관련최신소식과 현재발생하는일들을 소개

www.meyerweb.com

CSS관련전문가 에릭마미어가 운영

CSS와 관련된 재미있는 글과 사례 소개

www.tantek.com/log/

박스모델핵으로유명한 저자의블로그

www.whatdoiknow.com

웹디자이너 토드 도미니의 개인웹사이트

www.pgchampionship.com같은 표준 웹사이트작업에참여

www.7nights.com/asterisk

웹디자이너이자 개발자의 D.keith Robinson의 개인웹사이트

www.superfluousbanter.org

댄루빈과 디디에힐호스트가 만든 웹사이트

simon.incutio.com

개발자이자 웹표준프로젝트의 멤버인 시몬윌슨의 웹사이트

일반웹개발에 대한 내용을 제공

www.brainstormsandraves.com

웹표준프로젝트의 멤버인 셜리 카이저가 운영

웹디자인, 개발,표준,서체,음악등에대한 새소식

www.saila.com/colums/icky/

온라인저널리즘부터 웹구축까지 캐나다 뉴미디어에 관한 소식을 전하는 크레이그세일러의블로그. 웹표준에관련된 고품격정보

<책>

Designing with web Standards (Jeffrey zeldman) -  웹표준에 대한 설명과 잇점

Cascading Style Sheets : The Definitive Guide (Eric Meyer) - CSS에 관련된모든내용에대한참고서

Speed Up Your Site : Web Site Optimize (Andrew B.King) - 웹표준기반의마크업과 CSS를 통해 우베사이트를 속도,용량,검색 측면에서 어떻게최적화할 수 있는지 설명

a:hover

selected

세가지 상태를 모두 포함하고 있는 한개의 이미지

<ul id="nav">
  <li><a href="" id="thome" class="selected" >home</a></li>
  <li><a href="" id="tguides" >Guides</a></li>
  <li><a href="" id="tmag" >Magazine</a></li>
  <li><a href="" id="tarchives" >Archives</a></li>
 </ul>

#nav ul{
 margin:0;
 padding:0;
 height:20px;
 list-style:none;
}
#nav li{
 list-style:none;
 display:inline;
}
#nav a{
 float:left;
 height:0px ;
 text-align:center;
 height:20px;
}
#nav a:hover{
 background-position:0 -20px;
}
#nav a:active, #nav a.selected{
 background-position:0 -40px;
}
#thome,#tguides,#tmag,#tarchives{
 width:100px;
 background: url(images/home.gif) top left no-repeat;
}

장점: 가볍다. 접근성이 뛰어나다. 자바스크립트불필요, 스타일이 살아있다.

방법1

<h1 id="lir">LIR ( Leahy/Langadige Image Relacement)</h1>

#lir{

padding: 90px 0 0 0;

overflow:hidden;

background: url(lir.gif) no-repeat;

height:0px !important; /*대부분의웹브라우저를위한명령*/아래줄보다 우선적용하라는의미

height/**/:90px; /*윈도우용 IE5를 위한 명령*/

}

별도의마크업을하지않아도된다.

스크린리더프로그램이텍스트를정상적으로읽는다

윈도우IE5를위해서박스모델해결책을써야한다.

이미지를끄고css를 켠경우에는아무것도표시되지않는다.

방법2

<h1 id="phark">The Park Method</h1>

#phark{

height:26px;

text-indent:-5000px;

background:ulr(phark.gif) no-repeat;

}

별도의마크업을하지않아도된다.

스크린리더프로그램이텍스트를정상적으로읽는다

이미지를끄고css를 켠경우에는아무것도표시되지않는다.

font-family :

letter-spacing :

font-weight : normal, bold

font-style:  normal, italic

text-align : justify, center, left, right

font-transform : uppercase (대소문자지정)

font-variant : small-caps (소문자의경우 크기는 유지하면서 글씨모양은 대문자로-소형대문자)

text-indent : 3em; (첫줄들여쓰기)

The Layout Resorvoir

www.bluerobot.com/web/layouts

절대포지셔닝을 이용해 다단 레이아웃을 만드는 아주 멋진 예제들

From Table Hacks to CSS Layout : A Web Designer's Journey

http://www.alistapart.com/articles/journey

2단 레이아웃을 만드는 방법을 제프리 젤드먼이 단계별로 친절히 설명해주는 튜토리얼

CSS Layout Techniques: For Fun and Profit

www.glish.com/css/

에릭 코스텔로가 제공하는 다양한 CSS레이아웃

Litte Boxes

www.thenoodleincident.com/tutorials/box_lesson/boxes.html

오웬 브릭스가 제공하는 단순하면서도 아름다운 CSS 레이아웃 데모

CSS Zen Garden

www.csszengarden.com

CSS 기반 디자인으로 어떤 비쥬얼이 가능한지 보여주는곳.

동일한 XHTML화일을 사용한 최신의 CSS디자인들을 볼 수있습니다.