깔끔한 HTML 마크업으로 페이지 구축_HTML/Xhtml_웹페이지 제작

인터넷은 끊임없이 진화하는 유기체입니다. 인터넷의 발전에 오랫동안 적응할 수 있는 페이지를 구축하는 방법은 인터넷의 급속한 발전을 빠르게 따라갈 수 있도록 하는 데 매우 중요합니다.

깨끗한 HTML 태그를 사용하고 표준을 준수하는 페이지를 구축하면 이를 수행하는 데 도움이 될 수 있으며, 더 중요한 것은 향후 작업에서 많은 시간과 비용을 절약할 수 있다는 것입니다.

웹페이지 기술은 인터넷 기술의 발전과 함께 발전해왔습니다. HTML 기술은 오랫동안 발전해왔고 그에 수반되는 기술들도 꾸준히 발전해 왔습니다.

처음에는 Javascript였고 그 다음에는 CSS, XML, 그리고 이제는 AJAX였습니다. HTML5의 대규모 애플리케이션도 형태를 갖추기 시작했습니다. Firefox, Safari, Opera 및 Chrome은 기본적으로 HTML5를 완벽하게 지원합니다(이 문제에서는 Microsoft의 인터넷). 익스플로러가 또다시 인터넷 발전을 방해합니다#-_-)

이 기사에서는 기본 웹 표준을 살펴보고 표준이 무엇인지, 그 중요성이 무엇인지, 그리고 중요하지만 종종 간과되는 문제에 대한 해결책에 대해 논의합니다.

"깨끗한" HTML 마크업이란 무엇입니까?

간단히 말하면 HTML 마크업이 '깨끗하다'는 것은 중복이 없고 표준을 준수하며 의미 있는 태그와 구조를 사용한다는 뜻입니다.

번거로운 HTML 코드는 태그를 최대한 활용하고 불필요한 코드를 제거하며 의미 있는 태그만 저장할 수 있습니다. 내장된 CSS와 같은 쓸모없는 속성을 피하고 문서 구조를 깔끔하게 유지합니다.

마찬가지로, 번거로운 CSS 코드는 중복을 피하고, 상속 가능한 속성을 사용하고(CSS의 원래 의도는 계단식 스타일 시트라는 점을 기억하세요), CSS 클래스를 과학적으로 재사용해야 합니다.

표준 준수는 귀하의 페이지가 W3C의 HTML, CSS 및 XML 표준 검증을 통과할 수 있음을 의미합니다. 무료 W3C 유효성 검사기를 사용하여 오류를 찾아 수정하고 계속 테스트하세요. 100% 호환된다는 것입니다.

이게 왜요? 정상적으로 표시될 수 있으면 충분하지 않나요?

모든 프로젝트에는 시간 제한이 촉박하며 사용자는 웹사이트가 최대한 빨리 출시되기를 원합니다. 따라서 웹사이트 개발자와 디자이너는 작업을 빠르고 효율적으로 완료해야 합니다.

함정에 빠지기 쉽습니다. 빠르다는 것은 엉성함을 의미하며, 표준을 준수하는 깔끔한 코드를 작성하는 것은 시간 낭비입니다. 사람들은 종종 "정상적으로 표시되면 문제가 없을 것입니다."라고 말합니다.

지금은 보여주고 있지만 내년은 어떨까요? 지금으로부터 3년 후에는 어떨까요? 브라우저를 업그레이드하면 어떻게 해야 합니까? 장치가 호환됩니까?

정말로 검색 엔진이 코드를 한 줄씩 파헤칠 것이라고 생각하시나요? 표준화된 코드를 사용하지 않으면 검색 엔진을 스스로 몰아내는 것과 같습니다.

다른 직원이 코드를 수정하러 오면 어떻게 되나요? 상사에게 해고되거나 스스로 이직하면 어떻게 되나요? 귀하의 코드를 보고 그 의미를 이해하는 후임자가 있을 것입니다. 당신은 그것이 쉽기를 원합니까, 아니면 그가 당신을 등 뒤에서 찌르기를 원합니까?

