시작하자.

HTML5 마크 업

첫째, 우리는 HTML 다음 마크 업이있는 문서 :

 
 
 
 
Apple iPhone 4 - 16GB
 
가장 놀라운 iPhone.
 
 
 
  
 
 
더 빨라진 듀얼 코어 A5 칩. 모두 새로운 광학 장치가 장착 된 8MP 카메라는 1080p HD 비디오도 촬영합니다. 그리고 Siri를 소개합니다. 아직 가장 놀라운 iPhone입니다..
 
 
제품 특징
 
 
풀 1080p 비디오 녹화 기능이있는 8 메가 픽셀 카메라
 
시리 목소리 부름
 
iCloud
 
에어 프린트
 
레티 나 화면
 
사진 및 비디오 위치 정보 태그 지정
 
 
 지금 구입 
 
 

HTML5 사양의 몇 가지 새로운 태그를 사용합니다. 머리글, hgroup, 그림, 섹션, 그리고 우리가 전에 토론 한 하나; 그만큼 세부 과 개요 꼬리표.

그러나 우리는 기꺼이하지 않기 때문에 이러한 태그를 파고 들지는 않습니다. 오히려 다른 곳에서 쉽게 찾을 수있는 기본 주제입니다. 따라서 HTML5에 대해 처음 접한다면이 태그에 대한 다음 참조를 읽어 보시기 바랍니다. 그들은 그들을 포괄적으로 설명했다.

• 시맨틱에 대해 이야기 해보자.
• HTML5 헤더 요소
• hgroup 요소
• HTML5 태그 참조

이제 우리 페이지의 첫 등장을 보겠습니다..

음, 어떤 스타일도없이 합리적인 것처럼 보입니다. 맨 꼭대기에는 머리말이 있고 이미지, 설명 및 마지막으로 '지금 구입'버튼이 있습니다. 자,이 페이지를 상상해 보자..

스타일

먼저이 스타일 시트를 사용하여 모든 기본 스타일을 표준화하고 HTML 꼬리표.

 html 높이 : 100 %; 배경 : # f3f3f3; 배경 : -moz-linear-gradient (맨 위, # f3f3f3 0 %, #ffffff 50 %); 배경 : -webkit-gradient (선형, 왼쪽 위, 왼쪽 아래, 컬러 스톱 (0 %, # f3f3f3), 컬러 스톱 (50 %, # ffffff)); 배경 : -webkit-linear-gradient (상단, # f3f3f3 0 %, # ffffff 50 %); 배경 : -o 선형 그라디언트 (맨 위, # f3f3f3 0 %, # ffffff 50 %); 배경 : -ms-linear-gradient (맨 위, # f3f3f3 0 %, # ffffff 50 %); 배경 : 선형 그래디언트 (위쪽, # f3f3f3 0 %, # ffffff 50 %); 필터 : progid : DXImageTransform.Microsoft.gradient (startColorstr = "# f3f3f3", endColorstr = "# ffffff", GradientType = 0); 

Google 제품 요소는 모두 div 제품 클래스. 그래서, 여기 래퍼를 중심에두고 너비를 설정하려고합니다. 650px.

 .래퍼 width : 650px; 여백 : 자동; 패딩 : 25px 0px; 

헤더 섹션

헤더 섹션에는 두 개의 제목이 있습니다. h1 과 h4, 이러한 요소의 스타일을 지정해 보겠습니다..

 h1, h4 font-family : Helvetica Neue, Arial, sans-serif; font-weight : normal; margin : 0;  h1 글꼴 크기 : 24pt;  h4 글꼴 크기 : 16pt; color : #aaa; 

그런 다음 바닥에 작은 공간을 추가하십시오. 머리글 마진이있는.

 header margin-bottom : 20px; 

머리글의 맨 오른쪽을 보면 그면에 많은 공백이 생깁니다..

그렇다면 우리도 애플 로고를 그 곳에 넣지 않으시겠습니까?.

 header margin-bottom : 20px; 배경 : url ( '... /https://assets.hongkiat.com/uploads/html5-single-product-page/apple.png') no-repeat 오른쪽 가운데; 

