집 > 기사 > 웹 프론트엔드 > HTML5.0_html5 튜토리얼 기술을 활용한 웹페이지 제작 튜토리얼

HTML5.0_html5 튜토리얼 기술을 활용한 웹페이지 제작 튜토리얼

WBOY원래의: 2016-05-16 15:51:261739검색

누구에게 질문하느냐에 따라 HTML 5는 보다 의미 있는 웹을 만들기 위한 다음 단계일 수도 있고, 아니면 단지 태그와 마크업이 뒤섞여 있는 불완전한 것일 수도 있습니다. 곤경에 빠졌습니다.

양측 주장의 문제는 자연 환경에서 HTML 5를 사용하는 사이트가 거의 없기 때문에 현재 인식된 문제에 대한 이론적 해결책이 대부분 테스트되지 않은 상태로 남아 있다는 것입니다.

그렇지만 차세대 웹 마크업 도구의 이점과 잠재적인 위험을 파악하는 것은 어렵지 않습니다.

콘텐츠

1. HTML 5의 차이점은 무엇인가요?

2. 드디어 누구나 기억할 수 있는 문서형

3. 가장 기본적인 의미구조

1. <헤더>

3. <섹션>

2. <제쳐두고>

3. <바닥글>

4. 모아보세요

5. 새로운 요소에 대한 글쓰기 스타일

6. 기존 브라우저와 호환

7. 이제 HTML 5를 사용할 수 있는데, 사용하시겠습니까?

HTML 5의 차이점은 무엇인가요?

먼저 HTML 5를 통해 무엇을 표현하는가? 우선, HTML 5는 이론적으로 캔버스나 오프라인 저장소 API 사양과 같은 새로운 의미 구조 태그, 새로운 인라인 의미 태그 등 모든 것을 표현합니다. 그러나 실제 이유(PS: 브라우저 지원 문제)를 태그 구조에만 국한합니다. 캔버스, 오프라인 저장소, 로컬 비디오 또는 위치정보 API는 모두 훌륭하지만 아직 모든 브라우저에서 균일하게 지원되지는 않습니다.

"하지만 잠깐만요" "대부분의 브라우저도 새로운 구조적 요소를 지원하지 않습니다!"라고 말합니다. 사실이지만 대부분의 브라우저는 사용자가 원하는 라벨을 만들면 무엇이든 기꺼이 받아들일 것입니다. IE6도 새 탭을 처리할 수 있지만 CSS로 스타일을 지정하려면 JavaScript의 도움이 필요합니다.

새 태그의 스타일을 지정할 때 기억해야 할 한 가지는 알 수 없는 태그에는 대부분의 브라우저에서 기본 스타일이 없다는 것입니다. 또한 행 수준 요소로 간주됩니다. 그러나 HTML 5의 새로운 태그 대부분은 구성될 수 있으므로 블록 수준 요소의 동작을 제공할 것입니다. 해결책은 CSS 스타일에 display:block;을 포함시키는 것입니다.

현재 HTML 5의 새로운 기능 중 일부를 이해하는 데 도움이 되도록 이제 본론으로 들어가 몇 가지 새로운 구조 요소를 사용해 보겠습니다.

드디어 누구나 기억할 수 있는 문서형

HTML 5 문서를 만들기 위해 가장 먼저 해야 할 일은 새로운 문서 유형을 사용하는 것입니다. 이제 HTML 4 또는 XHTML 1.x 문서 유형을 명확하게 기억한다면 당신은 우리보다 더 나쁜 사람입니다. 새 페이지를 만들 때마다 이전 파일을 열고 문서 유형 정의를 잘라내어 붙여넣어야 합니다.

이것은 정말 고통스러운 일이며 우리가 새로운 HTML 5 문서 유형을 좋아하는 이유입니다. 준비됐나요? 그가 나타납니다:

기억하기 어렵지 않을 거예요. 간단하고 이해하기 쉽습니다. 대소문자를 구분하지 않습니다.

HTML 버전 관리를 중단하고 이전 버전과의 호환성을 더 쉽게 만드는 것이 아이디어입니다. 장기적으로 성공할지 여부는 또 다른 문제이지만 적어도 평균 타이핑 시간을 절약해 줍니다.

가장 기본적인 의미구조

우리 페이지를 HTML 5 문서로 정의했습니다. 지금까지는 너무 좋았습니다. 자, 우리가 들어본 이 새로운 라벨은 정확히 무엇입니까?

새 태그를 살펴보기 전에 다음과 같은 일반적인 웹페이지 구조를 생각해 보세요.

프레젠테이션 목적으로는 괜찮지만 페이지 요소에 포함된 내용에 대해 알고 싶다면 어떻게 해야 할까요?

