LEV이의 헌정 페이지를 통해 HTML & CSS 재검토

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• 초보 웹 개발자 및 애니메이션 팬
• 기초 수준의 HTML/CSS 실습과 창의적 프로젝트 설계에 관심 있는 사람들

핵심 요약

• 웹 개발 기초 강화 : HTML/CSS를 활용한 Levi Ackerman 헌정 페이지 구축으로 핵심 개념(Semantic HTML, Flexbox) 재정리
• 디자인 요소 통합 : 다크 모드와 커스텀 폰트/그림자 효과 적용, AOT의 시각적 스타일 반영
• 프로젝트 공유 전략 : GitHub을 통한 코드 호스팅 및 SNS(Hashnode, X, DEV.to) 활용으로 피드백 확보

섹션별 세부 요약

1. 프로젝트 개요

• 헌정 페이지 목적 : Levi Ackerman의 성격과 AOT의 미학을 반영한 다크 테마 및 프로페셔널 컬러 팔레트 적용
• 창의적 결합 : 애니메이션 팬덤과 웹 개발 기술의 융합을 통한 시각적 매력 강조
• 주요 구성 요소 : Levi 이미지, 인용문, 생ographies, 성취 목록 포함

2. 사용 기술

• HTML/CSS 기반 구현 : Semantic HTML 구조 및 CSS Flexbox 레이아웃 활용
• 디자인 요소 : 커스텀 폰트, 박스 그림자(box-shadow), 다크 모드 테마 적용
• 개발 환경 : Visual Studio Code로 코드 작성 및 미리보기, Git & GitHub으로 버전 관리 및 호스팅

3. 프로젝트 기능

• 반응형 레이아웃 : 모바일 및 데스크탑 화면에 맞춘 유연한 디자인
• 비주얼 요소 : Levi 이미지의 스타일링, 인용문 섹션, 성취 목록 및 추천 이유 포함
• 컬러 팔레트 : AOT의 시각적 스타일을 반영한 프로페셔널한 색상 조합

4. 실시간 예시 및 코드

• GitHub 저장소 : https://github.com/preyliet/levi-tribute
• SNS 공유 : X(Twitter) 계정(@iixpreyliet)을 통해 프로젝트 홍보

5. 핵심 배움

• 작은 프로젝트 재구성을 통한 핵심 스킬(HTML/CSS) 강화
• 애니메이션 테마 활용이 창의적 영감의 원천이 될 수 있음
• GitHub 호스팅을 통해 공개 포트폴리오 구축 및 피드백 수렴 가능

6. 다음 계획

• JavaScript 학습으로 페이지에 인터랙티브 요소 추가
• 애니메이션/창의적 미니 프로젝트 지속 개발
• Hashnode, X, DEV.to에 정기적으로 업데이트 게시

결론

• GitHub 호스팅 및 SNS 공유를 통해 포트폴리오 확장과 피드백 확보가 핵심 전략이며, JavaScript 학습을 통해 인터랙티브 요소 추가를 권장함.