쓸데없는 잔소리꾼

알파벳 순서로 본 HTML5 태그들

new : HTML5의 새로운 태그.

드림위버를 통해서 본 CSS 속성 알아보기

텍스트 글꼴, 배경 이미지 및 배경색, 간격 및 레이아웃 속성, 목록 요소 모양 등 CSS 규칙의 속성을 정의할 수 있습니다. 새 규칙을 만든 다음 속성을 설정합니다.

CSS 유형 속성 정의하기

Font-family 스타일의 글꼴을 설정합니다. 브라우저는 사용자의 시스템에 설치된 첫 번째 글꼴을 사용하여 텍스트를 표시합니다. Internet Explorer 3.0과 호환되게 하려면 Windows 글꼴을 목록의 앞쪽에 나열합니다.

Font-size 텍스트의 크기를 정의합니다. 숫자와 측정 단위를 선택하여 특정 크기를 선택하거나, 상대적인 크기를 선택할 수 있습니다. 픽셀 단위를 선택하면 브라우저에서 텍스트가 왜곡되지 않습니다.

Font-style [Normal], [Italic] 또는 [Oblique]를 글꼴 스타일로 지정합니다. 기본 설정은 [Normal]입니다.

Line-height 텍스트를 배치하는 행의 높이를 설정합니다. 이 설정을 일반적으로 줄 간격이라고 합니다. [Normal]을 선택하여 행 높이를 글꼴 크기에 따라 자동으로 계산하거나, 정확한 값을 입력하고 측정 단위를 선택합니다.

Text-decoration 텍스트에 underline, overline 또는 line-through을 추가하거나 텍스트를 깜빡이게(blink) 합니다. 일반 텍스트의 기본 설정은 [none]입니다. 링크의 기본 속성은 [underline]입니다. 링크 설정을 [none]으로 지정할 경우 특수한 클래스를 정의하여 링크의 밑줄을 제거할 수 있습니다.

Font-weight 글꼴의 굵은 문자에 특정한 값이나 상대적인 값을 적용합니다. [normal]은 400에 해당하고 [Bold]는 700에 해당합니다.

Font-variant 텍스트를 작은 대문자로 설정합니다. Dreamweaver의 문서 윈도우에는 이 속성이 표시되지 않습니다. Internet Explorer에서는 [Font-variant] 속성이 지원되지만 Navigator에서는 지원되지 않습니다.

Text-transform 선택 영역에 포함된 각 단어의 첫 번째 문자를 대문자로 설정하거나(capitalize) 텍스트를 모두 대문자(upper case) 또는 소문자(lower case)로 설정합니다.

Color 텍스트 색상을 설정합니다.

CSS 스타일 배경 속성 정의하기

[CSS 규칙 정의] 대화 상자의 [배경] 범주를 사용하여 CSS 스타일의 배경 설정을 정의합니다. 웹 페이지의 모든 요소에 배경 속성을 적용할 수 있습니다. 예를 들어, 텍스트 뒤, 표, 페이지 등의 페이지 요소에 배경색이나 배경 이미지를 추가하는 스타일을 만듭니다. 배경 이미지의 위치를 설정할 수도 있습니다.

Background-Color 요소의 배경색을 설정합니다.

Background-Image 요소의 배경 이미지를 설정합니다.

Background-repeat 배경 이미지 반복 여부와 반복 방식을 지정합니다.[No Repeat]는 요소의 시작 부분에 이미지를 한 번만 표시합니다.[Repeat]는 이미지를 요소의 뒤에 수평 및 수직 방향으로 바둑판식으로 배열합니다.[Repeat-x]와 [Repeat-y]는 각각 이미지를 수평이나 수직 띠 모양으로 표시합니다. 이미지는 요소의 테두리 안에 맞게 잘립니다.참고: [Repeat] 속성을 사용하여 body 태그를 재정의하고 바둑판식으로 배열되거나 반복되지 않는 배경 이미지를 설정합니다.

Background-attachment 배경 이미지를 원래 위치에 고정할지 아니면 내용과 함께 스크롤할지 지정합니다. 일부 브라우저에서는 [fixed] 옵션도 [scroll] 옵션으로 처리합니다. Internet Explorer에서는 이 속성이 지원되지만 Netscape Navigator에서는 지원되지 않습니다.

Background Position(X) 및 Background Position(Y) 배경 이미지의 처음 위치를 요소를 기준으로 지정합니다. 이 속성은 배경 이미지를 수직(Y)및 수평(X) 방향 모두에 대해 가운데에 정렬할 때 사용할 수 있습니다. [Background-attachment] 속성이 [fixed]이면 위치는 요소가 아닌 문서 윈도우에 대한 상대적인 위치로 지정됩니다.

CSS 스타일 블록 속성 정의하기

[CSS 규칙 정의] 대화 상자의 [블록] 범주를 사용하여 태그와 속성의 간격 및 정렬 설정을 정의합니다.

Word-spacing 단어 사이의 간격을 설정합니다. 특정 값을 설정하려면 팝업 메뉴에서 [value]를 선택하고 숫자 값을 입력합니다. 두 번째 팝업 메뉴에서 px, pt 등의 측정 단위를 선택합니다.참고: 음수 값을 지정할 수도 있지만 그럴 경우 브라우저에 따라 다르게 보입니다. Dreamweaver의 문서 윈도우에는 이 속성이 표시되지 않습니다.

Letter-spacing 문자 사이의 간격을 늘리거나 줄입니다. 문자 사이의 간격을 줄이려면 -4와 같은 음수 값을 지정합니다. 문자 간격 설정은 정렬된 텍스트 설정을 무시합니다. [Letter-spacing] 속성은 Internet Explorer 4 이상 및 Netscape Navigator 6에서 지원됩니다.

Vertical-align 해당 요소의 수직 정렬 방식을 지정합니다. Dreamweaver에서는 이 속성이 <img> 태그에 적용된 경우에만 문서 윈도우에 이 속성을 표시합니다.

Text-align 요소 안에서 텍스트가 정렬되는 방식을 설정합니다.

Text-indent 첫 번째 텍스트 행의 들여쓰기 간격을 지정합니다. 음수를 지정하여 내어쓰기를 할 수도 있지만 그럴 경우 브라우저에 따라 다르게 보입니다. Dreamweaver에서는 해당 태그가 블록 수준의 요소에 적용된 경우에만 문서 윈도우에 이 속성을 표시합니다.

White-space 요소 안의 공백을 처리하는 방법을 지정합니다. [normal], [pre] 및 [nowrap] 옵션 중에서 선택합니다. [normal]은 공백을 축소하고, [pre]은 텍스트가 pre 태그로 둘러싸여 있는 것처럼 공백을 처리합니다. 즉, 스페이스, 탭, 리턴을 포함한 모든 공백들을 그대로 둡니다. [nowrap]은 br 태그가 있을 때에만 텍스트 줄을 바꾸도록 지정합니다. Dreamweaver의 문서 윈도우에는 이 속성이 표시되지 않습니다.

Display 요소 표시 여부와 표시 방법을 지정합니다. [none]이 할당된 요소는 표시되지 않습니다.

CSS 스타일 상자 속성 정의하기

[CSS 규칙 정의] 대화 상자의 [상자] 범주를 사용하여 페이지의 요소 배치를 제어하는 태그와 속성의 설정을 정의합니다. 패딩 및 여백 설정을 적용할 때 요소의 각 측면에 설정을 적용하거나 [모두 동일] 설정을 사용하여 요소의 각 측면에 같은 설정을 적용할 수 있습니다.

Width 및 Height 요소의 폭과 높이를 설정합니다.

Float 텍스트, AP div, 표 등의 다른 요소를 주위에 배치할 요소의 측면을 설정합니다. 일반적으로 다른 요소가 부동 요소 주위를 둘러싸게 됩니다.

Clear AP 요소를 허용하지 않는 측면을 정의합니다. 지운 측면에 AP 요소가 나타나면, clear 설정이 있는 요소가 그 아래로 이동합니다.

Padding 요소의 내용과 테두리 사이의 간격(테두리가 없는 경우에는 여백) 크기를 지정합니다. 요소의 각 측면에 패딩을 설정하려면 [모두 동일] 옵션의 선택을 해제합니다.모두 동일 패딩 속성을 적용할 요소의 Top, Right, Bottom, Left에 동일한 패딩 속성을 설정합니다.