위 예에서는 모든 구조 div에 ID를 추가했습니다. 이는 지식이 풍부한 디자이너들 사이에서 흔히 볼 수 있는 일입니다. 목적은 두 가지입니다. 첫째, ID는 페이지의 특정 단락에 스타일을 적용하는 데 사용할 수 있는 앵커를 제공하고, 둘째, ID는 기본 의사 의미 구조로 작동합니다. 정교한 파서는 태그의 ID 속성을 보고 그것이 무엇을 의미하는지 추측하려고 시도하지만 ID 이름이 사이트마다 다를 경우 이는 어렵습니다.

여기서 새로운 구조 태그가 사용됩니다.

이러한 ID가 관례가 되었음을 인식한 HTML 5 제작자는 한 단계 더 나아가 이러한 요소 중 일부를 자체 태그로 만들었습니다. 다음은 HTML 5에 적용되는 새로운 태그에 대한 간략한 요약입니다.

<헤더>

head 태그는 한 장이나 전체 웹페이지에 대한 소개 정보를 담는 컨테이너로 설계되었습니다.

태그에는 대부분의 페이지 상단에 있는 일반적인 로고나 태그라인부터 장을 소개하는 태그라인과 시작 줄까지 모든 것이 포함될 수 있습니다. 페이지에서 여전히

를 사용하는 경우

대신

nav 요소는 매우 명확합니다. 탐색 요소입니다. 물론 무엇이 탐색으로 간주되는지에 대한 논쟁이 있습니다. 기본적인 사이트 탐색이 있지만 어떤 경우에는 페이지 탐색 요소도 있을 수 있습니다. HTML5를 만든 WHATWG는 최근

에 대한 설명을 수정하여 동일한 페이지에서 두 번 사용할 수 있는 방법을 보여주었습니다.

nav에 대한 자세한 내용과 HTML5에 대한 열띤 논쟁은 nav 요소에 대한 Jeffrey Zeldman의 기사를 참조하세요.

아직도

태그를 사용하여 페이지 탐색 기능을 포함하고 있다면 간결한

태그를 대신 사용할 수 있습니다.

<섹션>

섹션은 아마도 새 태그 중에서 가장 모호한 태그일 것입니다. HTML 5 정의에 따르면 장은 일반적으로 헤더 태그 뒤와 바닥글 태그 앞의 콘텐츠 주제 모음입니다. 그러나 필요한 경우 섹션을 서로 중첩할 수 있습니다.

위의 예에서 'content'라고 표시된 div는 섹션이 되기에 좋은 선택입니다. 또한 해당 섹션 내에서 내용에 따라 섹션을 추가할 수 있습니다.

WHATWG의 의견과 달리 기사 요소에는 "잡지나 뉴스 기사, 블로그 항목과 같이 문서나 사이트의 별도 부분을 구성하는 콘텐츠"가 포함될 수 있습니다.

페이지에는 여러 개의 기사 태그가 있을 수 있습니다. 예를 들어 블로그 홈페이지에는 최신 기사 10개가 있을 수 있으며 각 기사는 기사 태그에 포함되어 있습니다. 섹션 태그를 사용하여 기사를 여러 단락으로 나눌 수도 있지만 구조를 계획할 때 약간 주의해야 합니다. 그렇지 않으면 보기 흉한 태그가 뒤섞여 쉽게 끝날 수 있습니다.

<제쳐두고>

또 다른 다소 모호한 태그인 side 요소는 "문서를 구성하는 본문 흐름의 내용과 관련이 없는" 내용에 사용됩니다. 이는 추가 설명, 인라인 각주, 인용, 주석 또는 이 기사 오른쪽에 표시되는 것과 같은 보다 일반적인 사이드바 콘텐츠를 의미합니다.

WHATWG 댓글에 따르면

는 사이드바의 인용문이 태그 클라우드와 매우 다르지만 이러한 모든 상황에서 사용할 수 있는 것으로 보입니다.

HTML 5가 완벽하다고 말한 사람은 아무도 없습니다!

<바닥글>

바닥글의 유용성은 여러 바닥글을 가질 수 있다는 사실을 모를 수도 있다는 점을 제외하면 분명해야 합니다. 즉, 일반적으로 대부분의 페이지 하단에 있는 기본 아래 첨자 외에도 단락에는 아래 첨자가 포함될 수도 있습니다.

함께 모아보세요

새 태그를 사용하여 원래 예제를 다시 작성해 보겠습니다.

아주 명확하고 이해하기 쉽죠? 참고 사항: 헤더 태그에

내 기사