제품 이미지

그런 다음 이미지를 왼쪽으로 떠서 이미지 최대 너비를 350px.

 그림 부동 : 왼쪽;  figure img 최대 너비 : 350px; 

이미지가 왼쪽으로 푸시되었으므로 설명 섹션을 오른쪽으로 플로팅하고 너비를 300px.

 섹션 font-family : Tahoma, Arial, sans-serif; 라인 높이 : 150 %; float : 오른쪽; 너비 : 300px; color : # 333; 

이제 결과를 보자..

보기가 좋아 보이지만 details 태그는 아직 작동하지 않습니다 (Chrome 제외). 다음 번에 버튼의 스타일을 지정해 보겠습니다..

버튼

버튼 스타일을 Apple.com Store에서 모방 한 것입니다. 그리고 스타일 시트에 버튼을 넣기 위해 필요한 모든 구문이 있습니다..

 버튼 배경 : # 36a9ea; 배경 : -moz-linear-gradient (상단, # 36a9ea 0 %, # 127fd2 100 %); 배경 : -webkit-gradient (선형, 왼쪽 위, 왼쪽 아래, 컬러 스톱 (0 %, # 36a9ea), 컬러 스톱 (100 %, # 127fd2)); 배경 : -webkit-linear-gradient (상단, # 36a9ea 0 %, # 127fd2 100 %); 배경 : -o 선형 그라디언트 (맨 위, # 36a9ea 0 %, # 127fd2 100 %); 배경 : -ms-linear-gradient (맨 위, # 36a9ea 0 %, # 127fd2 100 %); 배경 : 선형 그래디언트 (위쪽, # 36a9aa 0 %, # 127fd2 100 %); 필터 : progid : DXImageTransform.Microsoft.gradient (startColorstr = "# 36a9ea", endColorstr = "# 127fd2", GradientType = 0); 국경 : 1 픽셀 고체 # 00599d; color : #fff; 패딩 : 8px 20px; -webkit-border-radius : 3px; border-radius : 3px; -webkit-box-shadow : 0px 1px 0px rgba (0, 0, 0, .1), 삽입 0px 1px 0px rgba (250, 250, 250, .3); 상자 그림자 : 0px 1px 0px rgba (0, 0, 0, .1), 삽입 0px 1px 0px rgba (250, 250, 250, .3); 텍스트 그림자 : 0px 1px 1px # 156cc4; 필터 : dropshadow (색상 = # 156cc4, offx = 0, offy = 1); 글꼴 크기 : 10pt;  버튼 : 마우스 오버 배경 : # 2f90d5; 배경 : -moz-linear-gradient (상단, # 2f90d5 0 %, # 0351b7 100 %); 배경 : -webkit-gradient (선형, 왼쪽 위, 왼쪽 아래, 컬러 스톱 (0 %, # 2f90d5), 컬러 스톱 (100 %, # 0351b7)); 배경 : -webkit-linear-gradient (상단, # 2f90d5 0 %, # 0351b7 100 %); 배경 : -o 선형 그라디언트 (맨 위, # 2f90d5 0 %, # 0351b7 100 %); 배경 : -ms-linear-gradient (맨 위, # 2f90d5 0 %, # 0351b7 100 %); 배경 : 선형 그래디언트 (위쪽, # 2f90d5 0 %, # 0351b7 100 %); 필터 : progid : DXImageTransform.Microsoft.gradient (startColorstr = "# 2f90d5", endColorstr = "# 0351b7", GradientType = 0);  버튼 : 활성 배경 : # 127fd2; -webkit-box-shadow : 인 세트 0px 2px 1px 0px rgba (0, 47, 117, .5), 0px 1px 1px rgba (0, 0, 0, 0); 상자 그림자 : 삽입 0px 2px 1px 0px rgba (0, 47, 117, 0.5), 0px 1px 1px 0px rgba (0, 0, 0, 0); 

이제 버튼이 더 좋아 보일 것입니다..

Internet Explorer의 문제