올바르게 작성하기 시작하세요. 귀찮은 작업이 아니며, 시간과 비용을 절약하고 걱정을 덜 수 있습니다.

내장된 CSS를 사용하여 페이지를 작성하는 것이 더 빠르다고 생각할 수도 있고, 구조를 고려하지 않고 직접 HTML을 작성하는 것이 더 편리하다고 생각할 수도 있습니다.

그러나 문서를 수정하거나 나중에 웹사이트를 개편하려는 경우 품질이 낮은 코드로 인한 간섭을 보완하는 데 더 많은 시간을 소비하게 됩니다. 새 스타일 시트를 생성하면 HTML 코드 전체에 흩어져 있는 내장 CSS로 인해 많은 문제가 발생하고 이를 제거하는 데 몇 시간이 걸릴 수 있습니다.

확장 가능하고 장치 친화적이며 의미론적이며 업그레이드가 용이합니다

모바일 브라우저는 점점 더 빠르게 발전하고 있습니다. 이제 휴대전화를 통한 인터넷 액세스는 더 이상 BlackBerry만의 영역이 아닙니다. 매일 수억 명의 사람들이 휴대전화를 사용하여 웹을 탐색합니다.

시각 장애가 있는 사용자를 위해 개발된 보조 검색 기술이나 신체 장애가 있는 사용자를 위해 설계된 특수 작동 인터페이스가 탑재된 장치는 이미 일반화되어 있습니다. 이렇게 대규모 사용자 기반을 잃고 싶지 않다면 기기 친화성을 고려해야 합니다.

귀하의 웹사이트는 Internet Content Storage , Google Snapshot 등을 통해 점자 형식으로 사용자에게 제공될 수 있습니다. 귀하의 페이지는 삭제되더라도 오랫동안 웹에 남아 있을 수 있습니다.

깔끔하고 표준을 준수하는 마크업을 사용하면 위의 상황을 더 쉽게 처리할 수 있습니다.

해야 할 것과 하지 말아야 할 것("해야 한다"와 "하지 말라")

DO - 사전 정의된 태그를 사용하세요. 예: h1은 웹페이지 콘텐츠에서 가장 중요한 부분이고, 그 다음은 h2, h3 등입니다. 웹페이지에는 h1이 하나만 있을 수 있습니다.

DO - 의미 있는 요소 이름을 사용하세요. 다른 사람들이 코드를 읽었는지 스스로에게 물어보세요. 클래스 및 ID 명명의 의미를 이해할 수 있을까요? 예를 들어 동일한 레이어에 #box12 또는 #comment-footer를 사용하면 어느 것이 더 좋다고 생각하시나요?

DO - CSS 상속을 최대한 활용하세요. 예를 들어 컨테이너에 글꼴 속성을 설정한 경우 다른 글꼴을 사용하지 않는 한 하위 요소에 별도로 설정할 필요가 없습니다. 이렇게 하면 스타일시트가 명확하고 간결해집니다.

DO - HTML, CSS 및 XML 코드를 준수하도록 만드세요. W3C 유효성 검사기를 사용하여 오류와 경고를 확인하고 표준을 100% 준수할 때까지 수정하세요.

DO - WYSIWYG 편집기에서 생성된 코드의 양방향 검사입니다. WYSIWYG 브라우저는 가비지 코드의 주요 소스입니다. 생성되는 코드를 최대한 간소화하세요.

하지 마세요 - 인라인 CSS 스타일과 불필요한 태그 및 속성을 사용하지 마세요. 바쁘더라도 함부로 이런 것들을 추가하지 마세요.

하지 마세요 - "올바른 디스플레이"에 안주하지 마세요. 페이지에 숨겨진 오류로 인해 다른 브라우저나 기기에서는 인식할 수 없을 정도로 페이지가 망가질 수 있기 때문입니다.