Margin 요소 테두리 사이의 간격(테두리가 없는 경우에는 패딩) 크기를 지정합니다. Dreamweaver에서는 이 속성이 단락, 머리글, 목록 등의 블록 수준 요소에 적용된 경우에만 문서 윈도우에 이 속성을 표시합니다. 요소의 각 측면에 여백을 설정하려면 [모두 동일]의 선택을 해제합니다.모두 동일 여백 속성을 적용할 요소의 Top, Right, Bottom, Left에 동일한 여백 속성을 설정합니다.

CSS 스타일 테두리 속성 정의하기

[CSS 규칙 정의] 대화 상자의 [테두리] 범주를 사용하여 요소 테두리의 폭, 색상, 스타일 등의 설정을 정의합니다.

유형 테두리의 스타일 모양을 설정합니다. 스타일이 표시되는 방식은 브라우저에 따라 다릅니다. 요소의 각 측면에 테두리 스타일을 설정하려면 [모두 동일]의 선택을 해제합니다.모두 동일 요소의 위, 오른쪽, 아래, 왼쪽 테두리에 동일한 테두리 스타일 속성을 적용합니다.

Width 요소의 테두리 두께를 설정합니다. [Width] 속성은 두 브라우저에서 모두 지원됩니다. 요소의 각 측면에 테두리 스타일을 설정하려면 [모두 동일]의 선택을 해제합니다.모두 동일 요소의 Top, Right, Bottom, Left 테두리에 동일한 테두리 폭을 적용합니다.

Color 테두리 색상을 설정합니다. 각 측면의 색상을 별도로 설정할 수 있지만 그럴 경우 브라우저에 따라 다르게 보입니다. 요소의 각 측면에 테두리 색상을 설정하려면 [모두 동일]의 선택을 해제합니다.모두 동일 요소의 Top, Right, Bottom, Left 테두리에 동일한 테두리 색상을 적용합니다.

CSS 스타일 목록 속성 정의하기

[CSS 규칙 정의] 대화 상자의 [목록] 범주를 사용하여 목록 태그에 사용할 불릿 크기, 유형 등의 목록 설정을 정의합니다.

List-style-type 불릿이나 숫자 모양을 설정합니다.

List-style-image 불릿에 사용할 사용자 정의 이미지를 지정합니다. [탐색](Windows) 또는 [선택](Macintosh)을 클릭하여 이미지를 찾거나 이미지 경로를 입력합니다.

List-style-Position 목록 항목 텍스트의 줄 바꿈 및 들여쓰기(outside) 여부 또는 왼쪽 여백을 기준으로 텍스트의 줄 바꿈(inside) 여부를 설정합니다.

CSS 스타일 배치 속성 정의하기

[배치] 스타일 속성은 페이지에서 선택한 CSS 스타일과 연관된 내용을 배치하는 방법을 결정합니다.

Position 브라우저에서 선택한 요소를 배치하는 방법을 다음과 같이 지정합니다.■ absolute는 [배치] 상자에 입력한 좌표를 사용하여 가장 가까운 절대 또는 상대 위치 조상이나, 절대 또는 상대 위치 조상이 없는 경우 페이지의 왼쪽 위 모서리에 대한 상대적 위치에 내용을 배치합니다.■ relative는 [배치] 상자에 입력한 좌표를 사용하여 문서의 텍스트 흐름에서 블록의 위치에 대한 상대적 위치에 내용 블록을 배치합니다. 예를 들어, 요소의 상대 위치를 각각 20픽셀의 위쪽 및 왼쪽 좌표로 지정하면 요소가 흐름의 일반 위치에서 오른쪽과 아래쪽으로 20픽셀씩 이동합니다. 또한 요소를 좌표의 위쪽, 왼쪽, 오른쪽 또는 아래쪽에 상대적이거나 상대적이지 않게 배치하여 절대 위치 자식의 컨텍스트를 설정할 수 있습니다.■ fixed는 [배치] 상자에 입력한 좌표를 사용하여 브라우저의 왼쪽 위 모서리에 대한 상대적 위치에 내용을 배치합니다. 내용은 사용자가 페이지를 스크롤할 때 해당 위치에 고정됩니다.■ static은 텍스트 흐름에서 해당 위치에 내용을 배치합니다. 이 위치는 배치 가능한 모든 HTML 요소의 기본 위치입니다.

Visibility 내용의 초기 표시 조건을 지정합니다. visibility 속성을 지정하지 않는 경우, 기본적으로 내용은 부모 태그의 값을 상속합니다. body 태그의 기본 visibility은 [Visible]입니다. 다음 visibility 옵션 중 한 가지를 선택합니다.■ Inherit는 내용 부모의 가시성 속성을 상속합니다.■ Visible은 부모의 값에 관계없이 내용을 표시합니다.■ Hidden은 부모의 값에 관계없이 내용을 숨깁니다.

Z-Index 내용의 겹침 순서를 결정합니다. 높은 Z-Index를 가진 요소가 낮은 Z-Index(또는 인덱스 없음)를 가진 요소 위에 나타납니다. 값은 양수 또는 음수일 수 있습니다. 내용이 절대적으로 배치된 경우 [AP 요소] 패널을 사용하여 간단하게 겹침 순서를 변경할 수 있습니다.

Overflow 컨테이너(예: DIV 또는 P)의 내용이 해당 크기를 초과하는 경우 수행할 작업을 결정합니다. 이러한 속성은 다음과 같이 확장을 제어합니다.■ Visible은 모든 내용이 보이도록 컨테이너의 크기를 늘립니다. 컨테이너는 아래쪽과 오른쪽으로 확장됩니다.■ Hidden은 컨테이너의 크기를 유지하면서 초과되는 내용을 자릅니다. 스크롤 막대는 제공되지 않습니다.■ Scroll은 내용이 컨테이너의 크기를 초과하는지 여부에 관계없이 스크롤 막대를 컨테이너에 추가합니다. 스크롤 막대를 추가하면 동적 환경에서 스크롤 막대가 나타나거나 사라짐에 따라 발생하는 혼동을 막을 수 있습니다. 이 옵션은 문서 윈도우에 나타나지 않습니다.■ Auto는 컨테이너의 내용이 경계를 벗어날 때만 스크롤 막대를 표시합니다. 이 옵션은 문서 윈도우에 나타나지 않습니다.

Placement 내용 블록의 위치와 크기를 지정합니다. 브라우저가 위치를 해석하는 방식은 [Position]에서의 설정에 따라 달라집니다. 내용 블록의 내용이 지정한 크기를 초과하면 [크기] 값이 무시됩니다. 위치와 크기의 기본 단위는 픽셀입니다. pc(파이카), pt(포인트), in(인치), mm(밀리미터), cm(센티미터), ems(전각), exs(반각), %(부모 값에 대한 백분율) 단위를 지정할 수도 있습니다. 약어 앞에는 3mm와 같이 공백 없이 값을 입력해야 합니다.

Clip 내용에서 보이는 부분을 정의합니다. 클립 영역을 지정하면 JavaScript와 같은 스크립트 언어를 사용하여 이 영역에 액세스하고 와이프(wipe)와 같은 특수 효과를 만드는 속성을 조작할 수 있습니다. 이러한 와이프(wipe) 효과는 [속성 바꾸기] 비헤이비어를 사용하여 설정할 수 있습니다.

CSS 스타일 확장 속성 정의하기

확장 스타일 속성에는 필터, 페이지 분할 및 포인터 옵션이 포함됩니다.참고: Dreamweaver에는 여러 가지 다른 확장 속성이 있으며 [CSS 스타일] 패널을 통해 이러한 속성에 액세스할 수 있습니다. [CSS 스타일] 패널([윈도우] > [CSS 스타일])을 열고 패널 아래에 있는 [범주 보기 표시] 버튼을 클릭한 다음 [확장] 범주를 확장하면 사용할 수 있는 확장 속성 목록을 쉽게 볼 수 있습니다.

Page-break-before 인쇄할 때 해당 스타일로 제어되는 객체의 앞이나 뒤에서 페이지를 나눕니다. 팝업 메뉴에서 설정할 옵션을 선택합니다. 이 옵션은 4.0 브라우저에서는 지원되지 않지만, 4.0 이후 브라우저 버전에서는 지원됩니다.

