집 > 기사 > 웹 프론트엔드 > 웹 페이지 레이아웃에 CSS를 사용하는 방법

웹 페이지 레이아웃에 CSS를 사용하는 방법

巴扎黑원래의: 2017-03-30 15:20:152679검색

첫 번째 날: 선택할 DOCTYPE

머리말

안녕하세요 여러분! 이 기사 시리즈는 Ajie가 w3cn.org 웹사이트를 만드는 과정에 따라 작성되었습니다. Ajie는 이전에 웹 표준을 완전히 준수하는 웹사이트를 제작한 적이 없습니다. 이제는 외국 자료를 참고해서 그 과정에서 제 생각과 경험을 기록해 두는 것이 모든 분들께 도움이 되었으면 좋겠습니다. 좋아요, 시작해 보겠습니다.

첫날

표준에 맞는 사이트를 만들기 시작하면 가장 먼저 해야 할 일은 요구 사항에 맞는 DOCTYPE을 선언하는 것입니다.

이 웹사이트 홈페이지의 원본 코드를 보면 첫 번째 줄이

유명 웹 디자인 소프트웨어 개발자 등 표준을 충족하는 일부 사이트를 엽니다. Macromedia와 개인 디자인 마스터 Zeldman 웹사이트에서도 동일한 코드를 찾을 수 있습니다. 다른 표준 준수 사이트(예: k10k.net)의 코드는 다음과 같습니다.

그럼 이 코드는 무엇을 의미하나요? 꼭 배치해야 하나요?

DOCTYPE이란

위 코드를 DOCTYPE 문이라고 부릅니다. DOCTYPE은 문서 유형의 약어이며 사용 중인 XHTML 또는 HTML 버전을 나타내는 데 사용됩니다.

DTD(예: 위 예의 xhtml1-transitional.dtd)는 문서 유형 정의라고 하며, 여기에는 문서의 규칙이 포함되어 있습니다. 브라우저는 DTD를 기반으로 페이지의 ID를 해석합니다. 정의하고 표시합니다.

표준을 준수하는 웹 페이지를 구축하려면 DOCTYPE 선언이 필수적이고 중요한 구성 요소입니다. XHTML이 올바른 DOCTYPE을 결정하지 않으면 로고나 CSS도 적용되지 않습니다.

XHTML 1.0은 선택할 수 있는 세 가지 DTD 선언을 제공합니다.

과도기: 요구 사항이 매우 느슨한 DTD로 HTML4.01 마크업을 계속 사용할 수 있습니다(그러나 xhtml 작성을 준수해야 함). 방법). 전체 코드는 다음과 같습니다.

엄격: 엄격한 DTD의 경우
과 같은 프레젠테이션 레이어 식별자 및 속성을 사용할 수 없습니다. 전체 코드는 다음과 같습니다.

프레임세트: 프레임 페이지용으로 특별히 설계된 DTD. 페이지에 프레임이 포함되어 있으면 이 DTD를 사용해야 합니다. 전체 코드는 다음과 같습니다.

어떤 DOCTYPE을 선택합니까

물론 엄격한 DTD가 이상적인 상황이지만 웹을 처음 접하는 대부분의 디자이너에게는 표준에 따르면 Transitional DTD(XHTML 1.0 Transitional)는 현재 이상적인 선택입니다(또한 Transitional DTD를 사용하는 이 사이트 포함). 또한 이 DTD를 사용하면 프리젠테이션 계층 식별자, 요소 및 속성을 사용할 수 있으므로 W3C 코드 확인을 통과하는 것도 더 쉽습니다.

참고: 위에 언급된 "프리젠테이션 레이어의 식별 및 속성"은 조판용 테이블, 배경색 식별 등과 같이 순수하게 성능을 제어하는 데 사용되는 태그를 나타냅니다. XHTML에서 태그는 표현을 달성하기 위한 것이 아니라 구조를 표현하기 위해 사용됩니다. 우리 전환의 목적은 궁극적으로 데이터와 표현을 분리하는 것입니다.

예: 마네킹이 옷을 갈아입습니다. 모델은 데이터와 같고, 옷은 표현의 형태입니다. 모델과 옷이 분리되어 있어 마음대로 옷을 갈아입을 수 있습니다. 원본 HTML4에서는 데이터와 프리젠테이션이 혼합되어 있어 프리젠테이션 형식을 한 번에 바꾸는 것이 매우 어려웠습니다. 하하, 조금 추상적이네요. 이 개념은 지원 과정에서 점차적으로 이해되어야 합니다.

보충

DOCTYPE 선언은 모든 XHTML 문서의 상단, 모든 코드 및 마크업 위에 배치되어야 합니다.

자세한 내용은 W3C 홈페이지를 참고하세요

2일차: 네임스페이스란 무엇입니까

DOCTYPE이 선언된 후 다음 코드는 다음과 같습니다.

일반적으로 HTML4.0 코드는 입니다. 여기서 "xmlns"는 무엇인가요?

이 "xmlns"는 XHTML 네임스페이스의 약자로 "네임스페이스" 선언이라고 합니다. 네임스페이스의 역할은 무엇인가요? Ajie의 이해는 다음과 같습니다.

xml을 사용하면 자신만의 로고를 정의할 수 있으므로 정의한 로고는 다른 사람이 정의한 로고와 동일할 수 있지만 의미는 다릅니다. 파일을 교환하거나 공유할 때 오류가 쉽게 발생할 수 있습니다. 이 오류를 방지하기 위해 XML은 네임스페이스 선언을 사용합니다. 이를 통해 이를 가리키는 URL을 통해 신원을 식별할 수 있습니다. 예:

Xiao Wang과 Xiao Li는 모두 식별자를 정의했습니다. Xiao Wang의 네임스페이스는 "http://www.xiaowang.com"이고 Xiao Li의 네임스페이스는 "http ://"입니다. www.xiaoli.com"인 경우 두 문서가 데이터를 교환할 때 식별자는 다른 네임스페이스에 속하므로 혼동되지 않습니다.

더 대중적인 설명은 다음과 같습니다. 네임스페이스는 문서에 표시하여 이 문서가 속한 사람을 다른 사람에게 알리는 것입니다. 이 "누구"가 URL로 대체되는 것뿐입니다.

