1. HTML5란
1-1. HTML
- HyperText Markup Language
- 웹페이지를 기술하기 위한 마크업 언어
- HTML5는 HTML 그 자체를 의미하지만, 일반적으로 CSS와 JS와 함게 사용된다.
1-2. HTML5의 주요 기능
- 멀티미디어: 플래시 같은 플러그인 없이 비디오 및 오디오 기능을 자체적으로 지원한다.
- 그래픽: SVG, 캔버스를 사용한 2차원 그래픽과 CSS3, WebGL을 사용한 3차원 그래픽을 지원한다.
- 통신: 지금까지의 HTML은 단방향 통신만이 가능하였으나 HTML5는 서버와의 소켓 통신을 지원하므로 서버와의 양방향 통신이 가능하다.
- 디바이스 접근: 카메라, 동작센서 등의 하드웨어 기능을 직접적으로 제어할 수 있다.
- 오프라인 및 저장소: 오프라인 상태에서도 애플리케이션을 동작시킬 수 있다. 이는 HTML5가 플랫폼으로서 사용될 수 있음을 의미한다.
- 시맨틱 태그: HTML 요소의 의미를 명확히 설명하는 시맨틱 태그를 도입하여 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명할 수 있다. 이를 통해 HTML 요소의 의미를 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹을 실현할 수 있다.
- CSS3: HTML5는 CSS3를 완벽하게 지원한다.
2. HTML5의 기본 문법
2-1. 요소(Element)
- 시작 태그와 종료 태그, 그리고 태그 사이에 위치한 내용(content)로 구성
2-1-1. 요소의 중첩
- 콘텐츠는 다른 태그 또는 텍스트가 될 수 있다.
- 태그 사이에 다른 태그가 들어가는 경우 요소가 다른 요소를 포함할 수 있다.
<body> <p>hello</p> </body>2-1-2. 빈 요소
- br, hr, input 태그 등은 종료 태그를 사용하지 않아도 된다.
- 이때 종료 태그를 넣어도 상관은 없으며, 자기 종료(self-closing) 태그 형태로 사용할 수도 있다.
<input> <!--종료 태그를 사용하지 않은 경우--> <input> </input> <!--종료 태그를 사용한 경우(권장하지 않음)--> <input /> <!--자기 종료 태그를 사용한 경우(권장하지 않음)-->2-2. 속성(Attribute)
- 요소의 성질, 특징을 정의하는 명세
- 요소는 성질을 가질 수 있으며 성질은 요소에 추가 정보를 제공한다.
- 속성은 시작 태그에 위치해야 이름(name)과 값(value)의 쌍을 이룬다.
2-2-1. 글로벌 어트리뷰트
- id: 문서 내에서 유일하게 식별되는 값
- class: 문서에서 동일한 속성을 가진 여러 요소를 그룹화하는 값
2-3. form 태그
- 서버가 클라이언트의 동적인 요청을 처리할 수 있도록 하는 태그
- 하위 태그로는 사용자가 직접 입력할 수 있는 input, textarea, button 등이 있다.
2-3-1. form 태그의 속성
- action: 요청을 전달할 주소
- method: 데이터를 서버로 전송하는 방식을 지정
- enctype: 서버로 전송되는 데이터의 인코딩 방식을 지정
참조: 웹 프로그래밍 튜토리얼