Cursor 포인터가 해당 스타일로 제어되는 객체 위에 놓일 때 포인터 이미지를 변경합니다. 팝업 메뉴에서 설정할 옵션을 선택합니다. 이 속성은 Internet Explorer 4.0 이상과 Netscape Navigator 6에서 지원됩니다.

Filter 해당 스타일로 제어되는 객체에 흐림, 반전 등의 특수 효과를 적용합니다. 팝업 메뉴에서 효과를 선택합니다.

위의 내용은 다음과 같이 <body> 태그안에 기술된 내용들이 표현되는 것입니다.
<html> 문서에서 무엇인가 표현하려고 하면 <body>태그안에 기술해 주면됩니다.
우리가 디자인하는 모든 태그들이 <body>내에서 사용되는 것입니다.
다음시간 부터는 <body>에서 사용되는 태그들을 알아보겠습니다.

<body onload="makewindow()">
 <h3>가을 나그네</h3><br>
 <div class="l2">이양우(鯉洋雨)</div><br>
 <div class="l1">그냥 떠나지는 마십시오.<br>
 비가 올 듯 합니다.<br>
 우산을 받쳐드십시오.<br>
 비가 그치면 서리가 내릴 테지요.<br>
 아직 몇 식구는 짐을 챙기지 않았습니다.<br>
 저 북풍이 찬 바람을 보낼 테지요<br>
 그러나 시간은 남았습니다.<br>
 철새들도 먼 길을 떠날 테지요.<br>
 오동 잎은 이미 선발로 떠났습니다.<br>
 피만 마른 억새 꽃도 그냥 피어있습니다.<br>
 서광과 코스모스들도 수근거립니다.<br>
 이젠 꽃씨들을 땅속에 묻고 갈 모양입니다.<br>
 나뭇잎들도 우왕좌왕 발길을 서성이구요.<br>
 매들을 바라보며 눈을 돌립니다.<br>
 헤어지기가 몹시 섭섭한 게지요.<br>
 그래 내년에 보자,<br>
 꼭 돌아올 테야,<br>
 어찌 튼 몸조심들을 해라.<br>
 떠나려는 표정들이<br>
 너무 을씨년스럽다.<p>
 <a href="http://www.barodoum.com">바로도움으로</a></div>
</body>

윈도우에서 PHP5 설치              
                      
1.PHP 다운로드                 
 PHP5를 다운로드한다.             
                      
2.압축을 풀어 생성되어진 php폴더를 원하는 위치에 이동시킨다.
                      
3.파일 복사                  
 3.1 php5ts.dll                 
  윈도우2000의 경우에는 C:\WINNT에 복사     
  그 이외에는 C:\Windows에 복사        
 3.2 php.ini-dist                
  php.ini으로 이름변경             
  윈도우2000의 경우에는 C:\WINNT에 복사     
  그 이외에는 C:\Windows에 복사

 
        
4.php.ini수정                  
 PEAR을 사용할 경우  include_path = ".;c:/php/includes;c:/php/pear"
 doc_root = "C:/Program Files/Apache Group/Apache/htdocs"
 extension_dir = "c:/php/ext"            
  php4에서는 extensions            
 php_mysql.dll, php_pgsql.dll 주석 해제         
 MySQL을 사용할 경우 libmysql.dll을 아래와 같이 복사   
  Windows 2000 C:\WINNT\system32        
  Windows 98/Me C:\Windows\system        
  Windows XP/Windows Server 2003 C:\Windows\system32

 
 
5. C:\Program Files\Apache Group\Apache\conf 수정    
 LoadModule php5_module c:/php/php5apache.dll 추가   
 AddModule mod_php5.c 추가            
 AddType application/x-httpd-php.php추가       
 AddType application/x-httpd-php-source.phps추가

필자소개

참고자료

교육

