1. CSS 유효성 검사 문제
우선, 경쟁 요건에 따라 출품작은 XHTML 표준을 준수해야 하며, 제출된 CSS는 W3C 검증을 통과해야 합니다. CSS 확인 상황은 이상적입니다. 항목 중 8개 항목만 CSS2.0 확인에 실패했습니다. 주요 확인 오류는 다음과 같습니다. "라인: 0 글꼴 계열: 마지막 선택으로 유형군을 지정하는 것이 좋습니다."
W3C에서는 글꼴을 정의할 때 단일 글꼴이 아닌 글꼴 카테고리로 끝나야 한다고 권장합니다. 예를 들어 "sans-serif"는 웹 글꼴이 다른 운영 체제에서 표시될 수 있도록 하는 데 사용됩니다.
대부분의 사람들이 body 태그에 "sans-serif"를 정의하지만, 다른 ID나 클래스에서 글꼴을 다시 정의할 때 sans-serif를 생략하면 검증에 실패한 것으로 간주됩니다. 이 실수는 그다지 심각하지 않으며 조금만 주의를 기울이면 피할 수 있습니다.
2. CSS 작성 제안
CSS 파일에 주석을 추가합니다. 주석은 향후 유지 관리에 편리함을 가져다 줄 것입니다. CSS 파일에는 가능한 한 많은 주석을 추가하는 것이 좋으며, 적은 수의 바이트를 추가하는 것에 대해 걱정하지 마십시오.
CSS 구문을 최대한 줄여보세요. 예를 들어, 색상 값 "#FFFFFF"는 "#FFF"로 축약될 수 있습니다. "padding-top:30px;Padding-right:0;padding-bottom:10px;padding-left:2 0px"는 " 패딩:30px 0 10px" 20px;". 기술을 정의하는 데에는 더 많은 저장 기술이 있으며 CSS 응용 프로그램에 더 능숙해지면 더 나은 방법을 계속 발견하게 될 것입니다.
3. XHTML 유효성 검사 문제
스타일시트 대회였기 때문에 다들 CSS 검증에 더 신경을 썼지만, XHTML 준수 측면에서는 조금 소홀했고, 저수준 오류도 많이 발생했습니다. 주요 문제는 다음과 같습니다.
target="_blank", 이 구문은 HTML4.0에서는 올바르지만 XHTML1.0에서는 허용되지 않습니다. 한 가지 해결책은 target="new"라고 쓰는 것이고, 또 다른 해결책은 js를 사용하여 모든 대상을 처리하는 것입니다.
스타일 시트를 포함하지 않는 것이 가장 좋습니다. 스타일 시트 파일을 독립적으로 유지 관리하는 것이 더 쉽습니다. <style>이 포함된 경우 <style type="text/css">로 작성해야 하며 유형을 무시할 수 없습니다. 그렇지 않으면 XHTML에서 스타일이 사용되는 대상을 결정할 수 없습니다.
<br>은 <br />로 작성해야 합니다. XHTML에서는 짝이 없는 태그 바로 뒤에 "/"가 와야 합니다.
동일한 ID를 재사용하세요. ID는 XHTML에서 한 번만 사용할 수 있습니다. 스타일을 여러 번 참조해야 하는 경우 클래스를 사용해야 합니다.
<meta http-equiv="Content-Type" content="text/html; charset="gb2312" />분명히 콘텐츠 속성 값에 추가 따옴표가 있습니다.
플래시 삽입 방법이 잘못되었습니다. <embed>는 원래 Netscape의 비공개 태그였지만 나중에 IE에서 지원되었지만 HTML4.0에는 <embed> 태그가 없습니다. W3C는 <object> 태그 사용을 옹호합니다. 서로 다른 브라우저 간의 호환성 문제를 해결하기 위한 해결 방법은 두 태그를 모두 사용하는 것입니다. 전체 샘플 코드는 다음과 같습니다(플래시 배경은 투명함): <object classid="clsid:27CDB6E-AE6D-11cf-96B8-444553540000"
코드베이스=" http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0 "
width="300" height="100"> <param name="quality" value="high"> <param name="wmode" value="transparent">
<param name="SRC" value="test.swf"> <embed src="test.swf" wmode="transparent" quality="high"
플러그인 페이지=" http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash "
type="application/x-shockwave-flash" width="300" height="100"> </embed> </object>
그러나 XHTML로 직접 작성하는 것은 여전히 불가능합니다. 이제 위의 코드를 flash.js 파일에 작성한 다음 호출함으로써만 검증을 속일 수 있습니다.
<script type="text/javascript" src="flash.js"></script>
플래시가 표준을 충족하는지 여부는 논란의 여지가 있는 문제입니다. 추가 지침: http://www.blueidea.com/tech/site/2004/1920.asp 를 참조하세요.
id=header class=title과 같은 코드는 id="header" class="title"로 작성해야 합니다. 속성 값을 인용하는 것은 가장 기본적인 XHTML 구문 규칙입니다.
4. 호환성 문제
IE6.0, Mozilla Firefox1.0, Opera 7.12에서 보면 변형되거나 정렬이 어긋나는 작품이 12개 있습니다. (저는 IE5.0으로 테스트하지 않았고 게으르기도 했습니다.) IE5.0은 모든 CSS 레이아웃 디자이너에게 도전입니다.
IE 중심에 있지만 Mozilla에는 없습니다. IE에서 본문 {TEXT-ALIGN: center;}를 설정하면 이미 중앙에 배치할 수 있지만 Mozilla에서는 중앙에 정렬해야 하는 레이어에 다음 스타일 설정을 추가해야 합니다. MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 너비. Mozilla에서는 페이지가 정상적으로 보이지만 IE에서는 너비를 초과하여 변형되고 나란히 있는 레이어가 아래로 이동됩니다. 이 상황은 IE와 Mozilla 간의 박스 모델 해석이 다르기 때문에 발생합니다. "!important" 방법과 같은 많은 솔루션이 있습니다.
일반적으로 대부분의 출품작은 전반적으로 자격을 갖추고 있으며 이 대회의 목적은 기본적으로 달성되었습니다. 웹 표준과 CSS 레이아웃은 점점 더 많은 디자이너에 의해 이해되고 숙달되었습니다. 일부 작품의 형편없는 예술은 이것이 과정이라고 생각합니다. 수석 디자이너는 테이블 레이아웃이 처음 등장했을 때 대부분의 웹 페이지가 매우 단순했다는 것을 모두 기억해야 합니다. CSS 레이아웃을 소화, 이해 및 적용하는 과정을 거치면 1등작처럼 기술과 미학을 모두 고려한 웹페이지가 더 많아질 것입니다.