저는 아름다운 웹사이트를 방문할 때마다 소스 코드를 보지 않을 수 없습니다. 그것은 마치 엑스레이 안경을 가지고 있고 무화과 잎 사이에서도 누구든지 볼 수 있는 것과 같습니다. 이것은 당연한 문제입니다! 이 아름다운 웹사이트가 똑같이 아름다운 코드로 작성되었는지, 아니면 단지 겉모습만 아름다운 것인지 빨리 알고 싶습니다. 암호? 아름다움? 틀림없이! 결국 코드는 시와 같습니다. (번역 참고: "코드는 시이다"는 유명한 블로그 시스템 WordPress의 슬로건입니다.) 이것은 가장 기본적인 HTML일 뿐입니다. 당연히 다른 동적 언어만큼 복잡하고 우아하지는 않지만 여전히 그 매력을 유지하고 있습니다. 창조자.
이로 인해 어떻게 하면 코드를 아름답게 만들 수 있을까?라는 생각이 들기 시작했습니다. HTML에서는 이것이 모두 수동 작업입니다. 마크업 언어가 어떻게 아름다운 상태에 도달할 수 있는지 살펴보겠습니다.
이미지는 인쇄하여 개인 사물함에 넣어 친구들에게 깊은 인상을 남길 수 있을 만큼 충분히 큽니다(2000x2000). 그러고 보면 참으로 혼란스러운 크기입니다. 누구나 수정하실 수 있도록 원본 PSD 이미지를 공개하겠습니다.
HTML5 - HTML5 와 그 새로운 요소는 전례 없는 아름다움을 선사합니다.
DOCTYPE-HTML5는 최상의 문서 유형을 가지고 있습니다.
들여쓰기 - 탭과 공백은 태그 간의 상위-하위 관계를 올바르게 표시하고 계층 구조를 강조하기 위해 코드를 들여쓰기 하는 데 사용됩니다.
Charset - 모든 콘텐츠 앞에 헤더에 charset 선언이 이루어져야 합니다.
제목 - 웹사이트 제목은 간단하고 명확합니다. 구분 기호 뒤의 페이지 기능 설명으로 시작하고 웹 사이트 제목으로 끝납니다.
CSS - 간단한 스타일 시트 (미디어 유형은 스타일 시트에 선언됨)만 사용하며 좋은 브라우저만을 대상으로 합니다. IE6 이하에서는 일반 스타일 시트를 사용합니다.
본문 - 본문에 ID를 부여하면 추가 마크업 없이도 여러 페이지에 대해 고유한 스타일을 지정할 수 있습니다.
JavaScript - jQuery(가장 아름다운 JavaScript 스크립트 라이브러리)는 Google에서 호출됩니다. 단일 JavaScript 파일만 로드됩니다. 각 스크립트는 페이지 하단에서 참조됩니다.
파일 경로 - 효율성을 위해 사이트 리소스에 대한 상대 경로를 사용합니다. 재인쇄에 적응한다는 관점에서 콘텐츠 파일(예: 사진)은 절대 경로를 사용합니다.
이미지 속성 - 이미지 에는 주로 이미지가 누락된 경우를 위한 대체 텍스트가 포함되어 있지만 확인에도 사용할 수 있습니다. 렌더링 효율성을 높이려면 이미지의 너비와 높이를 지정하는 것이 가장 좋습니다.
기본 콘텐츠 우선 – 페이지의 기본 콘텐츠는 기본 라벨링 및 탐색 뒤, 보조 콘텐츠(예: 사이드바) 앞에 와야 합니다.
적절한 설명 블록 수준 요소(HEADER, NAV, SECTION, ARTICLE, ASIDE) - 이 새로운 " 설명 섹션 "은 이전 DIV보다 콘텐츠를 더 잘 설명합니다.
계층 구조 - 제목 태그를 대문자로 표시하는 것이 효과적이며 명확한 " 계층 구조 "를 따릅니다.
적절한 설명 태그 - 목록은 일반적으로 사용되지 않는 정렬되지 않은 목록, 정렬된 목록, 사용자 정의 목록 등 다양한 요구 사항에 따라 태그가 지정 됩니다.
공통 콘텐츠 포함 – 다른 페이지에 나타나는 동일한 콘텐츠는 서버 측에서 페이지에 포함되는 것이 가장 좋습니다. (어떤 방법, 언어, CMS 등 귀하에게 적합한 모든 것이 가능합니다.)
의미 클래스 - 올바른 요소 이름을 설정하는 것뿐만 아니라 클래스 및 ID의 이름이 의미가 있는지 확인하는 것도 필요합니다. 즉, 특정 지침 없이도 설명 역할을 할 수 있습니다. (예를 들어 "col"이 "left"보다 낫습니다.)
클래스 - 여러 요소가 비슷한 스타일을 사용해야 하는 경우 동일한 클래스를 정의해 보세요. (재사용성)
ID – 요소가 페이지에 한 번만 나타나는 경우 해당 요소에 대한 ID를 정의하고 다른 요소에 대해 동일한 ID를 정의하지 마십시오.
동적 요소 – 실제로 필요할 때만 동적 효과가 추가됩니다.
문자 인코딩됨 – 특수 문자가 나타날 경우 문자 인코딩 에 주의하세요.
Free From Styling - 페이지의 모든 내용은 스타일링과 관련이 없으며 원하는 스타일을 지정할 필요도 없습니다. 페이지의 모든 항목은 필수 사이트 리소스, 콘텐츠, 설명의 세 가지 항목으로 제한됩니다.
주석 - 코드를 볼 때 특별히 강조할 필요가 없거나 특별히 눈에 띄지 않는 내용이 주석 에 포함됩니다.
유효 - 사이트 전체 마크업이 W3C 유효성 검사 를 준수합니다. 태그 폐쇄에 주의하고, 필요한 속성을 확인하고, 쓸모 없는 메소드를 피하십시오.