• "HTML V5 and XHTML V2"(Adriaan de Jonge, developerWorks, 2007년 11월): HTML V5와 XHTML V2를 통해 기존 버전을 개선하는 과정에서 개발자들이 선택한 접근 방식은 매우 달랐다. 이러한 접근 방식의 차이로 인해 결과도 달라졌다. 또한, 여러 해 만에 처음으로 곧 공개될 브라우저 버전의 경향이 불확실했다. 이러한 두 가지 표준의 세부적인 내용의 근간이 되는 전체적인 개념을 확인할 수 있다.
  
  
• "New elements in HTML5"(Elliotte Rusty Harold, developerWorks, 2007년 8월): HTML5의 몇 가지 새로운 요소에 대한 개요를 확인할 수 있다.
  
  
• "An Introduction to MathML"(David Carlisle, developerWorks, 2009년 12월): MathML은 W3C 권장사항으로 수학 표현식을 마크업하는 데 필요한 XML 어휘를 정의한다. HTML5를 사용하면 MIME 유형과 서버 구성을 변경하지 않아도 MathML을 직접 웹에 배치할 수 있을 것으로 보인다.
  
  
• "Android and iPhone browser wars, Part 1: WebKit to the rescue"(Frank Ableson, developerWorks, 2009년 12월): 이 기사는 두 개의 파트로 구성된 연재 기사 중 첫 번째로 브라우저 기반의 iPhone과 Android 애플리케이션을 개발하는 과정을 다룬다.
  
  
• "The future of HTML, Part 1: WHATWG"(Ed Dumbill, developerWorks, 2005년 12월): 두 개의 파트로 구성된 이 연재 기사에서 Edd Dumbill은 웹 작성자와 브라우저 개발자, 표준화 기구에서 제안하는 다양한 HTML 발전 방향을 살펴본다.
  
  
• w3schools.com의 HTML 튜토리얼에서 HTML에 관한 모든 것을 배울 수 있다.
  
  
• 이 CSS 튜토리얼에서는 CSS를 사용하여 다양한 웹 페이지의 양식과 레이아웃을 모두 한 번에 제어할 수 있는 방법을 배울 수 있다.
  
  
• JavaScript 튜토리얼: 웹의 스크립팅 언어를 사용하는 방법을 배울 수 있다.
  
  
• HTML5: A vocabulary and associated APIs for HTML and XHTML: Editor's Draft 13 January 2010: 최근에 발표된 HTML 스펙 Editor's Draft를 읽어보자.
  
  
• 곧 간행될 Dive Into HTML5(Mark Pilgrim, O'Reilly Media)에서 발췌한 글을 읽어보자.
  
  
• HTML5 갤러리에서 HTML5 마크업을 사용하는 웹 사이트를 확인할 수 있다.
  
  
• HTML5 Tag Reference: 알파벳 순서로 정렬된 HTML5 태그 참조를 확인할 수 있다.
  
  
• HTML5 doctor 웹 사이트에는 HTML5를 구현하는 데 도움이 되는 정보가 많다.
  
  
• HTML 5 Cheat Sheet에는 현재 지원되는 모든 태그와 해당 설명 및 속성 그리고 HTML4에서의 지원 상황이 표시되어 있다.
  
  
• CSS 3 Cheat Sheet: 여기에서 편리한 CSS3의 기본 기능과 인쇄 가능한 참조 카드를 확인할 수 있다.
  
  
• HTML5 데모 웹 사이트에는 다양한 HTML5 실험 및 데모 사이트를 가리키는 링크가 있다.
  
  
• 이 데모는 브라우저상에서 기능이 다양한 대화식 3D 애플리케이션을 구현하는 데 필요한 오픈 소스 웹 API인 O3D를 사용하여 브라우저의 3D 그래픽 렌더링 능력을 실제로 증명한다.
  
  
• lifehacker.com에서 How HTML5 Will Change the Way You Use the Web 기사를 읽어 보자.
  
  
• Yes, You Can Use HTML5 Today!: HTML5의 세계를 소개하는 또 다른 우수한 기사이다.
  
  
• css3.info.com: CSS3에 관한 모든 정보를 얻을 수 있다.
  
  
• Introduction to CSS3: 곧 공개될 CSS3 스펙의 W3C Working Draft를 읽어보자.
  
  
• Introducing the CSS3 Multi-Column Module에서는 W3C 다중 컬럼 모듈을 깊이 고찰한다. 이 모듈은 요소 내부에 있는 다중 컬럼으로 컨텐츠가 전달될 수 있도록 하기 위한 것이다.
  
  
• Mozilla.org에서 CSS3 컬럼을 배워보자.
  
  
• CSS3 transitions and 2D transforms: 이 기사에서 Opera의 CSS3 트랜지션과 변환에 관해 배울 수 있다. 또한, SVG와 SMIL도 확인하자.
  
  
• Mozilla.org에서 제공하는 이 캔버스 튜토리얼에는 HTML 페이지에서 <canvas> 요소를 구현하는 방법이 설명되어 있다.
  
  
• Apple Developer Central에 있는 Using the Canvas에서는 Javascript 캔버스 오브젝트를 지원하는 WebKit 기반 애플리케이션 및 Safari, Dashboard를 살펴본다. Javascript 캔버스 오브젝트를 이용하면 HTML 내에서 임의의 컨텐츠를 편리하게 그릴 수 있다.
  
  

제품 및 기술 얻기

• Theora는 Xiph.org Foundation의 개방된 비디오 압축 형식으로 무료이다.
  
  
• O3D AP: O3D는 브라우저상에서 기능이 다양한 대화식 3D 애플리케이션을 구현하는 데 필요한 오픈 소스 API이다.
  
  
• IBM 제품 평가판을 다운로드하여 DB2, Lotus, Rational, Tivoli 및 WebSphere의 애플리케이션 개발 도구와 미들웨어 제품을 사용해 보자.
  
  
• 다운로드하거나 DVD로 이용할 수 있는 IBM 시험판 소프트웨어를 사용하여 후속 오픈 소스 개발 프로젝트를 구현해 보자.
  
  

토론

• developerWorks 블로그 콜렉션에서 developerWorks에 관한 모든 사항을 토론해 보자.
  

요약

본 튜토리얼에서는 직접 사용해 볼 수 있는 예제를 이용하여 HTML5와 CSS3를 이용한 개발 과정을 소개한다. HTML5는 초기 개발 단계에서 많이 사용되며 HTML5에서 제안하는 새로운 기능을 다양한 브라우저 벤더에서 어떻게 채택하고 있는지 확인하는 것은 흥미로운 일이다. 현재, 주요 브라우저 중에서 Opera와 Safari, Firefox, Chrome은 릴리스할 때마다 더욱 많은 개선사항을 지원하고 있으며 2010년 말까지는 대부분의 HTML5 기능을 지원할 수 있기를 기대한다.

그러나 앞으로 HTML5가 널리 확산되기 위해서는 몇 가지 문제점을 해결해야 한다. 먼저, 실제적인 문제로 시장에서 가장 널리 사용되고 있는 브라우저인 Microsoft Internet Explorer에서의 HTML5에 대한 지원이 부족하다는 점을 들 수 있다. IE9의 첫 번째 베타 버전이 릴리스될 때까지 개발자들이 HTML5의 모든 기능을 IE에서 테스트할 수 있을 것으로 보이지는 않는다. 적어도 지금은 HTML5로 개발된 사이트가 IE8에서는 단계적으로 성능이 축소되며 추가로 약간의 작업을 하여 폴백을 삽입하면 IE 사용자도 별다른 문제 없이 사이트를 이용할 수 있다.

또 다른 문제는 비디오 코덱과 컨테이너에 관련된 사항이다. 현 상태에서 <video> 요소는 웹의 비디오 표준으로서 Flash 비디오를 대체할 수 없다. 여러 가지 코덱을 지원하는 다양한 브라우저에서는 비디오를 Theora와 H.264로 인코드하는 것보다는 Flash를 사용하는 것이 훨씬 더 수월하다. HTML5 비디오와 관련해서 금년에는 새로운 돌파구가 열리기를 기대해 본다. 간단히 말해서, HTML5와 CSS3는 매력적인 표준이며 지금 당장, 웹 사이트에서 이러한 새로운 스펙을 준수하여 미래를 대비할 수 있다. 본 튜토리얼에서 개략적으로 살펴본 단계를 따라가다 보면 HTML5에서 제공하는 다른 흥미로운 기능을 쉽게 확인할 수 있다.

기사의 원문보기

• Create modern Web sites using HTML5 and CSS3

종합하기: 샘플 HTML5/CSS3 페이지

이 단계에서는 HTML5와 CSS3에서 제공하는 멋진 새 기능을 사용하는 웹 페이지를 직접 작성하기 시작한다. 이번 섹션에서는 새로 추가된 다양한 기능이 포함된 HTML 페이지를 작성한다. 이번 섹션에서는 HTML 페이지의 개발 과정을 다음과 같은 서브섹션으로 구분한다.

• 기본 HTML5 페이지의 구조
• 새로운 시맨틱 요소의 사용
• <video> 요소에 대한 소개
• 웹 양식 개선사항
• <canvas> 요소와 2D 드로잉 API

전체 소스는 하나의 HTML 파일(index.html)로 작성된다(다운로드 참조). 컴퓨터의 어느 위치에서나 이 파일을 열 수 있으며 로드하기 위해 웹 서버로 전개할 필요가 없다. 일부 브라우저에서는 로컬에서의 스크립트 실행과 관련된 경고 메시지가 표시될 수 있으므로 필요하면 동적 스크립팅 기능이 실행 중인지 확인한다.

이 과정에서 HTML 페이지에 적용할 CSS 규칙을 외부 스타일시트 파일(styles.css)에 추가한다. 이 샘플 페이지에서는 border-radius, text-shadow 및 box-shadow와 같은 새로운 CSS3 특성에 대한 몇 가지 예를 살펴본다.

이 정도만 알아도 일상적인 용도로 사용하기에는 충분하다. 그러면 HTML5를 사용해 보도록 하자.

기본 HTML5 페이지

알고 있는 바와 같이 웹 브라우저는 HTML 문서에 올바른 doctype이 있는지에 따라 다양한 모드로 동작한다. 올바른 doctype이 없는 경우, 브라우저는 쿼크 모드로 동작하며 일부 비표준 기능을 유지하여 역호환성을 지원한다. 올바른 doctype이 있는 경우, W3C와 IETF 표준에 따라 브라우저는 표준 모드로 동작한다.

HTML5의 doctype은 <!doctype html>과 같이 매우 단순하다.

작성한 모든 HTML5 페이지의 맨 위에 이 행을 삽입해야 한다. 계속해서 index.html 페이지의 기본적인 구조를 정의해 보도록 하자. 이 페이지에 대한 코드는 Listing 1에 있다.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>HTML5 Demo</title>
        <link rel="stylesheet" href="styles.css" />
        <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk
/html5.js"></script>
        <![endif]-->
    </head>
    <body>

    </body>
</html>

최근의 XHTML 특징과는 다르게 첫 행에 있는 <html> 태그에는 더 이상 xmlns나 xml:lang 속성이 필요 없으며 lang 속성만 있으면 된다. 마찬가지로 <meta> 요소는 HTML 페이지의 문자 인코딩을 정의하는 데 필요한 새로운 속기 속성 문자 세트로 구성되어 있다. 이러한 변화로 인해 코드 작성이 수월해질 뿐만 아니라 단순한 작업을 수행하는 데 필요한 코드 수도 줄어든다. 이전 방식도 여전히 유효하다.

또한, <link> 요소에 type 속성이 없는 이유가 궁금할 수도 있다. 현재 CSS에서는 스타일시트 유형만을 지원하며 모든 최신 브라우저에서는 아무것도 지정하지 않으면 유형이 text/css라고 가정하기 때문에 type 속성이 필요 없다. 또한, 원하는 경우에는 type 속성을 제공할 수 있다.

Listing 1에서 마지막으로 살펴볼 사항은 <script> 요소이며 이 요소는 외부에서 호스트되는 Javascript 파일(html5.js)을 로드한다. Microsoft Internet Explorer 브라우저 버전 8에서도 새 HTML5 요소를 지원하지 않으며 이 브라우저는 <article>, <section>, <header> 등과 같은 요소를 인식하지 못한다. 이 브라우저에서는 이러한 요소가 인식되지 않을 뿐만 아니라 이러한 요소에 양식이 지정되지도 않는다. 이러한 문제점을 해결할 방책은 Javascript 함수 document.createElement()를 사용하여 각 태그를 처리할 수 있는 더미 요소를 작성하는 것이다. 이 스크립트는 새로 추가된 모든 HTML5 요소를 대상으로 이러한 작업을 수행하므로 사용자는 이러한 작업을 신경 쓰지 않아도 된다. 이 스크립트를 모든 HTML5 페이지에 삽입할 것을 권장한다.

그런 다음, 새로운 시맨틱 요소 중 일부를 HTML 페이지에 추가하여 이 페이지의 시각적 구조를 작성한다. 또한, HTML 페이지가 더 멋지게 보일 수 있도록 몇 가지 스타일시트 규칙을 적용한다.

새로운 시맨틱 요소의 사용

새 시맨틱 HTML5 요소를 어떻게 사용해야 하는지 확인하기 위해 이제 이러한 요소를 index.html 파일에 추가한다. 이러한 요소의 기본 구조는 대략 다음과 같다.

• header
  
  • hgroup
• nav
• article
  
  • header
  • section
    
    • header
• footer

보는 바와 같이 페이지 맨 앞에는 header가 있고 그다음에는 nav, articel, footer가 순서대로 배치된다. header에는 hgroup 요소를 사용하여 다수의 표제를 배치할 수 있다. article 요소 아래에는 header와 section 요소가 있으며 section 요소에도 자체 header 요소가 있다. 이러한 코드는 Listing 2에 있으며 이 코드를 Listing 1의 처음과 마지막 <body> 태그 사이에 추가해야 한다.

<header>
    <hgroup>
        <h1>Company Name</h1>
        <h2>An example of HTML5 and CSS3 in action</h2>
    </hgroup>
</header>

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>
</nav>

<article>
    <header>
        <time datetime="2010-01-12" pubdate>
            <span>Jan</span> 12
        </time>
        <h1>
            <a href="#" title="Link to this post" 
rel="bookmark">Article Heading</a>
        </h1>
    </header>
    <p>This is an article that demonstrates some of the new features 
that HTML5 and CSS3 has to offer. This article contains several sections, each 
with its own heading, as well as a video element which will play a video without 
Flash on browsers that support it.</p>
    <section>
        <header>
            <h1>This is a section heading</h1>
        </header>
        <p>This is an example of a basic section of a document. 
A section can refer to different parts of a document, application, or page. 
According to the draft W3C spec, HTML5 sections usually have headings.</p>
    </section>
</article>

<footer>
    <p>&copy; 2009 Company Name. All rights reserved.</p>
</footer>
                

Listing 2에 있는 코드는 별다른 설명이 필요 없다. 기본 <header> 요소는 두 개의 표제, 즉 제목 <h1> 요소와 부제 <h2> 요소가 있는 <hgroup> 요소로 구성된다. 기본 <nav> 요소에는 세 개의 항목이 순서와 관계없이 표시되어 있으며 각 항목은 웹 사이트의 가상 페이지를 가리키는 링크이다. <article> 요소에는 기사의 공개 날짜를 지정하는 <time> 요소가 포함된 자체 <header> 요소가 있다. 이 요소에는 datetime 속성이 포함되어 있으며 이 속성은 컴퓨터에서 읽기 쉬운 표준화된 게시 날짜 양식을 지정한다. time 요소의 내용은 "Jan 12"로 사용자가 쉽게 확인할 수 있다. pubdate 속성은 해당 기사의 공개 날짜를 표시한다.

이 header 요소 밑에는 일반적인 HTML 단락이 있고 이 요소 다음에는 새로운 <section> 요소가 있으며 이 section 요소에는 해당 섹션의 제목과 단락으로 구성된 <header> 요소가 포함되어 있다. 본 튜토리얼의 나머지 섹션에서는 작성한 페이지의 추가 영역에 해당하는 섹션을 추가로 작성한다.

CSS를 사용하여 이 페이지의 양식을 아직 지정하지 않았기 때문에 브라우저에서 이 페이지를 열면 모양이 좋지않다. 몇 가지 양식을 추가하여 이 페이지를 좀 더 멋지게 만들어 보자. Listing 3에 있는 코드를 styles.css 파일에 추가한다.

 * {
    font-family: Lucida Sans, Arial, Helvetica, sans-serif;
}

body {
    width: 480px; margin: 0px auto;
}

header h1 {
    font-size: 36px; margin: 0px;
}

header h2 {
    font-size: 18px; margin: 0px; color: #888;
    font-style: italic;
}

nav ul {
    list-style: none; padding: 0px; display: block;
    clear: right; background-color: #666;
    padding-left: 4px; height: 24px;
}

nav ul li {
    display: inline; padding: 0px 20px 5px 10px;
    height: 24px; border-right: 1px solid #ccc;
}

nav ul li a {
    color: #EFD3D3; text-decoration: none;
    font-size: 13px; font-weight: bold;
}

nav ul li a:hover {
    color: #fff;
}

article > header time {
    font-size: 14px; display: block; width: 26px;
    padding: 2px; text-align: center; background-color: #993333;
    color: #fff; font-weight: bold; -moz-border-radius: 6px;
    -webkit-border-radius: 6px; border-radius: 6px; float: left;
    margin-bottom: 10px;
}

article > header time span {
    font-size: 10px; font-weight: normal;
    text-transform: uppercase;
}

article > header h1 {
    font-size: 20px; float: left;
    margin-left: 14px; text-shadow: 2px 2px 5px #333;
}

article > header h1 a {
    color: #993333;
}

article > section header h1 {
    font-size: 16px;
}

article p {
    clear: both;
}

footer p {
    text-align: center; font-size: 12px;
    color: #888; margin-top: 24px;
}

대부분 이러한 CSS 규칙에는 한동안 CSS에서 사용할 수 있었던 특성이 포함되어 있으며 CSS 규칙 article > header time에 Mozilla와 WebKit 기반 브라우저의 브라우저별 특성이 포함된 border-radius 특성이 있다는 것을 확인할 수 있다. 이 특성을 지원하는 Firefox, Safari, Chrome과 같은 브라우저에서는 date/time 상자의 모서리가 둥글게 표시된다.

또한, article > header h1 규칙에 text-shadow 특성이 사용되었다는 것을 확인할 수 있다. 대부분의 최신 브라우저에서 이러한 특성을 지원한다.

이 섹션에서 소개한 두 가지 CSS3 특성의 장점은 단계적으로 기능을 축소할 수 있다는 점이다. 다시 말해서, 방문자의 웹 브라우저에서 이러한 새로운 특성이 지원되지 않는 경우에는 이 특성은 간단히 무시되며 해당 요소는 기타 지원되는 특성에 따라 양식이 지정된다. 이러한 내용이 포함된 페이지는 그림 2에 있는 스크린샷과 같은 형태로 표시된다. (적어도 Mac OS X의 Safari 4에서는 이렇게 보인다.)

다음은 <video> 요소와 이 요소를 사용하여 HTML5 페이지에 Theora 비디오 파일을 삽입하는 방법을 살펴본다.

<video> 요소에 대한 소개

이제, index.html 파일에 브라우저에서 제공하는 플레이백 제어 세트와 비디오를 추가한다. 이 샘플에 삽입된 비디오는 Theora 비디오로 Firefox와 Google Chrome에서만 재생된다. 현재, Safari에서는 H.264로 인코딩된 비디오만 지원한다. Listing 2에 있는 마지막 닫기 </section> 태그와 닫기 </article> 태그 사이에 Listing 4의 코드를 추가한다.

<section>
    <header>
        <h1>This is a video section</h1>
    </header>
    <p>
        <video src="http://www.double.co.nz/video_test/transformers480.ogg" 
controls autoplay>
            <div class="no-html5-video">
                <p>This video will work in Mozilla Firefox or Google 
Chrome only.</p>
            </div>
        </video>
    </p>
</section>

보는 바와 같이 먼저, 새로운 섹션을 작성하여 HTML5 페이지에 비디오를 표시한다. 이 섹션에는 header 요소가 있으며 그 뒤에 비디오가 삽입된다. 여기서 사용하는 비디오는 트랜스포머 1편의 예고편이며 src 속성을 사용하여 외부 웹 사이트에서 이 비디오를 로드한다. controls 속성은 비디오 재생에 필요한 브라우저 표준 제어를 표시하도록 해당 브라우저에 명령한다. 그리고 autoplay 속성은 비디오를 자동으로 재생하도록 브라우저에 명령한다.

열기와 닫기 <video> 태그 사이에 no-html5-video 클래스가 지정된 <div> 요소를 작성했으며 이 요소는 Theora 비디오 코덱이나 <video> 요소를 지원하지 않는 브라우저를 사용하여 이 비디오를 보려고 하는 사용자에게 메시지를 표시한다.

브라우저에서 이 페이지를 실행하기 전에 styles.css 페이지에 몇 가지 새로운 규칙을 추가하자. styles.css 파일의 맨 밑에 Listing 5에 있는 규칙을 추가하면 된다.

article > section video {
    width: 480px; height: 200px;
}
article > section div.no-html5-video,
article > section div#no-canvas {
    width: 480px; height: 40px; border: 1px solid #993333;
    text-align: center; color: #993333; font-size: 13px;
    font-style: italic; background-color: #F7E9E9;
}

