<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "5a764667bbe82aa72ac0a67f4c97ff4a",
  "translation_date": "2025-10-03T09:07:29+00:00",
  "source_file": "3-terrarium/1-intro-to-html/assignment.md",
  "language_code": "ko"
}
-->
# HTML 연습 과제: 블로그 목업 만들기

## 목표

개인 블로그 홈페이지의 HTML 구조를 설계하고 직접 코딩하세요. 이 연습을 통해 의미론적 HTML, 레이아웃 계획, 코드 조직화 능력을 향상시킬 수 있습니다.

## 지침

1. **블로그 목업 디자인**
   - 블로그 홈페이지의 시각적 목업을 스케치하세요. 헤더, 내비게이션, 메인 콘텐츠, 사이드바, 푸터와 같은 주요 섹션을 포함하세요.
   - 종이에 스케치한 후 스캔하거나 디지털 도구(Figma, Adobe XD, Canva, PowerPoint 등)를 사용해도 됩니다.

2. **HTML 요소 식별**
   - 각 섹션에 사용할 HTML 요소를 목록으로 작성하세요 (예: `<header>`, `<nav>`, `<main>`, `<article>`, `<aside>`, `<footer>`, `<section>`, `<h1>`–`<h6>`, `<p>`, `<img>`, `<ul>`, `<li>`, `<a>` 등).

3. **HTML 마크업 작성**
   - 목업에 맞는 HTML을 직접 코딩하세요. 의미론적 구조와 모범 사례에 집중하세요.
   - 최소 10개의 고유한 HTML 요소를 포함하세요.
   - 선택과 구조를 설명하는 주석을 추가하세요.

4. **작업 제출**
   - 스케치/목업과 HTML 파일을 업로드하세요.
   - 선택적으로 디자인 결정에 대한 간단한 반성(2~3문장)을 작성하세요.

## 평가 기준

| 기준              | 우수                                                                                     | 적절함                                                                         | 개선 필요                                                                       |
|------------------|----------------------------------------------------------------------------------------|--------------------------------------------------------------------------------|--------------------------------------------------------------------------------|
| 시각적 목업       | 명확하고 상세하며 섹션에 라벨이 붙어 있고 레이아웃이 신중하게 설계됨                        | 기본적인 목업으로 일부 섹션에 라벨이 있음                                       | 최소한의 목업 또는 불명확한 목업; 섹션 라벨 부족                                |
| HTML 요소         | 10개 이상의 의미론적 HTML 요소 사용; 구조와 모범 사례에 대한 이해를 보여줌                  | 5~9개의 HTML 요소 사용; 일부 의미론적 구조 포함                                 | 5개 미만의 요소 사용; 의미론적 구조 부족                                        |
| 코드 품질         | 잘 조직되고 읽기 쉬운 코드; 주석 포함; HTML 표준 준수                                      | 대체로 조직된 코드; 주석이 거의 없음                                            | 조직되지 않은 코드; 주석 부족                                                   |
| 반성              | 디자인 선택과 어려움에 대한 통찰력 있는 반성                                              | 기본적인 반성                                                                   | 반성이 없거나 관련성이 부족                                                     |

## 팁

- 접근성과 SEO를 위해 의미론적 HTML 태그를 사용하세요.
- 들여쓰기와 주석을 활용해 코드를 정리하세요.
- [MDN HTML 요소 참조](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)를 참고하세요.
- 레이아웃이 향후 과제에서 확장되거나 스타일링될 가능성을 고려하세요.

---

**면책 조항**:  
이 문서는 AI 번역 서비스 [Co-op Translator](https://github.com/Azure/co-op-translator)를 사용하여 번역되었습니다. 정확성을 위해 최선을 다하고 있으나, 자동 번역에는 오류나 부정확성이 포함될 수 있습니다. 원본 문서의 원어 버전을 권위 있는 자료로 간주해야 합니다. 중요한 정보의 경우, 전문적인 인간 번역을 권장합니다. 이 번역 사용으로 인해 발생하는 오해나 잘못된 해석에 대해 당사는 책임을 지지 않습니다.