📖 한국경영교육연구소 AI ACADEMY · 용어·통역 사전
시맨틱 태그 (semantic)
💬 쉬운 뜻
이름만 봐도 "무슨 역할인지" 알 수 있게 만든 의미 있는 요소들이에요. 머리말은 <header>, 본문은 <main>, 메뉴는 <nav>, 바닥글은 <footer>처럼요. 똑같이 생긴 박스라도 뜻 없는 일반 박스(<div>) 대신 역할이 분명한 이름을 써서 구조를 또렷하게 합니다. 서류철의 라벨 탭처럼 칸마다 '계약서', '영수증' 이름표가 붙어 한눈에 구분되는 셈이에요.
⌨️ 이럴 땐 이렇게 입력
- 이 페이지를 의미 없는 div로만 짜지 말고 header·nav·main·footer 같은 시맨틱 태그로 구조를 잡아줘
- 지금 div로만 짠 부분을 시맨틱 태그로 바꿔줘. SEO랑 접근성 좋아지게
🔮 AI가 이렇게 답하면 = 이런 뜻
AI가 "시맨틱 태그(header·main·footer 등)로 구조화했다"고 하면 = 박스마다 역할 이름표가 붙어서 구글 검색 로봇과 화면 읽어주는 보조기기가 페이지를 더 잘 이해하게, 즉 SEO와 접근성에 유리하게 짰다는 뜻이에요.
➡️ 다음엔 이렇게
화면 모습은 그대로니 겉보기로는 차이가 안 보여도 정상입니다. 그래도 의미 없는 div가 남아 있다면 "남은 div도 의미에 맞는 시맨틱 태그로 더 바꿔줘"라고 한 번 더 시키세요.
한국경영교육연구소 · AI ACADEMY — 외부강사 김지백 · 시연 교실 홈