WIT – NTS UIT Blog

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

Posted by in Research

gradient를 생각하면 색상이 자연스럽게 섞이는 이미지를 생각하거나… 오래된 사이트를 방문했을 때 여기저기 있는 촌스럽게 느껴지는 이미지를 생각했습니다. 작년 팀에서 진행한 CSS 시크릿 스터디에서 gradient를 자세하게 보게 되었고 생각보다 활용할 곳이 많이 있다는 것을 알게되었습니다. 그래프를 만드는 일을 하면서 이미지로 넣거나 DOM을 추가해야 하는 상황을 gradient로 해결한 사례를 공유합니다. 1. 디자인 흔히 볼 수 있는 막대그래프입니다. 가로로는 기준선이 길게 채워져있고 세로로는 회색 막대가 있습니다. 수치에 따라 색상이 달라지는 막대가 있습니다. 2. 마크업 기준선을 구현하는 방법으로 생각해 볼 수 있는 것은 1px 이미지를 반복 시키는 방법 DOM을 추가하여 absolute로 위치를 잡는 방법이…read more

linear-gradient로 skeleton screen 만들어보기

Posted by in Research

페이스북이나 유튜브의 첫 화면을 보면, 아주 잠깐 프레임을 그려주는 빈 페이지를 확인할 수 있는데요. 이러한 페이지를 개발에서 skeleton screen(스켈레톤 스크린) 이라고 합니다. 저도 함께 일하는 개발자를 통해서 처음 알게 되었는데, skeleton은 뼈대를 의미하는 단어네요. skeleton screen을 적용하면 사용자가 “대기중”이라는 느낌을 전달하면서 빠르게 로드되고 있다고 인식하게 합니다. 그럼 이러한 UI는 어떤 방법으로 구현할 수 있을까요? CSS의 linear-gradient 속성과 :empty 선택자를 활용하여 이를 구현해 보도록 하겠습니다. 1. linear-gradient 원리 linear-gradient의 기본 문법은 아래와 같습니다.

선형을 적용해보면, 방향과 적용 컬러를 순서대로 선언하게 됩니다. 방향 to bottom은 기본 값으로 생략이 가능합니다. linear-gradient(to bottom, yellow 20%, steelblue…read more