XHTML은 HTML에서 XML로 전환하는 마크업 언어이므로 XML 문서 규칙을 준수해야 하므로 네임스페이스도 정의해야 합니다. 그리고 XHTML1.0은 로고를 사용자 정의할 수 없기 때문에 네임스페이스는 "http://www.w3.org/1999/xhtml"로 동일합니다. 아직 이해하지 못하더라도 상관없습니다. 이 단계에서는 코드를 복사하기만 하면 됩니다.

뒤의 lang="gb2312"는 문서가 중국어 간체로 작성되어야 함을 지정합니다.

3일 차: 언어 인코딩 정의

세 번째 단계는 다음과 같이 언어 인코딩을 정의하는 것입니다.

브라우저에서 올바르게 해석되고 W3C 코드 확인을 통과하려면 모든 XHTML 문서가 사용하는 인코딩 언어를 선언해야 합니다. 일반적으로 gb2312(중국어 간체)를 사용합니다. 다국어 페이지를 만들 때 필요에 따라 정의할 수 있는 유니코드, ISO-8859-1 등을 사용할 수도 있습니다.

대개는 이 정의로 충분합니다. 그러나 XML 문서는 이러한 방식으로 언어 인코딩을 정의하지 않는다는 점을 추가해야 합니다.

Macromedia.com 홈 페이지의 코드 첫 번째 줄에서 비슷한 내용을 볼 수 있습니다. 이는 W3C에서 권장하는 정의 방법이기도 합니다. 그렇다면 이 접근 방식을 채택하면 어떨까요? 그 이유는 일부 브라우저가 표준을 불완전하게 지원하고 IE6/windows와 같은 정의 방법을 올바르게 이해할 수 없기 때문입니다. 따라서 현재 전환 계획에서는 여전히 메타 방식을 사용하는 것이 좋습니다. 물론 두 가지 방법 모두 쓸 수 있습니다.

이 웹사이트의 소스 코드를 보면 언어 인코딩이 정의된 문장이 하나 더 있다는 것을 알 수 있습니다:

다양한 브라우저에서 페이지를 올바르게 해석할 수 있도록 하기 위해 이전 브라우저용으로 작성되었습니다.

참고: 위 선언문 끝에 슬래시 "/"가 표시되는데, 이는 이전 HTML4.0 코드 작성과 다릅니다. 그 이유는 XHTML 구문 규칙에 따라 모든 태그에 시작과 끝이 있어야 하기 때문입니다. 예를 들어, 및 ,

및

등입니다. 페어링되지 않은 식별자의 경우 식별자 끝에 공백을 추가하고 "/ ". 예를 들어
는
로 작성하고, 는 로 작성하는 이유는 브라우저가 코드를 함께 인식하지 못하도록 하기 위함입니다.

4일차: 스타일 시트 호출

웹 표준을 사용하여 웹사이트를 디자인합니다. 전환 방법은 주로 XHTML+CSS를 사용하는 것입니다. 이를 위해서는 모든 웹 디자이너가 CSS에 능숙해야 합니다. 이전에 CSS를 사용해 본 적이 없다면 지금 배우기 시작하세요. 웹 표준을 준수하는 웹사이트를 만들려면 CSS를 모르면 아름다운 페이지를 디자인할 수 없습니다.

실제로 성능의 모든 측면을 CSS로 구현해야 합니다. 예전에는 위치 지정과 레이아웃을 위해 테이블을 사용했지만 이제는 위치 지정과 레이아웃을 위해 p를 사용해야 합니다. 이것은 발상의 전환인데, 처음에는 조금 불편합니다. 하하, 어떤 변화에도 저항이 있을 것입니다. 표준이 가져오는 "혜택"을 누리려면 일부 오래된 전통 관행을 포기하는 것이 좋습니다.

스타일 시트 외부 호출

과거에는 일반적으로 스타일 시트를 두 가지 방법으로 사용했습니다.

페이지의 인라인 방법: 즉, 스타일 시트 삽입 페이지 코드의 헤드 부분에 직접 작성합니다. 이와 비슷합니다:

외부 호출 방법 : 스타일시트를 별도의 .css 파일로 작성한 후 페이지의 헤드 영역에 다음과 유사한 코드로 호출합니다.

웹에 부합하는 디자인 표준에서는 외부 호출 방법을 사용하며 이점은 자명합니다. 페이지를 수정하지 않고 .css 파일만 수정하면 페이지 스타일을 변경할 수 있습니다. 모든 페이지가 동일한 스타일 시트 파일을 호출하는 경우 하나의 스타일 시트 파일을 변경하면 모든 파일의 스타일이 변경될 수 있습니다.

스타일 시트를 호출하는 이중 테이블 방법

일부 표준 준수 사이트의 원본 코드를 보면 다음과 같은 2개의 문장이 있는 것을 볼 수 있습니다. 스타일 시트의 이름은 다음과 같습니다.

;style type="text /css" media="all">@import url( css/style01.css );

왜 두 번 써야 하나요?

사실 일반적인 상황에서는 외부링크 방식(즉, 첫 번째 문장)만 사용해도 충분합니다. 여기서 사용하는 이중 테이블 호출은 단지 예일 뿐입니다. "@import" 명령은 스타일 시트를 입력하는 데 사용됩니다. "@import" 명령은 Netscape 4.0 브라우저에서 유효하지 않습니다. 즉, Netscape 4.0 브라우저에서는 특정 효과를 숨기고 4.0 이상이나 다른 브라우저에서 표시하려는 경우 "@import" 명령 메소드를 사용하여 스타일 시트를 호출할 수 있습니다.

5일차: 헤드 영역의 기타 설정

이 팁은 주로 메타 태그 설정에 중점을 둡니다. 실제로 웹 표준 준수와는 거의 관련이 없습니다. 마지막에 추가하는 것에 주의하세요. "/"만 사용하여 태그를 닫을 수 있지만, 이것은 입문용 튜토리얼이므로 좀 더 자세히 작성해 보겠습니다.

즐겨찾기 아이콘

이 사이트를 즐겨찾기에 추가하시면 즐겨찾기 URL 앞의 IE 아이콘이 이 사이트의 특별한 아이콘이 되는 것을 보실 수 있습니다. 이 효과를 얻는 방법은 매우 간단합니다. 먼저 16x16 아이콘을 만들고 이름을 favicon.ico로 지정한 다음 루트 디렉터리에 배치합니다. 그런 다음 헤드 영역에 다음 코드를 삽입합니다.

< ;link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

검색 엔진용 콘텐츠