이 규칙은 비디오 컨테이너 요소의 크기를 정의할 뿐만 아니라 HTML5 비디오나 Theora 형식을 지원하지 않는 브라우저를 사용하는 방문객에게 표시할 오류 메시지를 지정한다. Firefox나 Chrome에서 이 페이지를 열면 다음과 같은 화면을 확인할 수 있다(그림 3 참조).

간단하지 않은가? 이제 Internet Explorer나 Opera와 같은 브라우저에서 이 페이지를 열어 보자. 그림 4의 밑 부분에 있는 것과 같은 오류 메시지가 표시된다. Safari에서 이 페이지를 보려고 하면 브라우저에 비디오 플레이어가 표시되기는 해도 비디오가 재생되지는 않는다.

다음에는 플레이스홀더 텍스트, 자동 초점과 같은 일부 새로운 웹 양식 기능과 range, datetime, email과 같은 새로운 입력 유형이 포함되어 있는 양식을 작성한다.

웹 양식 개선사항

HTML5에서 상당히 저평가된 내용 중 하나는 몇 가지 새로운 양식 제어를 도입했다는 점으로 이러한 기능은 개발자들이 양식 기반의 웹 애플리케이션을 작성할 때 유용하다. 브라우저 위젯과 기능 면에서 보면 현재는 이러한 양식 제어에 대한 지원이 매우 부족하지만 이러한 제어는 보통의 텍스트 상자로 단계적으로 성능이 축소되므로 현재 이러한 제어를 코드에서 안전하게 사용할 수 있으며 브라우저에서 이러한 개선사항을 지원하는 경우에는 이러한 기능을 자동으로 사용할 수 있게 된다.