평소처럼 IE (Internet Explorer)는 항상 문제를 일으 킵니다. 9보다 낮은 임의의 IE에서이 페이지를 열면 페이지의 모양이 그대로 유지됩니다..

Internet Explorer에서 새 요소를 인식하지 못하기 때문입니다 (섹션, 머리글, 등) 우리가 지정한 스타일을 적용 실패합니다. 따라서 다음 단계에서이 문제를 해결하기 위해 노력할 것입니다..

브라우저 지원 테스트

이전 게시물에서는이 polyfill을 사용하여 details 요소에 대한 브라우저 지원을 해결했습니다. 지원되지 않는 브라우저에서도 작동 할 수 있습니다. 그러나 이번에는 Modernizr과 다른 방식으로 시도 할 것입니다..

공식 웹 사이트에서, "Modernizr은 오픈 소스 자바 스크립트 라이브러리로서 차세대 HTML5 과 CSS3-전원이 공급되는 웹 사이트". 기술적으로 Modernizr은 특정 새로운 요소와 기능에 대한 브라우저 지원을 테스트합니다. 지원이 제공되지 않으면 우리는 다른 스타일을 제공하거나 제공하는 방식이든간에 대체해야합니다. 폴리 필. 이 경우 Modernizr을 사용하여 세부 정보 및 요약 요소를 테스트하는 데 도움을줍니다..

1. Modernizr로 이동하여 다운로드 페이지로 이동하십시오..

2. 다운로드 페이지에서 Modernizr은 라이브러리 구성 옵션을 제공하므로 웹 사이트에 꼭 필요한 특정 기능 만 선택하면됩니다. 이 경우 다음이 필요합니다.

   • HTML5Shiv 3.4
   • CSS 클래스 추가하기, 이 기능은 html 태그에 클래스를 자동으로 삽입합니다..
   • 그만큼 Modernizr.load,
   • 커뮤니티 부가 기능 상자로 이동하여 엘름 - 세부 사항,
   • 확장 성 섹션에서 다음을 선택합니다. Modernizr.addTest.
3. 파일 생성 및 다운로드.
4. 그것을 귀하의 HTML에 링크하고 Internet Explorer에서 페이지를 다시로드하십시오. 이제 Internet Explorer에서 태그를 인식 할 수 있으므로 페이지 스타일이 변경되었습니다..

그리고 소스 또는 inspect 요소를 보면 html 태그에 no-details 클래스가 삽입 된 것을 볼 수 있습니다. 브라우저가 우리가 페이지를 미리 볼 곳을 나타냅니다. 현재 세부 정보 요소를 지원하지 않습니다. @@@@ [이 문장을 이해할 수 없습니다. ]

그런 다음이 클래스를 후크로 사용하여 폴백을 만들 수 있습니다. 다음 단계에서 수행 할 것입니다..

폴백

이 단계에서 우리는 세부 다른 브라우저 (Chrome 제외)의 요소 기능 이전 게시물에서는이 스크립트를 사용하여이 단계가 자동으로 수행되었지만 이번에는 직접 작성합니다.

노트 : 이전 게시물의 내용을 조금만 검토하면됩니다. 세부 정보 요소는 현재 Chrome 브라우저에서만 지원됩니다..

먼저 CSS 작업을 시작해 보겠습니다..

요약 태그에서 커서 모드를 포인터로 변경하여 사용자가 클릭 가능하다는 것을 알게됩니다.

 요약 커서 : 포인터; 글꼴 크기 : 12pt; 윤곽선 : 0; 