코드는 다음과 같습니다. 자신의 사이트 콘텐츠로 바꾸면 됩니다.

검색 로봇이 사이트의 모든 링크를 검색하도록 허용합니다. 특정 페이지를 검색하지 않으려면 robots.txt 방식을 사용하는 것이 좋습니다

사이트 작성자 정보 설정

사이트 저작권 정보 설정

사이트에 대한 간략한 소개(권장)

사이트 키워드(권장)

이 정도만 먼저 소개하겠습니다. 보충 설명, 이전 5개 섹션은 모두 헤드 영역의 코드에 관한 것이었고 실제 페이지 내용은 전혀 언급되지 않았습니다. 하하. 사실 헤드 영역은 매우 중요하다는 것을 알 수 있습니다. 페이지의 헤드 코드를 보고 디자이너를 만드는 것만으로도 충분합니까?

6일차: XHTML 코드 사양

공식적인 콘텐츠 제작을 시작하기 전에 먼저 웹 표준의 코드 사양을 이해해야 합니다. 이러한 사양을 이해하면 우회를 피하고 최대한 빨리 비밀번호 확인에 도움이 될 수 있습니다.

1. 모든 태그에는 해당하는 닫는 태그가 있어야 합니다.

과거에는 HTML에서

li>를 사용하여 해당

를 작성하는 대신에 그러나 이것은 XHTML에서는 합법적이지 않습니다. XHTML은 엄격한 구조를 요구하며 모든 태그를 닫아야 합니다. 페어링되지 않은 별도의 태그인 경우 태그 끝에 "/"를 추가하여 닫습니다. 예:

Web Designer

🎜>

