HTML5

및

태그 사용 방법

이 기사는 "HTML5 / CSS3 자습서 시리즈" - 당신을 더 나은 디자이너 및 / 또는 개발자로 만드는 데 전념하는. 여기를 클릭하십시오. 같은 시리즈의 기사 더보기.

HTML5에서 사용할 수있는 여러 가지 새로운 태그 중에서 사양 (예 : 그림, 묘지, 과 곁에), 세부 묘사 과 개요 내 의견으로는 태그가 가장 유용합니다. 이러한 새 태그를 사용하면 긴 내용 중 일부를 숨기고 요약 만 표시 할 수 있습니다.

우리는 실제로이 효과를 종종 보지만, 대부분 JavaScript 또는 jQuery를 기반으로합니다. jQuery는 대부분의 사람들이 이해하지 못하는 것입니다. 이제 새로운 요소들로 - 세부 과 개요 - 일이 더 쉬워 질거야..

실제 시나리오에서 태그가 작동하는 방식을 살펴 보겠습니다..

이 데모에서는 제품 설명을 요약 해 보겠습니다. 먼저 'details'태그를 만든 다음 아래 예와 같이 'summary'태그와 함께 모든 내용을 넣으십시오.

 
 
MacBook Pro 사양
 
 
13.3 인치 LED 백라이트 광택 와이드 스크린 디스플레이 엣지 투 에지 (edge-to-edge), 중단없는 유리 (1280 x 800 픽셀 해상도).
 
2.4GHz Intel Core i5 듀얼 코어 프로세서 우수한 멀티 태스킹을위한 3MB 공유 L3 캐시 포함.
 
Intel HD Graphics 3000 메인 메모리와 공유되는 384 MB DDR3 SDRAM.
 
500GB 직렬 ATA 하드 드라이브 (5400 RPM)
 
4GB가 설치된 RAM (1333 MHz DDR3, 최대 8 GB 지원)
 
 
 

이 예에서는 MacBook Pro 사양 세부 사항을 추가했으며 이제 브라우저가 어떻게 이러한 태그를 렌더링하는지 보겠습니다.

또한 위의 데모를보다 합리적인 것으로 만들기 위해 세부 정보 위의 제품에 대한 설명과 제목을 추가했습니다. 그래서 당신은 어떻게 생각하십니까? 아주 쉽고, 맞습니다.?

브라우저 지원

그러나이 태그를 전체 웹 사이트에 적용하려면 먼저 Chrome 12 이상에서만 세부 정보 및 요약 태그가 지원되어야합니다.

최신 파이어 폭스도 아직 지원하지 않습니다..

따라서이 태그를 적용하려면 지원되지 않는 브라우저에 대체 기능을 포함시켜야합니다. 좋은 소식은 간단합니다. 이 세부 사항을 사용하여 이전 브라우저의 태그 기능을 자동으로 복제하는 polyfill을 사용할 수 있습니다.

이 파일을 다운로드하여 jQuery (최소한 1.7+ 이상)와 함께 html 문서에 링크하고 close body 태그 앞에 polyfill을 배치해야합니다..

head 태그 내부에 IE8 이하의 HTML5shiv를 포함하기 위해 다음 조건 태그를 삽입하십시오. 그렇지 않으면 Internet Explorer가 이러한 새 태그를 인식하지 못합니다.

이제 Internet Explorer에서 어떻게 나타나는지 봅시다.

이제 Internet Explorer에서도 작동합니다..

• 데모
• 소스 다운로드

결론

JavaScript 또는 jQuery로 숨기기 및 표시 효과를 만드는 것은 실제로 비교적 쉽지만 기본적으로 브라우저에서 지원되는 것은 분명 많은 사람들에게 훨씬 쉬운 솔루션입니다. 자바 스크립트 또는 HTML5로 처리하든 상관없이 귀하의 결정입니다. 읽어 주셔서 감사합니다. 즐거웠기를 바랍니다..