제목을 포함할 수 있습니다. h1 요소가 이미 제목의 의미를 전달하고 있기 때문에 이렇게 하지 않았습니다. 하지만 기사 상단에 발행일, 작성자 또는 기타 데이터도 있는 경우 헤더 컨테이너 태그를 태그 세트에 추가하는 것은 좋은 옵션.

또한 기사 요소 아래에 두 번째 바닥글 요소를 추가하여 페이지 탐색, 관련 기사 또는 기타 콘텐츠를 포함할 수 있습니다.

새 태그에 대한 스타일 작성

대부분의 브라우저에서는 새 탭에 스타일 시트를 적용할 때 일반적으로 하는 것처럼 스타일을 정의하기만 하면 됩니다. 하지만 앞으로는 무슨 일이 있어도 모든 요소에 display:block; 규칙을 추가하세요. 시간이 지나면서 브라우저가 새로운 요소를 표준화하고 지원하기 시작하면 그럴 필요가 없게 됩니다.

예를 들어 헤더에 몇 가지 스타일을 적용해 보겠습니다.

이 태그에는 클래스 및 ID 속성을 추가할 수 있다는 점을 기억하세요. 따라서 탐색 스타일을 별도로 지정하려면 다음과 같이 태그에 클래스나 스타일을 쉽게 추가할 수 있습니다.

그런 다음 스타일을 적용할 수 있습니다.

이전 브라우저와 호환

그런데 IE는 어떻습니까? 이러한 스타일은 IE6에서는 전혀 작동하지 않습니다. IE6과 같은 레거시 브라우저를 계속 지원해야 하는 경우 해결 방법은 다음과 같습니다. IE6은 이러한 태그를 잘 구문 분석하고 표시하지만 CSS를 설정할 수는 없습니다. 해결책은 약간의 JavaScript를 사용하는 것입니다.

createElement 메소드를 사용하여 생성한 HTML 5 태그의 스타일을 IE에 요청하기만 하면 됩니다. HTML 5 파일의 head 태그에 이를 추가하세요. 또는 특정 파일에 저장하고 그런 방식으로 포함할 수도 있습니다.

당신이 무슨 생각을 하는지 압니다. "형님, 당신은 그 스크립트 태그에 대해 MIME 유형을 전혀 정의하지 않았습니다.

HTML 5에서는 이러한 작업을 전혀 수행할 필요가 없습니다. HTML 5에서는 모든 스크립트가 type="text/javascript"라고 가정하므로 스크립트 태그를 속성으로 복잡하게 만들 필요가 없습니다(스크립트가 JavaScript가 아닌 경우).

이렇게 하면 IE의 문제가 해결되지만 위기에서 벗어난 것은 아닙니다. Firefox 2 및 Camino의 일부 버전이 이 탭에서 멈추게 만드는 버그가 Gecko 렌더링 엔진에 있는 것으로 밝혀졌습니다.

이 버그를 처리하는 방법에는 두 가지가 있지만 둘 다 이상적이지 않습니다. 자세한 내용은 HTML5doctor의 기사를 참조하세요. 이 기사에는 모든 HTML 5 요소를 활성화하는 편리한 스크립트도 함께 제공됩니다.

Firefox 2 사용량이 전체 사이트 트래픽의 10% 미만으로 빠르게 떨어졌지만 단순히 이 버그를 무시하는 것은 여전히 사이트 방문자에 따라 달라질 수 있습니다.

이제 HTML 5를 사용할 수 있는데, 계속 사용하시겠습니까?

간단히 대답하자면 그렇습니다.

더 복잡한 것은 사이트에 따라 다릅니다. CNN 홈페이지를 개조했다는 비난을 받는다면 브라우저 지원이 더 좋아질 때까지 약간의 저항을 할 수도 있습니다. 하지만 블로그를 개편하고 싶다면 저희가 도와드리겠습니다. 이러한 인기 있는 출판 시스템을 사용하는 경우 도움이 될 수 있는 몇 가지 WordPress 플러그인은 다음과 같습니다. 다음은 Jeff Starr가 만든 HTML 5 테마입니다.

또한 사이트 중심 HTML 5 갤러리를 시도하고 소스 코드를 확인하여 어떤 작업을 수행했는지 확인하세요.

그래도 IE의 단점으로 인해 중단된다면 다음을 고려하십시오. Google도 기본 검색 페이지에서 HTML 5의 문서 유형을 사용하고 있습니다. 새로운 구조적 태그를 모두 사용하지 않더라도 최소한 다음 시간에 다룰 간결한 스크립트 선언과 일부 비구조적 의미 태그를 활용할 수 있습니다.

성명：

이전 기사：HTML5 파싱 규칙 analyze_html5 튜토리얼 기술다음 기사：HTML5 파싱 규칙 analyze_html5 튜토리얼 기술