2. 모든 태그 요소와 속성의 이름은 소문자여야 합니다.
HTML과 달리 XHTML은 대소문자를 구분하며 다른 라벨. XHTML에서는 모든 태그 및 속성 이름이 소문자여야 합니다. 예를 들어 <BODY>는 <body>로 작성되어야 합니다. 대소문자 혼합도 인식되지 않습니다. 일반적으로 Dreamweaver에서 자동으로 생성된 속성 이름 "onMouseOver"도 "onmouseover"로 변경해야 합니다. 3. 모든 XML 태그는 합리적으로 중첩되어야 합니다. 또한 XHTML은 엄격한 구조를 요구하므로 모든 중첩이 순서대로 이루어져야 합니다. /b>는 다음과 같이 수정되어야 합니다. /p> 즉, 레이어별 중첩은 엄격하게 대칭이어야 합니다. 4. 모든 속성은 따옴표로 묶어야 합니다. "" HTML에서는 속성 값 앞뒤에 따옴표를 붙일 필요가 없지만, XHTML에서는 인용되어야 합니다. 예: <height=80>은 다음과 같이 수정해야 합니다. <height="80"> 특별한 경우에는 속성 값에 큰따옴표를 사용해야 합니다. " 를 사용할 수 있고, 작은따옴표로 '를 사용할 수 있습니다(예: <alt="say'hello'"> 5. 인코딩을 사용하여 모든 < 및 & 특수 기호 <🎜)를 나타냅니다. > 태그의 일부가 아닌 모든 미만 기호(<)는 & l t 부분이 아닌 모든 초과 기호(>)로 인코딩되어야 합니다. 태그는 > 엔터티의 일부가 아닌 모든 앰퍼샌드(&)는 & a m p 로 인코딩되어야 합니다. 참고: 위 사이에는 공백이 없습니다. >6. 모든 속성에 값 할당 XHTML은 모든 속성에 값이 있어야 한다고 규정하며, 값이 없으면 다음과 같이 반복됩니다. ><td nowrap> < input type="checkbox" name="shirt" value="medium" selected> 다음으로 수정해야 합니다: <td nowrap="nowrap"<input type="checkbox" name ="shirt" value="medium" selected="checked"> 7. 댓글 내용에 '--'를 사용하지 마세요. "-- "는 XHTML 주석 끝의 시작과 끝에서만 발생할 수 있습니다. 즉, 내용에서 더 이상 유효하지 않습니다. 예를 들어 다음 코드는 유효하지 않습니다:  내부 점선을 등호나 공백으로 바꾸세요 <!--여기에 댓글을 남겨주세요====== ======여기에 댓글 달기- -> 위 사양 중 일부는 이상해 보일 수 있지만 모두 향후 데이터 재사용을 용이하게 하기 위해 코드를 통일되고 고유하게 만드는 것을 목표로 합니다. <h2>7일차: CSS 소개 </h2> XHTML 코드 사양을 이해한 후 CSS 레이아웃을 진행합니다. 먼저 CSS에 대한 입문 지식을 소개하겠습니다. 이미 익숙하다면 이 섹션을 건너뛰고 다음 섹션으로 바로 이동할 수 있습니다. CSS는 Cascading Style Sheets의 약자입니다. 웹 문서에 스타일을 추가하는 간단한 메커니즘이며 프리젠테이션 레이어의 레이아웃 언어에 속합니다. 1. 기본 구문 사양 일반적인 CSS 문 분석: p {COLOR: #FF0000: #FFFFFF} "p"에 대한 스타일을 정의한다는 의미로 "p"를 "선택자"라고 부릅니다. 스타일 선언은 한 쌍의 중괄호 "{}"로 작성됩니다. COLOR와 BACKGROUND를 "속성"이라고 하며, 서로 다른 속성은 세미콜론 ";"으로 구분됩니다. "#FF0000"과 "#FFFFFF"는 속성의 값(값)입니다. . 2. 색상 값 색상 값은 RGB 값으로 쓸 수 있습니다(예: color: rgb(255,0,0) 또는 16진수 쓰기). 위의 예와 같습니다. color:#FF0000. 16진수 값이 쌍으로 반복되면 동일한 효과로 축약될 수 있습니다. 예를 들어 #FF0000은 #F00으로 쓸 수 있습니다. 단, 반복되지 않으면 축약할 수 없습니다. 예를 들어 #FC1A1B는 6자리로 채워야 합니다. 3. 글꼴 정의 웹 표준에서는 다음과 같은 글꼴 정의 방법을 권장합니다. 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 글꼴은 호출을 보장할 수 있습니다. 4. 그룹 선택기 여러 요소가 동일한 스타일 속성을 갖는 경우 명령문을 함께 호출할 수 있습니다. , 요소는 쉼표로 구분됩니다. : p, td, li { 글꼴 크기: 12px } 5. 파생 선택기 예를 들어, 요소 스타일에 하위 요소를 정의하려면 다음과 같습니다. li Strong { 글꼴 스타일: 기울임꼴; 글꼴 무게: 일반;} 은 기울임꼴이지만 굵은 글꼴 스타일은 정의하지 않습니다. li 아래에 강한 하위 요소. 6.id 선택기 CSS 레이아웃은 주로 "p" 레이어를 사용하여 구현되며, p의 스타일은 "id 선택기"에 의해 정의됩니다. 예를 들어, 먼저 레이어를 정의한 다음 스타일 시트에서 다음과 같이 정의합니다. #menubar { MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} 여기서 "menubar"는 정의한 ID 이름입니다. 앞에 "#" 기호가 있음을 참고하세요. id 선택기는 파생도 지원합니다. 예: #menubar p { text-align : right; margin-top : 10px } 이 방법이 주로 사용됩니다. 레이어와 더 복잡하고 여러 파생 요소가 있는 레이어. 7. 카테고리 선택기 CSS에서 점을 사용하여 카테고리 선택기 정의를 시작합니다. 예: .14px {color : # f60 ;font-size:14px ;} 페이지에서 class="category name" 메소드를 사용하여 다음을 호출합니다. 14px 크기 글꼴 < ;/span> 이 방법은 비교적 간단하고 유연하며 페이지 필요에 따라 언제든지 생성하고 삭제할 수 있습니다. 8. 링크 스타일 정의 CSS에서는 링크 스타일을 정의하기 위해 4개의 의사 클래스, 즉 a:link, a:visited, a:를 사용합니다. hover 및 a : 활성(예: a:link{font-weight :bold ;text-꾸밈 : 없음 ;color : #c00 ;} a:visited {font-weight :bold ; 텍스트 장식 : 없음 ;색상 : #c30 ;} a:hover {글꼴 가중치 : 굵게 ;텍스트 장식 : 밑줄 ;색상 : #f60 ;} a:활성 {글꼴 가중치 : 굵게 ; text -꾸밈 : 없음 ;color : #F90 ;} 위의 문장은 각각 "링크, 방문한 링크, 마우스 오버 시, 마우스 클릭 시" 스타일을 정의합니다. 주의할 점은 위의 순서대로 작성하셔야 합니다. 그렇지 않으면 화면이 예상한 것과 다를 수 있습니다. "LVHA" 순서로 되어 있다는 것을 기억하세요. 하하, 너무 많이 읽으니 좀 어지러워지네요. 사실 CSS에 대한 문법 사양은 더 많습니다. 결국 우리는 이를 단계별로 살펴보겠습니다. 한입에 뚱뚱해질 수는 없어요 :) <h2>8일차: CSS 레이아웃 소개</h2> CSS 레이아웃과 기존 테이블 레이아웃의 가장 큰 차이점은 원래 위치 지정이 테이블을 사용하거나 테이블의 간격을 사용하거나 무색 투명 GIF 이미지를 사용하여 텍스트 레이아웃 섹션의 간격, 이제 레이어(p)가 위치 지정에 사용되고 섹션의 간격은 레이어의 여백, 패딩, 테두리 및 기타 속성을 통해 제어됩니다. 1. p 정의 p 정의의 일반적인 예를 분석합니다: #sample{ MARGIN: 10px 10px 10px 10px; PADDING :20px 10px 10px 20px; 테두리-상단: #CCC 2px 실선; 테두리-우측: #CCC 2px 실선; 테두리-하단: #CCC 2px 실선; 테두리-왼쪽: # CCC 2px 단색; BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat 오른쪽 하단; COLOR: #666; TEXT-ALIGN: center; LINE-HEIGHT: 150 %; WIDTH:60%; } 설명은 다음과 같습니다. 레이어 이름은 를 사용하여 호출할 수 있습니다. ; 페이지에서. MARGIN은 레이어 테두리 바깥에 남겨진 여백을 말하며 페이지 여백이나 다른 레이어와의 간격을 만드는 데 사용됩니다. "10px 10px 10px 10px"는 각각 "위, 오른쪽, 아래, 왼쪽"(시계 방향)의 4개 여백을 나타냅니다. 모두 동일할 경우 "MARGIN: 10px;"로 축약할 수 있습니다. 여백이 0이면 "MARGIN: 0px;"라고 씁니다. 참고: 값이 0인 경우 뒤에 백분율 기호가 와야 하는 RGB 색상 값 0%를 제외하고 다른 경우에는 "px" 단위를 따를 필요가 없습니다. MARGIN은 투명 요소이므로 색상을 정의할 수 없습니다. PADDING은 레이어의 테두리와 레이어의 내용 사이의 공간을 의미합니다. 여백과 마찬가지로 상단, 오른쪽, 하단 및 왼쪽 테두리에서 콘텐츠까지의 거리를 각각 지정합니다. 모두 동일할 경우 "PADDING:0px"로 축약할 수 있습니다. 왼쪽을 개별적으로 지정하려면 "PADDING-LEFT: 0px;"라고 쓰면 됩니다. PADDING은 투명 요소이므로 색상을 정의할 수 없습니다. BORDER는 레이어의 테두리를 나타냅니다. "BORDER-RIGHT: #CCC 2px solid"는 레이어의 오른쪽 테두리 색상을 "#CCC"로, 너비를 "2px"로 정의합니다. "실선" 직선으로. 점선 스타일을 원할 경우 "dotted"를 사용할 수 있습니다. BACKGROUND는 레이어의 배경을 정의합니다. 두 가지 수준으로 정의됩니다. 먼저 이미지 배경을 정의하고 "url(../images/bg_logo.gif)"을 사용하여 배경 이미지 경로를 지정합니다. 두 번째로 배경색 "#FEFEFE"를 정의합니다. "no-repeat"는 배경 이미지를 반복할 필요가 없다는 뜻인데, 가로로 반복하려면 "repeat-x", 세로로 반복하려면 "repeat-y"를 사용하고, 덮을 때까지 반복하면 됩니다. 전체 배경을 보려면 "반복"을 사용하세요. 다음 "오른쪽 하단;"은 배경 이미지가 오른쪽 하단에서 시작됨을 의미합니다. 배경 이미지가 없으면 배경색만 정의할 수 있습니다. BACKGROUND: #FEFEFE COLOR는 이전 섹션에서 소개한 글꼴 색상을 정의하는 데 사용됩니다. TEXT-ALIGN은 레이어의 콘텐츠 배열을 정의하는 데 사용되며 중앙은 중앙, 왼쪽은 왼쪽, 오른쪽은 오른쪽입니다. LINE-HEIGHT는 줄 높이를 정의합니다. 150%는 높이가 표준 높이의 150%임을 의미합니다. LINE-HEIGHT:1.5 또는 LINE-HEIGHT:1.5em으로 쓸 수도 있습니다. 같은 의미. WIDTH는 정의된 레이어의 너비로, 500px와 같은 고정 값이거나 여기서 "60%"와 같은 백분율일 수 있습니다. 이 너비는 콘텐츠의 너비만을 의미하며 여백, 테두리 및 패딩은 포함되지 않습니다. 하지만 일부 브라우저에서는 이렇게 정의되어 있지 않으므로 좀 더 시도해 보아야 합니다. 이 레이어의 실제 성능은 다음과 같습니다. <img src="http://www.csswebs.org/images/arrow.gif" alt="웹 페이지 레이아웃에 CSS를 사용하는 방법" > 데모 페이지 테두리가 2px 회색이고 배경 이미지가 오른쪽 하단에 없습니다. 반복하고, 콘텐츠와 왼쪽 테두리 사이의 거리가 20px이고, 콘텐츠가 중앙에 있고, 모든 것이 예상한 대로입니다. 호호, 보기에는 좋지 않지만 가장 기본이군요. 마스터하시면 CSS 레이아웃 기술의 절반을 배운 것입니다. 그게 다야, 어렵지 않아! (나머지 반은 무엇인가요? 나머지 반은 레이어 간 위치 지정입니다. 나중에 차근차근 설명하겠습니다.) 2. CSS2 박스 모델 이후 1996년 2016년 CSS1이 출시되면서 W3C 조직은 웹 페이지의 모든 개체를 상자에 배치할 것을 권장했습니다. 디자이너는 정의를 생성하여 이 상자의 속성을 제어할 수 있습니다. 이러한 개체에는 단락, 목록, 제목 및 그림이 포함됩니다. 및 레이어 . 박스 모델은 주로 내용, 패딩, 테두리 및 여백의 네 가지 영역을 정의합니다. 위에서 설명한 샘플 레이어는 일반적인 상자입니다. 초보자의 경우 margin, background-color, background-image, padding, content, border 간의 수준과 관계, 상호 영향에 대해 혼란스러워하는 경우가 많습니다. 다음은 박스 모델의 3D 개략도입니다. 이해하고 기억하기가 더 쉽기를 바랍니다. <img src="http://www.csswebs.org/articles/Archiver/images/cssbox3d.gif" alt="웹 페이지 레이아웃에 CSS를 사용하는 방법" > 3. 모든 보조 이미지는 백그라운드 처리를 사용해야 합니다. XHTML+CSS 레이아웃을 사용하지 않는 기술이 있습니다. 처음에는 생각하는 방식이 전통적인 테이블 레이아웃과 다르다고 말해야 합니다. 즉, 모든 보조 사진은 배경과 함께 구현됩니다. 다음과 같습니다: BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat 오른쪽 하단;콘텐츠에 <img>를 직접 삽입할 수는 있지만 권장되지는 않습니다. 여기서 '보조 사진'이란 페이지에 표현되는 내용은 아니지만 장식, 간격, 알림용으로만 사용되는 사진을 말합니다. 예를 들어 사진 앨범의 사진, 사진 뉴스의 사진, 위의 3D 상자 모델 사진은 모두 <img> 요소를 사용하여 페이지에 직접 삽입할 수 있으며, 나머지는 로고와 유사합니다. 제목 그림 및 목록 접두어는 배경 또는 기타 CSS 방법을 사용하여 표시되어야 합니다. 여기에는 두 가지 이유가 있습니다. <img src="http://www.csswebs.org/images/arrow.gif" alt="웹 페이지 레이아웃에 CSS를 사용하는 방법" > 성능과 구조를 완전히 분리합니다. (다른 기사 읽기: "성능 이해"를 참조하세요. 구조"), CSS를 사용하여 쉽게 개정할 수 있도록 모든 모양과 성능을 제어합니다. <img src="http://www.csswebs.org/images/arrow.gif" alt="웹 페이지 레이아웃에 CSS를 사용하는 방법" > 페이지를 더욱 사용하기 쉽고 친근하게 만들어보세요. 예를 들어, 시각 장애인이 스크린 리더를 사용하는 경우 배경 기술을 사용하여 구현된 사진은 소리내어 읽혀지지 않습니다. <h2>9일차: 첫 번째 CSS 레이아웃 예시 </h2> 다음 단계는 실제로 레이아웃을 디자인하는 것입니다. 전통적인 방법과 마찬가지로 먼저 대략적인 윤곽선 아이디어를 마음속에 떠올린 다음 포토샵으로 그려야 합니다. 웹 표준과 관련된 대부분의 웹 사이트는 구조와 내용에 더 많은 관심을 기울이기 때문에 매우 단순하다는 것을 알 수 있습니다. 실제로 웹 페이지의 아름다움과 근본적으로 충돌하는 부분은 없습니다. 원하는 대로 디자인할 수 있습니다. p는 전통적인 테이블 방법을 사용하여 구현될 수도 있습니다. 기술에는 성숙 과정이 있습니다. p를 TABLE과 동일한 도구로 생각하십시오. 사용 방법은 귀하의 상상력에 달려 있습니다. 참고: 실제 애플리케이션에서 p는 실제로 배경색 정의와 같은 일부 위치에서 테이블만큼 편리하지 않습니다. 하지만 모든 것에는 이득과 손실이 있으며, 선택은 가치 판단에 달려 있습니다. 자, 이제 시작하겠습니다. <h2>1. 레이아웃 결정 </h2> w3cn의 초기 디자인 스케치는 다음과 같습니다. <img src="http://www.csswebs.org/articles/Archiver/images/copy_w3cnhome.gif" alt="웹 페이지 레이아웃에 CSS를 사용하는 방법" > 테이블 디자인 방식을 사용하면 대개 3열 레이아웃 <img src="http://www.csswebs.org/articles/Archiver/images/layout_table.gif" alt="웹 페이지 레이아웃에 CSS를 사용하는 방법" > 을 사용합니다. p를 사용한다면 <img src="http://www.csswebs.org/articles/Archiver/images/layout_css1.gif" alt="웹 페이지 레이아웃에 CSS를 사용하는 방법" > 처럼 레이아웃에 세 개의 열을 사용하는 것을 고려해 보겠습니다. <h2>2. 본문 스타일 정의 </h2> 먼저 전체 페이지의 본문 스타일을 정의합니다. 코드는 다음과 같습니다. body { MARGIN: 0px; PADDING: 0px; BACKGROUND: url(../images/bg_logo.gif) #FEFEFE no-repeat 오른쪽 하단; FONT-FAMILY: 'Lucida Grande','Lucida Sans Unicode' ,'宋体', '신송 왕조',arial,verdana,sans-serif; COLOR: #666; FONT-SIZE:12px; LINE-HEIGHT:150% } 위 코드는 전날 튜토리얼에서 함수에 대해 자세히 설명했기 때문에 누구나 한 눈에 이해하실 수 있을 것입니다. 테두리 여백은 0으로 정의됩니다. 배경색은 #FEFEFE이고, 배경 이미지는 bg_logo.gif이며, 이미지는 페이지 오른쪽 하단에 위치하며 글꼴 크기는 12px로 정의됩니다. 색상은 #666이고 줄 높이는 150%입니다. <h2>3. 메인 p 정의</h2> CSS 레이아웃을 처음 사용할 때 고정폭 3열 레이아웃을 사용하기로 했습니다(적응형 해상도 디자인보다 간단합니다 호호, 그러지 마세요) 저를 게으른 사람이라고 부르세요. 먼저 간단한 것을 구현하고 자신감을 높이세요!). 왼쪽, 가운데, 오른쪽의 너비를 각각 200:300:280으로 정의합니다. 이는 CSS에서 다음과 같이 정의됩니다. /*페이지의 왼쪽 열 스타일 정의*/ #left { WIDTH:200px; MARGIN: 0px; PADDING: 0px; BACKGROUND: #CDCDCD; } /*페이지의 열 스타일 정의*/ #middle { 위치: 절대; 왼쪽:200px; TOP:0px; WIDTH:300px; 여백: 0px; PADDING: 0px; 배경: #DADADA; } /*페이지의 오른쪽 열 스타일 정의 */ #right{ POSITION: 절대; LEFT:500px; TOP:0px; WIDTH:280px; MARGIN: 0px; PADDING: 0px; BACKGROUND: #FFF; } 참고: 중간 열과 오른쪽 열에 p를 정의하기 위해 POSITION:absolute;를 사용했습니다. LEFT:200px;TOP:0px; 및 LEFT:500px;TOP:0px ;이것이 이 레이아웃의 핵심이며 레이어의 절대 위치 지정을 사용했습니다. 중간 열은 페이지 왼쪽 테두리에서 200px, 위쪽에서 0px로 정의하고, 오른쪽 열은 페이지 왼쪽 테두리에서 500px, 위쪽에서 0px로 정의합니다. 현재 페이지 전체의 코드는 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www .w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312"> < ;head> <title>새로운 "웹 디자이너"에 오신 것을 환영합니다: 웹 표준 튜토리얼 및 프로모션

