거터-배경 또는 테두리가있는 열의 패딩 및 여백


9

기둥 (또는 상자 또는 레이아웃 모듈) 자체의 배경이나 테두리가있어 모양이 분명 할 때 거터에 권장되는 설계 지침은 무엇입니까?

일반적으로 상자의 가장자리와 텍스트 사이에 약간의 공간이 생깁니다. 그러나이 공간을 어디에서 활용해야합니까? 상자확장하거나 텍스트를 축소하여 ?

예를 들어, 다음은 일부 (전부는 아님) 옵션입니다 ...

여기에 이미지 설명을 입력하십시오

(또한 열 수와 너비가있는 그리드를 사용할 수있었습니다. 이것은 단지 예일뿐입니다. 레이아웃이 거터에 걸릴 때마다 실제 질문을 할 수 있습니다.)

그리드 기반 레이아웃에 대한 글을 썼지 만 지금까지 문제를 해결하는 하나만 보았습니다 . Khoi Vinh의 Nudge Your Elements .

내가 무엇을 놓치고 있습니까? 아니면 명확한 지침이 없는가?

그리드 기반 레이아웃의 동기 중 하나는 전역 정렬의 감각을 높이는 것이기 때문에, 결정이 더 많은 정렬이 필요한 것에 따라 결정을 내릴 수 있다고 생각합니다. 상자 또는 내용물?

내가 잘못 읽지 않는 한, Khoi Vinh는 그의 기사에서 옵션 3을 주장합니다.

옵션 3과 옵션 6 사이를 오가는 것을 발견했습니다. 옵션 3을 사용하면 상자가 정렬되지만 텍스트가 좁아집니다. 그러나 옵션 6을 사용하면 상자와 텍스트가 정렬되지 않습니다 (텍스트 가장자리와 상자 경계 사이의 암시 적 중간이 이제 정렬 된 것입니다).

웹을 넘어서서 책 디자인과 페이지 구성에 대한 책을 읽지 않은 사람 도이 문제에 대해 이야기하지 않습니다. 캐논이 대부분의 '명백한 배경의 검은 글자'책 인쇄에서 어떻게 작동하는지 알 수 있지만, 분이 페이지 레이아웃에 색상을 추가하거나 흑백 구성표를 뒤집는 경우 거터 질문이 다시 나타납니다.

흠, 나는 그 질문이 있다고 생각한다. 내가 설명한 옵션 중에서 선택 하기 위한 지침 이 있습니까? 아니면 디자이너 법을 뛰어 넘어 '모양과 느낌이 좋은 것'에 관한 문제 입니까?


2
나는 여기에 다른 사람들의 의견이 가장 잘 어울리는 것에 대해 개인적인 소고기를 가지고 있지 않지만 (실제로 # 3에 동의 할 것입니다) 캐논, 지침 및 규칙은 궁극적으로 권위에 대한 임의의 호소에 지나지 않습니다. 그들은 훌륭한 도구이지만, 궁극적 인 진실 (TM)를 찾고 가지 마세요
호 레이시오

Lorem Hipstum, 맞지?
e100

답변:


5

그리드를 사용할 때마다 한 가지 요소 (주로 특정 페이지에서 하나 이하)가 위반하는 경우를 제외하고 일관되게 사용해야합니다. . 이 작업을 수행하려면 대비를 대담하고 명확하게 고려해야합니다. ( "일"함으로써 나는 실수처럼 보이지 않음을 의미합니다.)

엄격히 준수하는 그리드는 안전합니다. 긴장이 거의 없다; 눈이 기대하는 곳에 물건이 나타나고 독자는 결코 놀라지 않거나 불편하게 느끼지 않습니다.

이 경우 # 4와 같이 배경이 그리드를 약간 위반하면 실수처럼 보입니다. 어색합니다. 거터가 완전히 없어서 다른 기둥에 비해 상자가 가득 찼습니다. 개방성에 대한 기대를 설정하는 텍스트의 개방적 선도에 대항하여, 이것은 분명히 잘못입니다.

0은 대비를 제공하지 않으므로 두 번째 열이 나머지 열과 구분되지 않습니다. 어떤 상황에서는 그것이 당신이 원하는 것입니다.

# 5 및 # 6의 "하프-거터"예제는 거터를 재정 의하여 더 좁아졌습니다. 그들은 실제로 전체 그리드를 가로 세로로 재정의합니다 .이 경우 거 터는 줄 간격과 정확히 동일하기 때문입니다. 텍스트 자체에는 좋지 않지만 상자와 함께 사용할 수 있습니다. 그러나 # 6에서는 위쪽과 아래쪽에 비해 텍스트의 양쪽에 균형이 맞지 않습니다. 이해가되지 않기 때문에 어색하고 불편합니다. 공백이 더 고르게 분포되기 때문에 # 5가 바람직합니다. 같은 이유로 # 3이 # 2보다 선호됩니다.

전반적으로, 나는 Lauren에 동의하고 최고의 샷으로 # 3을 추천합니다. 또한 열 수에 관계없이 가장 일반적인 경우입니다.

규칙이 있습니다. 그럴만한 이유가 있다면 분명히 깨질 수 있지만, 그렇게 할 때마다 목적에 맞고 대담하고 명확하게 "디자인 된대로"있어야합니다. Helvetica Black은 조지아 작품이 서로 다르기 때문에 서로 어울립니다. Verdana와 짝을 이루는 Trebuchet은 충분히 다르지 않기 때문에 신경에 격자를 그립니다. 1 열반에 걸쳐있는 크고 정사각형의 빨간색 상자가 작동 할 수 있습니다. 약간 옅은 회색은 아닙니다.


2

옵션 3에 투표합니다. 회색 상자의 가장자리는 열을 세로로 정의하므로 해당 줄을 이유없이 위반할 수 없습니다. 거 터는 세 열 모두에 대해 동일해야하므로 회색 상자 안에 텍스트를 삽입하십시오. 옵션 2의 삽입은 너무 깊습니다.

그것이 제가 인쇄 작업에 익숙한 것이므로 웹에서도 "올바른"것처럼 보입니다.


0

이것이 웹 디자인을위한 것이라면, 브라우저 간 일관성에 관심이 있다면 가로 방향으로 패딩을 사용하지 않는 것이 좋습니다. 다른 브라우저는 div와 패딩을 다르게 표현하여 프리젠 테이션이 중단 될 수 있습니다.

어떤 방법을 사용하든 여백은 가로로만 사용하십시오. 원하는 정확한 레이아웃을 얻으려면 클래스를 2 ~ 2 개 추가해야합니다 (예 : div에 대한 여백 세트와 단락에 대한 여백 세트). 그러나 장기적으로는 더 신뢰할 수 있습니다. 그러나 세로 패딩은 일반적으로 문제가되지 않습니다.


현재 버전의 IE가 여전히 마진을 두 배로 늘립니까? 자비, 짜증나
Lauren-Clear-Monica-Ipsum

1
모든 방향으로 패딩 / 여백을 잘 수행 할 수 있습니다. 상자 모델 (부모 및 자녀 모두)에주의를 기울이면됩니다.
도슨

당신은 할 수 있습니다 패딩을 사용하지만, 당신은 그것을 위해 계정에 폭포 아래로 모든 방법을 가지고있다. 캐스케이드에서 가장 멀리있는 항목에 여백을 사용하는 것이 훨씬 쉽고 안정적이며 모든 브라우저에서 일관되게 작동합니다. 물론 개인적인 의견.
베니 안다 제츠
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.