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를 작성할 수 있다고 가정 할 것이지만, 그것은 매우 실망 스럽습니다. 어떤 보조 기술이 존재하는지 모르겠지만 촉각 피드백을 통해 일반적인 레이아웃을 디자인 할 수 있다고 가정합니다. 시력이있는 사람과 쌍으로 프로그래밍하는 것이 작은 세부 사항에 적합한 솔루션 일 수 있습니까?