이번에는 html5 태그 중에서
레이아웃을 구성하는 7개의 기본 태그를 알아보자.
<header>
<main>
<nav>
<aside>
<article>
<section>
<footer>
<BODY>안에 들어오는 주요 레이아웃 관련 태그라고 생각하면 된다. 중요함!
아래 네이버 페이지를 기본으로 참고해보자.
태그 설명 보기전에 이미지로 이렇게 박스 나눠 보면 좀더 이해 편함.
여기까지 보았다면, 레이아웃 태그에 대해서 7개를 알아보자.
레이아웃 태그 HTML5 layout tags 알아보기
<header>
사이트의 로고, 기본 메뉴 등이 오는 위치다.
요즘은 대부분 상단에 위치하고 있다. 말 그대로 머리라고 생각하면 된다.
<nav>
네비게이션을 줄인 나비.
나비를 따로 지정하면 웹 접근성에서 빠르게 찾아서 메뉴를 선택 할 수 있다.
나비 안에 태그는 정렬태그(ol, ul, li)로 네비 순서를 정하면 더욱 좋음.
사이트맵 구성할때도 사용한다고 하는데.. 나는 거기까진 안 만들어 봄. 요즘 사이트맵 안만들지 않나?
<main>
메인 내용들이 들어오는 위치. 지정해줘야 함.
헤드/나비/푸터/사이드 와 구분해서 메인이라고 따로 지정함.
블로그로 치면 상단 메뉴, 사이드메뉴, 하단메뉴 구분하고,
리스트 또는 본문이 주로 나오는 부분이라고 생각하면 될듯. (내용이 바뀌는 주 공간, 또는 콘덴츠 표시 영역)
*단 인터넷익스플로러에서 지원이 안된다. 태그 확인시 구글 크롬으로 코딩을 해야하는 이유.
<article>
문서의 독립 또는 재사용시 사용하는 태그.
나는 이 아티클이랑 섹션이 좀 구분 어렵고 어느때 사용해야하는지 헤깔림.
웹 페이지의 주된 내용에 사용하는 태그.
<section>
비슷한 내용이나 같은 내용끼리 묶어 줄때 섹션을 사용하면 좋다.
섹션은 아티클 위에 오기도하고 아티클 안에 들어오기도 한다.
또는 메인 안에 들어가기도 한다.
그러니깐 본문 내용 나오기전에 제목/날짜/내용/좋아요/퍼가요 가 하나의 묶음으로 표시가 되게 하려면 섹션으로 묶고 그안에 요소를 넣어라.. 그런 것인듯.
코딩 하는 사람의 마음이긴 하지만, 사실 통용되는 코딩이 다로 있어서 레이아웃 공부할때는 일반적으로 사용하는 방법을 익혀야 편하다. 참고만 하길.
<aside>
사이즈 메뉴가 있을 시 사용하는 메뉴.
탑 나비<nav>는 고정형이면,
사이드 메뉴는 비고정형일때도 있다.
또 각 페이지마다 다를 때도 있다. 그때 사용하는 것.
고정일때도 사용하는 경우가 있지만,
주로 메인페이지에서 사이드 메뉴까지 고정하는건 블로그가 대부분.
웹페이지에서 사이즈 메뉴 고정은 아얘 사이드메뉴 위치에 주 메뉴 <nav>를 사용하는 경우 많다.
<footer>
하단에 사이트 정보나 반드시 공시할 내용, 또 관련 사이트 등의 링크 등을 걸어둘때 사용한다.
레이아웃 구성시 푸터 태그가 생략되어 없을 때도 있다.
없다고 이상하게 여기지 말자.
레이아웃 태그 7개 알아보기 끝. 이정도면 이해해도 레이아웃 구성할때 헤깔리진 않을 것이다. 아티클이랑 섹션 사용하는 부분만 잘 이해하면 간단한 레이아웃 코딩은 할 수 있다. 여러가지 사이트에서 위에 이미지처럼 박스를 나눠서 레이아웃 구분하는 연습을 하면 좀더 쉽게 이해할 수 있다. 연습해보자!
'코딩 프론트엔드' 카테고리의 다른 글
| div에 emmet(이멧) 기능으로 id와 class 자동으로 지정하는 방법, vs code 코드 자동완성 (0) | 2023.02.09 |
|---|---|
| HTML5 tag 정리 (0) | 2022.12.03 |
| HTML5 Semantic tags 시맨틱 태그 기본은 이해하고 넘어가기 (0) | 2022.12.01 |
| 스크레치 똥피하기 게임 만들기 (0) | 2022.03.08 |
| vs code 코드 자동완성기능 이멧 emmet으로 편리하게 몇분만에 Jquery 제이쿼리 ajax 에이젝스 아작스 적용하기 (0) | 2022.03.08 |
