PKSelect
  • Document
  • 프로젝트 개요
  • 프로젝트 준비
    • 개발환경 및 팀구성
    • 워크플로우
    • 사전조사 & 의사결정
      • 사전조사
      • 의사결정
        • 기능적 의사결정
        • 비기능적 의사결정
  • 프로젝트 설계
    • FRONTEND 설계 개요
      • FRONTEND 화면 흐름 및 동작
      • 콘텐츠 구성
        • Mainpage
        • Secondpage
      • 디자인 설계 의사결정
        • 디자인 컨셉 및 기능 정의
        • 컴포넌트 디자인
          • PC version
          • Mobile version
        • 로고결정
    • 시스템 구조 설계 개요
      • 시스템 흐름도 및 구조도
    • API Document
  • issue
    • FrontEnd
      • FrontEnd/Device classification issue
      • FrontEnd/cross browsing issue
    • BackEnd
      • BackEnd/lms_login_pw_issue
      • BackEnd/Circular Imports
    • Memo
  • 프로젝트 개발
    • FrontEnd
      • 페이지 UI
        • Mainpage
        • Loading page
        • SPA
        • Secondpage
          • Calendar
          • Table
            • 데이터 정렬
            • table
            • Button
              • 마감기한 지난 항목 삭제 <-> 확인 button
              • 과목 <-> 강의, 과제, 시험 button
              • 종강 D-day button
          • 피드백 이후 추가된 기능
      • 향후 개발 계획
    • BackEnd
      • Flask
        • PKSelecter/
        • controller/
        • app/
        • tests/
      • Server
        • AWS
        • Nginx + wsgi + Flask
        • (Sercurity) HTTPS
    • Prototype
  • 프로젝트 결과
    • 결과 보고
      • 개요
      • FrontEnd
      • BackEnd
      • PKSelect, Beta Service
      • 베타 서비스 설문조사
        • 서비스 사용성 평가
        • 베타 서비스 피드백
      • Google analytics 적용
      • 중간 발표 질문 정리
      • 최종 결과 보고
        • 피드백 적용 기능
Powered by GitBook
On this page

Was this helpful?

  1. 프로젝트 설계
  2. FRONTEND 설계 개요
  3. 디자인 설계 의사결정

컴포넌트 디자인

Previous디자인 컨셉 및 기능 정의NextPC version

Last updated 3 years ago

Was this helpful?

반응형 웹사이트 제작

반응형 웹사이트를 만들기 위해서 css의 media query를 이용해서 pc와 모바일 버전을 나누어 제작했다. 또한 사용자가 pc로 접속했음에도 웹사이트의 가로 길이가 일정 이하로 줄어들 경우 달력과 테이블을 위아래로 재정렬하였다.

PC version
Mobile version