3.6 KiB
3.6 KiB
[✅] 1. 전체 페이지 수직 분할 (기본 구조)
<body>또는 최상위 wrapper div에display: flex와flex-direction: column을 적용합니다.- 이는 페이지 전체를 [헤더], [메인 콘텐츠], [푸터] 3개의 큰 영역으로 수직 정렬하기 위함입니다.
min-height: 100vh를 설정하여 콘텐츠가 적어도 화면 전체 높이를 차지하도록 합니다.
[] 2. 헤더 (Navigation Bar) 영역
display: flex,flex-direction: row,justify-content: space-between을 사용하여 로고/메뉴 그룹과 사용자 메뉴(내 강의실, 프로필) 그룹을 양쪽 끝으로 배치합니다.- 로고/메뉴 그룹 내부도
display: flex,align-items: center로 로고와 메뉴 항목들을 정렬합니다. - [반응형] 모바일 화면(@media 쿼리 사용)에서는 메뉴 항목들을 숨기고 햄버거 메뉴 아이콘을 표시하도록 처리합니다.
[] 3. 메인 콘텐츠 상단 (Hero + Sidebar) 영역
main태그 내부에display: flex,flex-direction: row를 가진 컨테이너를 생성합니다.- 이 컨테이너는 **Hero 배너(좌측)**와 사이드바(우측) 두 부분으로 가로 분할됩니다.
- [반응형] 모바일 화면에서는
flex-direction: column으로 변경하여 사이드바가 Hero 배너 하단으로 이동하도록 순서를 조정합니다.
[] 4. Hero 배너 (메인 좌측)
- Hero 배너 영역에
flex-grow: 1을 설정하여, 사이드바의 너비를 제외한 나머지 공간을 모두 차지하도록 합니다. - 배너 컨테이너에
position: relative를, "미래 에너지, 안전의 길을 열다" 텍스트 박스에position: absolute를 적용하여 텍스트를 이미지 위에 오버레이합니다.
[] 5. 우측 사이드바 (나의 수강현황, 최근 수강 과목)
- 사이드바 영역에
flex-basis또는width를 사용해 고정된 너비(예:300px)를 지정합니다. - '나의 수강현황'과 '최근 수강 과목' 두 섹션은
display: flex,flex-direction: column으로 수직 정렬합니다. - '나의 수강현황' 내부의 4개 통계(수강중, 수강완료 등)는
display: flex,justify-content: space-around로 균등하게 배치합니다.
[] 6. 전체 과목 리스트 (메인 중단)
- "전체 과목" 타이틀과 "지도보기" 링크를
display: flex,justify-content: space-between으로 배치합니다. - 과목 카드 리스트는
display: flex,flex-wrap: wrap을 설정하여 카드들이 자동으로 다음 줄로 넘어가도록 합니다. - 각 과목 카드에는
flex-basis를 사용해 너비를 지정합니다. (예:flex-basis: 24%, 4개 배치.gap으로 간격 조절) - [반응형] 화면 크기에 따라
flex-basis값을 변경합니다. (예: 태블릿48%, 모바일100%)
[] 7. 공지사항 (메인 하단)
- "공지사항" 타이틀과 "더보기" 링크를
display: flex,justify-content: space-between으로 배치합니다. - 각 공지사항 항목(카테고리, 제목, 날짜) 역시
display: flex,justify-content: space-between을 사용하여 깔끔하게 정렬합니다.
[] 8. 푸터 (Footer) 영역
display: flex,flex-direction: row,justify-content: space-between을 사용하여 로고/주소/고객센터 정보 그룹과 저작권 텍스트를 배치합니다.flex-wrap: wrap을 추가하여 화면이 좁아질 때 유연하게 대응합니다.- [반응형] 모바일에서는
flex-direction: column으로 변경하고align-items: center또는flex-start로 정렬을 변경할 수 있습니다.