React에서 빈 스타일을 만드는 방법
TL;DR
전제: 서브어셈블리는 모 어셈블리의 레이아웃 스타일을 알 수 없습니다.
먼저 서브어셈블리에서 모 어셈블리의 레이아웃 스타일을 알 수 없다는 전제 조건이 있습니다.
(태고문의 구체적인 예를 인용한다)
예를 들어, 이런 느낌의 아이콘이 배열된 여러 개의 구성 요소가 존재한다.
아이콘 사이의 Margin 간격은 같습니다.
아이콘 구성 요소에서 이margin을 정의했다고 가정하십시오.
.icon {
...
margin-right: 15px;
}
해결 방법은 여러 가지가 있는데, 어떤 선택을 하든지 이 아이콘 구성 요소 내의margin에 주의해야 한다.그리고 이런 해결책이 쌓이면 더러운 CSS가 계속 늘어날 거라고 상상하기 쉽다.
따라서 아이의 구성 요소가 부모의 판에서 사용하는 양식을 묘사해서는 안 된다.
적당히 패딩을 해주시면 제가 들고 있을 수 있어요.
신중하게 보기 위해서 같은 공백이라도 적당한 패딩이라면 여러 상하문에서 사용할 수 있는 구성 요소를 만들 수 있을 것 같습니다.정확한지 판단하기 위해 버튼의 구성 요소를 외관 이상으로 확대하는 데도 공을 들일 것이다.
공백이 누구의 것인지 의식적으로 판단하면 문제없다.디자인 단계에서 의식적으로padding 설정을 한다면 가장 좋다.
margin은 누구의 물건입니까?
"공백이 누구의 것인지 의식적으로 판단하면 된다"며 패딩이 아닌 요소 간 크기를 지정하는 매직은 누구의 것일까.
나는'부모님'혹은'누구의 것이 아니다'라고 생각한다.
부모의 형편
쉽게 이해할 수 있는 것은 Grid layout입니다.CSS의 Grid에서는 부모 컨테이너가 레이아웃에 대한 스타일을 기술했습니다.여백은
grid-gap로 지정됩니다..grid {
display: grid;
grid-gap: 1rem;
}
누구 물건이 아닌 경우.
포석에 대해 부모가 구조를 정하지 않았다면 마린은 누구의 것이 아니라 독립된 존재라고 볼 수 있다.(이런 경우도 부모 구성 요소 안에 배열되어 엄밀히 말하면 부모의 책임과 의무이다)
디자이너가 공백을 만들 때의 생각과 일치해야 한다.어떤 요소와 어떤 요소 사이에 공백을 만들 때는'공백이 여기와 연관이 있다'등을 고려하지 않고'이것들은 모두 같은 개념의 것들이라 공백이 적고 그런 것들은 완전히 다르니 좀 더 풀어보자'등 이들 요소의'관계성'에 따라 결정된다.
따라서 Margin은 어느 한쪽에 속하지 않고 Margin을 가진 것에 대해서만 책임과 의무를 진다고 볼 수 있다.이를 실현하기 위한 스페이스는 뒤에서 서술한다.
그나저나'margin-top과 margin-bottom은 무엇으로 해야 하는가'라는 의론이 자주 있지만 이 생각으로 해결할 수 있을 것 같아서'margin은 독립적이기 때문에 단독으로 처리할 수 있다. 둘 다 아니다'라고 답했다.
설치 방법 고려
그렇다면 전제가 확인되더라도 구체적인 시행 방법을 고민할 것으로 보인다.
상위 Grid 시
아까도 예를 들어 Grid Layout의 경우
grid-gap로 정리한다고 제시했다.grid-를 추가하지 않으면 Safari가 작동하지 않습니다)세로와 가로를 각각 지정할 수 있다.
같은 줄이나 열에 다른 폭을 설정하려면 교묘하게 끼워 넣으세요.
부모-flexbox의 상황
나는 사용하고 싶다
gap. 그러나 이 글을 쓸 때 사파리가 대응하지 않아 채택하기 어렵다.빨리 이루어져라!!iOS14.5, 사파리 들고 14.1, 사파리도 갭 쓸 수 있을 것 같아!인간은 14.5까지 갱신해야 할 것 같아서 지금도 용기가 있을 것 같지만, 이미 시간문제야.
모-자 요소 사이의 간격 동시
ulol 등 목록 요소를 사용하는 경우에 적용됩니다.이 사용에 관해서는 자주 있는
Stack 구성 요소가 있습니다.예를 들어 차크라 UI의 Stack을 살펴보겠습니다.
구성 요소
Stack spacing 를 이렇게 설정하면, 이 값은 요소 사이의margin으로 적용됩니다.
직접 만들면 여러가지 방법이 있겠지만 차크라 UI에서는 칠드렌을 맵으로 만들어 각각 Stack Item이라는 구성요소로 싸서 빈 스타일을 잘 맞춘다.
이 Stack에 관해서는 가끔 같은 Margin 값이 여러 개 있을 때도 이 방법을 사용할 수 있습니다.(단, 콘셉트가 이상해 앞으로 새로운 요소가 추가될 예정이니 다른 margin을 설정하려면 뜯어내야 한다. 따라서 이 경우 스페이스를 사용하면 동그랗겠지.)
누구 물건이 아닌 경우.
마지막으로 누구의 소지품은 아니지만 스페이스 조립품을 만드는 방향을 고려할 것이다.
직접 제작한 경우 아래의 방식
大きさ(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;
// 16px × 16px になる
<Spacer size={16} />
// 32px × 1px になる
<Spacer axis="horizontal" size={32} />
끝말
스페이스를 처음 보면 징그럽겠지만 개인적으로 맞는 존재라고 생각해요.Stack과 Spacer를 활용해서 여백이 느껴지는 스타일링을 해보도록 하겠습니다.💪
참고 문장
Reference
이 문제에 관하여(React에서 빈 스타일을 만드는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/seya/articles/09545c7503baa4텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
