사용된 기술
기술 스택 요약
HTML5: 웹 구조, 시맨틱 태그, 접근성.
CSS3: 스타일링 및 레이아웃, Flexbox, Grid, 반응형
디자인.
HTML5
모든 페이지의 콘텐츠 구조화를 위해 HTML5를 사용했습니다. 시맨틱 태그를 활용하여 접근성과 SEO를 개선했습니다.
CSS3
CSS Grid, Flexbox, 사용자 정의 속성을 활용한 반응형 디자인으로 스타일링했습니다. 미디어 쿼리로 다양한 화면 크기에 대응했습니다.
JavaScript
모달 이미지 뷰어와 동적 콘텐츠 처리를 위한 인터랙티브 기능을 구현했습니다.
웹 보안 실습
OWASP 가이드라인과 안전한 코딩 실습을 적용하여 취약점 완화 방법을 보여줍니다.
반응형 디자인 추가 정보
반응형 디자인은 모바일, 태블릿, 데스크톱 등 다양한 디바이스에서 일관된 사용자 경험을 제공합니다. 미디어 쿼리를 사용해 화면 크기에 따라 레이아웃과 스타일을 조정했으며, 햄버거 메뉴를 추가해 모바일 환경에서의 탐색을 개선했습니다.
사용된 도구
Chrome DevTools
반응형 디자인 테스트와 디버깅에 사용되었습니다.
Visual Studio Code
코드 작성 및 편집에 활용되었습니다.