Archive / Main / HomePage

이곳은 웹사이트 제작이나 유지 관리와 관련하여 방법이나 팁 등을 정리해 놓은 곳입니다. 웹표준(Web Standards)이나 (X)HTML, CSS, Javascript, DOM에 관한 내용을 다루고 있습니다.

공개 문서

• 접근성을 떨어뜨리는 웹사이트 구현 사례
• 잘못된 보안 권고 사항
• 웹표준을 이용한 웹사이트 접근성의 향상
• 접근성을 해치지 않는 javascript의 사용
• 실전 웹 표준 가이드 (2005) (down)
• CSS 제대로 쓰기

W3C 기술 문서

권고안(Recommandations)

• HTML 4.01 Specification (한국어)
• XHTML™ Basic
• XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition)
• XHTML™ 1.1 - Module-based XHTML
• Cascading Style Sheets, level 2 (CSS2) Specification
• Web Content Accessibility Guidelines 1.0 (한국어)

개발중 문서(Drafts, CR)

• XHTML™ 2.0
• Cascading Style Sheets, level 2 revision 1 CSS 2.1 Specification
• Web Content Accessibility Guidelines 2.0
• General Techniques for WCAG 2.0
• HTML Techniques for WCAG 2.0
• CSS Techniques for WCAG 2.0
• Client-side Scripting Techniques for WCAG 2.0
• Understanding WCAG 2.0

전체 문서들은 W3C Technical Reports and Publications에서 보실 수 있습니다.

The Web

• 웹표준 (Web Standards)
• 테이블 레이아웃과 CSS 레이아웃
• 브라우저
• 저작 도구
• 웹표준 커뮤니티
• 웹표준 관련 서적
• 웹 에디터
• 문서포함 방법

Markup language(HTML, XHTML)

• 문서형 선언(Document Type Definition)
• Character Encoding
• Target 속성
• 적절한 URL 표기
• Javascript 선언
• <object> 태그와 대체 텍스트
• Flash Object 표준으로 삽입
• Wmode로 Flash 플레이어의 투명/불투명 제어
• IE의 select가 iframe보다 위로 올라오는 현상
• IE에서 frame안에 표준 DTD 문서를 사용할 때 생기는 스크롤바 제거
• 스타일 선언 방법

Cascading Style Sheet

• Cascading Style Sheet
• 링크 걸린 이미지의 border 없애기
• vertical-align으로 이미지 아래의 여백 조정
• line-height를 이용한 이미지를 세로 방향 중앙 정렬
• Text 링크의 Display 조정으로 버튼처럼 사용하기
• border-collapse로 cellpadding, cellspacing속성 없이 여백없는 table 만들기
• Float Element만 포함한 블록을 clear하는 방법
• Margin을 이용한 컨텐츠 블록의 중앙정렬
• 화면 정 중앙에 위치하는 블록
• absolute position과 relative position의 관계
• 높이를 100%로 유지하는 레이아웃
• UL, OL, LI Element in IE
• IE Float 블록의 double margin bug
• IE의 position: fixed
• IE Scrollbar 디자인 변경
• IE에서 display: block을 사용할 경우 리스트 하단의 여백 없애는 방법
• IE에서 줄이 나뉘는 인라인 블록의 배경 이미지가 안나오는 오류

Javascript

• 팝업창의 사용자 접근성 높이기
• document.getElementsBySelector
• addEvent, removeEvent (via QuirksMode)
• CSS first-child psuedo class
• Rollover Image
• CSS3 Background Image Layering
• 동적으로 className 바꾸기
• Mouseover 시에 className 바꾸기
• 리스트 항목의 높이 맞추기
• Definition List Toggle Toggle List
• Tab 컨텐츠
• Cookie를 이용한 팝업 제어
• Iframe 크기 조절
• Menu
• Drag & Drop
• IE에서 PNG 포맷의 이미지 사용
• Flash Object를 Active-X로 바꾸기
• 미디어 불러오기
• Minimize Windows (Windows IE only)
• 마우스와 키보드 사용 못하게 하는 방법
• Ticker
• 컨텐츠 Slide
• 컨텐츠 Scroll
• 스크롤 따라 부드럽게 움직이는 레이어
• MessageLayer

Flash

• 투명효과가 들어간 이미지 사용: PNG
• Loadmovie
• 메뉴