HTML

HTML이란?

HTML(HyperText Markup Language)은 웹을 이루는 가장 기초적인 구성 요소로, 웹 콘텐츠의 의미와 구조를 정의할 때 사용합니다. HTML 이외의 다른 기술은 일반적으로 웹 페이지의 모양/표현 (CSS), 또는 기능/동작 (JavaScript)을 설명하는 데 사용됩니다.

· 1min read · 2 views

"Hypertext(하이퍼텍스트)"란 웹 페이지를 다른 페이지로 연결하는 링크를 말합니다. 링크는 웹의 근본적인 속성으로, 인터넷에 자료를 올리고 다른 사람이 만든 페이지로 연결함으로써 여러분도 월드 와이드 웹 세계의 능동적인 일원이 될 수 있습니다.

HTML은 웹 브라우저에 표시되는 글과 이미지 등의 다양한 콘텐츠를 표시하기 위해 "마크업"을 사용합니다. HTML 마크업은 다양한 "요소"를 사용하는데, 요소에는 <head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>, <span>, <img>, <aside>, <audio>, <canvas>, <datalist>, <details>, <embed>, <nav>, <output>, <progress>, <video>, <ul>, <ol>, <li> 등 많은 종류가 존재합니다.

HTML 요소는 "태그"를 사용해서 문서의 다른 텍스트와 구분합니다. 태그는 "<", 태그 이름, ">"로 이루어집니다. 태그 안의 요소 이름은 대소문자를 구분하지 않습니다. 즉, 대문자, 소문자, 아니면 섞어서도 작성할 수 있습니다. 예를 들어 <title>요소는 <Title>, <TITLE>, 그 외 기타 가능한 모든 방법으로 작성할 수 있습니다.

고급 주제

CORS 활성화 이미지

crossorigin 속성을 적절한 CORS 헤더와 조합하면 <img> 요소의 이미지를 외부 출처에서 가져올 수 있으며, 마치 현재 출처의 이미지인 것처럼 <canvas>에서도 사용할 수 있습니다.

CORS 설정 특성

<img>, <video>CORS를 지원하는 일부 HTML 요소는 crossorigin 특성(crossOrigin 속성)을 보유하며, 해당 요소가 데이터를 가져올 때의 CORS 요청을 통제할 수 있습니다.

rel="preload"로 콘텐츠 미리 불러오기

<link> 요소, rel 특성의 preload 값을 사용하면 페이지를 불러온 직후 빠르게 사용해야 하는 리소스에 대해 선언적인 가져오기 요청을 <head> 안에 추가할 수 있습니다. 이렇게 지정한 리소스는 페이지 불러오기 라이프사이클의 초기, 브라우저의 주 렌더링이 시작하기도 전에 시작하고, 페이지의 첫 렌더링이 덜 막혀 성능이 개선됩니다.

참고서

HTML 요소 참고서

모든 HTML 요소의 목록을 살펴보세요.

HTML 특성 참고서

HTML 요소는 특성을 가집니다. 특성은 요소나 그 동작 방식을 다양하게 설정하고 수정하는 일련의 추가 값입니다.

전역 특성

전역 특성은 모든 HTML 요소에 지정할 수 있으며, 심지어 표준에 명시되지 않은 요소에도 지정할 수 있습니다.

인라인 요소와 블록 레벨 요소

HTML의 요소는 역사적으로 "블록 레벨" 요소와 "인라인" 요소로 분류됐습니다.

HTML 콘텐츠 카테고리

HTML 요소는 어떤 상황에서는 사용할 수 있고, 어떤 상황에서는 사용할 수 없는지 결정하는 여러가지 분류, 콘텐츠 카테고리에 속합니다.

호환성 모드와 표준 모드

호환성 모드와 표준 모드에 대한 역사적인 정보입니다.


원문: MDN Web Docs — HTML — CC BY-SA 2.5

Comments (0)

No comments yet. Be the first to comment!

Leave a Comment

로그인 후 댓글을 남길 수 있습니다.