HTML

KanDohyung·2024년 12월 10일

개념정리

목록 보기
4/28

HyperText Markup Language

웹페이지의 구조와 콘텐츠를 정의하는 마크업 언어
웹의 뼈대를 구성
텍스트, 이미지, 동영상 등 다양한 콘텐츠를 웹 브라우저가 이해할 수 있도록 Tag를 사용해 구조화

주요 특징

  1. Markup Language
    Tag사용
    h1 p img span ...
  1. 구조와 의미 제공
    header, footer, article 등의 태그는 문서의 구조와 의미를 명확히 보여줌
  1. 기본 프로그래밍 언어없이 사용 가능
    논리적 동작은 JavaScript를 통해 추가됨

구성요소

  1. Tag
    HTML의 기본단위로, 시작과 종료태그로 구성
  1. Attribute(속성)
    태그에 대한 추가 정보를 제공
    <img src = "Link" alt="blank">
  1. Element(요소)
    Tag와 Tag가 포함하고 있는 Content

  2. Content
    Tag에 포함된 내용

HTML5의 주요기능

HTML5는 최신 HTML 표준으로 여러 새로운 기능과 태그를 제공

  1. Sementic Tag
    • 콘텐츠 구조와 의미를 명확히 하기 위해 추가됨
    • 코드의 가독성과 접근성이 향상되며, 검색엔진 최적화에도 유리함
    • header, footer, article, section, nav ...
  1. Media Tag
    • 멀티미디어 콘텐츠를 지원하는 태그가 추가됨, 별도의 플러그인 불필요
    • audio, video, track
  1. Form tag 개선
    • 사용자 입력을 처리하기 위한 새로운 입력 타입과 속성이 추가됨
    • 유효성 검사를 브라우저에서 기본적으로 지원함
  1. Canvas 와 SVG
    - Canvas : JavaScript를 사용해 2D 그래픽을 그릴 수 있는 공간을 제공
    - 데이터 시각화, 애니메이션, 게임 등에 주로 사용됨


    - SVG(Scalable Vector Graphics) : XML 기반의 벡터 그래픽을 정의, 해상도에 구애받지 않음
    - CSS와 JavaScript로 스타일링 및 애니메이션을 추가할 수 있음
  1. 오프라인 저장소
    • 데이터를 클라이언트에 저장할 수 있는 기능이 강화
    • localStorage, sessionStorage, IndexedDB
  1. WebSocket
    • 서버와 클라이언트 양방향 통신을 이어주는 API가 추가됨
    • 구버전 브라우저에서는 작동하지 않을 가능성이 있음

0개의 댓글