CSS는 일반적인 스타일링 언어이며 청각 마크 업에 대한 속성도 포함 합니다 . 이 중 어느 것도 주류 브라우저에 의해 구현되지는 않지만 독자를 선별하는 것이 유용 할 수 있습니다 (그러나 청각 마크 업이 "실제로"가 아니라는 점을 고려하면 구현이 있는지 알 수 없습니다).
나는 보는 사람으로서 CSS를 약간 바꾼 피드백 루프에서 CSS를 작성하고 페이지가 어떻게 변하는 지 지켜 봅니다. 이 피드백이 가능하지 않거나 매우 어려운 경우, 설계 원칙으로 돌아가서 제대로 작동하기를 바랍니다.
페이지를 그리드로 생각하면 비율을보다 쉽게 관리 할 수 있습니다. 일반적인 구분은 탐색 및 헤드 라인에 맨 위 행을 사용하고 관련 컨텐츠에 대해서는 오른쪽 열을 사용하는 것입니다. 왼쪽 열은 기본 콘텐츠에 사용되며 오른쪽 열의 약 2 ~ 3 배입니다. 이것은 대략 Stack Exchange 사이트가 렌더링되는 방식입니다. CSS에서는이 구현 될 수 display: table및 표시 스타일 관련 table-row과 table-cell, 또는 새로운 인 flexbox 모델을. 정확한 비율은 놀랍게도 중요하지 않습니다.
페이지가 가로 중앙에 있으면 더 좋아 보입니다.
많은 색상을 사용할 필요가 없습니다. 배경색 (보통 밝고 불포화)과 텍스트 색 (보통 어둡고 포화)이 있습니다. 각주, 줄 또는 기타 세부 사항과 같은 텍스트를 강조 표시하지 않도록 밝기 대비를 줄일 수 있습니다. HSV 색상 모델을 사용하는 것이 RGB보다 훨씬 쉬워야합니다. 일반 회색이 너무 지루한 경우 사용할 수있는 여러 색상 팔레트가 있습니다. 색상을 사용해야하지만 조금만 사용해야합니다.
글꼴 크기는 중요도를 나타내는데도 사용할 수 있습니다. 2pt 단계와 9pt 이하의 단계는 의미가 없습니다. 일반 텍스트의 경우 글꼴 크기가 14pt를 초과하지 않아야합니다. 글꼴 크기와 텍스트 대비는 말의 양과 비슷합니다.
CSS 제공뿐만 아니라 같은 측정의 절대 단위 px나 cm뿐만 아니라 상대 단위 등의 em키워드와 같은 thin나 medium. 상대적 측정 및 이러한 키워드를 사용하는 것이 종종 더 쉽습니다.
텍스트가보다 넓어서는 안됩니다 40em.
브라우저에는 기본 스타일 시트가 제공됩니다. 그것들은 예쁘지는 않지만 모든 것을 재정의 할 필요는 없습니다. 간단한 웹 폰트를 선택하고 텍스트 요소의 최대 너비를 설정하는 것이 가장 중요한 두 가지입니다. 시맨틱 HTML 작성은 기본 스타일이 작동하는 데 중요합니다.
이를 통해 간단한 블로그 등을 스타일링 할 수 있어야합니다. 하나:
수행중인 작업을 볼 수 없다면 코드 디버깅이 훨씬 어렵습니다. 첫 시도에서 물건을 얻지 못했습니다. 그러나 상황이 "올바른"시점을 어떻게 알 수 있습니까?
팝업 메뉴 등 요소를 정확하게 배치해야하는 경우가 있습니다.
이미지와 아이콘은 디자인에 깊이를 더할 수 있지만 선택하기는 어렵습니다.
CSS 상자 모델은 끔찍하며 종종 머리에서 시뮬레이션하기가 어렵습니다.
나는 당신이 약간의 CSS를 작성할 수 있다고 가정 할 것이지만, 그것은 매우 실망 스럽습니다. 어떤 보조 기술이 존재하는지 모르겠지만 촉각 피드백을 통해 일반적인 레이아웃을 디자인 할 수 있다고 가정합니다. 시력이있는 사람과 쌍으로 프로그래밍하는 것이 작은 세부 사항에 적합한 솔루션 일 수 있습니까?