HTML5 - basic syntax

이소라·2021년 6월 3일
0

1. HTML

  • HTML (HyperText Markup Language) : 웹페이지의 내용(content)와 구조(structure)을 담당하는 언어, HTML 태그를 통해 정보를 구조화함

  • HTML5의 확장된 기능
    + 멀티미디어 (Multimedia) : 플러그인 도움없이 비디오 및 오디오 기능 자체적으로 지원
    + 그래픽 (Graphics & Effects) : 2차원 그래픽(SVG, 캔퍼스 사용)과 3차원 그래픽(CSS3, WebGL)을 지원
    + 통신 ( Connectivity) : 서버와의 소캣 통신 지원 => 서버와의 양방향 통신 가능
    + 디바이스 접근 (Device Access) : 하드웨어(카메라, 동작센서 등) 기능 직접적인 제어 가능
    + 오프라인 및 저장소 (Offline & Storage) : 오프라인 상태에서도 애플리케이션 동작 가능
    + 시멘틱 (Semantics) : HTML 요소의 의미를 명확하게 설명하는 시멘틱 태그를 도입
    + CSS3 지원

  • HTML 문서 기본 형식

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello World</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <p>안녕하세요 HTML5</p>
  </body>
</html>
  • html 요소
    + start tag, content, end tag로 구성됨
    + tag는 소문자를 사용하는 것이 일반적임
    + 요소 중첩 가능 -> 부자관계 형성

  • 빈요소 (Empty Element)
    + content를 가질 수 없는 요소
    + attribute만 가질 수 있음
    + br, hr, img, input, link, meta

  • Attribute
    + 요소의 성질, 특징을 정의하는 명세
    + start tag에 위치해야함
    + 이름과 값이 한 쌍을 이룸

<h1 img src="html.jpg" width="104" height="142">HTML</h1>
  • HTML Global Attribute
    + 모든 HTML 요소가 공통적으로 사용할 수 있는 attribute

    • id : 유일한 식별자(id)를 요소에 지정, 중복 불가능
    • class : style sheet에 지정된 class를 요소에 지정, 중복 가능
    • hidden : 의미상으로도 브라우저에 노출되지 않는 성질을 요소에 지정
    • lang : 지정된 요소의 언어를 지정
    • style : 요소에 인라인 스타일을 지정
    • tabindex : 사용자가 키보드로 페이지를 네이게이션 시 이동 순서를 지정
    • title : 요소에 관한 제목을 지정
  • 주석 (Comment) : 주로 개발자가 코드를 설명하기 위해 사용됨, 화면에서 표지되지 않음

<!-- 주석은 화면에 표시되지 않는다 -->

0개의 댓글