세부 정보 요소의 위쪽과 아래쪽에 여백을두고 더 많은 공백을 지정하려면.

 세부 정보 (여백 : 20px 0px; 

기본적으로 요약 태그에는 화살표가 있습니다. 하지만 여기서 우리는 플러스 마이너스 아이콘으로 대체하고 싶습니다..

노트 : 진행하기 전에, 나는 이전에 Fugue가이 컬렉션의 아이콘을 다운로드하고 하나의 파일로 다운로드하여 스프라이트로 만들었습니다..

before 가상 엘레멘트를 추가하고 아이콘을 배경으로 붙이자. 이 시점에서 배경 위치는 상단에 있으며 더하기 아이콘이 표시됩니다.

 세부 정보> 요약 : before width : 16px; 높이 : 16px; 디스플레이 : 인라인 블록; content : "중요! 배경 : url ( '... /https://assets.hongkiat.com/uploads/html5-single-product-page/plus-min.png') no-repeat 중심 위쪽, margin-right : 5px; 위치 : 상대적; 상단 : 2 픽셀;

그런 다음 세부 정보 요소가 열리면 배경 위치가 아래쪽으로 이동하여 빼기 아이콘이 표시됩니다..

 세부 사항 [열기]> 요약 : before, details.open> 요약 : before background : url ( '... /https://assets.hongkiat.com/uploads/html5-single-product-page/plus-min.png' ) no-repeat 중앙 하단; 

그만큼 [열다] sign은 선택 자입니다. 이 경우, 지원하는 브라우저에서 상세 오픈 속성을 선택합니다.

마지막으로 Chrome에 기본적으로 표시되는 화살표를 숨겨야합니다..

 세부 정보> 요약 :: - webkit-details-marker display : none; 

그런 다음 잠시 브라우저에서 결과를 봅시다..

이제 기본 화살표가 아이콘으로 대체되었으며 Chrome에서이 화살표를 클릭하면 이미 토글 효과가 나타납니다. 그에 따라 아이콘이 변경됩니다. 그러나 다른 브라우저에서는 아무 것도 일어나지 않을 것입니다. 따라서 다음 단계에서는 jQuery로이 효과를 복제하려고 시도 할 것입니다..

jQuery를 사용한 토글 효과

jQuery 파트를 시작하기 전에 이언 데블린에게 영감을 주신 데 대해 감사 드리며 아래 스크립트는 실제로.

좋아, 요약 태그를 저장할 변수를 만들어 보자..

 var summary = $ ( 'details summary'); 

그런 다음 요약의 모든 형제 요소를 div.

summary.siblings (). wrapAll ( '
');

details 요소에 열린 클래스가없는 경우 div를 숨 깁니다..

$ ( 'details : not (open) summary'). 형제 ( 'div'). 숨기기 ();

요약을 클릭하면 숨겨진 div가 표시되고 반대는 div가 처음 열릴 때 숨겨집니다..

 toggleClass ( 'open');); summary.click (function () $ this) .siblings ( 'div'). 

이러한 함수가 지원되지 않는 브라우저에서만 실행되도록하기 위해이 조건문 내에이 함수를 래핑합니다.

 if ($ ( 'html'). hasClass ( 'no-details')) // 코드가 여기에옵니다

아래 코드는 우리가 가지고있는 코드입니다.

 if ($ ( 'html'). hasClass ( 'no-details')) var summary = $ ( 'details summary'); summary.siblings (). wrapAll ( '
'); $ ( 'details : not (open) summary'). 형제 ( 'div'). 숨기기 (); toggleClass ( 'open');); summary.click (function () $ this) .siblings ( 'div'). 

이제 브라우저에서 테스트 해 봅시다. 토글 효과는 이제 모든 브라우저에서 작동해야합니다. 개인적으로 (Internet Explorer 7까지).

• 데모
• 소스 다운로드

팁 : 또는 .비녀장() 와 .slideToggle () 슬라이드 효과를 만들 수 있습니다. 또한 처음에 세부 정보를 열려면 details 요소에 열려있는 클래스를 추가 할 수 있습니다.

결론

HTML5를 사용하여 하나의 제품 페이지를 만드는 모든 단계를 거쳤으며, 지원되지 않는 브라우저를 디버깅 할뿐만 아니라 세부 요소에 대한 토글 효과를 자체적으로 복제하므로 잘만하면 많은 것을 배울 수 있습니다..

그러나 나는이 포스트에서 모든 것을 자세하게 설명하지 않았다는 것을 알고 있습니다. 그래서 당신이 뭔가를 정리하고 싶다면 아래의 코멘트 박스에 질문을 게시하십시오..