1. 프론트 진행 상황

• 로그인 페이지, 교수 수업 등록, 수업 목록 페이지 구현

<초기 로그인 페이지>

<교수 수업 등록, 수업 목록 페이지>

-> 플러스 버튼을 클릭하면

-> 수업 등록 UI가 뜬다.

-> 수업등록에 필요한 정보를 넣고 등록하기를 클릭하면 수업 목록이 뜬다.

<사이드 메뉴>

-> 로그인 페이지는 간단하게 title + form형식으로 input과 button으로 가운데 정렬로 구성

-> 수업 목록 페이지는 왼쪽위의 사이드 메뉴와 타이틀 그리고 클릭시 수업 등록 UI를 나오게 해주는 +버튼과 +버튼을 누르기전에는 감추어져있는 수업 등록 UI(form + input + label로 구성)로 구성

-> input[id=trigger]가 체크되었을 때 사이드바가 나오는 일반 형제 선택자 -> input trigger가 checked 됬을때 뒤에 오는(바로 뒤 아니여도 됨) .sidebar에 적용

-> check시 같이 밀려나가는 CSS 햄버거 메뉴 인접 형제 선택자 -> input trigger가 checked 됬을때 바로 뒤에 오는 label[for="trigger"]에 적용

-> 이 css 코드는 대부분 수업 목록, 등록 페이지의 input, label, div, form 등의 위치조정, border, position, margin, padding 등을 조정하는 코드입니다.

-> 교수 수업 목록 페이지는 평소에 수업 등록 UI를 감추어 두었다가 +버튼 클릭시 이벤트(클릭한 순간classList에서 on 클래스를 주고 on 클래스가 있다면 수업 등록 UI의 display : block으로 변경 그리고 if문 마지막줄에 on 클래스 제거)가 발생하여 수업 등록 UI가 나타나도록 구현

-> 수업 등록 UI에서 수업에 필요한 내용을 작성하여 등록하기 버튼 클릭시 이벤트(수업 등록 UI에 on 클래스가 없다면 수업 목록에 추가할 새로운 Element를 생성한 다음 Element의 innerText는 수업 등록 UI form에 작성한 수업 제목의 value를 가져와 적용 후 부모 div에 appendChild로 추가 그리고 수업 목록 div의 display를 grid로 설정 )가 발생하고 수업 등록 UI는 display : none으로 다시 감추어진다.