HTML이란 무엇인가

docs.scrimba.com

방문한 모든 웹사이트는 HTML로 작성된 평문 문서에서 시작됩니다. 페이지에 보이는 제목, 단락, 버튼, 이미지, 링크는 모두 이 하나의 언어로 설명됩니다. 페이지를 스타일링하거나 상호작용성을 추가하기 전에 페이지에 무엇이 있는지 설명해야 하며, 그 설명이 바로 HTML입니다.

페이지는 단순한 구조화된 텍스트일 뿐입니다

HTML은 HyperText Markup Language의 약자입니다. 중요한 단어는 **markup**입니다. HTML은 평문을 가져가서 어느 부분이 제목이고, 어느 부분이 단락이고, 어느 부분이 링크인지 등을 표시하는 방법입니다. 컴퓨터에 따라야 할 지시를 주고 있는 것이 아닙니다. 콘텐츠에 라벨을 붙여서 브라우저가 각 부분이 무엇인지, 어떻게 표시해야 하는지 알 수 있도록 하는 것입니다.

손으로 문서를 포맷하는 것처럼 생각해보세요. 제목에 동그라미를 치고, 섹션 제목에 밑줄을 긋고, 사진 주변에 상자를 그립니다. HTML은 브라우저가 이해하는 방식으로 그 동그라미 치기와 밑줄 긋기를 하는 방법입니다.

HTML은 선언형 언어입니다. 결과를 생성하는 단계를 지시하는 것이 아니라 원하는 구조를 설명합니다. 논리, 루프, 변수가 없습니다. "이것은 제목이고, 이것은 단락이고, 이것은 세 가지 항목의 리스트다"라고 선언하면, 브라우저가 그 설명을 화면에 보이는 것으로 바꾸는 책임을 집니다.

이것이 HTML이 일반적인 의미의 프로그래밍 언어가 아닌 이유입니다. 어떤 것도 계산하지 않습니다. 콘텐츠를 구조화합니다. CSS와 JavaScript를 추가하면 이 구분이 중요해집니다. 왜냐하면 세 가지 각각이 잘할 수 있는 일이 있고, HTML의 일은 구조를 제공하는 것이기 때문입니다.

HTML은 브라우저가 DOM(Document Object Model: 페이지의 라이브 메모리 내 표현으로, CSS가 스타일을 적용하고 JavaScript가 조작하는 것)이라는 객체 트리로 파싱하는 선언형 마크업 언어입니다. 소스 텍스트는 입력이고, DOM은 브라우저가 실제로 렌더링하고 다른 모든 웹 기술이 상호작용하는 것입니다.

이 관점은 HTML의 많은 동작을 설명합니다. HTML 파싱은 의도적으로 관대합니다. 닫는 태그가 누락되거나 요소가 잘못 중첩되어도 오류가 발생하지 않습니다. 파서가 정의된 복구 알고리즘을 따르고 어쨌든 유효한 트리를 구축하기 때문입니다. 이것은 부주의함이 아니라 기능입니다. 이것은 20년간의 불완전한 페이지들이 작동하도록 유지했습니다. 또한 "렌더링된다"는 것이 정확성의 약한 테스트임을 의미합니다. 브라우저는 거의 모든 것으로부터 DOM을 구축하므로 마크업을 잘 구조화하는 것은 파서의 책임이 아니라 당신의 책임입니다.

<h1>환영합니다</h1>
<p>이것은 제 첫 웹 페이지의 텍스트 단락입니다.</p>

두 줄, 두 가지 구조: 하나는 제목이고 하나는 단락입니다. 브라우저는 라벨을 읽고 첫 번째 줄을 크고 굵게, 두 번째 줄을 일반 본문 텍스트로 표시합니다.

Juno페이지는 단순한 구조화된 텍스트일 뿐입니다 HTML은 브라우저가 페이지의 부분들이 무엇인지 알 수 있도록 라벨을 붙이는 방법입니다. 지시를 작성하지 않고, 콘텐츠를 마크업합니다. 이 부분은 제목이고, 이 부분은 단락입니다. 이것이 핵심 개념이고, 나머지 모든 것이 이것을 기반으로 합니다.

