이번에는 H5 시맨틱 태그의 실제 사례를 가져오겠습니다. H5 시맨틱 태그 사용 시 주의 사항은 무엇인가요? 실제 사례를 살펴보겠습니다.
페이지 레이아웃은 html5 요소를 기반으로 합니다. 따라서 시작하기 전에 HTML5 요소에 익숙해지고 그 의미가 레이아웃에 적합한지 확인하는 것이 중요합니다.
HTML5 구조
HTML5 코드를 작성할 때 html5의 dc6dce4a544fdca2df29d5ac0ea9906b 태그를 2f8332c8dcfd5c7dec030a070bf652c3 태그로 바꾸지 않는 것이 매우 중요합니다. 때때로 dc6dce4a544fdca2df29d5ac0ea9906b 요소는 의미상 여전히 좋은 선택입니다. 예를 들어 래퍼 또는 컨테이너 div
기존 div 요소를 대체하는 데 사용할 수 있는 새로운 태그 중 하나는 1aa9e5d373740b65a0cc8f0a02150c53 1aa9e5d373740b65a0cc8f0a02150c53 요소에는 페이지의 기본 탐색 메뉴
를 래핑하는 데 사용되는 c787b9a589a3ece771e842a6176cf8e9 요소를 배치할 수도 있습니다. 앵커를 포함하는 h1 요소는 블로그 제목입니다.
처음에는 2f8332c8dcfd5c7dec030a070bf652c3을 사용하여 페이지 내용을 포장했지만 일부 문서를 읽은 후에 이것이 의미상 100% 정확하지 않다는 것을 느꼈습니다. 여전히 div 요소를 선택하세요.
div 요소 내에서 각 블로그 게시물은 자체 기사 요소로 래핑됩니다.
일련의 블로그 아래에는 페이지가 매겨진 한 쌍의 링크가 있습니다. 일반적으로 페이지 매김 링크의 중요성은 c787b9a589a3ece771e842a6176cf8e9(기본 탐색뿐만 아니라 여러 위치에서 사용할 수 있음) 요소
와 동일하지 않습니다. 하지만 이 블로그 레이아웃은 여전히 페이지 매김 링크를 기본 탐색으로 취급합니다.
15221ee8cba27fc1d7a26c47a001eb9b 요소가 수정되기 전에는 의미상 사이드바에 대한 특정 요소가 없었습니다. 그러나 이제 구문 문제에 대한 걱정 없이 side 요소를 안전하게 사용할 수 있습니다.
이 예에서 side 요소에는 여러 섹션 요소가 포함되어 있습니다. 사이드바 하단에 간단한 검색창이 있습니다. 이를 통해 HTML5 양식의 몇 가지 새로운 기능에 액세스할 수 있습니다.
그 중 하나는 자리 표시자 속성입니다.
레이아웃은 바닥글 요소로 끝납니다. 이 예에서는 바닥글 요소의 너비가 전체 페이지에 걸쳐 있도록 바닥글 요소를 div 컨테이너 외부에 배치해야 합니다.
header { margin: 0 0 98px 0; } header h1 { float: left; font-size: 36px; font-weight: normal; } header nav { float: right; text-align: right; padding: 6px 0 0 0; } header nav ul { list-style: none; } header nav li { float: left; font-size: 18px; width: 136px; margin: 0 0 0 20px; } header nav li:nth-child(1):before { content: "1. "; color: #a2a2a2; } header nav li:nth-child(2):before { content: "2. "; color: #a2a2a2; } header nav li:nth-child(3):before { content: "3. "; color: #a2a2a2; } header nav li:nth-child(4):before { content: "4. "; color: #a2a2a2; } header nav li:nth-child(5):before { content: "5. "; color: #a2a2a2; } #sidebar { width: 292px; float: left; padding: 4px 0 0 0; } #sidebar h3 { font-size: 18px; font-weight: normal; margin: 0 0 25px 0; } #sidebar ul { list-style: none; } #sidebar section { margin: 0 0 47px 0; } #sidebar #about a.more { display: block; text-align: right; } #sidebar #categories { width: 136px; float: left; margin: 0 20px 0 0; } #sidebar #social { width: 136px; float: left; } #footer-container { background: rgba(0,0,0,0.2); overflow: hidden; } footer { width: 916px; margin: 0 auto; padding: 10px 22px 50px 22px; } footer #credits { list-style: none; float: left; } footer #credits li { float: left; margin: 0 6px 0 0; } footer #credits li.wordpress a { display: block; width: 20px; height: 20px; background: url(images/credits.png) no-repeat 0 0; text-indent: -9999px; } footer #credits li.spoongraphics a { display: block; width: 25px; height: 20px; background: url(images/credits.png) no-repeat -30px 0; text-indent: -9999px; } footer #back-top { float: right; font-size: 12px; }
이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
관련 읽기:
H5에서 드래그 앤 드롭 효과를 만드는 방법H5를 사용하여 카메라를 호출하는 방법H5와 호환되지 않는 이전 버전의 브라우저를 처리하는 방법 정보 그리고 C3위 내용은 H5 의미 태그 실제 사례의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!