규칙 및 제약조건
다음의 규칙들을 참고하여 프로필 페이지를 작성하는 것을 권장합니다
✅ HTML 작성 규칙
| 항목 | 설명 |
|---|---|
| 웹 표준 준수 | HTML5 문법을 사용하며 W3C 표준을 따름 |
| 시맨틱 태그 | 상황에 맞는 적절한 시맨틱 태그(<header>, <main>, <section>, <footer>, <article> 등)활용 |
| 구조적 설계 | 문서의 계층 구조가 명확해야 하며, 잘 정리된 DOM 구조를 유지하기 |
| 접근성 | alt 속성, label, aria 속성 등 사용하여 웹 접근성을 고려하기 |
| 불필요한 태그 지양 | 의미 없는 <div>나 <span> 남용 지양하기 |
| 문서 정보 | <title>, <meta charset="UTF-8"> 등 해당 문서의 기본 메타 정보를 포함 |
✅ CSS 작성 규칙
| 항목 | 설명 |
|---|---|
| 스타일 적용 확인 | 모든 작성된 CSS가 실제로 적용되는지 확인 |
| 중복/불필요한 코드 제거 | 사용되지 않는 클래스, 중복된 속성은 제거하기 |
| 클래스명 네이밍 | 명확하고 목적이 드러나는 이름 사용 (예: profile-container, contact-link) |
| 재사용성 | 중복 코드를 줄이고 공통 속성은 묶어 재사용성 올리기 |
| 유지보수성 | 파일 분리, 주석 등을 통해 읽기 쉬운 코드 구조를 유지 |
| 반응형 고려 (선택사항, 장기적으로 권장) | 간단한 미디어 쿼리 등을 활용해 반응형 디자인을 고려하기 |
✅ 기타 고려 사항
| 항목 | 설명 |
|---|---|
| 코드 퀄리티 | 들여쓰기, 공백, 주석 등 가독성을 고려하여 코드 정리(AI 적절하게 활용) |
⛔ 사용 제한
- JavaScript
- 외부 CSS 프레임워크(Bootstrap, TailwindCSS 등)
- 필요에 따라 AI를 활용하되, 학습 목적에 어긋나지 않도록 자동 생성 코드를 그대로 사용하는 것은 지양
→ 해당 코드에 대해 자신이 얼마나 설명할 수 있는지 먼저 생각해보고 적용하기
나는 프로젝트의 코드베이스에 대해 통제력이 얼마나 있는가?
Last updated on