38 lines
3.6 KiB
Markdown
38 lines
3.6 KiB
Markdown
[✅] 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`로 정렬을 변경할 수 있습니다. |