[css] 공백을 html에 표시하기 (padStart, white-space, pre tag)

문제 상황

금액표기를 하다보니 padStart를 사용하게 되었습니다.

    <div className={styles.content}>
      <div className={styles.title}>{props.title}</div>
      <div className={styles.price}>{props.price.padStart(15, ' ')}</div>
    </div>

최소 10자리의 가격을 확보하였는데, html tag내에서는 1개이상의 html은 parse할때 날려버립니다.

pre tag

<pre></pre>태그는 template literal대로 출력해줍니다. pre의 default값을 보니 white-space가 있었습니다.

white-space

이것을 css로 막을 수 있는데 white-space를 참고합니다.

.price {
  white-space: pre;
}

white-space를 보존하는 css property입니다.

결과이미지

가격앞에 앞쪽에 의도한대로 공간이 생겼는데, '원'단위 뒤로는 뭔가 살짝 라인이 안맞네요. 이건 다른원인인것 같습니다.

pre tag와 동일하게 monospace 폰트로 바꿔줬더니, 아래 이미지와 같이 라인이 맞습니다. 위 이미지는 letter사이즈 문제인것 같습니다.