페이지 왼쪽 열

페이지 중간 열

페이지 오른쪽 열

이때, 페이지는 병치된 회색 직사각형의 세 부분과 배경 이미지로만 볼 수 있습니다. 그런데 높이를 전체화면으로 하고 싶은데 어떻게 해야 하나요?

4.100% 적응형 높이?

세 열의 높이를 동일하게 유지하기 위해 #왼쪽, #가운데, #오른쪽 %에 "height:100"을 설정해 보았습니다. ;", 그러나 예상되는 적응형 높이 효과가 전혀 없는 것으로 나타났습니다. 몇 번 시도한 후에 각 p에 절대 높이("높이:1000px;")를 지정해야 했고, 콘텐츠가 증가함에 따라 이 값을 지속적으로 수정해야 했습니다. 높이 조절하는 방법은 없나요? Ajie 자신의 연구가 심화됨에 따라 그는 유연한 해결책을 발견했습니다. 실제로 100%를 설정할 필요는 없습니다. 우리는 테이블 사고에 너무 깊이 갇혀 있었습니다. 이 방법은 다음 연구 섹션에서 자세히 소개됩니다.

10일 차: 적응형 높이

3열 레이아웃 끝에 바닥글 줄을 추가하여 저작권 등의 정보를 넣고 싶은 경우. 3열의 하단을 정렬해야 하는 문제가 발생했습니다. 테이블 레이아웃에서는 큰 테이블을 작은 테이블에 중첩하는 방법을 사용하는데, 이는 세 개의 열을 쉽게 정렬할 수 있지만 p 레이아웃에서는 세 개의 열이 독립적으로 흩어져 있고 내용의 높이가 다르기 때문에 정렬하기가 어렵습니다. 실제로 p를 완전히 중첩하고 세 개의 열을 하나의 p에 넣고 하단 정렬을 달성할 수 있습니다. 다음은 구현 예입니다(흰색 배경 상자가 페이지를 시뮬레이션함).

