[홈페이지 시멘틱 태그 살펴보기]
홈페이지는 목적에 따라 레이아웃이 다를 수밖에 없습니다.
하지만 일반적인 홈페이지는 헤더, 메뉴, 메인 콘텐츠, 사이드바, 푸터로 구성됩니다.
과거에는 홈페이지 구성 요소를 div 태그에만 의존해 작성했지만 이제는 요소 의미를 고려한 시멘틱 태그를 사용하는 게 관례로 자리 잡고 있는데요.
시멘트 태그는 일반적으로 '<>' 꺾쇠괄호 안에 태그 이름을 적어서 사용합니다.
예를 들어 <h1>은 제목을 표시하는 태그이고, <p>는 문장이나 단락을 표시하는 태그입니다.
오늘은 '홈페이지 시멘틱 태그 살펴보기'에 대해 이야기해 보겠습니다.
- header
header 태그는 head를 의미하지 않습니다.
웹 작성에 head 영역은 화면에 보이지 않는 부분이며, 여기에서 header는 body 영역 안에 존재하는 부분입니다.
즉 화면에 보이는 영역 중에서 header를 가리킵니다.
header 태그는 말 그대로 보이는 홈페이지 머리 영역에 위치해 홈페이지를 대표하는 제목 등을 담고 있습니다.
기본적으로 헤딩 태그(h1 - h6)를 사용하고, 로고 또는 아이콘이 삽입됩니다.
더불어 홈페이지를 대표할 간략할 문구를 담기도 합니다.
- nav
내비게이션을 의미하는 nav 태그입니다.
기본적으로 홈페이지 내에 존재하는 웹페이지를 연결하는 링크를 담고 있습니다.
홈페이지는 여러 웹페이지로 구성하는 게 일반적입니다.
각 웹페이지로 이동할 수 있는 내비게이션이 필요합니다.
바로 이러한 내비게이션 역할을 담당하는 게 nav 태그입니다.
- main
홈페이지 주요 콘텐츠는 main 태그 안에 담습니다.
main 태그 안에 section, article 태그를 넣어 사용하는 게 정석입니다.
때로는 홈페이지 구조가 복잡하지 않을 시에는 main 태그를 생략하고 section 태그를 바로 사용하기도 합니다.
·section 태그 : 주요 콘텐츠 중에서 내용을 그룹화하여 표현합니다.
즉 문서라면 챕터별로 scection 태그를 사용하는 방식입니다.
·article 태그 : 독립적인 콘텐츠를 담습니다.
즉 신문 기사들을 각각 article 태그를 사용하는 방식입니다.
- footer
footer는 문자 그대로 홈페이지 마지막에 보이는 영역입니다.
header 태그와 마찬가지로 footer 태그도 body 태그 안에 위치하고 있습니다.
이 body 태그 중에서 가장 마지막에 위치하는 게 footer 태그로, 일반적인 홈페이지에서 기업 주소 및 카피라이터 정보를 담습니다.
감사합니다.
조회 : 4,825
Total 441
HOME > 기타 메뉴
> 홈페이지 운영팁
