HTML (Hypertext Markup Language)은 1990 년대 초부터 웹의 핵심 기술이었습니다. Tim Berners-Lee는 전자 문서를 인코딩하는 간단하지만 효과적인 방법으로 1989 년에 HTML을 만들었습니다. 사실 웹 브라우저의 원래 목적은 그러한 문서의 독자 역할을하는 것이 었습니다. 20 년 후, 브라우저 자체는 온라인 미디어 세계의 포털이되었습니다. 그렇기 때문에 HTML5는 단순한 HTML 개정판이 아니라 웹 페이지 작동 방식에 대한 포괄적 인 표준입니다 .
HTML5를 독특하게 만드는 요소를 더 잘 이해하기 위해 시간을 조금 뒤로 돌려 보겠습니다. 1994 년에 HTML은 여전히 첫 번째 개정판에 있었고 Mosaic과 Netscape는 브라우저 시장을 장악했으며 대부분의 사람들은 아직 World Wide Web이라는 새로운 것을 경험하지 못했습니다. 그해 HTML 제작자 인 Berners-Lee는 W3C (World Wide Web Consortium)로 알려진 새로 설립 된 웹 표준 그룹을 이끌었습니다.
W3C는 오늘날 존경받는 표준 기관이지만 1990 년대 브라우저 시장의 상용 업체들은 대부분 이러한 표준을 무시하고 자신의 길을 밝혔습니다. 1995 년에 W3C는 HTML 표준의 두 번째 개정판을 발표했으며 웹 신참 Microsoft 는 Internet Explorer (IE) 브라우저로 기반을 확보했습니다. 마이크로 소프트는 표준을 거의 무시했고, 넷스케이프는 상당한 시장 점유율을 유지하기 위해 고군분투했고 IE가 지배하기 시작했다 [출처 : Harris].
이러한 초기 브라우저 전쟁 동안 웹 개발자는 주요 브라우저의 각 새 릴리스는 물론 덜 사용되는 Opera 및 Apple Safari 브라우저와 호환되도록 사이트를 유지해야했습니다. W3C가 1997 년에 HTML 3.2를 게시하고 1998 년에 HTML 4를 게시했지만 표준을 따르는 것은 브라우저 별 기능을 유지하는 것보다 덜 중요해 보였습니다. 이것은 커뮤니티 중심의 Mozilla Foundation이 트렌드를 깨뜨린 2003 년까지 계속되었습니다. 원래 Mozilla 브라우저가 출시 되고 2004 년 Firefox 브라우저가 출시 된 후 Mozilla는 IE의 우위를 빠르게 해킹했습니다. 또한 이러한 새 브라우저는 실제로 기존 W3C 표준을 따랐습니다.
Mozilla의 Firefox는 오래된 HTML 4 표준을 사용하여 계속 성장했지만 Mozilla는 2004 년 Apple과 Opera에 합류하여 WHATWG (Web Hypertext Application Technology Working Group)라는 그룹을 구성했습니다. WHATWG의 목표는 HTML 개발을 유지하는 것입니다. 원래 주저했지만 W3C는 2006 년 HTML 리바이벌에 참여했습니다. WHATWG와 W3C는 함께 HTML 및 XHTML에 대한 기존 사양을 결합하고 새로운 HTML5 사양을 만들기 위해 추가로 개발했습니다. 이 사양은 현재 W3C [출처 : W3C , WHATWG ] 에서 유지 관리 및 게시하고 있습니다.
이 기사에서는이 새로운 HTML5 기술을 살펴 봅니다. HTML5에 도입 된 XHTML 및 기타 기술을 살펴보고 HTML5를 사용하여 매력적인 표준 호환 웹 콘텐츠를 만드는 방법에 대한 기본 사항을 다룰 것입니다. 또한 사람들이 웹에서 HTML5를 사용하는 몇 가지 흥미로운 방법을 살펴볼 것입니다. HTML5의 목표와 HTML5가 단순한 HTML 이상인 이유부터 살펴 보겠습니다.
- HTML5는 HTML을 뛰어 넘습니다
- HTML5 Foundation 기술
- 기본 HTML 콘텐츠
- 양식
- 시맨틱 요소
- 미디어 요소와 플래시 경쟁
- 캔버스
- CSS3로 룩 만들기
- 중앙 구성 요소로서의 JavaScript
- 웹 애플리케이션 기술
- 획기적인 개념 증명
HTML5는 HTML을 뛰어 넘습니다
그 자체로 HTML은 텍스트, 링크 등을 거의 의미하지 않는 정적 문서를 표시하는 데 중점을 둡니다. HTML 4를 통해 HTML 표준은이 목표를 달성하는 데 사용 된 HTML 구문과 동일했습니다. HTML5 표준은 웹 페이지가 브라우저에로드 될 때 콘텐츠, 스타일 및 응용 프로그램 인터페이스를 설명하는 훨씬 더 광범위한 목표를 가지고 있습니다. 보다 구체적으로 HTML5는 웹 페이지가 컴퓨터의 메모리에로드 한 모든 요소와 상호 작용하기위한 단일 구문을 설정합니다.
계속 진행하기 전에 "HTML5"라는 용어에 대해 명확히해야 할 잠재적 인 혼란 지점이 있습니다. HTML5라고하는 새로운 버전의 마크 업 언어 자체가 있습니다. 그러나이 언어는 HTML5라는 이름을 공유하는 더 광범위한 표준의 일부일뿐입니다. 이 기사는 HTML5 언어가 핵심 인 HTML5 표준의 모든 구성 요소를 다룹니다.
이러한 차이를 염두에두고 브라우저는 오래된 HTML 4 언어가 아닌 최신 HTML5 표준에 따라 작성된 페이지를 어떻게로드합니까? 결국, 우리는 일반적으로 브라우저에 의존하여 HTML에 대한 걱정없이 웹 페이지를로드합니다. 대답은 간단합니다. 브라우저 자체가 HTML5를 지원할 수있는 한 HTML 개정판을 구분할 필요없이 모든 것을 처리 할 수 있습니다.
이러한 마술을 실현하기 위해 HTML5 표준은 공동 목표를 위해 함께 작동하는 여러 기술의 새 버전을 통합합니다. 이러한 목표에는 다음이 포함됩니다.
- 언어를 간단하고 직관적으로 유지
- 코드를 읽고 유지 관리하기 쉬운 지 확인
- 정적 문서가 아닌 대화 형 응용 프로그램으로 페이지 주소 지정
- 콘텐츠 스타일 지정을 위해 CSS (Cascading Style Sheets)에 의존
- JavaScript를 웹 페이지의 중앙 스크립팅 구성 요소로 인식
- PHP 및 ASP와 같은 서버 측 기술의 동적 콘텐츠 수용
HTML5가 HTML 마크 업 그 이상이라는 것을 알았으니 이제 표준의 기초 기술을 살펴 보겠습니다.
HTML5 Foundation 기술
마크 업 언어는 일련의 태그를 사용하여 파일의 요소를 표시합니다. 마크 업은 이러한 요소의 정의와 사용 방법을 정의하는 일종의 모델에 의존합니다. HTML은 항상 문서 인코딩에 관한 것이기 때문에 DOM (문서 개체 모델)이라고하는 것에 의존합니다. DOM은 웹 브라우저 애플리케이션 자체에 통합됩니다. 따라서 마크 업 언어는 이미 이해하고있는 모델을 기반으로 브라우저 지침을 제공하는 방법 일뿐입니다.
DOM과 HTML 간의 관계를 더 잘 이해하려면 DOM을 고무 도장 상자로 생각하십시오. 각 스탬프는 DOM 내의 다른 요소입니다. HTML로 작성된 각 페이지는 스탬프로 만든 일련의 각인 일 뿐이며 사용자 지정 콘텐츠로 채워집니다. 웹 브라우저는 해당 상자의 스탬프로 만든 모든 것을 표시 할 수 있습니다.
기술적으로 말하면 DOM은 HTML 또는 XML 문서를 처리하는 플랫폼 중립적 인 방법을 제공하는 API (응용 프로그래밍 인터페이스)입니다. (Extensible Markup Language 또는 XML은 HTML과 비슷해 보이지만 프로그래머가 문서에서 사용할 수있는 사용자 정의 된 요소 집합을 추가 할 수 있습니다.) HTML5 표준에는 DOM5 HTML이라는 DOM이 필요합니다. HTML5의 성장에 대비하여 최신 버전의 Chrome , Firefox , IE, Safari 및 Opera 브라우저는 모두 DOM5 HTML에서 페이지를 처리 할 수 있습니다.
HTML5의 또 다른 중요한 기반은 관련 MIME (Multipurpose Internet Mail Extensions ) 유형입니다. MIME는 처리하려는 콘텐츠 유형을 인터넷 지원 소프트웨어에 알리기위한 IETF (Internet Engineering Task Force) 표준입니다. 이는 일반적으로 HTML 문서 또는 MP3 오디오 파일과 같은 특정 유형의 파일에 해당합니다.
웹 개발자는 웹 페이지를 인코딩 할 때 MIME 유형을 지정합니다. 그러면 브라우저가 유형에 따라 해당 파일을 적절하게로드하라는 메시지가 표시됩니다. 새로운 HTML5 표준의 기반을 형성하기 위해 DOM5 HTML을 결합하는 두 가지 MIME 유형이 있습니다. HTML MIME 유형 (text / html)과 XML MIME 유형 (application / xhtml + xml)입니다. HTML5에는 이러한 두 MIME 유형에 대한 구문 업데이트가 포함되어 있습니다.
간단히 말해 HTML5 표준의 기본 기술은 DOM5 HTML과 HTML 및 XML 용 HTML5 호환 MIME 유형입니다. 다음으로 HTML5를 사용하여 웹 페이지를 구성하는 방법을 살펴 보겠습니다.
기본 HTML 콘텐츠
최소한 HTML5에는 기본 HTML 구문의 버전 5가 포함됩니다. 이 페이지의 사이드 바에있는 샘플 코드는이 HTML 코드가 기본 웹 페이지에서 어떻게 보이는지 보여줍니다. 웹을 탐색 할 때 브라우저에서 "소스보기"또는 유사한 옵션을 사용하여로드 된 HTML (및 기타 코드)을 확인하여 현재보고있는 페이지를 만듭니다. 이 예제에 표시된 모든 코드는 HTML 4와 역 호환됩니다. 즉, HTML5에서 사용할 수있는 새로운 추가 기능이 없습니다.
모든 웹 페이지에있는 것은 아니지만 예제에 표시된대로 문서 유형 (doctype) 선언으로 HTML 파일을 시작하는 것이 좋습니다. 이는 브라우저가 문서를 해석 할 때 표준 HTML을 예상해야 함을 확인합니다. 일부 개발자는 DTD (문서 유형 정의) 파일을 사용하는 HTML 표준 확장에 의존합니다. 이 경우 개발자는이 문서 유형의 일부로 DTD의 위치를 지정합니다.
doctype 외에도 예제의 나머지 코드는 표준 HTML 구문입니다. 이 구문에 익숙하지 않은 경우 웹 페이지 작동 방법 문서를 참조하십시오 .
그렇다면 HTML5의 이러한 기본 요소의 새로운 점은 무엇입니까? 여기에 목록이 있으며 다음 페이지에서 각각에 대해 자세히 살펴 보겠습니다.
- 신규 및 업데이트 된 양식 요소-양식 구조 레이아웃 및 사용자의 양식 입력 처리
- 시맨틱 요소-웹 페이지 내에서의 역할에 따라 콘텐츠 식별
- 미디어 요소-타사 브라우저 확장없이 오디오, 비디오 및 기타 대화 형 미디어 포함
- Ruby 요소-아시아 언어 웹 페이지의 국제화 지원
양식
양식 (사용자가 이름, 주소 등과 같은 특정 데이터를 입력 할 수있는 웹 사이트 섹션)은 HTML에서 사용 가능한 초기 요소의 일부 였지만 HTML5 이전에는 많은 유용한 기능이 부족했습니다. 이를 보완하기 위해 타사 개발자는 기본 HTML 양식을 거의 쓸모 없게 만드는 웹 양식 소프트웨어를 만들었습니다. HTML5는 새로운 양식 요소, 입력 유형 및 기존 요소의 속성을 사용하여 양식에 새로운 생명을 불어 넣었습니다.
이전 구문과 새 구문을 구분하지 않고 HTML5를 사용하여 웹 페이지에 대한 양식을 만드는 전체적인 접근 방식을 살펴 보겠습니다. 시작하기위한 몇 가지 권장 단계는 다음과 같습니다.
- 다음을 사용하여 양식 블록을 설정합니다.
- 다음을 사용하여 양식 내에서 필드 블록을 지정합니다.
- 사용하여 필드 세트의 각 필드를 배치
- 각 레이블 태그 내에 표시하려는 필드 이름과 필드 자체에 대한 태그입니다.
- 입력 태그 () 브라우저에 해당 유형에 따라 사용자 입력을 확인하라는 메시지가 표시됩니다. 이렇게하면 유효성 검사를 처리하고 재 입력을 요구하는 추가 코드가 필요하지 않습니다. HTML5에는 날짜, 시간, datetime, datetime-local, 월, 주, 번호, 이메일, 전화, URL, 범위, 색상 및 검색과 같은 입력 유형이 포함됩니다. 정규식과 함께 pattern 속성을 사용하여 사용자 지정 유효성 검사 패턴을 만들 수도 있습니다.
- 입력 요소에 대한 필수 속성을 추가하여 필수 필드를 표시하십시오.
- autofocus 속성을 사용하여 특정 입력 요소를 양식의 첫 번째 요소로 설정하십시오. 웹 브라우저가 양식을로드 한 후 사용자의 커서를 자동으로 배치하는 곳입니다.
- 원하는 경우 placeholder 속성을 사용하여 주어진 필드에 입력 할 내용에 대한 텍스트 힌트를 추가하십시오.
- ": required"및 ": invalid"에 대한 CSS 스타일을 설정하여 사용자가 주어진 입력 유형에 대해 유효성을 검사하지 않는 누락 된 정보 또는 입력에 대한 시각적 신호를 갖도록합니다.
양식 요소 및 해당 속성의 전체 목록은 최신 HTML5 참조 가이드를 확인하세요. 또한 일부 양식 필드에 대한 지원은 웹 브라우저마다 다릅니다. 웹 사이트에서 지원할 각 브라우저 유형에서 양식을 테스트해야합니다.
HTML 양식 요소에는 버전 5에서 더 많은 기능이 있지만 다음 요소 유형은 HTML5에서 완전히 새로운 것입니다.
시맨틱 요소
HTML5의 의미 요소는 이름에서 알 수 있듯이 특정 콘텐츠의 의미를 참조하는 요소입니다. 오늘날 대부분의 웹 사이트에는 단일 페이지에 여러 가지 유형의 콘텐츠가 포함되어 있기 때문에 태그만으로는 충분하지 않습니다. 웹 개발자는 각 콘텐츠 유형의 모양 또는 동작에 대해 별도의 규칙을 적용해야합니다.
의미 론적 요소없이 웹 개발자는
시간이 지남에 따라 머리글, 바닥 글, 메뉴 및 탐색 지점과 같은 특정 콘텐츠 유형이 웹 사이트에서 매우 보편화되었습니다. HTML5는 표준 시맨틱 요소를 추가하여이를 통합합니다. 즉, 일련의 블록이 아닌 유용한 의미 요소로 블록을 나눌 수 있습니다.
다음은 각각에 대한 간략한 정의가있는 시맨틱 페이지 요소 목록입니다. 각 시맨틱 요소에 대한 유효한 속성 및 하위 요소의 전체 목록에 대해 신뢰할 수있는 HTML5 참조를 찾아야합니다.
블록 요소 :
- 섹션 -더 큰 콘텐츠 블록을 나누는 데 사용되는 일반적인 페이지 구분
- 아티클 -원래 외부 소스에서 가져온 콘텐츠, 때로는 애그리 게이터 스크립트를 사용하여 페이지로드시 동적으로 추가되는 콘텐츠
- 머리글 및 바닥 글 -각 페이지의 상단과 하단에 표시되는 블록
- hgroup- 제목 및 부제와 같은 여러 관련 헤더 그룹
- menu- 명령 목록 (command 요소 참조) 및 메뉴의 동작을 지정하는 속성
- nav- 웹 사이트 탐색을위한 블록을 식별합니다. 일반적으로 사이트의 다른 페이지에 대한 순서가 지정되지 않은 링크 목록입니다.
- 주소 -기사, 섹션 또는 전체 페이지 본문과 같은 블록 내 콘텐츠 작성자의 연락처 정보를 포함합니다.
- aside- 콘텐츠를 사이드 바로 취급해야 함을 나타냅니다.
인라인 요소 :
- 요약 및 세부 정보 -동일한 콘텐츠에 대한 티저 / 요약 및 전체 세부 정보 간 전환
- figure 및 figcaption- 이미지를 포함하는 데 사용되는 미디어 요소 (img, svg 또는 canvas)에 관계없이 이미지에 일반적인 동작을 적용하는 데 사용되는 요소
- 시간 -달력 날짜, 시계 시간 또는 둘 다를 나타내는 텍스트로, 브라우저가 필요한 경우 시간대 차이를 조정할 수 있도록 형식이 지정됩니다.
- command- 일반적으로 메뉴 블록 내에서 사용되는 키보드 또는 마우스를 사용하여 상호 작용할 때 해당 레이블과 관련된 레이블 및 동작
- dfn- 콘텐츠 내에서 정의되는 용어
- wbr- 여러 줄에 걸쳐 줄 바꿈 할 때 단어 내에서 텍스트를 분리 할 수있는 위치를 나타내는 태그
시맨틱 요소는보다 일반적인 HTML 요소에 대한 개선으로 만들어졌습니다. 그러나 다음 새로운 요소 유형은 웹 브라우저에서 타사 미디어 확장을 전면적으로 대체하는 것을 목표로합니다.
공간 또는 공간 없음?
HTML 4와 같은 다른 버전의 HTML을 참조 할 때 숫자 앞에 공백이있는 반면 HTML5에 대한 참조에는 공백이 없습니다. HTML 커뮤니티에서 바로이 문제에 대해 많은 토론과 논쟁이 있었지만 결국 WHATWG 와 W3C 는 문서의 일관성을 유지하기 위해 HTML5를 공식 철자로 채택했습니다 .
미디어 요소와 플래시 경쟁
HTML5에서 가장 많이 언급되는 기능 중 하나는 웹 페이지 에 미디어를 삽입하는 새로운 접근 방식 입니다. 이 기사 뒷부분에서이 HTML5 기능의 몇 가지 놀라운 응용 프로그램을 살펴 보겠습니다. HTML5는 외부 브라우저 플러그인없이이 임베딩을 수행합니다. 다음은 HTML5에서 사용할 수있는 미디어 요소입니다.
- 오디오 -페이지에 오디오를 포함하고 재생 방법을 지정하기위한 속성을 포함합니다. 지원되는 파일 형식은 웹 브라우저에 따라 다릅니다.
- 비디오 - 페이지에 비디오를 내장하고 재생하는 방법을 지정하는 속성을 포함한다; 지원되는 파일 형식은 웹 브라우저에 따라 다릅니다.
- 소스 - 소스 를 식별하기 위해 오디오 또는 비디오 요소와 함께 사용됩니다. 단일 항목에 대해 여러 소스를 지정할 수 있습니다.
- embed- 다른 미디어 요소 내에서 지원이 부족할 수있는 콘텐츠의 미디어 유형을 포함 하고 지정합니다.
- canvas -JavaScript가 이미지를 그릴 수있는 페이지 또는 컴퓨터 화면의 일부를 따로 설정합니다. 앞으로이 중요한 새 기능이 어떻게 작동하는지 자세히 알아 보겠습니다.
- svg -SVG 마크 업 언어로 인코딩 된 벡터 그래픽을 포함하여 그래픽 품질을 잃지 않고로드되는 페이지 영역에 맞게 동적으로 크기를 조정할 수 있습니다.
HTML5가 개발되면서 시장 전문가들은 현재 Adobe에서 관리하고있는 Flash를 대체 할 것인지 의문을 제기했습니다. Flash는 웹 브라우저에 플러그인으로 추가 할 수있는 미디어 플레이어입니다. Flash에는 사이트에 다양한 유형의 미디어를 삽입하는 데 필요한 모든 기능이 있기 때문에 YouTube와 같은 사이트는 수년 동안 Flash에 의존해 왔습니다. 인터랙티브 인터페이스를 구동하기 위해 전적으로 Flash에 의존하는 웹 애플리케이션도 있습니다. 플래시 채택은 2007 년에 너무나 널리 퍼져서 많은 기대를 모았던 Apple iPhone이 출시되었을 때 많은 소비자들이 자사 운영 체제 인 Apple iOS가 Flash를 지원하지 않는다는 소식을 듣고 화가났습니다 .
때 구글 인터넷에서 틀림없이 가장 큰 브랜드, 비둘기 머리 - 첫 번째 HTML5와의 애플리케이션을 개발로는, 플래시 지지자은 예고했다. HTML5 이전에는 Flash의 지배력에 대한 유일한 위협은 맞춤형 HTML / JavaScript 대안을 구축하고 유지하려는 웹 애플리케이션 개발자였습니다. HTML5를 사용하면 Flash 기술에 필적하는 대화 형 미디어 경험을 만들 때 더 이상 번거로운 사용자 정의가 필요하지 않습니다.
그렇다면 누가 이길 것인가 : Flash 또는 HTML5? 짧은 대답은 "둘 다 아님"입니다. 각 기술에는 고유 한 기능, 장점 및 단점이 있습니다. 또한 Adobe와 Google은 Flash에서 HTML5 로의 변환 도구를 개발했습니다. 이 글을 쓰는 시점에서 HTML5가 지위를 얻고 있지만 Flash도 당분간 자체적 인 인기를 유지할 것으로 보입니다.
다음 페이지로 넘어 가서 캔버스 요소를 분석하고 HTML5 웹 페이지에서 사용하는 방법을 살펴 봅니다.
캔버스
HTML5의 가장 중요한 새 기능 중 하나는 캔버스입니다. 캔버스 기능을 사용하면 웹 페이지 의 섹션을 식별하고 그 안에 콘텐츠를 그리고 대화 형 기능을 추가 할 수 있습니다. 이 모든 것은 HTML과 JavaScript 코드 의 조합을 통해 가능 합니다. HTML5에서 캔버스를 설정하는 데 필요한 세 부분을 살펴 보겠습니다.
1 부 : 를 사용하여
너비 = "400"
높이 = "300>
이 텍스트가 표시되면 브라우저
HTML5 캔버스를 지원하지 않습니다.
2 부 : 캔버스에 콘텐츠를 그리는 JavaScript를 만듭니다. 나중에 HTML5 웹 페이지와 관련된 JavaScript 코드를 추가하고 관리하는 방법에 대해 알아 봅니다. 여기에서는 캔버스 객체에 사용할 수있는 몇 가지 샘플 JavaScript를 살펴 보겠습니다. 다음 코드는 위의 캔버스 내에 사각형을 그립니다.
function drawRectangle () {
var targetCanvas = document.getElementById ( "sampleCanvas");
var rectContext = sampleCanvas.getContext ( "2d");
rectContext.fillStyle = "파란색";
rectContext.fillRect (50, 25, 150, 100);
}
이 함수는 캔버스 내에 단색의 파란색 사각형을 그립니다. 두 개의 "var"줄은 사용할 수있는 변수를 만듭니다. 첫 번째 (targetCanvas)는 HTML의 ID를 사용하여 대상으로하는 캔버스 요소를 식별합니다. 두 번째 (rectContext)는 그리기를위한 2 차원 컨텍스트를 설정합니다. 컨텍스트를 캔버스 위에 놓인 투명한 유리 층으로 생각하면 해당 유리에 그리는 함수를 호출합니다.
"fillStyle"행은 이름으로 파란색을 식별하며 HTML이 이름이 지정된 색상 중 하나를 인식하고 연관시킵니다. HTML 또는 CSS로 스타일 코드를 작성할 때와 마찬가지로 색상, 패턴 또는 그라디언트를 사용할 수도 있습니다. "fillRect"선은 왼쪽 상단으로부터의 오프셋에서 시작하는 직사각형을 그립니다. 처음 두 숫자는 캔버스의 왼쪽 상단이 좌표 (0,0)에있는 것처럼 x 및 y 오프셋입니다. 두 번째 두 숫자는 각각 사각형의 너비와 높이를 나타냅니다.
파트 3 : HTML 코드에서 JavaScript 함수를 호출합니다. 이것은 두 조각을 함께 묶습니다. 웹 페이지가로드 되 자마자 함수를 호출 할 수 있습니다. 캔버스를 사용하여 페이지가로드되는 즉시 표시되어야하는 대화 형 페이지 콘텐츠를 그리는 경우 의미가 있습니다. 또 다른 옵션은 그리기 이벤트를 트리거하는 버튼, 메뉴 또는 기타 요소를 HTML에 만드는 것입니다. 다음은 위의 예제 스크립트를 실행하는 데 사용할 수있는 버튼의 예입니다.
Dive Into HTML5 에는 웹 페이지 용 캔버스 요소를 만드는 방법에 대한 따라하기 쉬운 가이드가 있습니다. 또한 신뢰할 수있는 HTML5 참조는 정지 및 이동 모두에서 정교한 그래픽을 그리기위한 광범위한 리소스를 제공해야합니다. HTML5에서 캔버스를 광범위하게 사용하려면 JavaScript 프로그래밍에 익숙해야합니다. 다음으로 CSS3가 HTML5 웹 페이지의 모양과 느낌을 만드는 방법을 살펴 보겠습니다.
CSS3로 룩 만들기
각 HTML 요소에는 해당 요소의 모양이나 기능을 수정하기 위해 코드에서 사용하는 여러 속성이 있습니다. 스타일 및 관련 속성은 요소의 크기, 색상, 배치, 테두리 및 기타 물리적 측면을 조정합니다. 웹의 수명 기간 동안 사이트 개발자들은 스타일과 콘텐츠를 분리하는 관행을 널리 채택했습니다. 이러한 분리를 통해 개발자는 다음과 같은 이점을 누릴 수 있습니다.
- 유지 관리 할 코드 감소 : 여러 웹 페이지의 여러 요소가 각각의 스타일 코드를 반복하지 않고도 동일한 스타일을 공유 할 수 있습니다.
- 시간 경과에 따른 손쉬운 유지 관리 : 새 스타일로 업데이트하거나 기존 스타일을 수정하는 것은 해당 코드를 사용하여 각 요소를 업데이트하는 대신 하나의 스타일 코드 만 변경하는 것을 의미합니다.
따라서 스타일링은 HTML 코드에 맞춰 배치 할 수 있지만 웹 개발자에게 더 많이 사용되는 선택은 CSS (Cascading Style Sheets)를 사용하여 웹 사이트와 관련된 모든 스타일링 코드를 관리하는 것입니다. 각 페이지의 HTML은 페이지가로드 될 때 브라우저가로드해야하는 하나 이상의 스타일 시트를 참조 할 수 있습니다. CSS 파일 형식의 이러한 스타일 시트는 사용자가 입력 할 수있는 내용을 모방하기위한 것입니다.
