본문 바로가기
  • 코딩, 허쌤이 떠먹여 줄게
FrontEnd/Html Css

1회차 — HTML 기초 구조 및 시맨틱 마크업

by 허쌤 2025. 12. 29.

1회차 — HTML 기초 구조 및 시맨틱 마크업

학습 목표

  • HTML 문서의 기본 구조를 이해하고 작성할 수 있다
  • 시맨틱 태그를 활용하여 의미 있는 마크업을 작성할 수 있다
  • 텍스트, 제목, 문단 태그를 적절히 사용할 수 있다
  • 링크와 이미지를 올바르게 삽입하고 접근성을 고려할 수 있다

1. HTML 문서 구조 이해

1.1 DOCTYPE 선언

HTML 문서의 첫 줄에는 반드시 DOCTYPE 선언이 필요합니다.

<!DOCTYPE html>
  • 역할: 브라우저에게 HTML 버전을 알려주는 선언문
  • HTML5: <!DOCTYPE html> (간단한 형태)
  • 위치: 문서의 가장 첫 줄

1.2 HTML 요소

<html lang="ko">
  <!-- 문서 내용 -->
</html>
  • lang 속성: 문서의 언어를 지정 (접근성 및 SEO에 중요)
  • 예시: lang="ko" (한국어), lang="en" (영어)

1.3 HEAD 요소

문서의 메타데이터(정보)를 담는 영역입니다.

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="페이지 설명">
  <title>페이지 제목</title>
</head>

주요 메타 태그

  • <meta charset="UTF-8">: 문자 인코딩 지정 (한글 지원)
  • <meta name="viewport">: 반응형 웹을 위한 뷰포트 설정
  • <meta name="description">: 검색 엔진을 위한 페이지 설명
  • <title>: 브라우저 탭에 표시되는 제목

1.4 BODY 요소

실제 화면에 표시되는 콘텐츠를 담는 영역입니다.

<body>
  <!-- 화면에 보이는 모든 내용 -->
</body>

2. 시맨틱 태그 사용법

시맨틱 태그는 의미를 가진 태그로, 콘텐츠의 역할을 명확히 표현합니다.

2.1 주요 시맨틱 태그

<header>

  • 페이지나 섹션의 헤더(머리말) 영역
  • 로고, 네비게이션, 검색창 등 포함
<header>
  <h1>웹사이트 제목</h1>
  <nav>...</nav>
</header>

<nav>

  • 네비게이션 메뉴 영역
  • 주요 링크들을 그룹화
<nav>
  <ul>
    <li><a href="#home">홈</a></li>
    <li><a href="#about">소개</a></li>
    <li><a href="#contact">연락처</a></li>
  </ul>
</nav>

<main>

  • 페이지의 주요 콘텐츠 영역
  • 한 페이지에 하나만 사용 (접근성)
<main>
  <!-- 페이지의 핵심 내용 -->
</main>

<section>

  • 주제별로 구분된 섹션
  • 독립적인 콘텐츠 영역
<section>
  <h2>섹션 제목</h2>
  <p>섹션 내용...</p>
</section>

<article>

  • 독립적인 글/기사 영역
  • 블로그 포스트, 뉴스 기사, 댓글 등
<article>
  <h2>기사 제목</h2>
  <p>기사 내용...</p>
</article>

<footer>

  • 페이지나 섹션의 푸터(바닥글) 영역
  • 저작권 정보, 연락처, 관련 링크 등
<footer>
  <p>&copy; 2024 웹사이트명. All rights reserved.</p>
</footer>

2.2 시맨틱 태그의 장점

  1. 의미 전달: 코드만 봐도 구조 파악 가능
  2. 접근성 향상: 스크린 리더가 구조를 이해하기 쉬움
  3. SEO 개선: 검색 엔진이 콘텐츠를 더 잘 이해
  4. 유지보수 용이: 코드 가독성 향상

3. 텍스트/제목/문단 태그

3.1 제목 태그 (h1 ~ h6)

계층 구조를 나타내는 제목 태그입니다.

<h1>가장 중요한 제목 (1개 권장)</h1>
<h2>두 번째 수준 제목</h2>
<h3>세 번째 수준 제목</h3>
<h4>네 번째 수준 제목</h4>
<h5>다섯 번째 수준 제목</h5>
<h6>여섯 번째 수준 제목</h6>

주의사항:

  • <h1>은 페이지당 1개 권장
  • 숫자를 건너뛰지 말 것 (h1 → h3 ❌, h1 → h2 → h3 ✅)
  • 제목의 크기를 조절하려면 CSS 사용, 태그 레벨 변경 금지

3.2 문단 태그 (<p>)

일반적인 텍스트 문단을 나타냅니다.

<p>이것은 문단입니다. 여러 문장을 포함할 수 있습니다.</p>
<p>각 문단은 별도의 블록으로 구분됩니다.</p>

3.3 구분선 태그 (<hr>)