Listing 6에 있는 코드를 Listing 4에서 작성한 비디오 섹션의 닫기 </section> 태그 밑에 직접 추가한다.

<section>
    <header>
        <h1>This is a feedback form</h1>
    </header>
    <p><form>
        <label for="contact_name">Name:</label>
        <input id="contact_name" placeholder="Enter your name" 
autofocus><br />
        <label for="contact_email">E-mail:</label>
        <input type="email" id="contact_email" placeholder="Enter 
your email address"><br />            
        <label for="contact_phone">Phone:</label>
        <input type="tel" id="contact_phone" placeholder="Enter your 
phone number"><br />
        <label for="contact_callback">Callback on:</label>            
<input type="datetime" id="contact_callback"><br />
        <label for="contact_priority">Priority:</label>
        <input type="range" min="1" max="5" value="1" 
id="contact_priority"><br /><br />
        <input type="submit" value="Request Call">
    </form></p>
</section>

Listing 6에 있는 첫 번째 양식 요소에는 type 속성이 없으므로 기본값인 텍스트로 설정된다. 이 요소에는 플레이스홀더 텍스트 "Enter your name"이 있으며 자동 초점이 설정되어 있다는 것을 알 수 있다. 브라우저 지원은 페이지가 렌더링되었을 때 이 요소에 맞춰 자동으로 전환된다.

다음 요소는 "email" 유형이며 여기에도 플레이스홀더 텍스트 값이 포함되어 있다. 특별히 이러한 유형의 입력 요소를 인식하는 브라우저는 Opera로 이 브라우저는 email 필드라는 것을 강조하기 위해 해당 필드에 메일 아이콘을 표시한다.

다음 필드는 "Callback on:" 레이블이 있는 datetime 필드이다. 브라우저를 지원하는 과정에서 이 필드에 날짜와 시간 선택기가 표시된다. Opera에서는 이 필드가 시간을 선택할 수 있는 스피너와 날짜 선택기가 있는 텍스트 상자, 이렇게 두 가지 제어로 표시된다.

마지막으로 min, max 및 속성값 세트가 있는 range 유형으로 구성된 제어를 확인할 수 있다. Safari, Chrome 및 Opera에서는 이 제어가 슬라이더로 렌더링되며 기본적으로 최소값 1, 최대값 5로 설정된다. 지원되지 않는 브라우저에서는 단순히 텍스트 값이 1로 설정된 텍스트 상자로 표시된다.

이제 매우 단조롭고 간단한 양식에 몇 가지 세련된 기능을 추가해 보자. styles.css 파일에 다음 규칙을 추가한다(Listing 7 참조).

article > section form {
    border: 1px solid #888;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;    
    -moz-box-shadow: 10px 10px 5px #888;
    -webkit-box-shadow: 10px 10px 5px #888;
    box-shadow: 10px 10px 5px #888;
    background-color: #eee;
    padding: 10px; margin-bottom: 30px;
}

article > section label {
    font-weight: bold; font-size: 13px;
}

article > section input {
    margin-bottom: 3px; font-size: 13px;
}

Listing 7을 자세히 살펴보면 상자의 모서리를 둥글게 하기 위해 border-radius 속성을 양식 컨테이너에 추가하였다는 것을 알 수 있다. 이외에도 box-shadow, background-color(연회색), padding 속성을 추가하였다.

먼저, Opera에서 이 양식이 어떻게 표시되는지 살펴보자. Opera에서는 이러한 새 HTML5 웹 양식 입력 유형을 대부분 지원한다(그림 5 참조).

Email 필드 옆에 메일 아이콘이 있고 날짜 및 시간 필드 제어가 새로 추가된 것을 확인할 수 있다. 스피너의 드롭 다운 필드를 클릭하면 Opera의 달력 위젯이 그림 6과 같이 열린다.

또한, 슬라이더 제어를 확인할 수 있으며 이 제어는 Opera에서 렌더링되었을 때가 오히려 더 단순해 보인다. 그러나 실망스럽게도 Opera에서는 border-radius나 box-shadow 속성을 지원하지 않는다. 따라서 이 양식에는 이러한 두 가지 효과가 모두 적용되지 않았다. 이제 같은 페이지를 Safari에서 열어서 이러한 CSS3 효과가 어떻게 표시되는지 확인해 보자(그림 7 참조).

WebKit를 기반으로 하는 Safari는 상자의 그림자 효과와 둥근 모서리를 정확하게 렌더링했다. 이러한 효과는 매력적이지만 단순한 시각적 효과에 불과하다. Mozilla Firefox와 Google Chrome에서도 이러한 효과는 동일하게 표시된다. 또한, Safari에서는 플레이스홀더 텍스트 기능을 지원하고 range 입력 유형 대신 슬라이더를 구현하며 슬라이더는 Opera에서와는 다르게 훨씬 더 멋지게 표시된다는 것을 알 수 있다. 이 튜토리얼의 마지막 섹션에서는 <canvas> 요소와 2D 드로잉 API를 사용하여 웃는 얼굴을 한 간단한 비트맵 이미지를 작성하는 방법을 살펴본다.

<canvas> 요소와 2D 드로잉 API

<canvas> 요소를 사용하려면 먼저 HTML5 페이지에 이 요소를 추가해야 한다. 이전 섹션에서 웹 양식을 적용하기 위해 index.html에 추가한 코드 아래에 Listing 8에 있는 코드를 직접 추가한다.

<section>
    <header>
        <h1>This is an 2D Canvas section</h1>
    </header>

    <p>
        <canvas id="my_canvas" width="480" height="320"></canvas>
        <div id="no-canvas">
            <p>You need a Canvas-compatible browser to view this area.</p>
        </div>
    </p>
