브라우저에 따라 폰트의 위치는 조금씩 다릅니다.
폰트가 차지하는 공간이 조금씩 다르기 때문인데요.
디자인팀과의 협업에 있어서 개선점을 찾다가
'폰트의 위치에 대한 예제가 있었으면 좋겠다'라는 요청이 있었습니다.
바로 이거다 싶어서 한번 만들어 보았습니다.
설정 항목은 font-family, font-size, line-height 세가지 입니다.
새로고침을 하면 초기화됩니다.
글자가 들어있는 회색박스에 대한 소스는 다음과 같습니다.
div {
float: left;
width: 400px;
padding: 10px;
border-right: 1px solid #fff;
background-color: #888;
font: 12px/1.3 Gulim;
}
span {
background-color: #fff;
}<div>
<span>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리 나라 만세 무궁화 삼천리 화려강산 대한 사람 대한으로 길이 보전하세.</span>
</div>
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
</div>Posted by mkyoon
