CLOSE SEARCH
POSTS TAGGED WITH: CSS

WebApps 페이지에서의 CSS 분기

IE의 경우 앞의 두 줄을 인식하지 못하기 때문에 3~5행과 같은 코드를 추가해서 IE용 CSS를 추가해야 한다. DAMN IE~!

CSS – 페이지 레이아웃에 관계없이 유연하게 표시되는 네비게이션 메뉴

웹페이지에 네비계이션 메뉴를 제공하는 방법 중 심미적으로 가장 뛰어난 방법은 플래시로 된 네비게이션을 제공하는 것이라고 생각한다.

하지만 iOS 기반의 디바이스에서는 플래시를 지원하지 않기때문에 사용자가 iOS 디바이스로 웹페이지에 접속할 경우 페이지를 이동할 방법이 없어진다. 그렇기 때문에 HTML 형식으로 메뉴를 구성해서 디바이스에 관계없이 네이게이션이 표시되도록 하는 것이 중요하다.

예전에는 디자이너가 포토샵으로 디자인한 이미지를 여러단계 중첩된 테이블 테그로 구성하여 페이지에 추가하고 자바스크립트로 마우스롤오버 효과를 구현하는 방식으로 메뉴를 구성했다. 하지만 이 방식은 네비게이션이 처음 제작한 크기로만 표시될뿐 다른크기에서는 구조가 망가지는 단점이 있다.  그러므로 웹페이지의 크기에 따라서 디자인의 일관성을 유지하면서 크기가 변경되도록 구현해야 한다.

1. 중첩된 테이블 대신 ul 테그를 이용해서 메뉴항목을 구성하자. 이 방식의 가장 큰 장점은 간결하다는 것이다. 유지보수를 위해 tr, td 태그 사이에서 방황할 필요가 없다.

 

2. 네비게이션바 스타일을 지정하는 CSS를 작성하자. 네비게이션에서 사용하는 각 태그의 스타일을 지정하되 특히 float 값을 필요에 맞게 잘 설정해야 한다.

 

이 방식은 메뉴를 구성하는 데이터(ul 테그의 내용)와 디자인(CSS)이 분리되어 있기 때문에 유지보수하기가 쉽다.

또한 화면 크기나 폰트 크기에 따라서 네비게이션이 일관성을 유지한 상태로 크기가 변경되므로 테이블 테그를 사용해서 구성한 메뉴에 비해 아주 유연한 네비게이션이 되었다!!

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 단위를 사용하면 폰트 크기에 따라 자동적으로 비율이 조절되는 장점이 있다.