강의 내용
1. HTML5 시맨틱 태그
시맨틱 태그는 HTML 요소의 의미를 명확하게 정의하여 문서 구조를 더 명확하게 만들고, 검색 엔진과 스크린 리더가 내용을 더 잘 이해할 수 있게 합니다.
주요 시맨틱 태그
시맨틱 HTML 구조 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>시맨틱 웹페이지</title>
</head>
<body>
<header>
<h1>웹사이트 제목</h1>
<nav>
<ul>
<li><a href="#home">홈</a></li>
<li><a href="#about">소개</a></li>
<li><a href="#contact">연락처</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>기사 제목</h2>
<p>기사 내용...</p>
</article>
<section>
<h2>추가 정보</h2>
<p>섹션 내용...</p>
</section>
</main>
<aside>
<h3>관련 링크</h3>
<ul>
<li><a href="#link1">링크 1</a></li>
<li><a href="#link2">링크 2</a></li>
</ul>
</aside>
<footer>
<p>© 2025 웹사이트명. 모든 권리 보유.</p>
</footer>
</body>
</html>2. 목록 태그 (Lists)
HTML에서는 다양한 형태의 목록을 생성할 수 있습니다.
순서가 없는 목록 (Unordered List)
<ul>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
<li>세 번째 항목</li>
</ul>- 첫 번째 항목
- 두 번째 항목
- 세 번째 항목
순서가 있는 목록 (Ordered List)
<ol>
<li>첫 번째 단계</li>
<li>두 번째 단계</li>
<li>세 번째 단계</li>
</ol>- 첫 번째 단계
- 두 번째 단계
- 세 번째 단계
정의 목록 (Description List)
<dl>
<dt>HTML</dt>
<dd>웹페이지의 구조를 정의하는 마크업 언어</dd>
<dt>CSS</dt>
<dd>웹페이지의 스타일을 지정하는 스타일시트 언어</dd>
</dl>- HTML
- 웹페이지의 구조를 정의하는 마크업 언어
- CSS
- 웹페이지의 스타일을 지정하는 스타일시트 언어
3. 링크와 네비게이션
웹의 핵심은 하이퍼링크를 통한 연결입니다. 다양한 형태의 링크를 만들 수 있습니다.
링크 유형별 사용법
외부 링크
<a href="https://www.example.com" target="_blank" rel="noopener">
새 창에서 열기
</a>내부 링크 (같은 페이지 내)
<a href="#section1">섹션 1로 이동</a>
<section id="section1">
<h2>섹션 1</h2>
<p>내용...</p>
</section>이메일 링크
<a href="mailto:example@example.com">이메일 보내기</a>전화 링크
<a href="tel:+82-10-1234-5678">전화걸기</a>4. 이미지와 접근성
이미지는 웹페이지의 중요한 요소입니다. 접근성을 고려하여 적절한 대체 텍스트를 제공해야 합니다.
이미지 태그의 올바른 사용법
<!-- 의미있는 이미지 -->
<img src="chart.png" alt="2025년 월별 매출 증가 그래프"
width="600" height="400">
<!-- 장식용 이미지 -->
<img src="decoration.png" alt="" role="presentation">
<!-- figure와 figcaption 사용 -->
<figure>
<img src="diagram.png" alt="웹 개발 프로세스 다이어그램">
<figcaption>그림 1: 웹 개발의 주요 단계</figcaption>
</figure>반응형 이미지
<picture>
<source media="(min-width: 800px)" srcset="large-image.jpg">
<source media="(min-width: 400px)" srcset="medium-image.jpg">
<img src="small-image.jpg" alt="반응형 이미지">
</picture>5. 웹 접근성 기초
웹 접근성은 모든 사용자가 웹 콘텐츠를 사용할 수 있도록 하는 것입니다.
ARIA 속성
aria-label
<button aria-label="메뉴 열기">☰</button>aria-describedby
<input type="password" aria-describedby="pwd-help">
<div id="pwd-help">비밀번호는 8자 이상이어야 합니다.</div>role 속성
<div role="alert">오류가 발생했습니다!</div>
<nav role="navigation" aria-label="주 메뉴">
<ul>...</ul>
</nav>