[디자이너 부트캠프]48일차 디자이너를 위한 HTML (2.시멘틱 태그와 웹페이지 구조설계)
[디자이너 부트캠프]48일차 디자이너를 위한 HTML (2.시멘틱 태그와 웹페이지 구조설계)
봄이다... 봄이 왔다..!!
이제 두꺼운 옷 바리바리 입지 않아도 괜찮은 계절이 와버렸다..>!!!!
여름 안왔으면...
강의노트
1) 시멘틱(Semantic) 태그란?
: 각 영역이 어떤 의미를 가지는지를 브라우저와 개발자 모두에게 명확하게 설명해주는 태그
| 태그 | 의미 | 예시 |
| <header> | 페이지 상단 | 로고, 메뉴바 등 포함 |
| <nav> | 내비게이션 영역 | 페이지 이동 링크 모음 |
| <main> | 주요 콘텐츠 영역 | 본문, 핵심 콘텐츠 |
| <section> | 주제별 구획 | 소개 섹션, 특징 섹션 등 |
| <article> | 독립된 콘텐츠 단위 | 블로그 글, 뉴스 카드 등 |
| <footer> | 페이지 하단 | 연락처, 저작권, SNS 링크 등 |
예를들어,
"카페 소개 페이지"를 만든다.
<header> “카페 온더브루” 로고와 메뉴
<nav> “대표 메뉴”, “오시는 길” 링크
<main> 이 페이지에서 가장 중요한 내용, 메뉴 소개와 이미지
<section> 대표 메뉴, 위치 정보 등 주제별로 나누는 공간
<footer> 저작권, 인스타그램 링크 등
시멘틱 태그로 바꾸면,
<header>로고 & 메뉴</header>
<nav>메뉴 링크</nav>
<main>
<section>대표 메뉴</section>
<section>오시는 길</section>
</main>
<footer>© 2025 Cafe OnTheBrew</footer>
이제 개발자뿐 아니라 검색엔진, 스크린리더(시각장애인 보조 기기)도 각 영역이 무엇을 의미하는지 인지할 수 있다.
2) 시멘틱 태그를 써야하는 이유
1. 개발자와 명확한 협업구조
- <div class="top">, <div class="wrap"> 대신 <header>, <main> 이렇게 쓰면, 서로 소통하기 좋음
2. SEO(검색엔진 최적화)
- 검색엔진은 콘텐츠가 어떤 의미인지 파악하려고 노력하는데, 시멘틱 태그를 쓰면 콘텐츠 구조를 더 잘 이해함
3. 웹 접근성 향상에 도움
- 시각장애인 등 보조기기를 사용하는 사용자들은 HTML 구조를 기반으로 콘텐츠를 탐색하는데, 이 때 시멘틱 태그가 있으면 더 정확하게 콘텐츠를 읽힌다.
| 일반 태그 (div) | 시멘틱 태그 |
| 의미 없음 | 영역의 역할이 명확해짐 |
| 모든 구역이 비슷해 보임 | 브라우저와 사용자 모두가 구조 파악 가능 |
| 협업 시 혼란 | 개발자/검색엔진/기기 모두에게 친절 |
디자인에서도 여백, 색상, 계층 구조처럼 보이지 않는 규칙이 중요하듯, HTML에서도 시멘틱 구조는 코드의 의미를 살리는 핵심! 구조를 잘 짜는 디자이너는 실무에서 훨씬 신뢰받는다.
4. 예시
** 시멘틱 태그가 없는 경우
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>카페 온더브루</title>
</head>
<body>
<div class="top">
<div class="logo">카페 온더브로
</div>
<div calss="menu'>
<a href="#menu">메뉴</a>
<a href="#location>오시는 길</a>
</div>
</div>
<div class="content">
<div calss="section" id="menu">
<h2>대표 메뉴</h2>
<ul>
<li>아메리카노</li>
<li>라떼</li>
<li>치즈케이크</li>
</ul>
</div>
<div class="section" id="location">
<h2>오시는 길</h2>
<p>부산광역시 연제구 중앙대로 123</p>
<img src="https://via.placeholder.com/300" alt"카페 이미지">
</div>
</div>
<div class="bottom">
<p>@ 2025 Cafe OnTheBrew</p>
<a href="http://instagram.com" target="_black">Visit Instagram</a>
</div>
</body>
</html>
** 시멘틱 태그가 있는 경우
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>카페 온더브루</title>
</head>
<body>
<header>
<div class="logo">카페 온더브루
</div>
<nav>
<a href="#menu">메뉴</a>
<a href="#location">오시는 길</a>
</nav>
</header>
<main>
<section id="menu">
<h2>대표 메뉴</h2>
<ul>
<li>아메리카노</li>
<li>라떼</li>
<li>치즈케이크</li>
</ul>
</section>
<section id="location">
<h2>오시는 길</h2>
<p>부산광역시 연제구 중앙대로 123</p>
<img src="https://via.placeholder.com/300" alt="카페 이미지">
</section>
</main>
<footer>
<p>© 2025 Cafe OnTheBrew</p>
<a href="https://instagram.com" target="_blank">Instagram</a>
</footer>
</body>
</html>
오늘의 과제
나만의 카페 소개페이지 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hithisisgimma</title>
</head>
<body>
<header>
<h1>
Hi,It's a cup of Coffe from Gimma
</h1>
<nav>
<a href="#menu">MENU</a>
<a href="#location">LOCATION</a>
</nav>
</header>
<main>
<section id="menu">
<h2>
Menu
</h2>
<ul>
<li>Americano - ice/hot</li>
<li>Latte - ice/hot</li>
<li>Dolce Lette - ice/hot</li>
<li>Apogato - ice only</li>
<li>A piece of Cheese Cake</li>
</ul>
</section>
<section id="location">
<h2>
LOCATION
</h2>
<p>
413 Gimmaa, Seoul
</p>
<img src="Mood(2).png" alt="Cafe image" width="450">
</section>
</main>
<footer>
<p>
@ 2025 Cafe Gimma
</p>
<p>
<a href="https://blog.naver.com/na_mohaji_"target="_blank">Naver Blog</a>
</p>
<p>
<a href="https://hana2025.tistory.com/"target="_blank">Tstory</a>
</p>
</footer>
</body>
</html>