Modify Faq Component's CSS

[365kim]

Before : Low Design Coherence Problem

• too short
• too wide
• too bouncy color
• different font
• different directions of maintab and subtab

After

• Low Design Coherence
  • set min-height
  • set width to be smaller than 50~90%
  • apply theme color
  • apply theme font
  • set both directions of maintab and subtab horizontal

---

변경 전 : 낮은 디자인 일관성 문제

• 컴포넌트 높이가 너무 짧고, 너비는 너무 넓어서 비율이 예쁘지 않음
• 부트스트랩에서 제공하는 기본색상으로 우리 컬러스킴과 맞지 않음
• 폰트적용이 안되있고 전반적으로 단락구성이 너무 단조로움
• 탭 두개가 방향이 달라서 직관적이지 않음

변경 후

• 미디어쿼리를 생성하고 최소 높이를 적용하여 내용이 짧을 때도 적당한 높이를 갖도록 설정
• 너비를 스크린의 50~90%를 넘지 않게해서 줄글이 지나치게 늘어지는 것 방지
• 컬러스킴 적용하고 최대한 다른 색상 사용 자제 (특히 내비게이션 바의 스타일과 유사하도록 함)
• 폰트 적용 및 폰트스타일 조정(font-weight, line-height, font-size 등)
• 메인탭과 서브탭 두 개모두 가로방향으로 배열하여 좀 더 직관적으로 이중탭 구성으로 변경
• 메인탭에서 "지원/선발" 은 "지원선발"로, "기타"는 "기타사항"으로 4글자로 통일해서 시각적으로 균등하게 차지하도록 함

[365kim]

지원선발 교육과정 기타사항을 아이콘으로 바꿀 수 있으면 더 좋을 것 같기도 하네요...!

[365kim]

정아님의 조언을 참고해서 CSS 수정완료하였습니다. 각 컴포넌트에 여백을 시원시원하게 줘서 너무 진한 느낌은 조금 해결이 된 것 같습니다! (뇌피셜) 서브탭의 버튼을 누를까? 하는 고민은 버튼 스타일을 변경해서 눌러보고싶게 해봤습니다(역시뇌피셜) 카톡방에서 확인받고 머-지합니다!