gradient를 활용하여 그래프 만들기 

gradient를 생각하면 색상이 자연스럽게 섞이는 이미지를 생각하거나… 오래된 사이트를 방문했을 때 여기저기 있는 촌스럽게 느껴지는 이미지를 생각했습니다. 작년 팀에서 진행한 CSS 시크릿 스터디에서 gradient를 자세하게 보게 되었고 생각보다 활용할 곳이 많이 있다는 것을 알게되었습니다. 그래프를 만드는 일을 하면서 이미지로 넣거나 DOM을 추가해야 하는 상황을 gradient로 해결한 사례를 공유합니다. 1. 디자인 더보기…

linear-gradient로 skeleton screen 만들어보기

페이스북이나 유튜브의 첫 화면을 보면, 아주 잠깐 프레임을 그려주는 빈 페이지를 확인할 수 있는데요. 이러한 페이지를 개발에서 skeleton screen(스켈레톤 스크린) 이라고 합니다. 저도 함께 일하는 개발자를 통해서 처음 알게 되었는데, skeleton은 뼈대를 의미하는 단어네요. skeleton screen을 적용하면 사용자가 “대기중”이라는 느낌을 전달하면서 빠르게 로드되고 있다고 인식하게 합니다. 그럼 이러한 UI는 어떤 방법으로 더보기…