분류 전체보기 (32) 썸네일형 리스트형 [폰트] 한 줄에 적당한 글자 수 구글 머터리얼 가이드에서는 짧은 문단에는 줄당 20~40자 긴 문단에는 줄당 40~60자를 제안함 언어에 따라 한 줄당 들어가는 글자수가 달라짐. [폰트] 폰트 크기에 따른 자간 (글자와 글자 사이 간격) 행간처럼 구하는 공식이 명확하진 않음. 일반적으로, 폰트가 클수록 자간을 좁히고 폰트가 작을수록 자간을 넓힘. Material Design 가이드에서는 폰트 종류와 글자 크기에 따라 적절한 Letter spacing (자간)을 추천해줌 아래 사이트에서 확인 가능 https://m2.material.io/design/typography/the-type-system.html#type-scale [폰트] 폰트 크기에 따른 행간 (행과 행 사이의 간격) 행간은 줄과 줄 사이 간격으로 가독성에 영향을 줌. 웹 콘텐츠 접근성 가이드 (WCAG 2.1) 에서는 다음과 같이 말함. 가장 보기 편한 행간 = 글자 크기 * 1.5배 예를 들면, 폰트 크기가 12px면 line-height = 18px [폰트] 폰트 크기 최소 13px 권장. 13px는 피보나치 수열 (13, 21, 34, 55, 89 ... ) 에 포함된 숫자. 피보나치 수열은 타이포그래피의 시각적 위계 설정에 도움됨. [쿼리] 날짜 특정 날짜 쿼리 to_char() 자주 사용함. select h from hello h where to_char(h.createdat,'YYYY-MM-DD')= 'YYYY-MM-DD 형식의 문자열' order by h.createdat asc 프론트엔드에서 yyyy-mm-dd 형식의 문자열을 백엔드에 던져주면 백엔드는 받아서 저런식으로 쿼리 [날짜] 날짜 관련 자주 사용하는 함수들 날짜를 매개변수로 받아 전날 날짜를 return export const beforeDate = (date: Date) => { const bd = new Date(date); bd.setDate(date.getDate() - 1); return bd; }; 날짜를 매개변수로 받고 다음날 날짜를 return export const afterDate = (date: Date) => { const ad = new Date(date); ad.setDate(date.getDate() + 1); return ad; }; 날짜 형식을 "yyyy-mm-dd" 형식의 문자열로 변환 export const yyyymmdd = (date: Date) => { const year = date.getFullYear(); con.. [아이콘] 아이콘 자체가 한쪽으로 기울어져 있을때 부모 div에 relative를 걸어주고 absolute로 기울어진 크기만큼 중앙에 놓이게 해야함. .parent { position:relative; width:3rem; height:3rem; } .child { position:absolute; top:50%; left:50%; translate:transform( px 계산 , px 계산 ) } [버튼 디자인 스타일 링크] 다양한 종류의 버튼 디자인 + 코드 , button generator https://www.buttons.cool/buttons 다양한 효과 있는 버튼들 codepen으로 볼 수 있음 https://inpa.tistory.com/entry/CSS-%F0%9F%92%8D-%EB%B2%84%ED%8A%BC-%EB%94%94%EC%9E%90%EC%9D%B8-%EB%AA%A8%EC%9D%8C#%EB%AC%B4%EB%82%9C%ED%95%9C_%EB%B2%84%ED%8A%BC_%EC%BB%AC%EB%A0%89%EC%85%98 [CSS] 🎨 버튼(Button) 디자인 스타일 모음 Codepen에서 괜찮은 디자인을 뽐내는 CSS 템플릿중에 버튼 디자인 요소들 모아 간추려 포스팅 해보았다. 급하게 CSS 템플릿을 찾으.. 이전 1 2 3 4 다음