Juno페이지는 단순한 구조화된 텍스트일 뿐입니다 HTML은 선언형입니다. 구조를 설명하면 브라우저가 나머지를 처리합니다. 논리가 여기에 없으므로 CSS와 JavaScript와 완벽하게 짝을 이룹니다. HTML의 역할을 명확하게 이해하고 있으면 다른 두 가지는 배치하기가 더 쉬워집니다.

Juno페이지는 단순한 구조화된 텍스트일 뿐입니다 브라우저는 마크업을 DOM으로 파싱하고, 그 트리가 다른 모든 것이 작용하는 대상입니다. 파싱은 의도적으로 관대하므로 it renders는 거의 아무것도 증명하지 않습니다. 잘 형성된 구조는 당신의 책임이고, CSS와 JavaScript가 당신이 구축한 트리를 읽기 시작하는 순간 그 가치를 발휘합니다.

요소, 태그, 속성

HTML의 대부분은 **요소**로 구성됩니다. 요소는 보통 열린 태그, 콘텐츠, 닫는 태그를 가집니다.

<p>안녕하세요.</p>

<p>는 열린 태그이고, </p>는 닫는 태그(슬래시에 주목)이며, "안녕하세요."는 사이의 콘텐츠입니다. 함께 단락 요소를 이룹니다. 태그는 라벨이고, 콘텐츠는 방문자가 읽는 것입니다.

태그에 속성으로 추가 정보를 제공할 수도 있습니다. 링크는 어디로 가는지 알아야 하므로 href 속성으로 알려줍니다.

<a href="https://scrimba.com">Scrimba 방문하기</a>

요소는 열린 태그, 콘텐츠, 닫는 태그입니다. 속성은 열린 태그 안에 name="value" 쌍으로 들어가며 요소를 구성합니다. 링크에 href는 목적지를 설정하고, 이미지에 src는 파일을 설정하고, alt는 폴백 텍스트를 설정합니다.

<a href="https://scrimba.com" target="_blank">Scrimba 방문하기</a>

콘텐츠가 없고 닫는 태그가 없는 요소도 있습니다. 이를 **void 요소**라고 합니다. <img>, <br>, <input>, <hr>입니다. 필요한 모든 것이 속성에 들어가므로 감쌀 것도, 닫을 것도 없습니다.

어휘를 정확하게 이해하는 것이 가치 있습니다. 사람들이 느슨하게 사용하면 나중에 혼동을 일으키기 때문입니다. 태그는 당신이 입력하는 텍스트입니다. <p> 또는 </p>입니다. 요소는 파서가 생성하는 전체 것입니다. 태그와 콘텐츠, 그리고 모든 자식 요소입니다. 속성은 요소의 속성을 설정하는 열린 태그의 name="value" 쌍입니다.

Void 요소(<img>, <input>, <br>, <hr>, <meta>, <link>)는 콘텐츠 모델이 없으므로 닫는 태그가 없습니다. 때때로 보이는 끝의 슬래시(<br />)는 HTML에서는 선택사항이며 효과가 없으며, XHTML의 유물입니다. 속성 값은 숫자나 부울을 나타내더라도 문자열입니다. disabled는 단순히 존재하는 것이 참인 부울 속성이고, <input value="5">는 무언가가 그것을 숫자로 읽을 때까지 "5" 문자열을 보유합니다. DOM이 이 계층에서 문자열 타입임을 알면 JavaScript가 속성 값을 다시 읽기 시작할 때 버그의 한 부류를 피할 수 있습니다.

Juno요소, 태그, 속성 요소는 열린 태그, 콘텐츠, 닫는 태그입니다. <p>...</p>처럼요. 속성은 열린 태그 안에 들어가고 세부 사항을 추가합니다. 링크가 어디를 가리키는지처럼요. 모든 태그를 암기할 걱정을 하지 마세요. 필요할 때마다 조금씩 배워나갈 것입니다.

Juno요소, 태그, 속성 태그는 텍스트이고, 요소는 전체이고, 속성은 그것을 구성합니다. <img>와 <input> 같은 void 요소에 주의하세요. 콘텐츠가 없고, 닫는 태그가 없고, 모든 것이 속성에 살아 있습니다. 지금 어휘를 정확하게 이해하면 나머지 문서가 더 깔끔하게 읽힙니다.

