css
-
참고 사이트의 스타일을 분석해 Aster 랜딩 페이지 리뉴얼하기
Aster 랜딩 페이지를 리뉴얼하려고 참고 사이트를 골랐다. 스크린샷을 옆에 띄우고 배경색부터 맞췄다. #0a0a0a와 #0d0d0d를 번갈아 넣다가 비슷해 보이는 값에서 멈췄지만, 실제 CSS 값과는 달랐다. 눈으로 맞추는 대신 브라우저에서 적용된 스타일을 읽었다. 색상과 타이포그래피를 확인해 Aster에 적용한 과정, 콘텐츠에 맞게 다시…
-
한국어 블로그의 가독성을 CSS 다섯 줄로 개선하기
블로그 글이 읽기 불편한데 어디를 고쳐야 할지 알기 어려웠다. 글자가 작은 것 같기도 하고, 줄이 빽빽한 것 같기도 했다. 잘 읽히는 블로그와 나란히 놓고 봐도 느낌만으로는 차이를 설명할 수 없었다. 그래서 우아한형제들 기술블로그, GitHub Blog, CSS-Tricks, Mozilla Hacks의 본문 크기와…
-
같은 파란색이 화면마다 달라질 때: 디자인 토큰으로 정리하기
디자인 시안의 파란색을 CSS에 옮긴다. 버튼 하나에는 background: #3B82F6 한 줄이면 충분하다. 다음 화면에서도 같은 버튼이 필요해 그 줄을 복사한다. 몇 달 뒤에는 버튼과 링크, 배지가 모두 파란색인데 값은 조금씩 달라져 있다. 색을 바꿀 때마다 화면 전체를 찾아다니지 않으려면 값을…
