[HTML] 글자 사이에 원하는 길이만큼 공백 넣기 (feat. React)

가끔 텍스트를 다루다보면 이런 일이 생긴다.
명함이라고 생각해보자.

금붕어        |         과장

이걸 html로 적으려고 하면 이렇게 하려고 할수도 있다.

<p>금붕어       |        과장</p>

하지만 여러개의 공백은 하나로 처리가 된다.
다음과 같은 여러 방법으로 처리해보자.

---

White-space: pre-wrap

white-space - CSS: Cascading Style Sheets | MDN

white-space 요소는 텍스트처리에 정말 중요하고 많이 쓴다.
어떤 값들이 있는지 알아두면 도움이 많이 된다.

이 중에서 우리가 사용할 것은, pre 또는 pre-wrap이다.
둘의 차이점은 줄이 길어서 넘칠 경우 줄바꿈을 하는가다.
overflow와 비슷한 느낌으로 보면 된다.

하여간 다음과 같이 작성하면 연속 공백을 넣을 수 있다.

<p style="white-space: pre-wrap;">금붕어       |        과장</p>

---

Padding을 이용해서 픽셀 단위로 조절하기

하지만 위의 방법은 공백 한 칸 단위로만 조절이 가능함을 알 수 있다.
픽셀단위로 조정하고 싶다면 다음과 같이 해보자.

<p>금붕어<span style="padding-right: 5px"></span>|<span style="padding-right: 5px"></span>과장</p>

React로는 다음과 같이 할 수도 있다.

function Span({ space = 5 }){
	return (
    	<span style={{ paddingRight: space }}></span>
    );
}

function App() {
	return (
    	<p>금붕어<Span />|<Span />과장</p>
    );
}