UI 마크업을 하다보면 포토샵파일(PSD)이나 제플린으로 전달을 받는다. 전달받은 디자인 단위(px)와 css의 px의 값이 다르게 적용이되고 폰트 사이즈에 따른 상대값(em)으로 적용을 시킬 수도 있다.
포토샵과 동일한 값을 넣으면 생각한 것과 다르게 나오는 것을 경험해본적이 있다면 이미 이런 방법을 찾아봤을거라 생각한다. 다만, 이제 CSS를 만진지 얼마 안되었거나 UI개발자나 퍼블리셔가 없는 상태에서 개발자가 마크업을 수정해야 할 때 자간에 대해 중요시 생각하는 디자이너와 업무를 하면 이런 부분을 맞춰주어야 한다.
공유하는 사이트는 그런 갈증을 해소해줄 수 사이트이다. 하단부에는 좀 더 고급적으로 코드화로 자동변환을 해주게 해줄 수 있지만 자간을 주는 경우가 많지는 않다. 스크린샷에 첨부한 내용정도의 수정만 있어도 충분하다고 생각한다.
www.benmarshall.me/convert-photoshop-letter-spacing-to-css/
Convert Photoshop Letter Spacing to CSS | Ben Marshall
Convert Photoshop letter spacing to CSS equivalent using px or em values with these simple formulas. Bonus — includes a simple automatic converter!
www.benmarshall.me
'IT' 카테고리의 다른 글
| 맥북을 기다리는 1인에게 보내져온 애플 신제품 발표 초대장! (1) | 2021.09.09 |
|---|---|
| [Vue.js] 스크롤(터치) 업 / 다운 클래스(CSS) 추가 및 제거 이벤트 주는 방법 (0) | 2021.08.09 |
| [텔레그램] 클럽하우스 업그레이드판을 만들어낸 텔레그램 음성대화 2.0 (0) | 2021.03.25 |
| 모바일 웹에서 스크롤 표시 어떻게 없앨까요? 스크롤 잔상 없애는 방법! (0) | 2021.03.17 |
| 와이어프레임은 꼼꼼하게 만들 필요성이 있다. (0) | 2020.12.28 |
