🌱 브라우저가 결정하는 순서

1) 누가 말했는지

브라우저 기본 스타일 < 당신이 쓴 CSS < !important 붙인 CSS
이런 순서

2) 누가 더 구체적으로 말했는지

설명만 하고 싶다면 이렇게 기억하면 됩:

ID → 클래스 → 태그 순으로 더 강하다

(예: #header > .title > h1)

3) 같은 수준이면 "나중에 적힌 것"이 이긴다

p { color: blue; } p { color: red; }

→ 빨강색이 됨 (나중에 적혔으니까)

🍀 정말 한 줄 요약

여러 스타일이 겹치면 브라우저는 (출처 → 구체성 → 선언 순서) 순서로 누가 더 강한지 판단해서 하나를 선택한다.

🌟 시맨틱 태그를 사용하면 좋은 점

HTML 시맨틱 태그는 <header>, <nav>, <main>, <section>, <article>, <footer> 같은 이 영역이 어떤 의미인지 알려주는 태그들 입니다.
이걸 쓰면 웹페이지가 그냥 빈 상자들의 모음이 아니라, 뜻이 있는 구조물이 됩니다.

1️⃣ 코드가 한눈에 읽기 쉬워진다

<div id="header">
<div class="content">
이런 것보다
<header>
<main>
같은 태그를 쓰면 보는 즉시 역할이 드러나요.

→ 유지보수할 때 “이게 뭐였더라?” 고민이 줄어듭니다 👀

2️⃣ 검색 엔진(SEO)에 유리하다

검색 엔진은 페이지를 읽을 때
“여긴 제목 영역인가? 중요한 글인가? 메뉴인가?”
이런 걸 알고 싶어 합니다.

시맨틱 태그는 그걸 명확히 알려주는 표지판 역할을 합니다.
그래서 검색 엔진이 페이지 구조를 더 잘 이해해서 검색 성능(SEO)에 긍정적 효과가 있어요.

3️⃣ 스크린 리더 등 접근성(Accessibility)이 좋아진다

시맨틱 태그는 보이지 않는 정보도 제공합니다.

예:
화면 낭독기가 <nav>를 만나면
→ “여기는 내비게이션 영역입니다.”
라고 안내할 수 있어요.

→ 장애가 있는 사용자도 페이지를 더 편하게 탐색할 수 있죠 🙌

4️⃣ 브라우저가 구조를 더 정확하게 이해한다

브라우저 입장에서
<div>들만 있을 때는 “여기가 의미 없는 박스인가?” 하고 추측해야 합니다.
하지만 시맨틱 태그가 있으면 정확한 페이지 구조를 인식해서 기본 스타일이나 구조 처리도 더 자연스럽게 됩니다.

5️⃣ 팀 개발에 강력한 협업 효과

백엔드, 프론트엔드, 디자이너, 새로운 팀원까지
누구든 HTML 구조를 빠르게 이해할 수 있어요.

→ “여기 article 안에 section 넣었구나”
→ “footer가 어디 있는지 바로 보이네”
이런 느낌으로 소통 비용 절약 🧭

🌈 한 줄 요약

시맨틱 태그는 HTML을 더 의미 있게 만들고, 읽기 좋고, 찾기 좋고, 사용하기 좋게 해준다.
웹페이지에 표지판과 안내판을 붙여주는 느낌이에요.

728x90

김그린

위클리페이퍼 1_CSS의 Cascading(계단식 처리)/시맨틱태그