주제 전환을 나타내는 수평선입니다.

<section>
  <h2>첫 번째 섹션</h2>
  <p>내용...</p>
</section>

<hr>

<section>
  <h2>두 번째 섹션</h2>
  <p>내용...</p>
</section>

3.4 기타 텍스트 태그

<!-- 강조 -->
<strong>중요한 내용 (강한 강조)</strong>
<em>강조할 내용 (약한 강조, 기울임)</em>

<!-- 줄바꿈 -->
<p>첫 번째 줄<br>두 번째 줄</p>

<!-- 인용 -->
<blockquote>인용문 블록</blockquote>
<q>짧은 인용문</q>

4. 링크 (<a>)

4.1 기본 사용법

<a href="https://www.example.com">링크 텍스트</a>

4.2 링크 타입

외부 링크

<a href="https://www.google.com" target="_blank" rel="noopener noreferrer">
  구글로 이동
</a>
  • target="_blank": 새 탭에서 열기
  • rel="noopener noreferrer": 보안을 위한 속성 (새 탭 열 때 필수)

내부 링크 (같은 페이지 내)

<a href="#section1">섹션 1로 이동</a>

<section id="section1">
  <h2>섹션 1</h2>
</section>

이메일 링크

<a href="mailto:example@email.com">이메일 보내기</a>

전화 링크

<a href="tel:+821012345678">전화하기</a>

4.3 접근성 고려사항

  • 링크 텍스트는 의미 있게 작성 ("클릭하세요" ❌, "더 알아보기" ✅)
  • 링크만으로도 목적을 이해할 수 있어야 함

5. 이미지 (<img>)

5.1 기본 사용법

<img src="이미지경로.jpg" alt="이미지 설명">

5.2 필수 속성

src (source)

  • 이미지 파일의 경로
  • 상대 경로 또는 절대 경로
<!-- 상대 경로 -->
<img src="images/photo.jpg" alt="사진">

<!-- 절대 경로 -->
<img src="https://example.com/image.jpg" alt="사진">

alt (alternative text)

  • 접근성을 위한 필수 속성
  • 이미지를 볼 수 없을 때 대체 텍스트
  • 스크린 리더가 읽어주는 내용
<!-- 좋은 예 -->
<img src="cat.jpg" alt="흰색 고양이가 소파에 앉아 있는 모습">

<!-- 나쁜 예 -->
<img src="cat.jpg" alt="이미지">
<img src="cat.jpg" alt=""> <!-- 장식용 이미지가 아닌 경우 -->

5.3 추가 속성

<!-- 크기 지정 -->
<img src="photo.jpg" alt="사진" width="300" height="200">

<!-- 제목 추가 -->
<img src="photo.jpg" alt="사진" title="마우스 오버 시 표시되는 텍스트">

5.4 접근성 고려사항

  1. 모든 이미지에 alt 속성 필수
  2. 의미 있는 설명 작성
    • 장식용 이미지: alt="" (빈 문자열)
    • 정보 전달 이미지: 구체적인 설명
  3. 텍스트가 포함된 이미지: alt에 텍스트 내용 포함

6. 기본 접근성 고려사항

6.1 시맨틱 태그 사용

  • <div>, <span> 남용 지양
  • 의미 있는 시맨틱 태그 우선 사용

6.2 제목 계층 구조

  • h1 → h2 → h3 순서 유지
  • 숫자 건너뛰지 않기

6.3 대체 텍스트

  • 이미지: alt 속성 필수
  • 링크: 의미 있는 텍스트 사용

6.4 언어 지정

<html lang="ko">

6.5 색상에만 의존하지 않기

  • 색상만으로 정보 전달 금지
  • 텍스트나 아이콘으로도 정보 전달 가능해야 함

7. 실습 체크리스트

  • DOCTYPE 선언 확인
  • <html>, <head>, <body> 구조 확인
  • 메타 태그 (charset, viewport) 설정
  • 시맨틱 태그 (header, nav, main, section, article, footer) 사용
  • 제목 태그 (h1~h6) 계층 구조 확인
  • 문단 태그 (<p>) 사용
  • 링크 (<a>)에 의미 있는 텍스트 사용
  • 이미지 (<img>)에 alt 속성 포함
  • lang 속성 설정

다음 단계

  • CSS 기초 스타일링
  • 리스트 태그 (<ul>, <ol>, <li>)
  • 테이블 태그 (<table>, <tr>, <td>)
  • 폼 태그 (<form>, <input>, <button>)

'FrontEnd > Html Css' 카테고리의 다른 글

5회차 — Flexbox 실전  (0) 2025.12.31
4회차 — 박스 모델과 레이아웃 기본  (0) 2025.12.30
3회차 — CSS 기초와 적용방법  (0) 2025.12.30
문서 구성 요소와 콘텐츠 마크업 심화  (3) 2025.12.30
0회차 — 개발 환경 설정 가이드  (0) 2025.12.28

관련글

티스토리툴바