CLOSE SEARCH

CSS – 유연한 텍스트 출력 구현

기존에 주로 사용하던 방식에서는 폰트 크기를 픽셀 값으로 고정한다.

이 방식은 어떤 브라우저나 장치에서도 텍스트가 동일한 크기로 보인다는 장점이 있지만 브라우저가 제공하는 텍스트 크기 변경 기능에 대응하지 못한다.
물론 페이지 전체를 확대하면 유사한 효과를 얻을 수 있겠지만 이 경우 역시 전체 스크롤이 늘어난다는 단점이 존재한다.

이 문제에 대한 최선의 해결책은 CSS를 사용해서 절대크기와 %단위 크기를 적절하게 혼용해서 텍스트를 출력하는 것이다.

CSS에서 텍스트이 크기를 지정하는 방법은 크게 4가지로 분류할 수 있다.

  • 절대크기를 이용하는 방법 : 총 7가지 크기 키워드가 있고 각 키워드간 크기 비율은 1.5이다. 폰트의 크기는 브라우저나 장치에 의해 결정된다.
    사용가능한 절대 크기 값은 아래와 같다. 

    • xx-small
    • x-small
    • small
    • medium
    • large
    • x-large
    • xx-large
  • 상대크기를 이용하는 방법 : 문서 구조상 상위 요소의 크기에 따라 자신의 크기를 지정하는 방법이다. 예를 들어 상위 요소가 small 인 경우 현재 요소가 larger 값을 가지면 현재 요소의 크기는 medium이 된다. 사용가능한 값은 아래와 같다.
    • smaller
    • larger
  • 단위를 이용하는 방법 : 상대값과 절대값을 모두 사용할수 있다.
    절대값을 사용하는 단위는 in, cm, mm, pt, pc 이다.
    상대값을 사용하는 단위는 아래와 같다. 

    • px : 장치나 디스플레이의 해상도의 상대적인 픽셀값
    • em : 상위 요소에 상대적인 크기
    • ex : 지정된 폰트의 높이에 상대적인 크기
  • 퍼센트값을 이용하는 방법 : 상위 요소의 크기에 상대적인 크기를 %단위로 지정한다.

 

좀 더 유연하게 변경된 CSS 코드

위의 코드는 신문기사에 사용한다고 가정하고 작성한 간단한 CSS 예제이다. 너무 간단하긴 하지만;;;
body를 small이라는 절대크기 키워드로 설정하고 나머지 요소에 대해서는 %값으로 크기를 설정하고 있다.
이렇게 구현하면 사용자가 브라우저에서 기본 폰트 크기를 변경함에 따라서 다른 폰트들의 크기가 지정된 비율로 적절히 변경되므로 전체적인 일관성을 유지할 수 있다.
또한 처음에 제시한 예전 방식처럼 px 단위로 크기를 지정한 경우에는 유지보수시 모든 요소들의 크기를 다시 계산해서 하나하나 수정해야 하지만
이 경우에는 body의 크기만 변경하면 된다.

이 방식에서는 %값이 중첩될 경우에 실제 폰트 크기가 에상과 다르게 나타날 수도 있기 때문에 중첩구조를 잘 살펴보아야 한다. 그리고 되도록이면 2단계 이상 중첩시키는 것은 피하는 것이 좋다.

줄 높이나 요소들간의 간격을 지정할 때 em 단위를 사용하면 폰트 크기에 따라 자동적으로 비율이 조절되는 장점이 있다.

Filed under: Web