[React] 흐르는 텍스트 시작 지점 설정

const textLoop = keyframes`
	0% {
		transform: translate3d(40%, 0, 0);
	}
	100% {
		transform: translate3d(-90%, 0, 0);
	}
`;

const FlowText = styled.div`
	display: flex;
	flex: 0 0 auto;
	white-space: nowrap;
	/* margin-left: 90px; */

`;

const Marquee = ({title}) => {
	return (
		<FlowContainer>
			<FlowText>
				<FlowWrap>{ title }</FlowWrap>
			</FlowText>
		</FlowContainer>
	);
};

export default Marquee;

텍스트가 시작부터 흘러가서 앞글자가 잘 보이지 않았다. 그래서 처음에 생각했던 방법은 아예 텍스트를 넘겨줄 때 앞에 스페이스를 주고 join해서 넘겨줄까 했지만 styled-components를 사용할 때는 문자열 내부에서 공백을 추가하는 것이 효과가 없다고 한다. 때문에 다음으로 생각했던 방법은 margin-left를 주는 것. 이 역시 잘 적용이 되지 않았다. 하지만 다른 방법을 발견했다.

const textLoop = keyframes`
	0% {
		transform: translate3d(40%, 0, 0);
	}
	100% {
		transform: translate3d(-90%, 0, 0);
	}
`;

여기서 transform의 첫번째 인자는 어디까지 흘러갈지 정해주는 인자이다. 때문에 40%로 설정하면 그 너비의 40%부터 텍스트가 시작하게 된다.