“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
728x90
마크업으로 레이아웃을 짤 때 시멘틱 태그를 사용합니다. 각자의 태그들이 의미하는 바와 사용하는 방식이 다른데 이 부분에 대해서 한번 알아봅시다.
🤔<header>
- <header>태그는 보통 사이트의 도입부, 즉 머릿 부분에 사용되며 사이트의 로고나 제목 등을 포함할 때 사용합니다.
- 텍스트, 인라인 요소, 블록 요소를 포함할 수 있지만 <header>, <footer> 태그는 포함 할 수 없습니다.
- 웹 페이지의 <header>는 하나만 사용해야한다.
🤔<nav>
- 내비게이션 표현을 위한 태그로 같은 사이트에 있는 페이지나 다른 사이트를 연결한는 링크들의 모음 즉, 메뉴형식을 표현할때 사용하는 태그입니다.
- 텍스트, 인라인 요소, 블록 요소를 포함할 수 있습니다.
- <nav>는 위치에 신경쓰지 않는 편이며 여러 개 사용이 가능합니다.
- 메뉴는 <footer>에도 들어가지만 <nav>에는 현재 열려있는 페이지에서 이동가능한 링크들을 넣을 수 있습니다.
🤔<section>
- <section>태그는 콘텐츠의 영역. 즉 여러 가지 콘텐츠들을 그룹으로 묶어주는 역할을 합니다.
- 텍스트, 인라인 요소, 블록 요소를 포함할 수 있습니다.
- <section>은 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을때 사용한다. 단순한 스타일링 목적이라면 <div>를 사용해야한다.
🤔<article>
- <article>태그는 웹페이지 상에서 실제 내용을 의미합니다. 독립적인 콘텐츠로 구체적인 내용이 들어갑니다. 주로 게시판, 블로그의 포스팅, 매거진, 뉴스기사 등이 들어갑니다.
- 텍스트, 인라인 요소, 블록 요소를 포함할 수 있습니다.
- 하나의 페이지에 여러 개의 <article>을 가질 수 있습니다.
- 여러개의 글에 글이 <article>요소가 되며, 그 안에는 <section>을 여러개 존재 할수 있습니다.
- <h2>~<h6>를 포함하는 것이 좋습니다.
😲section과 article 차이
- <article> 태그는 <section>과 다르게 독립적으로 존재 할 수 있으며 재사용이 가능합니다.
- <section>은 논리적으로 관계가 있는 요소 또는 문서를 분리할때 사용합니다.
- 다른 주제의 페이지를 구분 짓기위해 사용 영역들을 그룹가능 합니다.
🤔<aside>
- 사이트 왼쪽이나 오른쪽, 혹은 하단에 사이드 바가 표현되어있습니다.주 내용이 아닌 오른쪽이나 왼쪽에 사이드바로 표현됩니다.
- 텍스트, 인라인 요소, 블록 요소를 포함할 수 있습니다.
- 메인 콘텐츠와 관련이 없는 영역입니다.
🤔<footer>
- 웹페이지의 마지막에 들어가는 태그로 보통 저작권이나 정보같은 내용이 들어가는 부분입니다.
- 텍스트, 인라인 요소, 블록 요소를 포함할 수 있지만 태그는 포함 할 수 없습니다.