[게시판/상담 문의 리스트 페이지] 데이터베이스에 저장된 문의글 목록을 불러와 표(Table) 형태로 보여주는 전형적인 목록(List) 뷰입니다. - 데이터 바인딩 (Data Binding): 백엔드 DB(MySQL 등)에서 SELECT 쿼리를 통해 게시글 데이터를 가져와 HTML <table> 태그 및 div 기반의 그리드로 렌더링했습니다. 페이지네이션 (Pagination): 하단의 숫자(1, 2, 3...)는 DB 쿼리의 LIMIT, OFFSET 개념을 사용하여 데이터를 분할 로딩하는 로직입니다. 현재 페이지 상태를 관리하기 위해 URL 파라미터(예: ?page=1)를 주로 사용합니다. - 보안 및 로직 (Security & Logic): 비밀글 기능: 자물쇠 아이콘이 있는 게시글은 조건부 렌더링(Conditional Rendering)이 적용되어 있습니다. 클릭 시 백엔드에서 세션(Session)이나 토큰(Token)을 확인하여 작성자 본인 혹은 관리자만 열람할 수 있도록 접근 제어(Access Control) 로직이 수행됩니다. 상태 표시: '답변 완료' 뱃지는 DB의 상태 컬럼(예: status: 'answered') 값에 따라 CSS 클래스를 다르게 적용하여 색상을 입힌 것입니다. - 검색 기능: 우측 상단 검색창은 GET 요청을 통해 서버에 키워드를 전송하고, 서버는 WHERE LIKE %keyword% 쿼리를 수행하여 필터링된 결과를 반환합니다.

[메인 랜딩 페이지] 사용자가 처음 접속하는 대문 페이지로, 브랜드 정체성을 보여주고 주요 제품으로 이동을 유도하는 역할을 합니다. - 레이아웃 (Layout): 헤더 (Header): 상단 로고와 네비게이션 메뉴(GNB: Global Navigation Bar)가 위치합니다. 스크롤 시 상단에 고정되도록 CSS position: sticky 또는 fixed 속성이 사용되었을 가능성이 높습니다. 히어로 섹션 (Hero Section): "청춘푸드코리아" 텍스트와 서브 카피가 중앙 정렬(text-align: center)되어 있습니다. 웹 폰트(Web Font)를 사용하여 타이포그래피의 가독성을 높였습니다. - 제품 그리드 (Product Grid): 하단의 제품 이미지들은 CSS Flexbox 또는 CSS Grid를 사용하여 3열 구조로 배치되었습니다. 반응형 웹(Responsive Web) 기술이 적용되어, 모바일 뷰포트에서는 flex-direction: column으로 변경되어 세로로 1열씩 나열되도록 미디어 쿼리(@media)가 작성되었습니다. - UI 요소: 우측 하단의 '문의하기' 버튼은 FAB (Floating Action Button) 입니다. position: fixed, bottom, right, z-index 속성을 사용하여 스크롤과 무관하게 항상 같은 위치에 떠 있도록 구현되었습니다.

[제품 상세 페이지] 특정 제품의 상세 정보를 보여주는 페이지로, 사용자의 구매나 문의 전환(Conversion)을 일으키는 핵심 페이지입니다. - 레이아웃 구조: 전형적인 2단 컬럼 레이아웃입니다. 좌측에는 제품 이미지(Carousel 혹은 단일 이미지), 우측에는 제품 정보와 CTA(Call to Action) 버튼이 배치되어 있습니다. PC에서는 display: flex로 가로 배치를, 모바일에서는 세로 배치를 수행합니다. - 이미지 처리: 좌측 제품 이미지는 고해상도 이미지를 사용하며, 로딩 속도 최적화를 위해 Lazy Loading 기법이나 WebP 포맷이 적용되었습니다.