웹 디자인은 그래픽 및 인쇄 디자인 세계에서 항상 교장과 정의를 빌려 왔습니다. 이것은 웹 타이포그래피 와 웹 페이지에서 문자 양식을 얻는 방식에있어 특히 그렇습니다. 이 평행선은 항상 1 대 1로 번역되는 것은 아니지만 한 분야가 다른 분야에 영향을 미친 곳을 확실히 볼 수 있습니다. 이것은 전통적인 타이포그래피 용어 인 "leading"과 "line-height"라는 CSS 속성 사이의 관계를 고려할 때 특히 두드러집니다.
선도의 목적
사람들이 인쇄 된 페이지의 활판 인쇄를 만들기 위해 금속 문자 나 나무 문자를 수작업으로 사용했을 때, 그 선들 사이에 간격을 만들기 위해 얇은 납 조각을 텍스트 가로선 사이에 두었습니다. 더 큰 공간을 원하면 더 큰 리드 조각을 삽입해야합니다. 이것이 "선도적 인"이라는 용어가 어떻게 만들어 졌는지입니다. 활판 인쇄 디자인과 교장에 관한 책에서 "선도적 인"이라는 용어를 찾은 경우, "연속적인 유형의 연속 선의 기준선 사이의 거리"의 효과를 읽을 수 있습니다.
웹 디자인의 선두 주자
디지털 디자인에서 leading이라는 용어는 텍스트 줄 사이의 간격을 나타내는 데 여전히 사용됩니다. 비록 실제 리드가 분명히 해당 프로그램에서 사용되지는 않지만 많은 프로그램은이 정확한 용어를 사용합니다. 이는 이러한 원칙의 정확한 구현이 변경 되었음에도 불구하고 전통적 개념에서 아이디어를 빌려 오는 새로운 형태의 디자인의 훌륭한 예입니다.
웹 디자인과 관련하여 "선도적"인 CSS 속성은 없습니다. 대신 텍스트의 시각적 표시를 처리하는 CSS 속성을 line-height라고합니다. 텍스트에 수평 텍스트 줄 사이에 추가 공백을 두려면이 속성을 사용합니다. 예를 들어, 사이트의
이제 페이지의 기본 글꼴 크기 (일반적으로 16px)를 기준으로 정상 줄 높이의 1.5 배가됩니다.
선 높이 사용시기
위에 설명 된 것처럼 line-height는 단락이나 다른 텍스트 블록에서 텍스트 줄의 간격을 좁히는 데 사용하는 것이 적합합니다. 선 사이에 공간이 너무 작 으면 텍스트가 뒤죽박죽이되어 귀하의 사이트 시청자가 읽기 어려워 질 수 있습니다. 마찬가지로 페이지에서 선이 너무 멀리 떨어져 있으면 읽기의 정상적인 흐름이 중단되고 독자가 그 이유 때문에 텍스트에 문제가 발생합니다. 이것이 사용하고자하는 행간 간격의 적절한 양을 찾고자하는 이유입니다. 실제 사용자와 함께 디자인을 테스트하여 페이지의 가독성에 대한 피드백을 얻을 수도 있습니다.
선 높이를 사용하지 않을 때
줄 크기와 단락을 포함하여 페이지 디자인에 공백을 추가하는 데 사용할 줄 넘김 또는 여백과 라인 높이를 혼동하지 마십시오. 그 간격은 선두가 아니므로 선 높이로 처리되지 않습니다.
특정 텍스트 요소 아래에 공백을 추가하려면 여백 또는 패딩을 사용합니다. 앞에서 사용한 CSS 예제로 돌아가서 다음과 같이 추가 할 수 있습니다.
메인 p {line-height : 1.5; margin-bottom : 24px; } 이것은 여전히 페이지 단락 (
거의 모든 경우에 이전 CSS와 동일하게 표시됩니다.
"services-menu"클래스의 목록 안에있는 목록 항목 아래에 공백을 추가하려면 선 높이가 아닌 여백이나 패딩을 사용하십시오. 그래서 이것은 적절할 것입니다.
.services-menu li {