하이퍼텍스트 마크업 언어 - HTML

4757 단어 htmlzurii4g

HTML이란 무엇입니까?




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>


MDN에 따르면,

HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (CSS) or functionality/behavior (JavaScript).



예를 들어 이 비유를 들어보세요

HTML은 모든 웹 사이트의 구조적 기반 역할을 합니다. 인간이 골격 구조 없이 형태가 없는 것처럼 웹 사이트 역시 HTML 없이는 형태가 없습니다.

HTML 전용 웹사이트의 예는 다음과 같습니다.


  • The WWW project
  • ACME
  • Fluffbucket
  • Simplified Web Design

    • HTML 태그



    독타입


    <!DOCTYPE html>는 문서의 유형을 선언하는 태그입니다.

    HTML


    <html>는 웹 페이지의 모든 HTML 요소(Doctype 제외)에 대한 컨테이너입니다.

    머리


    <head>는 문서에 대한 정보의 컨테이너입니다.

    제목


    <title>는 문서의 제목을 정의합니다.

    신체


    <body>에는 문서의 본문 내용이 포함되어 있습니다.

    HTML 의미론




    시맨틱 HTML은 단순한 프레젠테이션이 아닌 사용된 요소를 사용하여 웹 페이지에 의미를 도입하는 방식입니다. 브라우저가 더 잘 이해할 수 있도록 의미상 올바른 웹페이지입니다. 시맨틱 HTML 요소의 예는 다음과 같습니다.
  • <header> - 문서 또는 섹션의 헤더를 선언합니다.
  • <nav> - 탐색 링크가 있습니다.
  • <main> - 문서의 주요 내용을 포함합니다.
  • <section> - 메인 콘텐츠의 섹션.
  • <aside> - 기본 콘텐츠 외부에 있는 콘텐츠입니다.
  • <footer> - 문서의 하단/끝에 있는 내용입니다.

    • 기타 HTML 태그/요소에는 다음이 포함됩니다.


  • <h1> to <h6> - HTML 표제를 정의합니다.
  • <p> - 단락 선언
  • <div> - 섹션을 정의하는 컨테이너 태그입니다.
  • <link> - 외부 리소스에 연결됩니다.
  • <br> - 단일 줄바꿈을 정의합니다.
  • <hr> - 수평선을 정의합니다.
  • <input> - 입력 컨트롤에 사용됩니다.
  • <button> - ...버튼😲
  • <img> - 문서에 이미지를 표시할 수 있습니다.
  • <iframe> - 외부 웹 페이지를 웹 페이지에 프레이밍하는 데 사용됩니다.
  • <blockquote> - 인용된 텍스트를 정의합니다.
  • <cite> - 인용에 사용됩니다.
  • <canvas> - 웹 페이지에서 그림을 그리는 데 사용됩니다.
  • <audio> - 오디오 파일을 선언합니다.
  • <video> - 비디오 파일을 선언합니다.
  • <table> - 테이블을 정의합니다.
  • <textarea> - 여러 줄 입력 상자를 정의합니다.
  • <time> - 특정 시간을 정의합니다.
  • <script> - 클라이언트측 javascript 또는 외부 스크립트에 대한 링크에 사용됩니다.
  • <span> - 문서의 섹션을 정의합니다.
  • <meta> - HTML 문서에 대한 메타데이터/정보를 정의합니다.
  • <area> - 이미지 맵 내부의 영역을 정의합니다.
  • <base> - 문서에서 기본 URL 대상을 지정합니다.
  • <col> - <colgroup> 내의 열에 대한 열 속성을 지정합니다.
  • <embed> - 외부 응용 프로그램의 컨테이너를 정의합니다.
  • <param> - 객체의 매개변수를 정의합니다.
  • <source> - 미디어 요소의 소스를 선언합니다.
  • <track> - 미디어 요소에 대한 텍스트 트랙을 정의합니다.
  • <wbr> - 가능한 줄바꿈을 정의합니다.
  • <template> - 페이지가 로드될 때 숨겨야 하는 콘텐츠의 컨테이너를 정의합니다.
  • <summary> - <details> 요소에 대해 표시되는 표제를 정의합니다.
  • <style> - 문서의 스타일 정보를 정의합니다.
    • Neovim을 위한 자동 완성
    EventBridge 및 Lambda에 대한 액세스 키 프로그래밍

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage