You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
4.3 KiB
4.3 KiB
HTML 연습 과제: 블로그 목업 만들기
목표
개인 블로그 홈페이지의 HTML 구조를 설계하고 직접 코딩하세요. 이 연습을 통해 의미론적 HTML, 레이아웃 계획, 코드 조직화 능력을 향상시킬 수 있습니다.
지침
-
블로그 목업 디자인
- 블로그 홈페이지의 시각적 목업을 스케치하세요. 헤더, 내비게이션, 메인 콘텐츠, 사이드바, 푸터와 같은 주요 섹션을 포함하세요.
- 종이에 스케치한 후 스캔하거나 디지털 도구(Figma, Adobe XD, Canva, PowerPoint 등)를 사용해도 됩니다.
-
HTML 요소 식별
- 각 섹션에 사용할 HTML 요소를 목록으로 작성하세요 (예:
<header>,<nav>,<main>,<article>,<aside>,<footer>,<section>,<h1>–<h6>,<p>,<img>,<ul>,<li>,<a>등).
- 각 섹션에 사용할 HTML 요소를 목록으로 작성하세요 (예:
-
HTML 마크업 작성
- 목업에 맞는 HTML을 직접 코딩하세요. 의미론적 구조와 모범 사례에 집중하세요.
- 최소 10개의 고유한 HTML 요소를 포함하세요.
- 선택과 구조를 설명하는 주석을 추가하세요.
-
작업 제출
- 스케치/목업과 HTML 파일을 업로드하세요.
- 선택적으로 디자인 결정에 대한 간단한 반성(2~3문장)을 작성하세요.
평가 기준
| 기준 | 우수 | 적절함 | 개선 필요 |
|---|---|---|---|
| 시각적 목업 | 명확하고 상세하며 섹션에 라벨이 붙어 있고 레이아웃이 신중하게 설계됨 | 기본적인 목업으로 일부 섹션에 라벨이 있음 | 최소한의 목업 또는 불명확한 목업; 섹션 라벨 부족 |
| HTML 요소 | 10개 이상의 의미론적 HTML 요소 사용; 구조와 모범 사례에 대한 이해를 보여줌 | 5~9개의 HTML 요소 사용; 일부 의미론적 구조 포함 | 5개 미만의 요소 사용; 의미론적 구조 부족 |
| 코드 품질 | 잘 조직되고 읽기 쉬운 코드; 주석 포함; HTML 표준 준수 | 대체로 조직된 코드; 주석이 거의 없음 | 조직되지 않은 코드; 주석 부족 |
| 반성 | 디자인 선택과 어려움에 대한 통찰력 있는 반성 | 기본적인 반성 | 반성이 없거나 관련성이 부족 |
팁
- 접근성과 SEO를 위해 의미론적 HTML 태그를 사용하세요.
- 들여쓰기와 주석을 활용해 코드를 정리하세요.
- MDN HTML 요소 참조를 참고하세요.
- 레이아웃이 향후 과제에서 확장되거나 스타일링될 가능성을 고려하세요.
면책 조항:
이 문서는 AI 번역 서비스 Co-op Translator를 사용하여 번역되었습니다. 정확성을 위해 최선을 다하고 있으나, 자동 번역에는 오류나 부정확성이 포함될 수 있습니다. 원본 문서의 원어 버전을 권위 있는 자료로 간주해야 합니다. 중요한 정보의 경우, 전문적인 인간 번역을 권장합니다. 이 번역 사용으로 인해 발생하는 오해나 잘못된 해석에 대해 당사는 책임을 지지 않습니다.