0530 TIL

💡새로 배운 내용

Mark css

하이라이트를 반절 정도만 먹이기

mark {
  display: inline-block;
  line-height: 0em;
  padding-bottom: 0.5em;
}

디자인

아름다움의 근원 : 1. 글꼴 2. 색상 3. 정렬

정렬

• 인풋 옆에 버튼이 있다던가 하는 상황
• 인풋과 버튼의 높이를 통일합니다.
• border-radius를 통일합니다.
• 그림자를 사용할 경우 가능한 한 연하게 사용
• 인풋의 내부 패딩은 가로만 주고 세로는 주지 않기.
• padding: 0 16px; 등등.. 글씨 위아래 정렬은 line-height와 height를 이용하기.
• 인풋 내부 글씨 크기는 무조건 16px 이상으로 잡기. 16px 미만이면 사파리에서 화면 줌이 일어남. (디자이너가 작은 글꼴을 원한다면 뜨거운맛을 보여줘라)

일부 고정폭을 지원하는 폰트에서 1이 0보다 좁게 나오는 문제 해결

font-feature-settings를 사용하여 해결

body,
button,
input,
textarea {
  font-family: Inter, Arial, PingFangSC-Regular, 'Microsoft YaHei', sans-serif !important;
  fo

📝내일 할 일

• 개인 과제 진짜 시작 ( https://www.api-football.com/coverage 또는 https://iextrading.com/trading/market-data/ )
• 화면 참고 (https://dribbble.com/shots/18367193-Mobile-Bank, https://dribbble.com/shots/18339943-Car-Rental-App , https://dribbble.com/shots/18361183-Mouris-Admin-Dashboard , https://dribbble.com/shots/18355098-Tokee-Dashboard-token-details)

🌙 회고

디자인은 많이 배끼고 좋은것을 많이 수용해야 비로소 나아지는 영역이다.

dribble, pinterest 등에서 좋은 디자인을 많이보고 세세한 것까지 어떻게 스타일을 줬는지 파악하여 내것으로 만드는 연습을 하자.