</section>

이 코드는 비교적 간단하다. 넓이와 높이, 고유 ID 속성을 지정하면서 canvas 요소를 선언하면 된다. <canvas> 태그에 별도의 닫기 태그가 있어야 하는지는 Mozilla 브라우저와 WebKit 브라우저가 각기 다르지만 열기 태그와 닫기 태그 사이에 코드를 삽입하지 않는 한, 두 경우 모두 같은 방식으로 렌더링된다. Javascript를 활용하여 지원되지 않는 브라우저의 사용자에게 바로 no-canvas 오류 메시지를 표시한다.

다음은 2D 드로잉 API를 활용하여 캔버스에 이미지를 작성하는 Javascript 코드를 추가한다. index.html 파일의 맨 윗부분에 있는 닫기 </head> 태그 바로 앞에 다음 코드를 추가한다(Listing 9 참조).

<script>
function loadCanvas() {
    var canvas = document.getElementById('my_canvas');
    if(canvas.getContext) {
        var ctx = canvas.getContext('2d');
        ctx.beginPath();
        ctx.arc(245,160,150,0,Math.PI*2,true);
        ctx.fillStyle = "rgb(255,255,204)";
        ctx.fill();
        ctx.stroke();

        ctx.fillStyle = "black";
        ctx.beginPath();
        ctx.arc(200,110,15,0,Math.PI*2,true);
        ctx.fill();

        ctx.beginPath();
        ctx.arc(280,110,15,0,Math.PI*2,true);
        ctx.fill();

        ctx.beginPath();
        ctx.arc(240,170,20,4,Math.PI*2,true);
        ctx.stroke();

        ctx.beginPath();
        ctx.arc(240,190,60,0,Math.PI,false);
        ctx.stroke();
    } else {
        document.getElementById('my_canvas').style.display = 'none';
        document.getElementById('no-canvas').style.display = 'block';
    }
}
</script>

Listing 9에서는 페이지의 header 요소에 Javascript 블록을 추가하고 loadCanvas 함수를 정의한다. 이 함수는 고유 ID가 my_canvas인 요소를 선택하여 canvas 변수를 인스턴스화한다. 그런 다음, if문을 사용하여 이 요소에서 canvas 컨텍스트를 가져올 수 있는지 판별한다. 가져올 수 있는 경우에는 해당 브라우저에서 <canvas> 요소를 지원하게 되고 그렇지 않은 경우에는 지원하지 않게 된다. 그리고 canvas 요소 대신 오류 메시지가 표시된다. 이 과정은 이 함수의 마지막 부분에 있는 if문의 else 블록에서 처리된다.

지원되는 캔버스가 발견되면 이 함수는 2D 컨텍스트(ctx)를 가져오며 ctx를 사용하여 캔버스에 모양을 그린다. 이 함수는 다섯 개의 모양을 작성한다. 먼저, ctx.beginPath() 함수를 호출하여 경로를 그린다. 그다음 ctx.arc() 함수를 사용하여 캔버스 중심에 반경 150픽셀의 완전한 원호를 그린다. ctx.fill() 함수와 ctx.stroke() 함수를 호출하기 전에 채우기 양식을 노란색으로 설정하여 윤곽선 색상이 검정색인 노란색 큰 원을 작성한다. 이것이 기본 형태이다.

그 다음에는 채우기 양식을 검정색으로 설정하여 눈을 그린다. 이와 같은 완전한 원은 ctx.arc() 함수와 ctx.fill() 함수를 사용하여 작성하며 ctx.arc() 함수에서는 반경을 15픽셀로 설정하고 ctx.fill() 함수를 호출하여 원을 그린다.

다음 코드 블록에서는 코를 작성하는데, 코는 완전한 원이 아니라 호이며 방금 그린 눈 사이의 중심 밑에 배치한다. 코는 채우기를 하지 않는다. 따라서 ctx.stroke() 함수를 대신 사용한다.

마지막으로 눈 밑에 큰 반원형 호로 선을 그려서 입을 작성한다. 결과는 <canvas> 요소를 지원하는 모든 브라우저에서 동일하게 표시된다. (Internet Explorer는 물론이고 Firefox, Safari, Chrome 및 Opera와 같은 대부분의 최신 브라우저에서는 유용한 Javascript 라이브러리를 일부 사용하여 canvas 요소를 지원한다.)

index.html에서 마지막으로 해야 할 작업은 창에서 로딩이 완료되었을 때 loadCanvas() 함수를 호출하도록 <body> 요소를 변경하는 일이다. 다음 행을 사용하여 닫기 <body> 태그를 간단히 바꾼다. <body onload="loadCanvas();">

마지막으로 styles.css 파일에 다음 규칙을 추가하여 캔버스 컨테이너에 몇 가지 멋진 상자 음영 처리를 추가한다(Listing 10 참조).

article > section div#no-canvas {
    display: none;
}

canvas {
    border: 1px solid #888;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;    
    -moz-box-shadow: 10px 10px 5px #888;
    -webkit-box-shadow: 10px 10px 5px #888;
    box-shadow: 10px 10px 5px #888;
    background-color: #eee;
}

최종 결과는 그림 8에 있는 이미지와 같다.

이것으로 본 튜토리얼의 샘플 페이지는 마무리된다. 이번 섹션에서는 HTML5와 CSS3를 사용하여 새로운 HTML5 시맨틱 요소를 처리하고, CSS3의 멋진 새로운 효과를 일부 이용하고, Flash 플러그인이 없는 브라우저에서 비디오를 보고, 몇 가지 새로운 양식 위젯을 살펴본 다음, Javascript API를 사용하여 캔버스에 웃는 얼굴을 그려 보았다.

CSS3의 새 기능

이번 섹션에서는 상태 기반의 구조적 부정 pseudo 클래스와 같은 새로운 CSS 선택기와 기타 새로운 유형의 선택기를 비롯하여 CSS 레벨 3 스펙에서 확인할 수 있는 새로운 기능을 소개한다. 또한, CSS3에서 제공하는 다양한 효과를 살펴본다. 이전에는 이러한 효과를 별도의 애플리케이션을 사용하여 이미지를 작성한 다음, GIF나 JPG, PNG로 저장해야 했다. 이러한 효과로는 텍스트와 상자의 드롭 새도우, 경계에서의 둥근 모서리, 불투명도를 사용한 반투명 외관이 있다. 레거시 웹 브라우저에서는 이러한 기능이 단계적으로 성능이 축소되기 때문에 불투명도 및 둥근 모서리와 같은 기능은 비교적 널리 사용된다. 그다음에는 CSS3를 사용하여 작성할 수 있는 새로운 다중 컬럼 레이아웃을 살펴본다. 이러한 레이아웃은 신문 레이아웃과 비슷하여 텍스트가 컬럼 수를 초과하여 확대되거나 필요한 경우에는 특정 컬럼 넓이로 확대된다. 살펴볼 또 다른 사항으로는 @font-face 태그를 사용하여 비표준 웹 폰트를 삽입하는 문제이다. 마지막으로 HSL(Hue, Saturation and Lightness)과 RGBA(Red, Green, Blue, and Alpha) 색상 모델과 같은 기타 새로운 CSS3 기능 중 일부를 소개한다.

새 선택기

