웹 프로그래밍 - HTML5기본

HTML5의 주요기능


기존의 HTML보다 개선된 점으로,

  • 조금 더 모바일에 최적화 되어 있고, "플러그인" 도움 없이 스스로 오디오, 비디오를 재생 가능하도록 태그를 지원한다.

  • 2차원 그래픽, 3차원 그래픽을 구현할 때, 모바일 환경에서 어려움이 있었던 기존에 비해, 태그를 사용하여 최적화 한다.

  • 통신 기능 - 서버와 실시간으로 쌍방향 통신을 가능하게 한다.

    ex) 웹에서 실시간 채팅, 다수의 사람과 온라인 게임 ...

  • 장치 접근 - 장치에 접근해 정보와 기능을 사용

    ex) 배터리 잔량, 현재 위치, 알람 등

  • 오프라인 및 저장소와 연결되어 인터넷이 연결되지 않은 상태에서도 응용 프로그램을 동작 가능

페이지의 기본 구조


ex)

<!DOCTYPE hteml> 	👈 HTML5문서임을 알리는 지시어
<html>
  <head>
    <title>...</title>	👈 문단제목
  </head>
  <body>
    <h1>...</h1>	👈 H 태그
  </body>
</html>

HTML 태그 특징


HTML 태그 구성

  • 태그 이름

  • 속성 이름

  • 속성 값

시작 태그와 종료 태그가 모두 있는경우

<html> ... </html> , <title> ... </title> ...

시작 태그만 있는 경우

<br> ...

태그와 속성은 대소문자 구분 없음

<html> ... </html>
     👆 = 👇
<HTML> ... </HTML>
<-------------AND------------->
<img Src="pic.jpg" width="100" height="50">
     		👆 = 👇
<img src="pic.jpg" width="100" height="50">

속성 값에 불필요한 공백 문자

불필요한 공백 문자는 HTML5표준에 어긋남

<img src="pic.jpg" width=" 100" height ="50">
                         ☝           ☝

이후 태그들의 종류를 다루려고 했는데, 너무 길어져서 다음 포스팅에서 다뤄야겠다.

좋은 웹페이지 즐겨찾기