Div+CSS 웹 페이지 레이아웃을 적용하여 웹 표준을 준수하는 웹 사이트를 제작할 때 쉽게 발생할 수 있는 몇 가지 문제가 있습니다.
이제 모든 사람이 문제가 있는 위치를 볼 수 있도록 요약해 보겠습니다.
1. CSS 유효성 검사 문제
우리가 디자인하는 웹 페이지는 모두 XHTML 표준과 CSS를 준수하여 W3C 검증을 통과하기를 희망합니다. 일부 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에서 한 번만 사용할 수 있습니다. 스타일을 여러 번 참조해야 하는 경우 클래스를 사용해야 합니다.
◎플래시 삽입 방법이 잘못되었습니다. <embed>는 원래 Netscape의 비공개 태그였지만 나중에 IE에서 지원되었지만 HTML4.0에는 <embed> 태그가 없습니다. W3C는 <object> 태그 사용을 옹호합니다. 서로 다른 브라우저 간의 호환성 문제를 해결하기 위한 해결 방법은 두 태그를 모두 사용하는 것입니다.
전체 샘플 코드는 다음과 같습니다(플래시 배경은 투명합니다).
| 인용된 내용은 다음과 같습니다. <객체 classid="clsid:27CDB6E-AE6D-11cf-96B8-444553540000" 코드베이스= "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" 폭="300" 높이="100"> <param name="품질" 값="높음"> <param name="wmode" value="투명"> <param name="SRC" value="test.swf"> <embed src="test.swf" wmode="투명" 품질="높음" 플러그인 페이지="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>
플래시가 표준을 충족하는지 여부는 논란의 여지가 있는 문제입니다.
◎id=header class=title과 유사한 코드는 id="header" class="title"로 작성해야 합니다. 속성 값을 인용하는 것은 가장 기본적인 XHTML 구문 규칙입니다.
4. 호환성 문제
IE6.0, Mozilla Firefox1.0 및 Opera 7.12에서 볼 때 일부 웹사이트가 변형되고 잘못 정렬되어 있습니다.
IE 중심에 있지만 Mozilla에는 없습니다. IE에서 본문 {TEXT-ALIGN: center;}를 설정하면 이미 중앙에 배치할 수 있지만 Mozilla에서는 중앙에 정렬해야 하는 레이어에 다음 스타일 설정을 추가해야 합니다. MARGIN-RIGHT: auto;MARGIN-LEFT: auto;
너비를 초과합니다. Mozilla에서는 페이지가 정상적으로 보이지만 IE에서는 너비를 초과하여 변형되고 나란히 있는 레이어가 아래로 이동됩니다. 이 상황은 IE와 Mozilla 간의 박스 모델 해석이 다르기 때문에 발생합니다. "!important" 방법과 같은 많은 솔루션이 있습니다.
점점 더 많은 디자이너가 웹 표준과 CSS 레이아웃을 이해하고 숙달하고 있습니다. CSS 레이아웃을 어느 정도 소화하고 이해하고 적용한 후에는 기술적, 미적 고려 사항을 모두 갖춘 더 많은 웹 페이지가 등장하게 될 것입니다.