Juno요소, 태그, 속성 Tag, element, attribute는 세 가지 다른 것을 의미하며, 이를 직선적으로 유지하면 디버깅할 때 보상을 받습니다. 이 계층에서 속성 값은 숫자와 부울이더라도 문자열입니다. JavaScript에서 처음으로 value가 문자열로 돌아올 때 이미 이유를 알 것입니다. Void 요소의 선택적 슬래시는 아무것도 하지 않습니다. 무시하세요.

HTML, CSS, JavaScript가 일을 나누는 방법

완성된 웹 페이지는 보통 세 가지 언어로 만들어지며, 각각 하나의 일을 합니다.

• HTML은 구조입니다. 제목, 텍스트, 이미지, 버튼입니다.
• **CSS**는 스타일입니다. 색상, 글꼴, 간격, 레이아웃입니다.
• **JavaScript**는 동작입니다. 클릭, 입력, 스크롤할 때 무슨 일이 일어나는지입니다.

이를 이해하는 일반적인 방법은 집에 비유하는 것입니다. HTML은 집의 벽과 방이고, CSS는 페인트와 가구이고, JavaScript는 물건을 켰다 껐다 할 수 있게 하는 전기입니다. 구조가 없으면 칠할 것도, 배선할 것도 없으므로 먼저 벽을 배우고 있습니다.

세 가지 언어는 계층화된 스택을 형성하고, 이 계층화는 의도적입니다. HTML은 구조와 의미를 제공합니다. CSS는 그 구조를 읽고 어떻게 표시되어야 하는지 설명합니다. JavaScript는 이벤트에 대응하여 구조를 읽고 변경합니다.

그들을 분리해서 유지하는 것은 일찍부터 구축할 가치 있는 훈련입니다. 콘텐츠가 HTML에 있고, 표현이 CSS에 있고, 동작이 JavaScript에 있을 때, 다른 것을 방해하지 않으면서 각각을 변경할 수 있습니다. 예를 들어 <br> 태그나 인라인 스타일로 레이아웃을 강제하면서 섞으면 처음에는 작동하지만 곧 고통스러워집니다.

세 가지에 걸친 관심사의 분리는 단순히 정돈이 아니라 페이지를 탄력적으로 만드는 것입니다. 의미가 완전히 HTML에 의해 전달되는 페이지는 우아하게 성능이 저하됩니다. CSS 로드에 실패해도 콘텐츠는 여전히 읽을 수 있고 정렬되어 있습니다. JavaScript가 비활성화되거나 오류가 발생해도 핵심 콘텐츠는 여전히 있습니다. 이것이 **점진적 개선**의 실제적인 주장입니다. 먼저 HTML에서 작동하는 문서를 만든 다음 위에 스타일과 동작을 계층화합니다.

또한 접근성과 성능 주장이기도 합니다. 보조 기술은 DOM을 읽으므로 HTML에 살아 있는 의미는 그것에 사용 가능하지만, CSS로 가짜로 만들거나 JavaScript에 의해 늦게 주입된 의미는 종종 그렇지 않습니다. 그리고 HTML은 브라우저가 먼저 파싱하고 칠할 수 있는 것입니다. JavaScript 왕복에 의존하는 콘텐츠는 사용자가 기다리는 콘텐츠입니다. 페이지의 한 부분이 어디에 살아야 하는지 결정할 때, 기본 답은 HTML이고, 구조만으로 일을 할 수 없을 때만 스택 위로 올라갑니다.

JunoHTML, CSS, JavaScript가 일을 나누는 방법 세 가지 언어, 세 가지 일. HTML은 구조이고, CSS는 스타일이고, JavaScript는 동작입니다. HTML부터 시작하는 이유는 다른 모든 것이 앉아 있는 부분이기 때문입니다. 이 벽들이 세워지면 페인트와 배선이 들어갈 곳이 있습니다.

JunoHTML, CSS, JavaScript가 일을 나누는 방법 HTML의 구조, CSS의 표현, JavaScript의 동작은 의도적으로 분리되어 있습니다. 하나를 변경하고 다른 것을 깨지 않으며, HTML에서 레이아웃을 가짜로 만드는 충동에 저항하세요. 그 습관은 지금 구축하기 저렴하고 나중에 익숙해지기에는 비쌉니다.