이 예에서 페이지의 기본 코드는 다음과 같습니다.

특정 스타일 시트 해당 섹션에 모두 작성되어 있습니다. 핵심은 #mainbox 레이어가 #menu, #sidebar 및 #content의 세 레이어에 중첩되어 있다는 것입니다. #content의 컨텐츠가 증가하면 #content의 높이가 증가하고 #mainbox의 높이도 확장되며 #footer 레이어가 자동으로 아래로 이동합니다. 이는 높은 수준의 적응성을 달성합니다.

#menu와 #content가 "FLOAT: right;" 페이지 오른쪽에 떠 있고, #sidebar가 #menu 레이어 "FLOAT: left" 왼쪽에 떠 있다는 점도 주목할 만합니다. ;", 이는 부동 방법 위치 지정이므로 절대 위치 지정을 사용하여 이러한 효과를 얻을 수도 있습니다.

이 방법에는 또 다른 문제가 있습니다. 즉, 사이드바의 배경이 #sidebar 100%가 될 수 없다는 것입니다. 일반적인 해결책은 본문의 배경색으로 채우는 것입니다. (#mainbox의 배경색은 Mozilla 등의 브라우저에서는 #mainbox의 배경색이 유효하지 않기 때문에 사용할 수 없습니다.)

자, 메인 프레임워크는 구축되었고, 남은 작업은 추가만 하면 됩니다. 그것에 벽돌과 타일. 다른 레이아웃을 시도해보고 싶다면 다음 기사를 읽어보는 것이 좋습니다.

