출처 : CSS-TRICKS | https://css-tricks.com​

원문보기 : https://css-tricks.com/design-principles-for-developers-processes-and-css-tips-for-better-web-design/​

개발자를 위한 디자인 원칙 : 더좋은 웹디자인을 위한 프로세스 및 CSS 팁

Design Principles for Developers: Processes and CSS Tips for Better Web Design 

기술적으로 누구나 요리 할 수 ​​있다는 것은 사실입니다. 그러나 실제로 맛있는 식사를 준비하는 방법을 아는 것과 냄비에 몇 가지 재료를 던지면서 최고의 요리를 바라는 것 사이에는 차이가 있습니다. 웹 개발에 있어서도 <span>, background-color, .heading-1과 같은 구성 요소를 알 수 있지만 모든 사람이 이러한 구성 요소를 아름답고 사용하기 쉬운 웹 사이트로 전환하는 방법을 알고 있는 것은 아닙니다.

HTML과 CSS를 사용할 때마다 다른 사람이 이해할 수 있도록 ​콘텐츠에 양식과 구조를 사용하여 ​디자인합니다. 사람들은 수세기 동안 디자인해 왔으며 오늘날 디지털 인터페이스에 적용 할 수있는 방식에 따라 원칙을 발전시켜 왔습니다. 

이러한 원칙은 단어가 표시되는 방법 (타이포그래피), 내용이 배열되는 방법 (스페이싱) 및 개인화를 추가하는 방법 (컬러)의 세 가지 주요 영역에서 나타납니다. 

짐작으로 웹 디자인을 하지 않도록 CSS 속성 및 가이드라인을 갖춘 개발자의 사고 방식을 통해 이러한 각각의 웹 디자인 요소를 사용하는 방법을 알아 봅니다.

목차

타이포그래피

스페이싱

컬러

# 타이포그래피

읽기 쉬운 웹 사이트는 실수로 생긴 것이 아닙니다. 실제로 Taimur Abdaal은  이와 관련한 주제로 쓴 모든 기사에서 문자를 사용하는 개발자들을 위한 조언으로 가득 차 있습니다. 여기에서는 단어를 시각적으로 보기 좋고 읽기 쉬운 방식으로 표시하는 데 도움이되는 디자인의 두 가지 기본 원칙 - 반복 및 계층 구조​에 초점을 맞출 것입니다. 

#일관성 및 유지 관리성을 위해 반복 사용

소프트웨어에서 재사용성이 중요하기 때문에 웹에서 반복(Repetition)은 자연스럽게 사용되고 있습니다. 예를 들어 CSS 클래스를 사용하면 텍스트의 특정 스타일을 정의한 다음 해당 사이트 전체에서 해당 스타일을 재사용 할 수 있습니다. 반복을 통해 유사한 콘텐츠에 대해 일관된 텍스트 스타일이 만들어져 사용자가 사이트를 탐색하는데 도움을 줄 수 있습니다.

예를 들어, 새 단락의 스타일을 작업하는 경우 먼저 스타일이 비슷한 기존 내용이 있는지 확인하고 동일한 CSS 클래스를 사용하십시오. 그렇지 않은 경우 사이트의 다른 곳에서 반복해서 사용할 수 있는 일반적인 이름으로 새 클래스를 만들 수 있습니다. 

.footer__paragraph--empahsize​의 반대는 .paragraph--empahsize​ 또는 .hero__site-title 의 반대는 .heading-1인 것을 명심하십시오. 

첫 번째 예는 특정 구성 요소에 적용되는 두 번째 예와 달리 사이트 전체에 사용할 수 있습니다. text-와 같은 접두사를 추가하여 클래스가 특정 텍스트 스타일에 사용되는 것을 나타낼 수도 있습니다. 이 방법을 사용하면 CSS 파일 크기와 복잡성을 줄이면서 향후 전역 스타일을 훨씬 쉽게 업데이트 할 수 있습니다.​

​

....

더보기 : https://css-tricks.com/design-principles-for-developers-processes-and-css-tips-for-better-web-design/​

​