수평 홈통에 대한 특정 용어가 있습니까?


12

컨텍스트
우리 팀은 반응 형 웹 사이트에서 작업하고 있으며 사용자는 그리드 "셀"사이의 공백을 포함하여 페이지의 일부 속성을 구성 할 수 있습니다. 우리는 "세포 사이의 공간"을 식별하기 위해 올바른 용어에 대해 대화했습니다. 분명히 우리는 "여백"과 같은 것을 사용할 수 있지만 페이지와 가장 바깥 쪽 셀 사이의 공간을 포함하기에 너무 넓습니다. 셀 사이의 공간 만 식별하려고합니다. 우리의 사용자는 기술에 정통해야 할 필요는 없지만 (CSS 등을 의미) 그래픽 디자인에 대한 배경 지식이 있거나 최소한 일반적인 용어에 익숙 할 수 있습니다.


"Gutter" 라는 질문 은 가장 정확한 용어처럼 보이지만 열 에서 공백을 구체적으로 언급 할 수있는 "Gutter"에 대한 대부분의 정의는 다음과 같습니다 .

행 사이의 공백에 대한 특정 용어가 있습니까? 아니면 단순히 "수평 거터"라고 부르는 것이 적절합니까?

예
다음은 내가 식별하려는 것을 보여줍니다.
( https://www.init.de/en/news/responsive-design 에서 빌린 이미지 )

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

내 현재 용어의 문제점
"수평 (/ 수직) 거터"는 거터가 수평 (/ 수직) 요소들 사이에 있는지 또는 수직 (/ 수직) 사이에 수평 (/ 수직) 공간을 제공하는지 확실하지 않기 때문에 약간 혼란 스럽습니다. 수평) 요소. 팀에서 어떤 정의가 정확한지에 대해 의견이 맞지 않아서 그 문구가 실제로 혼란 스러울 정도로 충분한 증거라고 생각합니다.

적어도 웹과 관련하여 "패딩"과 "여백"은 내가 설명하는 내용에 적합하지 않습니다. 패딩은 테두리와 내용 사이의 간격을 말하고 여백은 요소 주위 의 공간을 나타냅니다 . 각각 10px의 여백을 가진 두 개의 인접한 요소는 그 사이에 20px 거터를 갖습니다. (예, CSS 마진이 종종 붕괴 되지만 항상 그런 것은 아님을 알고 있습니다.)

반응 형 그리드 프레임 워크에서 자주 사용되는 "홈통"이라는 용어를 보았으므로 웹 개발에서 허용되는 용어라는 것을 알고 있습니다. "수평 홈통"에 대해 더 적절한 용어가 있는지 궁금합니다.


좋은 질문입니다. 나는 그 용어를 잘 모릅니다. 그러나 거 터라는 용어는 종종 잘못 사용됩니다. 기둥 사이의 간격을 골목 이라고합니다 . 설명을 위해이 이미지 를 보십시오
— Zach Saucier

당신은 구체적으로 여기에서 선두를 의미하지는 않습니까? 단락 간격은 어떻습니까?
— e100

상황이 전부입니다. 테이블 같은이 소리, 나는 무엇이든 용어 (나는 그것의 '패딩'IIRC 생각) 스프레드 시트 셀에 대한 서식 옵션을 선택 MS 엑셀 사용을 차입을 건의 할 것
— DA01

에 관해서는 간격 단락 우리가 열에서 단락 사이의 수평 공간에 대해 진정으로 얘기하면 나는 용어 그래픽 디자이너 사용이 생각 입니다 '단락 간격'.
— DA01

즉 테이블 / 그리드의 외부의 주위에 공간을 추가로 셀 간격이 정확하지
— JDB은 여전히 모니카 기억

답변:


3
짧은 답변

"행 간격"을 사용합니다.

긴 대답

JDB가 언급했듯이, 나는 (매혹적인) 인쇄 매체 세계에서 조판 용어를 가져 오는 대신 웹 관련 용어를 사용하려고합니다.

대부분의 그리드 레이아웃은 "열"과 "그리드"라는 용어를 사용하기 때문에 "열 간격"과 "행 간격"이라는 용어를 사용합니다. CSS 키워드와의 충돌을 피하기 위해 "여백"과 "패딩"이라는 용어를 사용하지 마십시오.


1
새로운 CSS Grid 사양은 grid-row-gap및을grid-column-gap 정의 하지만 실제로는 "간격"을 조금 더 좋아합니다.
— JDB는 여전히 Monica

7

OP의 질문의 범위 인 웹 디자인의 범위에서는 (매혹적인) 인쇄 매체 세계에서 조판 용어를 가져 오는 대신 웹 관련 용어를 사용하려고합니다.

CSS margin 속성에서와 같이 이것을 "vertical margin"이라고합니다. 여백은 인접한 요소의 경계 사이의 간격입니다 (요소 내부의 간격 인 패딩과 반대로 경계와 내용 사이의 간격).

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

W3C의 말에서 :

여백은 요소 주변의 경계를 벗어납니다. 여백에는 배경색이 없으며 완전히 투명합니다. 출처

요소의 테두리는 투명 할 수 있습니다. 눈에 띄지 않아도됩니다.

개발자는이 용어를 매우 명확하게 이해해야합니다. 그리고 제 생각에는 "여백"은 "거터", "애 슬레"또는 "슬러그"보다 매력적이지 않지만, 고객은 더 친숙한 용어를 찾아야합니다.

침략

