시맨틱 태그란?
시맨틱 태그(Semantic tags)는 HTML5에서 도입된 태그로, 웹 문서의 구조와 의미를 명확하게 표현하기 위해 사용됩니다. 시맨틱 태그를 사용하면 검색 엔진이나 웹 브라우저가 문서를 더 잘 이해하고 해석할 수 있습니다.
Semantic은 의미의, 의미론의 라는 뜻의 영단어입니다.
시맨틱 태그 종류
header
:웹 페이지나 섹션의 헤더를 정의합니다. 주로 제목, 로고, 검색 폼 등을 포함합니다.
nav
: 네비게이션 링크를 포함하는 영역을 정의합니다. 주로 메뉴, 탐색 링크 등이 위치합니다.
article
: 독립적으로 구분되거나 재사용 가능한 콘텐츠를 정의합니다. 블로그 게시물, 뉴스 기사, 포럼 글 등을 포함할 수 있습니다.
section
: 문서의 섹션을 정의합니다. 일반적으로 관련된 콘텐츠를 그룹화하기 위해 사용됩니다.
aside
:문서의 주요 콘텐츠와는 관련이 적은 부가 정보를 정의합니다. 사이드바, 광고, 저작권 정보 등을 포함할 수 있습니다.
footer
: 웹 페이지나 섹션의 푸터(마지막 부분)를 정의합니다. 주로 저작권 정보, 연락처 정보, 관련 링크 등이 위치합니다.
main
: 문서의 주요 콘텐츠를 정의합니다. 한 페이지에 하나의 main 요소만 사용해야 합니다.
Tailwind와 Semantic tag 활용하여 blog 레이아웃 만들기
header, nav, article, section, aside, footer를 이용하여 레이아웃을 구상해보겠습니다.
<header class="bg-gray-200 py-4">
<div class="container mx-auto px-4">
<h1 class="text-2xl font-bold">My Blog</h1>
<nav class="mt-4">
<ul class="flex space-x-4">
<li><a href="#" class="text-blue-500 hover:text-blue-700">Home</a></li>
<li><a href="#" class="text-blue-500 hover:text-blue-700">About</a></li>
<li><a href="#" class="text-blue-500 hover:text-blue-700">Blog</a></li>
<li><a href="#" class="text-blue-500 hover:text-blue-700">Contact</a></li>
</ul>
</nav>
</div>
</header>
<main class="container mx-auto px-4 py-8">
<article class="max-w-2xl mx-auto">
<header>
<h2 class="text-3xl font-bold mb-4">Hello, World!</h2>
<p class="text-gray-500">Published on <time datetime="2023-06-07">June 7, 2023</time> by John Doe</p>
</header>
<section class="mt-8">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tristique risus id justo efficitur interdum. Morbi id felis id libero suscipit ullamcorper vel vel neque. Mauris sed felis in orci cursus lacinia non vel dui. Ut aliquam nunc vitae sapien dapibus, non ultricies urna tincidunt. Nulla facilisi. Donec fringilla metus ac suscipit hendrerit. Cras finibus ultrices cursus.</p>
<p>Quisque in ligula ultrices, fermentum lectus non, aliquet massa. Aliquam erat volutpat. Mauris scelerisque velit ut quam ullamcorper, id pharetra ligula eleifend. Proin consectetur lectus sit amet ipsum consequat, sed faucibus sapien luctus. Nulla sit amet dui id lorem fringilla efficitur. Donec consectetur, enim et efficitur pellentesque, metus metus lobortis mi, in gravida lacus purus vitae justo. Suspendisse in ipsum consectetur, cursus enim ut, congue risus. Fusce sed urna magna. Aenean eu tortor sit amet quam luctus fermentum. Nam eu orci id metus auctor aliquam eu non sem.</p>
</section>
<aside class="mt-8 p-4 bg-gray-100">
<h3 class="text-lg font-semibold mb-2">About the Author</h3>
<p>John Doe is a web developer with a passion for writing blog posts about web development, programming, and technology.</p>
</aside>
</article>
</main>
<footer class="bg-gray-200 py-4">
<div class="container mx-auto px-4">
<p class="text-center text-gray-500">© 2023 My Blog. All rights reserved.</p>
</div>
</footer>시맨틱 태그를 사용하여 blog 레이아웃 구상하기
Next.js에 Tailwind 적용시키기
next.js project를 create-next-app을 통해 생성할 경우 Tailwind를 쓸건지를 선택할 수 있습니다.
y를 선택하여 project를 만들면 dependencies에 자동으로 추가가 되고, tailwind.config.js도 자동으로 생성이 됩니다.
그리고 global.css에 Tailwind CSS에서의 Directives(지시어) 명령어가 추가되어 있으며 global.css는 index에 import 되어 있습니다. 따라서 우리는 그냥 사용만 해주면 됩니다! 🥰
Tailwind CSS에서의 Directives(지시어)에 대해서 🔎
@tailwind base
: @tailwind base 지시어는 HTML의 기본 스타일을 초기화하는 스타일을 포함합니다. 이는 브라우저의 기본 스타일을 재정의하거나 초기화하기 위해 사용됩니다.
@tailwind components
: @tailwind components 지시어는 Tailwind CSS의 구성 요소를 스타일링하는 스타일을 포함합니다. 예를 들어, 버튼, 입력 필드, 카드 등과 같은 UI 구성 요소를 스타일링할 때 사용됩니다.
@tailwind utilities
: @tailwind utilities 지시어는 유틸리티 클래스를 정의하는 스타일을 포함합니다. Tailwind CSS의 핵심 기능으로, 강력한 스타일 유틸리티를 사용하여 여러 요소에 대한 스타일을 쉽게 적용할 수 있습니다.
