font-weight 변화에 따른 width 변화 방지하기

aborile·2023년 1월 30일
2

CSS

목록 보기
2/3
post-thumbnail

component들이 가로로 정렬되어 있을 때, 그것도 특히 width가 fit-content로 내부 텍스트의 길이에 딱 맞게 되어 있을 때, font-weight가 달라짐에 따라 component의 너비가 미세하게 달라지는 경험을 한번쯤은 해봤을 것이다. 바로 다음 코드펜의 윗줄의 예시처럼 말이다.

font-weight에 따라 너비가 달라지고, 너비가 달라지며 우측에 놓인 component가 미묘하게 밀리는 UI는 왠지 모를 답답함과 불편함을 준다. font-weight와는 상관 없이 너비를 고정할 수는 없을까?

CSS의 ::aftercontent: attr() 를 이용하여 쉽게 개선할 수 있다. 트릭은 다음과 같다.

::aftercontent를 이용하여 CSS만으로 element의 뒤에 pseudo-element를 추가할 수 있다. 이때 content로는 어떤 텍스트나 링크, 이미지, css counter 등 다양한 항목을 지정할 수 있는데, 여기서의 키 포인트는 바로 attr(title)을 사용하여 html 상에서 입력해 준 title 속성을 가져올 수 있다는 것이다.

위 이미지와 같이 코드를 작성하면, 기존 element의 바로 뒤에 font-weight: bold인 CSS로 동일한 텍스트가 추가되어 전체 width가 bold text 기준으로 맞춰진 것을 확인할 수 있다.

여기서 height: 0px; visibility: hidden;으로 설정해 주면 해당 element는 보이지 않고 width만 남아 bold text 기준으로 전체 element의 width를 맞출 수 있게 된다.

References

profile
기록하고 싶은 것을 기록하는 저장소

0개의 댓글