React로 페이지 여백을 설정하는 방법

TL；박사 01 명

메쉬 레이아웃의 메쉬 간격

flexbox라면 flex gap을 사용하고 싶습니다. (그러나 Safari는 아직 지원하지 않습니다.)

적절한 채우기 지정

스태킹 구성 요소는 여러 개의 같은 페이지 간격에 사용되고, 간격 구성 요소는 나머지 페이지 간격에 사용됩니다.

서브어셈블리는 모 어셈블리의 레이아웃 스타일을 알 수 없습니다.

먼저 서브어셈블리는 모 어셈블리의 레이아웃 스타일을 알지 않아야 합니다.
예를 들어 하나의 구성 요소에 여러 개의 아이콘이 있다고 가정하면 다음과 같다.

아이콘 사이의 간격이 같습니다.
아이콘 구성 요소에서 이 경계를 정의했다면 다음과 같습니다.

.icon {
  ...
  ... margin-right: 15px;  
}

현재, 다른 페이지에서 이 아이콘 구성 요소를 사용하고 싶다면, 이 페이지에서 아이콘 오른쪽에 100px의 경계가 필요합니다.어떻게 할 거예요?
이 문제를 해결할 수 있는 방법은 많지만, 무엇을 선택하든지, 이 아이콘 구성 요소의 경계를 걱정해야 한다.이러한 해결 방안이 축적됨에 따라 우리는 점점 더 더러운 CSS가 생길 것이라고 나는 상상하기 쉽다고 생각한다.
이것이 바로 서브어셈블리의 부모가 사용할 레이아웃에 따라 스타일을 디자인해서는 안 되는 이유입니다.

적당한'채우기'가 있으면 돼요.

나는 채우기만 적당하면 구성 요소가 자신의 채우기를 가지게 할 수 있다고 생각한다.
예를 들어 버튼 구성 요소를 보기보다 크게 만들어 클릭을 받을 수 있는 영역을 늘릴 수 있습니다.

누가 이윤을 가지고 있는지 알고 정확한 결정을 내리기만 한다면, 너는 괜찮을 것이다.

누가 보증금을 가지고 있습니까?

내가 위에서 말한 바와 같이, 누가 이윤을 가지고 있는지, 그리고 정확한 결정을 내릴 수 있다면, 너는 괜찮을 것이다.
그래서 문제는'누가 원소 간의 경계를 가지고 있습니까?'
나는 부모님이 아니면 아무도 없다고 생각한다.

의 기원

가장 뚜렷한 상황은 격자 레이아웃입니다. 그 중에서 부모 용기는 레이아웃 스타일을 설명합니다.grid-gap을 사용하여 여백을 지정할 수 있습니다.

.grid {
    display: grid;
    grid-gap: 1rem;
}

아무도 없다

모 레벨이 레이아웃에 구조를 지정하지 않은 경우 여백은 다른 사용자가 아닌 독립된 솔리드로 볼 수 있습니다.
이것도 디자이너의 이윤율에 대한 견해와 같아야 한다.디자이너가 두 요소 사이의 간격을 결정할 때 그/그녀는'간격이 이 요소와 관련이 있다'고 생각하지 않고'이것은 같은 개념이기 때문에 간격이 더 작아야 한다. 이 두 요소는 완전히 다르기 때문에 우리는 그것들을 더 많이 분리하자'고 추측했다.
그들은 이 원소 간의 관계에 근거하여 이윤율을 결정한다.
따라서 보증금은 어느 한 측에 속하지 않고 한 가지 일만 책임진다. 보증금이 있다.

구현 방법

우리는 그것을 어떻게 실현하는지 깊이 토론할 것이다.

부모 메쉬

앞에서 말한 바와 같이 격자 구조에 대해 우리는 grid-gap을 사용할 것이다.grid-을 추가하지 않으면 Safari에서 작동하지 않습니다.
https://developer.mozilla.org/en/docs/Web/CSS/gap
수직과 수평 방향을 개별적으로 지정할 수 있습니다.
같은 줄이나 열에 다른 폭을 설정하려면, 그것들을 한데 끼워서 정상적으로 작동하도록 할 수 있다.

부모-flexbox

나는 gap을 사용하고 싶지만, 본문을 작성할 때 사파리가 그것을 지원하지 않기 때문에 채택하기 어렵다.나는 그것들이 곧 실시될 수 있기를 바란다.
https://developer.mozilla.org/en/docs/Web/CSS/gap
https://caniuse.com/flexbox-gap

하위 요소 사이의 간격이 같습니다.

ul과 ol 등 목록 요소를 사용할 때 이렇다.
이를 위해 Stack 구성 요소를 사용하십시오.
예를 들어 Chakra UI의 스택을 살펴보겠습니다.
https://chakra-ui.com/docs/layout/stack
이렇게 spacing 구성 요소의 Stack을 설정하면 이 값은 요소 간의 경계로 적용됩니다.

Chakra UI에서는 여백 스타일을 적용하기 위해 StackItem이라는 구성 요소 매핑 및 패키지 하위 요소를 사용합니다.
만약 이 창고에 같은 간격의 값이 여러 개 있다면, 이 방법을 사용해야 할 수도 있습니다.(단, 개념적으로 정확하지 않기 때문에 미래에 새로운 요소를 위해 다른 여유를 설정하려면 분해를 해야 할 수도 있습니다. 따라서 이런 상황에서 간격표를 사용하는 것이 가장 좋다고 생각합니다.)

아무도 없다

마지막으로, 만약 그것이 누구에게도 속하지 않는다면, 우리는 간격 구성 요소를 만드는 것을 고려할 것이다.
직접 제작하고 싶다면 size과 axis을 지정하면 다음과 같다.
(https://www.joshwcomeau.com/react/modern-spacer-gif/ 참조)

import React from 'react';

const Spacer = ({
  size,
  axis,
  style = {},
  ... .delegated,
}) => {
  const width = axis === 'vertical' ? 1 : size;
  const height = axis === 'horizontal' ? 1 : size;
  return (
    <span
      style={{
        display: 'block',
        width,
        minWidth: width,
        height,
        minHeight: height,
        ... . style,
      }}
      {... .delegated}
    />
  );
};
export default Spacer;

유일하게 필요한 도구는 사이즈입니다.

// It will be 16px x 16px
<Spacer size={16} />

원하는 방향 이외의 방향에서 개스킷의 너비가 막히면 축 방향을 지정하여 최소값을 유지할 수 있습니다.

// It will be 32px x 1px.
<Spacer axis="horizontal" size={32} />

결론

언뜻 보기에는 간격이 이상할 수도 있지만, 개인적으로는 일리가 있다고 생각하기 때문에 창고와 간격을 이용하여 괜찮은 가장자리 스타일을 얻자.💪

참고 문헌

https://www.joshwcomeau.com/react/modern-spacer-gif/
https://mxstbr.com/thoughts/margin/