HTML 기본 구조

6237 단어 htmlbeginninerscodingwebdev
1️⃣ DOCTYPE

HTML 문서의 모든 첫 줄은 문서 유형을 식별하는 선언으로 시작해야 합니다.



The Declaration lets the browsers know in advance the kind of document they will be processing, Enabling them to modify their processing procedures accordingly



  • 문서 유형은 👇 형식입니다.

    • <!DOCTYPE html>



  • 이 태그는 페이지에서 마크업을 만드는 데 사용된 언어가 HTML임을 브라우저에 알립니다.

    • ➡️ Hint: There is no Case difference in
    <!DOCTYPE > declaration





    2️⃣ HTML 요소

    HTML 태그는 페이지 상단☝의 문서 유형 선언 바로 뒤에 나타납니다.



    • 열기 및 닫기 HTML 태그는 대부분의 기타 태그가 내부에 중첩되어 있는 웹 페이지의 빌딩 블록 역할을 합니다.

    👉 NOTE: An opening HTML tag must have a corresponding closing tag to specify the ending of the HTML Page.





    3️⃣ 헤드태그

    Open head 태그는 open html 태그 다음에 옵니다. head는 쌍 태그이기도 합니다. 즉 닫혀 있어야 합니다.



    The head tag contains important instructions for our browser, and the most frequently found elements in the head tag includes


  • 제목
  • 메타
  • 스타일
  • 링크 등

    • ➡️ 제목

    페이지의 title는 먼저 head 태그에 의해 정의됩니다.
    여는 태그와 닫는 태그를 모두 지정합니다. 이러한 태그. 그런 다음 브라우저의 탭이나 제목 표시줄에 페이지의 실제 제목을 표시합니다.

    <title>MY FIRST WEBPAGE</title>


    결과👇



    ➡️ 메타
    meta 태그는 제목 다음에 나오는 Head 태그의 다음 태그 집합입니다.



    메타란❓
    meta는 문서의 메타데이터에 대한 정보를 제공하는 HTML 태그입니다.

    👉 메타데이터는 단순히 데이터에 대한 정보입니다.

    Metadata are hidden from displayed on the Webpage, but the main goal of it, Is to give the browser and search engines valuable information about your website


  • 첫 번째 메타 태그는 메타 이름 description 으로 알려져 있습니다. 그런 다음 설명 다음에 콘텐츠가 표시됩니다.

    • <meta name= "description" content=" ........ " />

    👉 설명은 페이지의 내용을 요약하는 HTML 태그입니다.

    👉내용🤔❓
    콘텐츠는 검색 결과 링크 아래에 표시되는 텍스트 샘플입니다.

    The purpose of the meta description is to entice searchers to visit your website. And it informs them of the page's content.



    아래 예시👇



    다음 태그는 👇을 나타냅니다.

    < meta charset = “utf-8" >


    👉 Charset은 웹사이트의 콘텐츠를 표시할 때 브라우저가 사용하는 문자 인코딩을 정의하는 HTML 속성입니다.

    • 문자 집합의 값은 “UTF-8”입니다.

  • What's About "utf-8" 🤔❓
    • "utf-8"는 기계 코드를 사람이 읽을 수 있는 텍스트로 또는 그 반대로 변환하는 문자 인코딩입니다.

    👉모든 언어는 다음을 사용하여 표시할 수 있습니다."utf-8" . 또한 7비트 코드 포인트를 사용하여 128개의 고유한 문자를 인코딩하는 이전 인코딩 체계ASCII를 확장합니다.
    utf-8는 8비트 코드 포인트를 사용하고 최대 256개의 개별 문자를 지원하며 ASCII는 지원하지 않는 중국어 및 아랍어와 같은 여러 추가 국제 문자를 도입합니다.

    기계코드란?🤔❓

    기계 코드는 컴퓨터가 이해할 수 있는 이진수 또는 비트 모음입니다.

    바이너리는 컴퓨터가 이해할 수 있는 유일한 언어이기 때문에 utf-8의 주요 기능은 텍스트 파일을 해당 형식으로 변환하는 것입니다.
  • 마지막으로 메타 뷰포트가 있습니다 👇

    • <meta name="Viewport"content="width=device-width, scale-initial=1"/>


    뷰포트가 뭐에요🤔❓

    👉 뷰포트는 웹페이지 🖥에서 시청자가 볼 수 있는 부분입니다.

    Viewport meta tag inform the browser how to regulate the size of the pages. And the size changes depending on the device 💻📲.
    Example below 👇





    👉열림 및 닫힘 스타일 태그는 헤드 태그에서 다음 태그입니다.

  • 스타일 태그에 포함된 모든 코드를 스타일 규칙이라고 하며, 페이지
    • 에 대한 Cascading Style Sheet(CSS)를 정의합니다.

    계단식 스타일은 font , colors , line , height 등을 포함하여 모든 HTML 요소의 서식을 지정하는 데 사용할 수 있습니다.
    그러나 얼마나 자주 사용되는지 때문에 CSS는 전체 과정의 주제입니다.

    👉 몸
  • 본문은 HTML document 의 기본 콘텐츠 영역 역할을 합니다.
  • HTML tag의 마지막 하위 항목이라고도 하며 HTML 태그 안에 포함된 시작 태그와 종료 태그를 모두 포함합니다.

    • 후크에 대해 이야기해 봅시다 - 3부(useCallback 및 useRef)
    Conhecendo 또는 structuredClone

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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