CSS 선택기는 스타일시트를 사용하여 HTML 요소에 양식을 지정하는 수단이다. 예를 들어, 모든 <div> 요소 주변에 경계를 표시하려면 다음과 같이 div 선택기를 사용한다. div { border: 1px solid #000; }

클래스가 highlight인 모든 요소에 배경 색상을 적용하기 위해서는 다음과 같이 .highlight 선택기를 사용한다. .highlight { background-color: yellow; }

마지막으로 ID 속성값이 myDiv인 요소의 넓이를 변경하려면 다음과 같이 한다. #myDiv { width: 250px; }

물론 이러한 선택기를 조합하여 사용할 수도 있다. 따라서 div.highlight를 사용하여 highlight 클래스의 모든 <div> 요소를 선택하거나 div#myDiv를 사용하여 ID가 myDiv인 <div> 요소를 선택할 수 있다.

이처럼 간단한 선택기 외에도 CSS에는 더 복잡한 선택기가 있다(이전 버전부터 포함됨). 예를 들면, input[type="text"] 선택기를 사용하여 속성 유형이 text인 입력 요소만을 선택할 수 있다. 또는 의사 클래스 :hover를 사용하여 마우스가 요소 위에 있을 때의 요소 양식을 지정할 수 있다(예: a:hover { color: red; }).

선택기는 매우 다양하며 이러한 선택기를 이용하면 요소를 선택하여 편리하게 양식을 지정할 수 있다. CSS3에서는 훨씬 더 새로운 선택기가 추가되었으며 이러한 선택기로 덕택에 개발 작업이 훨씬 수월해졌으며 개발자가 작성해야 할 HTML과 Javascript 코드의 양이 줄어들었다.

속성 선택기

E[foo^="bar"]

foo 속성이 정확히 문자열 bar로 시작하는 요소 E를 선택한다.

E[foo$="bar"]

foo 속성이 정확히 문자열 bar로 끝나는 요소 E를 선택한다.

E[foo*="bar"]

foo 속성에 문자열 bar가 있는 요소 E를 선택한다.

구조적 의사 클래스

E:root

E 요소 중 문서의 루트(<html> 태그)인 요소를 선택한다.

E:nth-child(n)

E 요소 중 상위 요소의 n번째 하위 요소를 선택한다.

E:nth-last-child(n)

E 요소 중 상위 요소의 마지막 n번째 하위 요소를 선택한다.

E:nth-of-type(n)

E 요소 중 유형이 같은 n번째 동위 요소를 선택한다.

E:nth-last-of-type(n)

E 요소 중 유형이 같은 마지막 n번째 동위 요소를 선택한다.

E:last-child

E 요소 중 상위 요소의 마지막 하위 요소를 선택한다. (주: E:first-child는 이전에 CSS2에서 정의되었다.)

E:first-of-type

E 요소 중 유형이 같은 첫 번째 동위 요소를 선택한다.

E:last-of-type

E 요소 중 유형이 같은 마지막 동위 요소를 선택한다.

E:only-child

E 요소 중 상위 요소에 하위 요소가 하나뿐인 요소를 선택한다.

E:only-of-type

E 요소 중 유형이 같은 동위 요소만을 선택한다.

E:empty

하위 요소(텍스트 노드 포함)가 없는 E 요소를 선택한다.

대상 의사 클래스

E:target

참조 URI의 대상인 E 요소를 선택한다.

UI 요소 상태 의사 클래스

E:enabled

사용 가능한 사용자 인터페이스 요소 E를 선택한다.

E:disabled

사용 불가능한 사용자 인터페이스 요소 E를 선택한다.

E:checked

선택된 사용자 인터페이스 요소 E(단일 선택 단추나 선택란)를 선택한다.

부정 pseudo 클래스

E:not(s)

단순한 선택기와 일치하지 않는 E 요소를 선택한다.

일반 동위 컴비네이터

E ~ F

앞에 E 요소가 있는 F 요소를 선택한다.

브라우저는 새로운 속성 선택기를 지원하며 거의 모든 최신 브라우저에서 작동할 정도로 일반 동위 컴비네이터는 우수하다. 대부분의 최신 브라우저에서 새로운 pseudo 클래스를 지원하지만 Internet Explorer 6/7과 Firefox 3.0과 같은 구형 브라우저를 위해 폴백을 삽입해야 한다.

새 효과

새 선택기가 개발자의 어려운 점을 가장 많이 줄여 주는 기능이긴 하지만 대부분의 개발자들은 새로 추가된 멋진 효과를 사용할 수 있기를 원한다. 이는 다음과 같이 다양한 새로운 CSS 특성을 이용하면 가능해진다.

• background(현재 다양한 배경 지원)
• background-clip
• background-origin
• background-size
• border-radius(둥근 모서리)
• border-image
• border-color(그래디언트 경계)
• box-shadow(이미지가 없는 상자의 드롭 새도우)
• box-sizing
• opacity
• outline-offset
• resize
• text-overflow
• text-shadow
• word-wrap

본 튜토리얼의 마지막 부분에서 작성할 샘플 HTML5/CSS3 웹 페이지에서 작동 중인 일부 새로운 효과를 확인할 수 있다.

다중 컬럼 레이아웃

CSS3 다중 컬럼 레이아웃을 이용하면 신문에서 볼 수 있는 것과 같은 다수의 컬럼에 텍스트를 전개할 수 있다. 이러한 작업에는 두 가지 방식이 있으며 column-width 특성을 사용하거나 column-count 특성을 사용하여 수행할 수 있다. column-width 특성을 사용하는 경우에는 각 컬럼의 넓이를 정의해야 하며(컬럼 수는 컨테이너에서 사용 가능한 공간에 의해 결정됨) column-count 특성을 사용하는 경우에는 사용할 컬럼 수를 정의해야 한다. 그렇지만, 컬럼의 넓이는 각 컬럼에서 사용할 수 있는 공간에 따라 변한다.

다중 컬럼 레이아웃의 다른 기능으로는 column-gap 특성을 들 수 있으며 이 기능을 이용하면 column-width 특성을 사용할 때 컬럼 간에 표시할 공간을 개발자가 정의할 수 있다. 또 다른 유용한 기능으로는 column-rule 특성이 있으며 이 기능을 이용하면 border-style 규칙을 컬럼 간에 지정할 수 있다. 마지막으로 column-space-distribution 특성이 있는데 이 특성은 컬럼 간에 지정해야 하는 여유 공간을 결정한다.

현재, Mozilla와 WebKit 브라우저에서는 다중 컬럼 레이아웃이 지원된다. 현재, 이러한 기능은 각각 -moz이나 -webkit를 접두부로 사용하는 임시 소유 특성을 사용하여 구현한다. 스펙이 완성되면 결국 이러한 브라우저에서 CSS 표준 특성을 지원하게 된다.

웹 폰트

사실상 웹 폰트는 CSS2를 위해 제안되었으며 Microsoft Internet Explorer 버전 5 이후부터 사용할 수 있었다. 불행히도 이 기능을 이용하려면 Microsoft에서 고유하게 사용하는 .eot(Embedded Open Type) 폰트 형식을 사용해야 했으며 다른 브라우저 벤더에서는 웹 폰트를 구현하려고 하지 않았다. 결과적으로 사실상 웹 폰트는 CSS2 기반 웹 사이트에서만 사용되었다.

그러나 현재, Firefox, Safari, Chrome 및 Opera 최신 버전을 사용하는 경우, 웹 페이지에서 라이센스가 부여된 모든 .ttf(TrueType)나 .otf(OpenType) 폰트를 사용하려면 @font-face 규칙을 이용해야 한다. @font-face 규칙은 다음과 같이 사용한다. @font-face { font-family: Alexa; src: url('Alexa.otf'); }

현재, article p { font-family: Alexa, Arial, Helvetica, sans-serif; } 형태의 자체 CSS 규칙을 이용하여 이 폰트를 사용할 수 있다.

자체적으로 제작한 폰트가 아닌 경우 폰트를 웹에서 사용하려면 이미지와 마찬가지로 폰트에 대한 사용 권한이 있어야 한다. 또한, 원하는 대로 웹 페이지에 삽입할 수 있는 폰트를 비용을 지불하고 사용하거나 무료 폰트를 다운로드할 수 있다.

기타 새로운 기능

또한, CSS3에는 새 색상 값, 특히 HSL(Hue, Saturation, Lightness)과 알파 특성이 있는 두 가지 색상 값, 즉 RGBA(Red, Green, Blue, Alpha)와 HSLA(Hue, Saturation, Lightness, Alpha)에 대한 지원을 비롯하여 기타 새로운 기능이 많이 포함되어 있다. 개발자는 매체 쿼리를 통해 뷰포트 크기를 기반으로 다양한 장치에 맞는 여러 가지 양식을 정의할 수 있다. 예를 들면, 스마트폰이나 PDA, 기타 모바일 장치와 같이 500픽셀 미만의 뷰포트를 사용하는 장치에 맞는 특정 양식을 제공할 수 있다. CSS3의 음성 모듈을 이용하면 화면 판독기의 음성 특성(음성 볼륨, 밸런스, 비율, 강조 등)을 제어할 수 있다.