11일차: 테이블 없는 메뉴

처음에 레이아웃을 설정하고, 안에 내용을 채워넣기 시작했습니다. 첫 번째는 로고 이미지를 정의하는 것입니다:

스타일 시트: #logo {MARGIN: 0px;padding:0px;WIDTH: 200px;HEIGHT:80px;}
페이지 코드:

위 코드는 이제 이해하기 쉬울 것입니다. 먼저 CSS에서 로고 레이어를 정의한 다음 페이지에서 호출하세요. 웹 페이지를 더욱 유용하게 만들기 위해 웹 표준에서는 모든 사람이 공식 콘텐츠인 모든 이미지에 alt 속성을 추가하도록 요구합니다. 이 alt 속성은 이미지의 기능(이미지를 표시할 수 없을 때 대체 텍스트 표시)을 설명하는 데 사용되므로 의미 없는 이미지 이름을 그냥 쓰지 마세요.

다음 단계는 정의 메뉴입니다.

1. 테이블이 없는 메뉴(세로)

먼저 메뉴의 최종 효과를 살펴보겠습니다. 데모 페이지

보통은 최소한 중첩됩니다. 이러한 메뉴를 구현하기 위해 2레이어 테이블을 사용합니다. 간격 선은 td에 배경색을 설정하고 1px 높이의 투명 GIF 이미지를 삽입하여 구현합니다. 배경색의 교대 효과는 td의 onmouseover 이벤트를 사용하여 구현됩니다. . 그런데 이 메뉴의 페이지 코드를 보면

웹 표준이란

표준 사용의 이점

웹 페이지 템플릿 다운로드

WEB 표준 관련 튜토리얼

은 테이블을 사용하지 않고, unsequenced

를 사용하여 전체 메뉴의 효과를 구현하는 비결은 전적으로 id="에 있습니다. menu". CSS에서 메뉴 정의를 살펴보겠습니다.

(1) 먼저 메뉴 레이어의 기본 스타일이 정의됩니다.

#menu {
MARGIN: 15px 20px 0px 15px; /*레이어의 외부 테두리 거리를 정의합니다*/
PADDING:15px; /*레이어의 내부 테두리를 15px로 정의합니다*/
BACKGROUND: #dfdfdf; /*배경 색상 정의*/
COLOR: #666; /*글꼴 색상 정의*/
BORDER:#fff 2px solid; /*테두리를 2px 흰색 선으로 정의*/
WIDTH:160px; /*콘텐츠 너비를 160px로 정의*/
}

(2) 다음으로 순서가 지정되지 않은 목록의 스타일을 정의합니다.

#menu ul {
MARGIN: 0px;
PADDING: 0px;
BORDER: 중간 없음 /*테두리 표시 안 함*/
LINE-HEIGHT: 일반;
LIST-STYLE-TYPE: 없음;
}

#menu li {BORDER-TOP : #FFF 1px solid;}

참고: 여기서 사용되는 것은 id 선택자의 파생된 메서드 정의입니다(Day 참조). 7: CSS 소개) 메뉴 레이어

스타일의 하위 요소에 대한 설명입니다. LIST-STYLE-TYPE: 없음은 순서가 지정되지 않은 목록의 기본 스타일이 사용되지 않음을 의미합니다. 즉, 작은 점이 표시되지 않습니다(나중에 자체 아이콘을 사용하여 작은 점을 대체합니다). BORDER-TOP: #FFF 1px 실선은 메뉴 사이에 1px 간격 선을 정의합니다.

(3) 마우스 오버 효과 정의

#menu li a {
PADDING:5px 0px 5px 15px;
DISPLAY: block
FONT; -WEIGHT: 굵게;
배경: url(images/icon_dot_lmenu.gif) 투명 no-repeat 2px 8px;
WIDTH: 100%;
TEXT-DECORATION: 없음;
}
#menu li a:hover { BACKGROUND: url(images/icon_dot_lmenu2.gif) #C61C18 no-repeat 2px 8px;
COLOR: #fff }

설명은 다음과 같습니다.
"display:block;"은 태그 a를 블록 수준 요소로 표시하여 링크를 버튼으로 만드는 것을 의미합니다.
"BACKGROUND: url(images/ icon_dot_lmenu.gif ) transparent no-repeat 2px 8px;" 이 문장은 li를 대체하는 작은 점의 아이콘을 정의합니다. "투명"은 배경이 투명함을 의미하고, "2px 8px"는 아이콘 위치가 왼쪽에서 2px, 위쪽에서 8px임을 지정합니다. 이 문장은 다음 네 문장으로 나눌 수도 있습니다. "BACKGROUND-IMAGE: url(images/icon_dot_lmenu.gif); BACKGROUND-POSITION: 2px 8px; BACKGROUND-REPEAT: no-repeat; BACKGROUND-COLOR: transparent
" #menu li a:hover"는 링크 위로 마우스를 이동할 때 색상 변경과 작은 아이콘 변경을 정의합니다.

자, 이것이 표가 없는 메뉴가 구현되는 방식입니다. 원래 HTML로 작성된 모든 프리젠테이션 스타일을 제거하여 CSS 파일에 넣은 것을 분명히 느낄 수 있습니다. 페이지 코드가 절반 이상 저장됩니다. CSS를 통해 메뉴 스타일을 수정하는 것은 매우 간단합니다.

2. 테이블이 없는 메뉴(가로)

위는 세로 메뉴를 표시하고 싶은 경우 li도 사용할 수 있나요? 물론 가능합니다. 코드는 아래에 있으며 효과는 이 페이지 상단에 있습니다.

페이지 코드
- 홈< li id="two">회사 소개< /li>
- 웹 표준
- 표준의 이점< ;/a> ;
- 관련 튜토리얼
- 도구
- 리소스 및 링크
- FAQ
스타일 시트 코드

# submenu {
여백: 0px 8px 0px 8px;
테두리: #fff 1px
색상: #666 >HEIGHT :25px }

#submenu ul {
여백: 0px
BORDER: 0px; : 없음;
TEXT-ALIGN: 중앙;
DISPLAY:inline;
}

