|
|
<!--
|
|
|
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)를 사용하여 번역되었습니다. 정확성을 위해 최선을 다하고 있으나, 자동 번역에는 오류나 부정확성이 포함될 수 있습니다. 원본 문서의 원어 버전을 권위 있는 자료로 간주해야 합니다. 중요한 정보의 경우, 전문적인 인간 번역을 권장합니다. 이 번역 사용으로 인해 발생하는 오해나 잘못된 해석에 대해 당사는 책임을 지지 않습니다. |
