[css] letter-spacing 적용 시 중앙 정렬 레이아웃 틀어짐 문제

문제 설명

---

css에서 letter-spacing은 태그 내에 텍스트에서 글자간 간격을 설정한다.

그런데 만약 중앙 정렬을 한 텍스트에 이 속성을 사용하면 텍스트가 살짝 왼쪽으로 치우치는 오류가 발생한다.

 

 

분석

---

 letter-spacing은 글자마다 오른편에 마치 padding혹은 margin처럼 공백을 부여한다. 그리고 마지막 글자에 부여된 우측 공백으로 인해 전체 텍스트가 letter-spacing 값만큼 왼쪽으로 치우쳐지는 것이다.

 

 

해결방법

---

이 문제는 각 방법마다 장단점이 있는데, 내 경우에는 두 가지 방법 중 하나를 골라서 해결했다.

 

 /* 첫 번째 글자에 패딩을 부여 */
  & .overlay_chart-title-main::first-letter {
    padding-left: 0.2rem;
  }

 

 /* 텍스트의 앞 부분에 공백 컨텐츠 추가 */
 & .overlay_chart-title-main::before {
	content:"";
	width:0.2rem;
  }