금액표기를 하다보니 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></pre>
태그는 template literal대로 출력해줍니다. pre의 default값을 보니 white-space가 있었습니다.
이것을 css로 막을 수 있는데 white-space를 참고합니다.
.price {
white-space: pre;
}
white-space를 보존하는 css property입니다.
가격앞에 앞쪽에 의도한대로 공간이 생겼는데, '원'단위 뒤로는 뭔가 살짝 라인이 안맞네요. 이건 다른원인인것 같습니다.
pre tag와 동일하게 monospace 폰트로 바꿔줬더니, 아래 이미지와 같이 라인이 맞습니다. 위 이미지는 letter사이즈 문제인것 같습니다.