Skip to content
This repository has been archived by the owner on Sep 1, 2022. It is now read-only.

2019.11.08

Yeonggyun Kim edited this page Nov 26, 2019 · 1 revision
  • 회의날짜 : 2019.11.08
  • 참여자 : 김영균, 김민지

회의 주제

1. Box Component 디자인

그림자 넣기. Toss 앱 과 같이 흰색 테마를 바탕으로 하고, Box 마다 그림자로 음영을 주어 구분.

사용한 CSS 옵션 :

#box {
  margin: 10px;
  list-style-type: none;
  padding: 0;
  border: 0 white;
  border-radius: 8px;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 30px 2px rgba(0, 0, 0, 0.15);
}

https://developer.mozilla.org/ko/docs/Web/CSS/box-shadow 를 참고하여 CSS의 Box-shadow를 이용함. 옵션으로 /* offset-x | offset-y | blur-radius | spread-radius | color */ 를 주어 박스의 네 방향으로 그림자가 뻗어나가게 하였으며, RGBA 의 알파값을 통해 투명도를 조절하여 은은한 그림자가 그려지도록 함.

2. 폰트 정하기.

  • 폰트의 조건 : 깔끔하고 가독성이 좋을 것 -> 고딕계열
  • 완전무료일 것(상업적으로도 이용이 가능할 수 있는지 확인.)

<후보 폰트>

  1. S Core Dream
  2. Spoqa Han Sans
  3. Apple Gothic (Apple 제품 사용자의 경우에는 비상업, 상업 용도 모두 사용 가능)
  4. Creal(사용불가 - 대체제 : Raleway)
Clone this wiki locally