Web2.0_Experience 교환시 XHTML+CSS 디자인 주의사항 정리

참고:
1. DOCTYPE 선택 외의 구문은 반드시 영문 소문자로 작성해야 합니다. 여기에는 OnMouseOver와 같이 Macromedia Dreamweaver에서 생성된 마우스 동작이 포함되며, 이 동작도 onmouseover로 수정되어야 합니다.

2. XHTML 구문에서는 모든 태그에 시작과 끝이 있어야 합니다. 예를 들어

및 ,

및

등입니다. 페어링되지 않은 로고의 경우 로고 끝에 공백을 추가하고 그 뒤에 "/"를 추가해야 합니다. 예를 들어
은
로 쓰고, 는 으로 쓴다. 공백을 넣는 이유는 브라우저가 코드를 함께 인식하지 못하는 것을 방지하기 위함이다.

3. 모든 XML 태그는 합리적으로 중첩되어야 합니다. 예를 들어

을

으로 변경해야 합니다., iaitu, lapisan bersarang demi lapisan mestilah betul-betul simetri.

4. Semua atribut mesti disertakan dalam tanda petikan "". Contohnya: mesti ditukar kepada: . Dalam kes khas, anda perlu menggunakan petikan berganda dalam nilai atribut, anda boleh menggunakan ", petikan tunggal boleh menggunakan ', sebagai contoh: .

5. Letakkan semua ), iaitu bukan sebahagian daripada teg, Semua mesti dikodkan sebagai >, mana-mana ampersand (&) yang bukan sebahagian daripada entiti mesti dikodkan sebagai & (tiada ruang antara huruf kod di atas)

6 nilai kepada semua atribut. Contohnya: mesti ditukar kepada: 7. Jangan gunakan "--" dalam kandungan ulasan.예: 내부 점선 을 등호나 공백으로 바꿀 수 있습니다.

첫 번째는 파일 헤더를 작성하는 표준 방법입니다.

코드:
nbsp;   html    PUBLIC    "-//W3C//DTD    XHTML    1.0    Transitional//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1- dtd">
http://www.w3.org/1999/xhtml" lang="utf-8">








[클립보드에 복사]



CSS 정의 측면에서 다음과 같은 범용 글꼴 설정 솔루션을 추천해 볼 가치가 있습니다.
CODE:
body {font-family : "Lucida Grande", Verdana , Lucida, Arial , Helvetica, Song Dynamise, sans-serif }
[클립보드에 복사]


글꼴은 나열된 순서대로 선택됩니다. 사용자의 컴퓨터에 Lucida Grande 글꼴이 포함되어 있으면 해당 문서는 Lucida Grande로 지정됩니다. 그렇지 않은 경우 Verdana 글꼴로 지정되고, Verdana가 없으면 Lucida 글꼴로 지정됩니다.

Lucida Grande 글꼴은 Mac OS X에 적합합니다. 글꼴은 모든 Windows 시스템에 적합합니다.

Lucida는 UNIX 사용자에게 적합합니다.

"Songti"는 중국어 간체 사용자에게 적합합니다.

목록에 있는 글꼴이 없는 경우 사용 가능한 경우 기본 sans-serif 글꼴 호출이 보장됩니다.


링크 스타일을 정의하기 위해 CSS에서 4개의 의사 클래스(a:link, a:visited, a:hover 및 a:active)가 사용됩니다. 예:

a :link{글꼴-가중치 : 굵게 ;텍스트-장식 : 없음 ;색상 : #c00 ;}
a:visited {글꼴-가중치 : 굵게 ;텍스트-장식 : 없음 ;색상 : #c30 ;}
a :hover {글꼴 가중치 : 굵게 ;텍스트 장식 : 밑줄 ;색상 : #f60 ;}
a:active {글꼴 가중치 : 굵게 ;텍스트 장식 : 없음 ;색상 : #F90 ;}

하지만 글을 쓸 때 순서에 주의해야 합니다. 올바른 순서는 LVHA입니다. 이렇게 쓰지 않으면 기대한 효과와 다를 수 있습니다.

중간 부분의 레이아웃 표준화와 메뉴의 테이블이 아닌 구현은 실무적인 지침이 필요하므로 여기에는 아무것도 쓰지 않겠습니다. 코드 검증에 관한 몇 가지 기록을 작성해 보겠습니다.

일반적인 XHTML 유효성 검사 오류 비교표:
DOCTYPE을 찾을 수 없습니다! HTML 4.01 전환으로 돌아가는 중--DOCTYPE이 정의되지 않았습니다.

문자 인코딩을 찾을 수 없습니다. UTF-8로 대체됩니다.--정의되지 않은 언어 인코딩입니다.

"img"의 종료 태그가 생략되었지만 OMITTAG NO가 지정되었습니다. 이미지 태그는 "/"로 닫히지 않습니다.

SHORTTAG YES가 지정되지 않는 한 속성 값 사양은 속성 값 리터럴이어야 합니다. 속성 값은 따옴표로 묶어야 합니다.

요소 "DIV" 정의되지 않음---DIV 태그는 대문자로 사용할 수 없으며 div를 소문자로 변경해야 합니다.

필수 속성 "alt"가 지정되지 않았습니다---이미지에 alt 속성을 추가해야 합니다.

필수 속성 "type"이 지정되지 않았습니다---JS 또는 CSS에서 호출한 태그에 유형 속성이 누락되었습니다.

일반적인 CSS2 유효성 검사 오류 비교표 원인:
(경고) 잘못된 숫자: color909090은 색상 값이 아닙니다: 909090 ---16진수 색상 값은 "#" 기호와 함께 추가되어야 합니다. is, #909090
(경고) 잘못된 숫자: margin-topUnknown 차원: 6pixels ---픽셀은 단위 값이 아니며, 올바른 쓰기 방법은 6px입니다.
(경고) scroll_bar-face-color 속성 존재하지 않습니다: #eeeeee --- 스크롤 막대 정의 색상은 비표준 속성입니다
(경고) 줄: 0 글꼴 패밀리: 마지막 선택으로 카테고리 패밀리를 지정하는 것이 좋습니다 - W3C에서는 다음을 권장합니다. 글꼴을 정의할 때 웹 글꼴이 다른 운영 체제에서 표시될 수 있도록 "sans- serif"와 같은 글꼴 범주로 끝납니다.
(경고)Line: 0 can't find the warning message for otherprofile- - 코드에 비표준 속성이나 값이 있음을 나타냅니다. 프로그램이 해당 경고 정보를 판단하고 제공할 수 없습니다.