[디알코] 텍스트 수직 정렬이 맘에 안든다면, line-height를.

디자인은 이쁘게 잘 해놨는데

코딩해서 브라우저로 확인한 디자인은 몬가 살짝 안맞고 아쉽다면,

특히나 텍스트 수직 위치가 좀 몬가 위가 더 여백이 많고 아래가 좁다면!

그럴땐 height 와 line-height 콤보를 쓰는게 좋다.

수직 위치가 살짝살짝 안맞는 경우가 종종 있었는데

예전엔 padding 으로 조절하고 그러고 그랬었다.

근데 패딩은 폰트가 뭐냐에 따라서, 브라우저가 뭐냐에 따라서 쪼꿈씩 달라지는 미세한 그런게 있기 땜시롱

이거저거 해본 결과 추천하는 것은!

하이트, 라인하이트 콤보다.

예를 들어 얘는 검색창인데

height:44px;

line-height:44px;

요렇게 잡았다.

저 회색 검색창 div 자체에 라인이랑 라인하이트를 같은 수치로 입력해두면

회색창 높이가 44픽셀, 그 안에 라인하이트도 44픽셀 요러케 하면

딱 적당히 중간 높이에 위치하게 할 수 있다.

패딩 말고 line-height 를 쓸 것!

 

이런 것도 마찬가지다.

특히나 한 라인에서 텍스트 글자가 어떤건 두껍고 크고, 어떤건 노말에 작은 글씨가 있는 그런 경우에는

텍스트 수직 정렬이 살짜쿵 안맞거나 그런 짜증나는 경우가 있는데

요럴 때는  긴 라인 하나 안에 들어가는 각각의 영역에 하이트, 라인하이트를 주면서 필요에 따라 조절해도 된다.

물론 위에 이미지에서는, 각각 다 하이트, 라인하이트가 52픽셀로 똑같다 ㅋㅋ

나는 table 태그는 별로 안좋아하는 편이라

저런거 만들때도 그냥 다 div 로 하는게 더 좋다.

전체 감싸는 div

각 한 줄 div

한 줄에 있는 각각의 div

한 줄에 있는 각각의 div

한 줄에 있는 각각의 div

요런 식으로 구성하는 편이다.

뭐~  더 좋은 방법도 있겠지만  나는 저게 편하다 ㅋㅋ