Cellpadding과 cellspacing와 유사 padding하고 margin, 그러나 그들은 너무 구체적이다. 일반적인 CSS 속성이 아닌 <table>및 <td>태그 의 유효한 html 속성입니다 . 다른 태그에는 적용 할 수 없습니다. ( <table>태그를 사용하여 만든 구문에서와 같이) 테이블에 대해서만 이야기하는 경우 해당 영역을 호출하면 맞습니다 cellspacing. 당신이 (에 의해 정의 된 영역에서와 같이 일반적으로 직사각형 영역에 대해 이야기하는 경우 <div>, <span>, <img>또는 다른 태그), 다음 margin더 정확한 것입니다.

그냥 측 의견과 같이 있음을 통지하시기 바랍니다 cellpading및 cellspacing더 어렵다 페이지의 결과로 스타일 (CSS)와 구조까지 속성 믹스 (HTML)이 유형의 유지 및 / 또는에 의해 개발 때문에 속성은 현대적인 웹 디자이너와 개발자에게 매우 눈살됩니다 팀. 개발자는 이러한 속성을 사용 하지 말고 CSS 속성 padding을 margin대신 사용하는 것이 좋습니다.

일반적인 레이아웃을 생성하기 위해 테이블을 사용하는 경우에도 마찬가지입니다. 순수 주의자들은 표는 표 형식의 데이터를 표시하는 데만 사용해야한다고 주장합니다. <div>및 <span>태그 비계에 사용되어야한다. 언젠가 우리가 의미 적으로 웹 페이지를 의미있게 수정하기를 희망하는 것은 태그가 컨텍스트를 의미 적으로 표시하는 것입니다.


2
"여백"은 요소 주위 의 공간을 나타내는 일반적인 용어 인 반면 "거터"는 특히 요소 사이 의 공간을 나타냅니다 . 예를 들어, 두 개의 연속 요소가 각각 10px의 여백을 갖는 경우 이들 사이의 홈통은 20px입니다. 다양한 격자 레이아웃 프레임 워크에서 "거터"가 자주 사용되는 것을 보았으므로 웹 사이트의 맥락에서 벗어나지 않는다고 생각합니다. 세로로 쌓인 요소 사이의 공간에 대한 올바른 용어인지 궁금합니다.
— JDB는 여전히 Monica를 기억합니다.

1
@JDB : 충분합니다 ... 요소들 사이의 공간이 청중에 따라 달라질 수 있기 때문에 "홈통"을 받아들이는 것 같습니다. BTW에서 HTML / CSS 여백은 때때로 함께 축소되므로 10px 여백을 가진 두 요소가 반드시 20px 여백을 가질 필요는 없습니다. 여백이 무너지면 10px 거터로 끝날 수 있습니다. css-tricks.com/almanac/properties/m/margin
— cockypup

또한 CSS의 "margin"은 일반적인 용어가 아닙니다. 매우 구체적인 정의가 있습니다. w3.org/TR/CSS2/box.html
— cockypup

1
좋은 지적. "최종 요소 사이에 남은 실제 공간"을 나타내는 용어를 사용하는 것이 좋습니다.
— cockypup

1
그들은 마진이됩니다 방법의 모든 목록을 비록 되지 붕괴를, "마진 붕괴는 설명서의 규칙이 아니라 예외가 될 것으로 보인다 적어도, 문서는 영어 문법 책처럼 읽는 없습니다 :.. 어떤 규칙 및 모든 예외를 아마, 적어도 당신의 팀을 위해, 당신은 (비) 붕괴 후 요소들 사이의 수직 마진 인 용어 ( "alley"와 같은)를 정의합니다.
— Yorik

4

조판 용어에서 슬러그 는 수평 간격에 대한 일반적인 용어입니다. -단락 뒤 / 앞의 공간, 섹션 간 또는 규칙 간 수평 간격 등. 슬러그는 유형 크기와 유사한 지정된 크기를 가지며 적절한 수직 간격을 만들기 위해 금속 유형과 나란히 배치됩니다.

편집을 기반으로 ....

Cell padding가장 확실한 선택 인 것 같습니다. 또는 cell spacing.


이 용어는 섹션 뒤의 간격에도 적용됩니까? 아니면 단락?
— Zach Saucier

1
수평 공간이 사용되는 모든 영역에 적용됩니다. 핫 타입 시절에 슬러그는 단락, 열, 규칙 등의 조판 된 영역 사이에 수평으로 균등 한 공간을 만드는 데 사용되었습니다.
— Scott

나는 그것을 좋아하지만 웹 디자인에 두 번째 정의가 있기 때문에 웹 디자인에 매우 혼란 스럽습니다.
— JDB는 여전히 Monica를 기억합니다.

1
슬러그는 모든 간격에 사용되는 용어입니다. 오목한 금속 슬러그로 잉크가 달라 붙지 않습니다. 그것들은 단락 간격 또는 다른 간격 요구를 만들기 위해 유형 사이뿐만 아니라 수평 간격 및 정렬 유형을 만드는 데 사용되었습니다. 나는 신문을 위해 일하지 않았다면 오늘날 많은 디자이너들이 알고있는 용어가 아니라는 것을 알고 있습니다. 그렇다고 그것이 정확하지 않다는 것을 의미하지는 않습니다. 세로 항목은 xheight, lead 및 slug입니다. 웹 디자인의 엄격한 측면에서, 나는 "여백"을 사용하는 경향이 있습니다.
— Scott

1
...이 답변을 게시 한 후 훨씬 더 추가하기 위해 질문이 편집되었음을 알 수 있습니다. 이전에는 "웹"에 대한 언급이 없었습니다.
— Scott

1

레이아웃 디자인에서 그리드의 가로 거터를 "흐름 선"또는 "행선"이라고합니다.


2
GD.SE에 오신 것을 환영합니다! 답변을 더 잘 설명하십시오. "레이아웃 디자인"이란 무엇입니까?
— Mensch

Kurt가 말한 것에 추가하기 위해 시각적 예제도 포함시킬 수 있습니다.
— 벨츠
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.