일모리와 웹표준

line-height 의 미스테리

IE 익스플로러에서 해더의 폰트 사이즈를 너무 크게하면 글자의 위 아래가 잘려 보이는 경우가 있다. line-height이 폰트 사이즈보다 작게 지정되어 있는 경우다.

line-height: 을 사용하여 잡아주면 문제없다. px보다는 단순 자연수를 사용하자. 나중에 폰트 크기를 조절할때 line-height은 신경쓰지 않아도 된다.

font-size: 40px; line-height:1;

line-height 은 40px이다.

폰트단위를 em 으로 사용때에도 같은 em으로 line-height을 잡아주기보다는 단위를 지정하지 않는것도 좋은 팁이다.

p.s. Ecto 에서 포스팅

신현석

Apr/26/07 @ 9:32 am

예전에는 CSS validator 에서 단위 없이 값을 입력하면 validation에 실패를 하는 버그가 있었는데 최근에 고쳐졌군요. 이제 마음 놓고 단위를 빼고 사용할 수 있겠어요. :)
김진태

Apr/26/07 @ 9:53 am

오 이거 정말 편하네요 좋은 팁 감사~
일모리

Apr/26/07 @ 10:41 am

한가지 덧붙이자면 세로정렬이 필요할때 단순한 단어 한개정도라면 line-height을 써주면 편하게 정렬됩니다.

예를들어 30px 높이 칸 세로 중간에 Menu 단어가 위치해야 한다면 line-height:30px 을 주게되면 Menu 단어가 정가운데에 위치하게 됩니다. :)

신현석// 다 현석님 덕이지요. ^^;
요즘 validator랑 멀어지는거 같아서 걱정입니다.

김진태// 좋은 하루되세요 ;)
s

Apr/28/07 @ 12:11 am

메뉴에서 글자를 vertical-align 중앙정렬을 할때 line-height를 쓰면 오히려 간단한데
padding-top과 padding-bottom으로 조절하는 경우를 종종봅니다.
일모리

Apr/28/07 @ 12:30 am

line-height의 미스테리가 쉽지는 않습니다.