오늘 오랜만에 글을 쓰려고 하는데, 오래전부터 정말 쓰고 싶었던 line-height 에 대해서 쓰고자 한다.
'내용보기' 를 클릭할 경우 다소 글내용이 매우 길기때문에, 글내용이 보고싶은 분만 보는 것이 좋을 듯 하다.
간단하게 내 경험담을 남겨볼 수도 있겠지만, 이왕 글쓰는 거 생략없이 모두 보여주려고 한다.
line-height 는 1픽셀의 오차도 없는 크로스브라우징에 있어서 반드시 필요한 존재이다..
소히 '랜더링' 이라 불려지는 브라우저마다 텍스트들을 표현하는 방식이 다르기 때문에 맞춰주기위한 요건이다.
line-height 단위는 매우 다양하게 쓸 수 있는데, normal, em단위, 1.2 처럼 단위 없이 숫자만 입력하거나
픽셀단위를 지정할 수가 있다.
나는 line-height 값을 픽셀(px) 단위로 주는 것을 좋아한다.
아래는 기본
line-height 를 재는 방법에 관한 이미지다.
포토샵에서 위와같은 창이 보여지는 데, psd의 텍스트를 클릭할경우 빨간테두리안의 숫자처럼 lline-height 값을 알 수가 있다.
만약 위와 같은 창이 보이지 않는 다면 포토샵 cs 영문판을 기준으로 설명을 해본다면 상단메뉴들중,
Window -> Character 를 체크하시면 저 창이 생기게 된다. 저 값을 재는 방법은 아래의 이미지를 보면 쉽게 알 수가 있다.
위의 이미지처럼 문장 첫 줄의 텍스트 윗부분부터 아랫줄의 텍스트 윗부분까지재면 line-height 의 수치를 알 수가 있다.
이제 실험을 해보쟙~
테스트 브라우저는 익스8, 익스7, 익스6, 파폭3, 오페라, 사파리, 크롬이며, 웹퍼블리셔분들이 본다는
브라우저는 다 테스트에 참가시켰다.
기본 스타일은 폰트사이즈 12픽셀, 글꼴은 돋움으로 하였고 색은 #888 이다.
코드는 아래처럼 최대한 단순하게 하였고, 사용된 이미지들은 가독성을 위해 박스를 만들고 문장의 길이가
동일한지 체크하기위하여 양사이드에 빨간색 선을 넣었다.
첫번째실험
위 이미지는 line-height 값이 없을 경우, 각 브라우저의 기본 line-height 값을 캡쳐한 이미지다.
브라우저마다 수치가 다른걸 알 수 있으며, 단 한개의 코드지만 벌써 픽셀의 오차가 존재하기 시작하고,
컨텐츠 내용이 긴 경우에는 line-height 수치의 차이로 인한 누적으로 크로스브라우징에 어긋나게 된다.
두번째실험
위 이미지는 테스트 브라우저들의 line-height 값을 동일하게 하기 위해 수치가 제일 작았던 line-height의 값 12픽셀을 주고,
익스6에서 확대한 후 캡쳐한 이미지다.. 익스6에서는 글자의 윗부분이 짤렸다는 걸 알수있다. 13픽셀을 주어도 동일한 현상이 나왔다.
세번째실험
위 이미지는 line-height 값을 브라우저의 기본 line-height 값들중 가장 큰 값이었던 14픽셀로 준 후에, 캡쳐한 이미지다.
브라우저 모두 동일한 랜더링을 보여주었고, 익스6에서의 글자 짤림현상도 발생하지 않았다.
실험을 통해 line-height 의 최소 단위값은 14픽셀인걸 알 수 있었다.
여기서 잠깐!
line-height 를 사용할때 픽셀단위를 권장하지 않는 이유가 있다. 예를 들어서 사용자가 게시판에서 글쓰기를 할 경우 위 첫번째 이미지처럼 사용자가 스타일을 변경해서 글을 입력 할 수 있는 에디터를 지원하는 글쓰기 폼인 경우 ine-height 의 값을 픽셀이라는 고정값을 사용하게되면 위 두번째 이미지처럼 겹치는 현상이 발생한다. 그래서 line-height 값을 픽셀로 고정시키는걸 권장하지 않는다.
네번째실험
line-height 의 설정을 단순히 'line-height:normal' 이라고 선언하게되면 각 브라우저마다 자신들의 기본
랜더링을 표현하기때문에, 각 브라우저마다 출력이 다름을 볼 수 있다.
다섯번째실험
단위가 없는 line-height 값의 최소값을 알기위해 1.0부터 시작을 하였다. 익스6에서 또 글자 윗부분 짤림 현상이 발생하였다.
1.1도 마찬가지로, 동일한 현상을 보여주었다.
여섯번째실험
대부분의 브라우저에서 1.2를 주었을 경우 line-height 의 픽셀단위 값은 14픽셀을 나타내었다. 그러나 익스 8에서는 15픽셀을 나타내었다.
일곱번째실험
동일한 랜더링을 얻고자 숫자를 다시 바꿧다. line-height 값을 1.3으로 설정하고 line-height의 픽셀수치를 재보니
1.2에서 1.3으로 소숫점 뒤에 숫자 1만 바꿧는데도 불구하고 픽셀은 2픽셀이나 증가하였다. (익스6. 파폭스3.0)
마치며..
정말 칼같은 크로스브라우징이 필요한 경우가 있다.. 동일한 박스 디자인이 다수의 psd에 존재하고 박스의 높이는 psd마다 다르며
특정 psd에서는 왼쪽 박스와 오른쪽 박스의 밑부분 선이 동일해야하는 경우다.
왼쪽 박스와 오른쪽 박스의 높이가 가변적이라 할때, height값을 줄수없는 상황이고,
이런경우가 line-height 값을 픽셀단위로 줘야하는 경우가 아닐지 생각해본다.
하지만 게시판쓰기 페이지에서 에디터 기능이 들어간 게시판이라면, 혹은 관리자가 관리자화면에서 글을 입력해서 사용자에게 보여줘야한다는 페이지라면 line-height 의 단위는 사용하지않고 숫자만 입력해서 값을 줘야한다.
위 이미지는 지원 브라우저목록을 나타내는 이미지입니다. 인터넷익스플로러, 파이어폭스, 오페라, 사파리, 크롬브라우저등에서 블로그 이용이 가능합니다.
댓글
제가 관련된 내용으로 생각나는게 있어서 트랙백 걸어두었습니다.
위의 댓글에 관한 답글입니다.보시고 참고가 되셨으면 좋겠네요.
트랙백 감사드립니다. 제가 모르는 부분이어서 더욱더 도움이 되었구욤~