CLOSE SEARCH
POSTS IN CATEGORY: Web

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

Canvas on HTML5 – Color & Fill Style

canvas의 fillStyle이나 strokeStyle에는 아래와 같은 3가지 값을 지정할 수 있다.

  • CSS Color
  • CanvasGradient
  • CanvasPattern

1. CSS Color
CSS에서 사용하는 색상과 동일한 값을 사용할 수 있다. 기본값은 검은색이다.
es) ‘red’, ‘#00FF00’, ‘rgb(0, 0, 255)’ 등

 

2. CanvasGradient
LinearGradient, RadialGradient의 두가지 종류가 있다.

 

3. CanvasPattern
이미지나 비디오, 캔버스 등을 패턴으로 지정할 수 있다.

 

4. 투명도 지정

Canvas on HTML5 – canvas 선언 및 기본적인 그리기 사용

canvas 선언

canvas DOM 객체 생성

그리기 컨텍스트 생성

 

그리기 컨텍스트의 상태 저장과 복원

  • save() : 현재 그리기 컨텍스트의 상태를 스택구조에 저장한다. 저장되는 항목은 아래와 같다.
    • fillStyle
    • strokeStyle
    • globalAlpha
    • shadowOffsetX, shadowOffsetY
    • shadowColor
    • shadowBlur
    • lineWidth
    • lineCap, lineJoin
    • miterLimit
    • globalCompositeOperation
    • font
    • textAlign, textBaseline
  • restore() : 최근에 저장된 상태로 복원한다.

 

전체소스

HTML5에 새롭게 추가된 요소

video : 비디오 재생에 사용되는 요소

audio : 오디오 재생에 사용되는 요소

source :  비디오/오디오의 URL이나 종류를 지정하는데 사용하는 요소

figure : 문서안에 추가되는 내용을 표시하기 위해 사용하는 요소

canvas : 해상도에 의존적인 비트맵 캔버스

embed : 외부 플러그인이나 상호작용 요소를 추가할 지점을 나타내는 요소

 

section : 문서의 아웃라인을 구성하는 범용 섹션

nav : 네비게이션 메뉴

header : 섹션의 헤더

footer : 섹션의 풋터

article : 웹페이지로부터 독립된 내용을 담고있는 섹션의 한 종류

aside : 외부 섹션에 대한 추가 정보를 담고있는 섹션의 한 종류

hgroup : 제목과 하위제목을 하나로 묶는데 사용되는 요소

 

keygen : 키 쌍을 생성하는 컨트롤

output : 계산 결과를 나타내는 요소

progress : 진행상태를 표시하는 요소

meter : 미터기 형식으로 데이터를 표현하는 요소

 

details : 사용자가 열고 닫을 수 있는 상세정보를 표시하는 요소

datalist : 자동완성 기능에 사용되는 목록을 저장하기 위해 사용하는 요소

HTML 5 브라우저 지원 현황 & 기술문서 & 관련 리소스

현재 출시된 브라우저의 버전별 HTML5 관련 기능 지원여부를 확인할 수 있다.

http://caniuse.com

 

HTML5 공식 기술 문서

http://www.w3.org/TR/html5/

 

WHATWG(Web Hypertext Application Technology Working Group)

http://www.whatwg.org/

 

HTML5 검증

http://html5.validator.nu/

 

Modernizr 2 is your starting point for making the best websites and applications that work exactly right no matter what browser or device your visitors use.

http://www.modernizr.com/