JunoHTML, CSS, JavaScript가 일을 나누는 방법 HTML에 의미를 넣으면 CSS나 JavaScript가 떨어질 때 페이지가 우아하게 성능이 저하되고, 이것은 또한 접근성이 있고 빠르게 만듭니다. 이것이 점진적 개선의 전체 경우입니다. 무언가가 어디에 속할지 불확실할 때는 스택의 맨 아래에서 시작하고 구조만으로는 할 수 없을 때만 올라갑니다.

전체 페이지를 처음 보기

완성된, 비록 작지만, 웹 페이지가 있습니다. 다음 장에서 모든 부분을 제대로 만날 것이므로 지금 세부 사항에 대해 걱정하지 않으셔도 됩니다. 지금은 그것이 이미 본 모든 태그와 속성으로 만들어졌다는 것을 주목하세요.

아래는 최소한이지만 완전한 HTML 문서입니다. 모든 실제 페이지는 대략 이 형태에서 시작됩니다. doctype, <html> 루트, 페이지 정보를 위한 <head>, 방문자가 보는 콘텐츠를 위한 <body>입니다.

완전한 문서는 필수 스켈레톤을 가지고 있으며, 보일러플레이트처럼 보이더라도 자세히 읽을 가치가 있습니다. 각 줄마다 일이 있고, 다음 장은 각 줄이 복사해야 할 마술 주문으로 취급하는 것이 아니라 그 자리를 버는 이유를 설명합니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>제 첫 번째 페이지</title>
  </head>
  <body>
    <h1>환영합니다</h1>
    <p>이것은 제 첫 웹 페이지의 텍스트 단락입니다.</p>
  </body>
</html>

맨 위에서 읽으세요. 첫 줄은 브라우저에 이것이 현대 HTML 페이지라고 알려줍니다. <html>은 모든 것을 감싸고, <head>는 페이지 제목처럼 숨겨진 정보를 가지고 있으며, <body>는 실제로 볼 수 있는 것을 가지고 있습니다. 앞의 제목과 단락은 방문자를 위한 콘텐츠이므로 본문 안에 살아 있습니다.

<head>는 메타데이터를 가지고 있습니다. 페이지 본문에 표시되지 않는 페이지에 대한 것들입니다. 브라우저 탭에 나타나는 페이지 제목과 문자 인코딩 같은 것들입니다. <body>는 보이는 콘텐츠를 가지고 있습니다. 이 분할, 페이지에 대한 정보와 페이지의 콘텐츠는 모든 문서가 만드는 첫 번째 구조적 결정입니다.

순서와 왜 중요한지 주목하세요. <meta charset>은 헤드의 처음에 오므로 파서가 문서의 나머지를 읽기 전에 그 바이트를 어떻게 디코딩하는지 알 수 있습니다. <html>의 lang 속성은 스크린 리더와 번역 도구에 알려줍니다. 이것은 장식이 아닙니다. 헤드는 문서가 파싱되고 이해되는 방식을 구성하고, 본문은 그 구성이 적용되는 콘텐츠입니다. 다음 장인 당신의 첫 HTML 페이지에서는 이 스켈레톤을 한 줄씩 분석합니다.

Juno전체 페이지를 처음 보기 모든 페이지는 작은 반복되는 스켈레톤으로 구성됩니다. doctype, 그 다음 <head>와 <body>를 감싸는 <html>입니다. 헤드는 숨겨진 정보이고, 본문은 사람들이 보는 것입니다. 다음에 제대로 분석할 것이므로 빠른 보기가 지금 당신이 필요한 전부입니다.

Juno전체 페이지를 처음 보기 핵심 분할은 헤드의 메타데이터와 본문의 보이는 콘텐츠입니다. 거의 모든 문서는 정확히 이 형태에서 시작하므로 보기에 인식하기에 가치 있습니다. 다음 장은 각 줄을 안내합니다.

Juno전체 페이지를 처음 보기 스켈레톤은 이유를 위해 정렬됩니다. 파서가 나머지를 디코딩할 수 있도록 콘텐츠 전의 charset, 보조 기술과 번역을 위한 lang입니다. 채우기로 취급하지 마세요. 지금 구조를 만들고 이해하면 헤드는 당신이 붙여넣는 마술 블록처럼 느껴지지 않게 됩니다.