내가 자주 사용하는 CSS 설정

각 프로젝트마다 CSS를 매번 새롭게 짜다보니, 전체적인 디자인의 통일성이 떨어져가고 있음을 느꼈습니다. 이에 제가 자주 사용하는 CSS 설정을 정리해보았습니다.

2019. 08. 08.

안드로이드 개발에서 완전히 손을 뗀 이후로, 백엔드 프로젝트를 테스트하기 위한 프론트로 대부분 웹을 사용하고 있습니다.

각 프로젝트마다 CSS를 매번 새롭게 짜다보니, 전체적인 디자인의 통일성이 떨어져가고 있음을 느꼈습니다. 이에 제가 자주 사용하는 CSS 설정을 정리해보았습니다.

면책 조항 : 저는 디자인을 모릅니다. 아래 내용을 조합해서 나온 결과물이 못생겼다고 해도 책임지지 않습니다 :)

타이포그래피

타이포그래피는 웹 사이트들의 한글 타이포그래피 포스트를 참고하여 정리하였습니다. 아무래도 제 프로젝트에서 블로그의 비중이 제일 높은 만큼, 긴 글을 편하게 읽기 위한 가독성을 제 1목표로 하였습니다.

글꼴

Google Fonts의 Noto Sans KR 을 사용합니다.

<link href="https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap" rel="stylesheet">

font-size

  • 일반적인 글씨는 17px
  • 소스코드는 14px
  • 이외에는 화면에 맞춰 적당히 조정

font-weight

  • 일반적인 글씨는 400
  • 제목(h1, h2, ...) 및 강조(strong)는 700
  • 디자인을 위해 예외적으로 사용하는 얇은 글씨는 300, 굵은 글씨는 900

line-height

  • 일반적인 글씨는 2.0

아이콘 글꼴

아이콘 글꼴은 현재는 ionicons를 사용하고 있습니다. 하지만 가짓수가 부족하고 아이콘과 글자를 섞어 썼을 때 상하정렬이 맞지 않는 문제가 있어 장기적으로는 Remix Icon으로의 이전을 고려하고 있습니다.

색상

레이아웃

  • 배경은 #ffffff (하양)
  • 구분선 등은 #eeeeee (밝은 회색)
  • 인용문이나 소스코드 등 문단의 배경색은 #f5f5f5 (밝은 회색)

글씨

  • 일반적인 글씨는 #292f38 (검정)
  • 하이퍼링크 글씨는 #03a9f4 (밝은 파랑)
  • 흐린 글씨는 #9e9e9e (어두운 회색)
크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 저작자표시-동일조건변경허락 4.0 국제 라이선스에 따라 이용할 수 있습니다.

© 2011 - 2020 Do Hoerin, LYnLab