#submenu li {
FLOAT: 왼쪽;
여백: 0px;
PADDING: 0px;
TEXT-ALIGN: center}

#submenu li a {
PADDING: 2px 3px 2px 3px; >배경: url(images/icon_dot_lmenu.gif) 투명 반복 없음 2px 8px;
글꼴 크기: 굵게;
색상: #444; 없음;
}

#submenu li a:hover {
BACKGROUND: url(images/icon_dot_lmenu2.gif) #C61C18 반복 없음 2px 8px }

#submenu ul li#one A { WIDTH: 60px}
#submenu ul li#two A { WIDTH: 80px}
#submenu ul li# three A { WIDTH: 80px}
#submenu ul li#four A {WIDTH: 90px}
#submenu ul li#five A {WIDTH: 80px}
#submenu ul li#six A {WIDTH: 80px}
#submenu ul li# Seven A { WIDTH: 60px}
#submenu ul li#eight A { WIDTH: 90px}
#submenu ul li#nine A { WIDTH: 80px}

위 코드는 분석되지 않습니다. 하나씩 . 가로 메뉴의 핵심은
스타일을 정의할 때 "FLOAT: left;" 문입니다. 또한 UL 정의의 DISPLAY:inline; 문장에 주의하세요. 이는 li가 강제로 인라인 개체로 표시되고 해당 줄이 개체에서 삭제된다는 의미입니다. 수평 배치를 달성합니다. 또한 예시와 같이 각 하위 메뉴의 너비를 정의하고 메뉴 간격을 제어할 수도 있습니다. 음, 시도해 보고 li를 사용하여 다양한 메뉴 스타일을 구현할 수도 있습니다.

팁: 하위 메뉴 너비의 합이 레이어 너비보다 크면 메뉴가 자동으로 줄바꿈됩니다. 이 원리를 사용하면 단일 메뉴의 2열 또는 3열 레이아웃을 얻을 수 있습니다. HTML에서는 달성하기 어려운 정렬되지 않은 목록입니다.

12일차: 유효성 검사 및 일반적인 오류

며칠 동안 열심히 일한 후 XHTML+CSS를 사용하여 웹사이트를 다시 디자인하는 방법을 열심히 배웠습니다. 그렇다면 우리가 만드는 페이지가 실제로 웹 표준을 준수하는지 어떻게 알 수 있을까요? W3C 및 일부 자원 봉사 웹사이트는 페이지가 표준을 준수하는지 확인하고 오류 수정을 위한 도움말 정보를 제공하는 데 도움이 되는 온라인 검증 프로그램을 제공합니다. 이러한 검사는 매우 유용하며 페이지를 디버깅할 때 가장 먼저 수행하는 작업입니다.

1. , 파일 업로드 확인
확인에 성공하면 그림과 같이 "이 페이지는 유효한 XHTML 1.0 전환입니다!"가 표시됩니다.

확인에 실패했습니다. 그림과 같이 추가 확인 옵션과 오류 메시지가 표시됩니다.

일반적으로 " 소스 표시" 및 "자세한 출력"을 사용하면 오류 코드가 있는 줄과 오류 이유를 찾는 데 도움이 됩니다.

XHTML 유효성 검사 일반 오류로 인해 비교 테이블이 발생합니다

DOCTYPE을 찾을 수 없습니다. HTML 4.01 전환으로 돌아가는 중--DOCTYPE이 정의되지 않았습니다.
문자 인코딩을 찾을 수 없습니다. UTF-8로 대체됩니다.--정의되지 않은 언어 인코딩입니다.
"img"의 종료 태그가 생략되었지만 OMITTAG NO가 지정되었습니다.--이미지 태그는 "/"로 닫히지 않습니다.

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

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

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

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

가장 흔히 저지르는 실수는 라벨을 대문자로 표기하는 것입니다. 일반적으로 이러한 오류는 관련되어 있습니다. 예를 들어
태그가 오류를 보고하므로 일반적으로 하나의 오류가 해결되면 다른 오류는 사라집니다. 페이지가 XHTML1.0 유효성 검사를 통과하면 페이지에 아이콘을 배치할 수 있습니다. 코드는 다음과 같습니다.

check/referer">< ;/ a>

2.CSS2 검증

검증 URL: http://jigsaw.w3.org/css-validator/
검증방법 : URL검증, 파일업로드검증, 직접코드검증
검증에 성공하면 "축하합니다. 이 문서는 스타일시트 검증을 통과했습니다!" 호호, 검증정보는 중국어를 지원합니다. . 그림과 같이

확인에 실패하면 오류와 경고라는 두 가지 유형의 오류가 표시됩니다. 오류는 수정해야 함을 의미합니다. 그렇지 않으면 검증을 통과하지 못할 것입니다. 경고는 W3C에서 권장하지 않는 코드가 있으므로 수정을 권장한다는 의미입니다.

CSS2 유효성 검사 공통 오류로 인해 비교표가 발생함

(오류) 잘못된 번호: color909090은 색상 값이 아닙니다: 909090 --- 16진수 색상 값을 추가해야 합니다. " 기호, 즉 #909090
(오류) 잘못된 숫자: margin-topUnknown 차원: 6pixels ---픽셀은 단위 값이 아니며 올바른 표기 방법은 6px입니다
(오류) 스크롤 막대-얼굴 색상 속성이 존재하지 않습니다: #eeeeee --- 스크롤 막대 색상을 비표준 속성

으로 정의합니다. (오류) 값 커서핸드가 존재하지 않습니다: 손은 비표준입니다. 속성 값을 커서:포인터

로 변경합니다. (경고) 줄: 0 글꼴 계열: 마지막 선택으로 유형군을 지정하는 것이 좋습니다. W3C에서는 글꼴을 정의할 때 다음으로 끝나는 것을 권장합니다. "sans-serif"와 같은 글꼴 유형을 사용하여 다양한 작업에 사용할 수 있도록 시스템에서 웹 글꼴을 표시할 수 있습니다.

(경고)행: 0 can't find the warning message for otherprofile --코드에 비표준 속성이나 값이 있어 검증 프로그램이 해당 경고 정보를 판단하고 제공할 수 없음을 나타냅니다. .

마찬가지로 확인을 통과한 후 CSS 확인 통과 아이콘을 배치할 수 있으며 코드는 다음과 같습니다.

w3.org/ css-validator/">

-->