Inflearn Community Q&A
asked
[수업질문] line-height 값에 관하여
Written on
·
78
0
안녕하세요 강의를 듣다가 line-height 부분에 대해 궁금한 점이 있어서 글을 남깁니다.
수업에서는 PX의 값을 사용하였는데 혹시 %로 작업할 수 있는 방법은 없는것일까요? 피그마에서는 원래 어쩔 수 없는 사항일까요?
폰트 종류마다 leading 값이 제각각이라 어떤건 같은 사이즈인 24 이더라도 line-height 값을 26을 주면 다른 결과물이 나오더라고요
퍼블리셔 분께서 line-height: 1.5; 와 같은 값으로 하면 폰트에 상관없이 균등하다고 하시는데 저 값을 입력하면 PX로 인식을 해서 안되던데 방법이 없는지 궁금합니다.
Answer 1
0
안녕하세요, hana님. 질문 주셔서 감사합니다.
타이포그래피 베리어블에서는 현재 120% line-height 값을 직접적으로 지원하지 않고 있습니다.
이 부분은 아직 업데이트되지 않은 것으로 확인됩니다.
따라서 베리어블을 적용하시고 싶으시면, 강의에서 언급드린 것처럼 직접 계산하여 적용하는 방법을 사용하셔야 합니다. 이 경우, line-height 값에는 픽셀(px) 단위를 붙여주시면 됩니다.
참고로 line-height에는 아래와 같은 단위/값이 사용될 수 있습니다: (MDN 문서 참고)
normal
2.5 (단위 없는 비율 값, 즉 250%와 동일)
3em
250%
32px
만약 균등한 비율로 설정하고 싶으시다면, 퍼블리셔 분이 말씀하신 대로 1.2 또는 120% 값을 사용하시면 됩니다. 다만, 현재는 이 값이 타이포그래피 베리어블에서 지원되지 않으므로,Primitive 베리어블을 무시하고 스타일 속성에서 직접 120%를 입력하시면 됩니다. (❌ 1.2는 안됩니다.)
Dev Mode에서는 120%로 표시되며, 실제로는 이는 퍼블리셔분이 말씀하신 1.2와 동일합니다.
그래서 개발자분이 원하시는 방식(1.2 또는 120%)으로 이후에 자유롭게 적용하시면 될 것 같습니다.
도움이 되셨으면 좋겠습니다.
궁금하신 부분 있으시면 더 질문 주세요.
감사합니다.
볼드 드림.