나는 주로 개발을 할 때 스타일을 styled-components로 한다.
이때 HTML 태그 이름을 기반으로 다양한 styled 컴포넌트를 만들 수 있다.
styled.xxx (기본 HTML 태그 이름)
주로 div, section, button, span, p, h1 정도만 써왔는데 어떤 상황에서 어떤걸 사용하는게 좋은지 더 알아보자.
기본 구조 & 레이아웃 관련
<div> : 의미 없는 블록을 만들고 싶을 때. 가장 일반적인 컨테이너
<section>: 어떤 주제별 블록을 나누고 싶을 때 (예: "소개", "리뷰" 구역 등)
<article>: 독립적으로 하나의 콘텐츠 단위가 될 수 있을 때 (예: 블로그 글, 댓글 등)
<main>: 페이지의 핵심 콘텐츠를 감쌀 때 (한 번만 사용)
<header>: 페이지나 섹션의 머리말에 해당할 때 (제목, 메뉴 등)
<footer>: 페이지나 섹션의 꼬리말에 해당할 때 (저작권, 링크 등)
<aside>: 사이드바, 광고 등 부가적인 내용일 때
텍스트 & 제목 관련
<h1>~<h6>: 제목을 계층적으로 표현할 때 (하나의 페이지에는 보통 h1 은 1개만)
<p>: 일반적인 단락
<span>: 의미 없이 인라인으로 스타일을 줄 때 (텍스트 강조나 색상 등 / 줄바꿈 X)
<strong>/<b>: 중요 강조일 때 (strong은 의미 강조, b는 단순 굵게)
<em>/<i>: 강조 또는 기울임. em은 의미 강조, i는 단순 스타일
입력 & 인터렉션
<button>: 버튼(동작 트리거)이 필요할 때 (클릭 이벤트)
<a>: 페이지 이동, 외부 링크 등 링크가 필요할 때
<input>: 텍스트, 체크박스, 라디오 등 사용자 입력이 필요할 때
<lable>: input과 연결해서 설명을 붙일 때
<form>: 여러 입력 필드를 제출 가능한 하나의 단위로 묶을 때
이미지 & 미디어
<img>: 이미지 삽입
<picture>: 반응형 이미지 처리할 때
- 다음과 같이 사용할 수 있다.
<picture>
<source media="(min-width: 800px)" srcset="large.jpg">
<source media="(min-width: 400px)" srcset="medium.jpg">
<img src="small.jpg" alt="반응형 이미지">
</picture><video>: 비디오 삽입
<audio>: 오디오 삽입
그렇다면 왜 적절한 HTML태그를 써야 할까?
- 의미와 구조를 명확하게 표현할 수 있다. 의미에 맞는 태그를 쓰면 스크린 리더나 검색 엔진도 내용을 잘 이해할 수 있다.
- 접근성이 향상된다.
- SEO에 도움이 된다: 검색 엔진은 h1, section 같은 의미 있는 태그를 보고 콘텐츠를 더 잘 분석한다. 즉, 내 웹사이트가 더 많은 사람들에게 노출될 수 있다.
- 유지보수와 협업이 쉬워진다: 태그의 의미가 명확해지면 다른 개발자들도 코드를 읽기 쉬워진다.
