div와 시멘틱 태그

🧱 <div> 태그란?

• HTML에서 요소를 묶거나 나누는 데 사용하는 범용 컨테이너
• 구조 구분이나 CSS 적용 대상 그룹화에 자주 사용됨
• 의미가 없는 구조적 태그 (비시멘틱)

<div class="box">
  <p>내용입니다</p>
</div>

---

🎨 CSS3에서 추가된 주요 속성들

✅ box-shadow

• 요소에 그림자 효과 추가

box-shadow: 3px 3px 10px gray;

✅ text-shadow

• 텍스트에 그림자 효과 추가

text-shadow: 2px 2px 4px red;

✅ border-radius

• 모서리를 둥글게 만듦

border-radius: 10px;

✅ transform

• 크기, 회전, 이동 등 변형

transform: rotate(15deg);

✅ transition

• 속성 변경에 애니메이션 효과 부여

transition: all 0.3s ease;

---

🧩 시멘틱 태그란?

시멘틱(Semantic) = 의미 있는

• 기존의 <div>나 <span>처럼 의미 없는 태그 대신,콘텐츠의 의미와 구조를 설명하는 태그들
• 웹 접근성 향상, 검색엔진 최적화(SEO)에 유리함

---

🏷 대표적인 시멘틱 태그

태그	역할 설명
<header>	문서나 섹션의 머릿글 (로고, 제목 등 포함)
<nav>	주 메뉴나 네비게이션 링크 영역
<main>	페이지의 주요 콘텐츠 (본문)
<aside>	보조 콘텐츠 (광고, 사이드바, 관련링크 등)
<footer>	바닥글, 작성자, 저작권, 사이트 링크 등

---

📌 시멘틱 태그의 가독성

• 태그에 의미를 부여함으로써 웹사이트의 구조를 파악하기 쉽도록 도와주기 위해 만들어졌다!