Google I/O를 시청해 주셔서 감사합니다. 주문형 콘텐츠를 확인하세요.

Google은 AI 기술을 사용하여 콘텐츠를 사용자의 기본 언어로 번역합니다. AI 번역에는 오류가 있을 수 있습니다.

문서 구조

HTML 문서에는 문서 유형 선언과 <html> 루트 요소가 포함됩니다. <html> 요소에는 문서 헤드와 문서 본문이 중첩되어 있습니다. 문서의 헤드는 코드 외부에서는 표시되지 않지만 사이트가 작동하는 데는 필수적입니다. 여기에는 검색엔진 및 소셜 미디어 결과 정보, 브라우저 탭 및 모바일 홈 화면 바로가기 아이콘, 콘텐츠의 동작 및 표시 등 모든 메타 정보가 포함됩니다. 이 섹션에서는 표시되지는 않지만 거의 모든 웹페이지에 있는 구성요소를 알아봅니다.

MachineLearningWorkshop.com (MLW) 사이트를 만들려면 모든 웹페이지에 필수적인 구성요소인 문서 유형, 콘텐츠의 인간 언어, 문자 집합, 물론 사이트 또는 애플리케이션의 제목이나 이름을 포함하는 것부터 시작하세요.

모든 HTML 문서에 추가

모든 웹페이지에 필수적인 요소가 몇 가지 있습니다. 이러한 요소가 누락되면 브라우저에서 콘텐츠를 렌더링하지만 포함해야 합니다.

`<!DOCTYPE html>`

HTML 문서의 첫 번째 항목은 전문입니다. HTML의 경우 <!DOCTYPE html>만 있으면 됩니다. HTML 요소처럼 보이지만 실제로는 doctype이라는 특수 노드입니다. doctype은 브라우저에 표준 모드를 사용하도록 지시합니다. 생략하면 브라우저에서 쿼크 모드라고 하는 다른 렌더링 모드를 사용합니다. doctype을 포함하면 쿼크 모드를 방지할 수 있습니다.

`<html>`

<html> 요소는 HTML 문서의 루트 요소입니다. <head> 및 <body>의 상위 요소이며, doctype을 제외한 HTML 문서의 모든 내용을 포함합니다. 생략하면 언어가 암시되지만 문서의 언어를 선언하려면 포함해야 합니다.

콘텐츠 언어

<html> 태그의 lang 속성은 문서의 기본 언어를 정의합니다. 값은 ISO 언어 코드와 선택적 리전으로 구성됩니다. 예를 들어 캐나다의 프랑스어는 fr-CA이고 부르키나파소의 프랑스어는 fr-BF입니다. 이 선언은 스크린 리더, 검색엔진, 번역 서비스가 문서 언어를 식별하는 데 도움이 됩니다.

다른 태그에서 lang 속성을 사용하여 문서의 기본 언어에 대한 예외를 식별할 수 있습니다. 헤드에서의 사용과 마찬가지로 본문 내 lang 속성은 시각적 효과가 없습니다. 시맨틱스를 추가하므로 보조 기술과 자동화된 서비스가 특정 콘텐츠의 언어를 식별할 수 있습니다.

문서의 언어와 기본 언어의 예외를 설정하는 것 외에도 이 속성은 CSS 선택자에서 사용할 수 있습니다. <span lang="fr-fr">Ceci n'est pas une pipe.</span>는 속성 및 언어 선택기 [lang|="fr"] 및 :lang(fr)로 타겟팅할 수 있습니다.

`<head>`

여는 <html> 태그와 닫는 태그 사이에 중첩된 두 개의 하위 요소 <head>와 <body>가 있습니다.

<!DOCTYPE html>
<html lang="en-US">
  <head>
  </head>
  <body>
  </body>
</html>

<head>에는 사이트 또는 애플리케이션의 메타데이터가 포함되고 <body>에는 표시되는 콘텐츠가 포함됩니다. 이 섹션의 나머지 부분에서는 <head> 요소 내에 중첩된 구성요소에 중점을 둡니다.

`<head>` 내의 필수 구성요소

문서 제목, 문자 집합, 뷰포트 설정, 설명, 기본 URL, 스타일시트 링크, 아이콘을 비롯한 문서 메타데이터는 <head> 요소에 있습니다. 이러한 기능을 모두 사용하지 않아도 되지만 항상 문자 집합, 제목, 뷰포트 설정을 포함하세요.

문자 인코딩

<head>의 첫 번째 요소는 charset 문자 인코딩 선언이어야 합니다. 브라우저가 제목의 문자와 문서의 나머지 모든 문자를 렌더링할 수 있도록 제목 앞에 옵니다.

대부분의 브라우저에서 기본 인코딩은 언어에 따라 windows-1252입니다. 하지만 모든 문자의 1~4바이트 인코딩을 지원하는 UTF-8를 사용하는 것이 좋습니다.

문자 인코딩을 UTF-8로 설정하려면 다음을 포함하세요.

<meta charset="utf-8" />

UTF-8 (대소문자 구분 안 함)를 선언하면 제목에 그림 이모티콘을 포함할 수도 있습니다.

문자 인코딩은 <style> 및 <script>을 비롯한 문서의 모든 항목에 상속됩니다. 이 작은 선언은 클래스 이름과 selectorAPI에 그림 이모티콘을 포함할 수 있음을 의미합니다. 그림 이모티콘을 사용하는 경우 접근성을 해치지 않으면서 사용성을 개선하는 방식으로 사용해야 합니다.

문서 제목

홈페이지와 모든 추가 페이지에는 고유한 제목이 있어야 합니다. 문서 제목의 콘텐츠, 열기 및 닫기 <title> 태그 사이의 텍스트는 브라우저 탭, 열려 있는 창 목록, 기록, 검색 결과에 표시되며, <meta> 태그로 재정의되지 않는 한 소셜 미디어 카드에도 표시됩니다.

<title>Machine Learning Workshop</title>

표시 영역 메타데이터

viewport 메타 태그는 사이트 반응형에 필수적이며, 표시 영역 너비와 관계없이 콘텐츠가 제대로 렌더링되도록 합니다. 뷰포트 메타 태그는 2007년부터 있었지만 최근에야 사양에 문서화되었습니다. 이 속성은 콘텐츠가 작은 화면에 맞게 축소되지 않도록 표시 영역 크기와 비율을 제어합니다.

<meta name="viewport" content="width=device-width" />

위 코드는 '콘텐츠의 너비를 화면 너비로 설정하여 사이트를 반응형으로 만드세요'라는 의미입니다. width 외에도 확대/축소 및 확장성을 설정할 수 있지만 둘 다 접근성 값이 기본값입니다. 명시적으로 지정하려면 다음을 포함하세요.

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1" />

뷰포트는 Lighthouse 접근성 감사의 일부입니다. 확장 가능하고 최대 크기가 설정되어 있지 않으면 사이트가 통과됩니다.

지금까지 HTML 파일의 개요는 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Machine Learning Workshop</title>
    <meta name="viewport" content="width=device-width" />
  </head>
  <body>

  </body>
</html>

기타 `<head>` 콘텐츠

<head>에는 더 많은 요소가 포함되어 있습니다. 사실상 모든 메타데이터입니다. <head>에서 확인할 수 있는 대부분의 요소는 이 모듈에서 다루지만 메타데이터 모듈에서 자세히 설명합니다.

메타 문자 집합과 문서 제목을 확인했지만 <meta> 태그 외부에 포함해야 하는 메타데이터가 훨씬 더 많습니다.

CSS

<head>는 HTML의 스타일을 포함하는 곳입니다. 스타일에 대해 알아보려면 CSS 전용 학습 과정이 있지만 HTML 문서에 스타일을 포함하는 방법을 알아야 합니다.

CSS를 포함하는 방법에는 <link>, <style>, style 속성의 세 가지가 있습니다.

HTML 파일에 스타일을 포함하는 두 가지 주요 방법은 rel 속성이 stylesheet로 설정된 <link> 요소를 사용하여 외부 리소스를 포함하거나, 여는 <style> 태그와 닫는 태그 내에서 문서의 헤드에 CSS를 직접 포함하는 것입니다.

<link> 태그는 스타일시트를 포함하는 데 권장되는 방법입니다. 하나 또는 몇 개의 외부 스타일시트를 연결하면 개발자 환경과 사이트 성능 모두에 좋습니다. CSS가 여기저기 흩어져 있는 대신 한곳에서 유지관리할 수 있고 브라우저가 외부 파일을 캐시할 수 있으므로 페이지 탐색마다 다시 다운로드하지 않아도 됩니다.

구문은 <link rel="stylesheet" href="styles.css">이고, 여기서 styles.css은 스타일 시트의 파일 이름과 상대 위치입니다. type="text/css" 속성이 표시될 수 있지만 필수는 아닙니다. rel 속성은 관계를 정의하며 이 경우 stylesheet입니다. rel 속성을 생략하면 CSS가 연결되지 않습니다.

곧 다른 rel 값을 몇 개 더 살펴보겠지만 먼저 CSS를 포함하는 다른 방법을 알아보겠습니다.

외부 스타일시트 스타일이 캐스케이드 레이어 내에 있어야 하지만 CSS 파일을 수정할 수 없는 경우 <style> 내에 @import를 사용하여 CSS를 포함해야 합니다.

<style>
  @import "styles.css" layer(firstLayer);
</style>

@import를 사용하여 스타일 시트를 문서로 가져올 때(선택적으로 캐스케이드 레이어로) @import 문은 문자 집합 선언을 제외하고 <style> 또는 연결된 스타일 시트의 첫 번째 문이어야 합니다.

캐스케이드 레이어는 아직 비교적 새로운 개념이며 @import가 헤드 <style>에 표시되지 않을 수도 있지만, 헤드 스타일 블록에 선언된 맞춤 속성이 자주 표시됩니다.

<style>
  :root {
    --theme-color: #226DAA;
  }
</style>

<link>, <style> 또는 둘 다로 추가된 스타일은 헤드에 있어야 합니다. 문서 본문에 포함된 경우 작동하지만 성능상의 이유로 헤드에 스타일을 추가해야 합니다. 콘텐츠가 먼저 로드되기를 원할 수 있으므로 직관적이지 않다고 생각할 수 있습니다. 하지만 콘텐츠가 로드될 때 브라우저가 콘텐츠를 렌더링하는 방법을 아는 것이 좋습니다. 스타일을 먼저 추가하면 요소가 처음 렌더링된 후 스타일이 지정될 때 발생하는 불필요한 다시 페인트를 방지할 수 있습니다.

문서의 <head>에 사용하지 않는 스타일을 포함하는 한 가지 방법이 있습니다. 바로 인라인 스타일입니다. 사용자 에이전트의 스타일 시트가 기본적으로 헤드를 숨기기 때문에 헤드에서 인라인 스타일을 사용하는 경우는 거의 없습니다. 하지만 JavaScript 없이 CSS 편집기를 만들고 싶다면(예: 페이지의 맞춤 요소를 테스트하기 위해) display: block를 사용하여 헤드를 표시한 다음 헤드의 모든 항목을 숨기고 인라인 style 속성을 사용하여 콘텐츠 수정 가능 스타일 블록을 표시하면 됩니다.

<style contenteditable style="display: block; font-family: monospace; white-space: pre;">
  head { display: block; }
  head * { display: none; }
  :root {
    --theme-color: #226DAA;
  }
</style>

<style> 요소에 인라인 스타일을 추가할 수 있습니다.

`<link>` 요소의 기타 용도

link 요소는 HTML 문서와 외부 리소스 간의 관계를 만드는 데 사용됩니다. 이러한 리소스 중 일부는 다운로드할 수 있고 일부는 정보 제공용입니다. 관계 유형은 rel 속성 값으로 정의됩니다. <link>, <a>, <area> 또는 <form>와 함께 사용할 수 있는 rel 속성의 값은 25개이며, 일부는 모두와 함께 사용할 수 있습니다. 메타 정보와 관련된 내용은 헤드에, 성능과 관련된 내용은 <body>에 포함하는 것이 좋습니다.

이제 헤더에 icon, alternate, canonical의 세 가지 다른 유형을 포함합니다. 다음 모듈에서는 네 번째 유형인 rel="manifest"을 추가합니다.

파비콘

rel="icon"과 함께 <link> 태그를 사용하여 문서의 파비콘을 식별합니다. 파비콘은 브라우저 탭에 표시되는 작은 아이콘으로, 보통 문서 제목 왼쪽에 표시됩니다. 탭이 축소되면 제목이 사라질 수 있지만 아이콘은 계속 표시됩니다. 대부분의 파비콘은 회사 또는 애플리케이션 로고입니다.

파비콘을 선언하지 않으면 브라우저가 최상위 디렉터리 (웹사이트의 루트 폴더)에서 favicon.ico라는 파일을 찾습니다. <link>를 사용하면 다른 파일 이름과 위치를 사용할 수 있습니다.

<link rel="icon" sizes="16x16 32x32 48x48" type="image/png" href="/images/mlwicon.png" />

위 코드는 '16px, 32px 또는 48px이 적합한 시나리오에서 mlwicon.png을 아이콘으로 사용'이라고 말합니다. sizes 속성은 확장 가능한 아이콘의 경우 any 값을 허용하거나 공백으로 구분된 정사각형 widthXheight 값 목록을 허용합니다. 여기서 너비와 높이 값은 해당 기하학적 시퀀스에서 16, 32, 48 이상이며 픽셀 단위는 생략되고 X는 대소문자를 구분하지 않습니다.

<link rel="apple-touch-icon" sizes="180x180" href="/images/mlwicon.png" />
<link rel="mask-icon" href="/images/mlwicon.svg" color="#226DAA" />

Safari 브라우저에는 두 가지 특별한 비표준 아이콘이 있습니다. iOS 기기의 경우 apple-touch-icon, macOS의 고정 탭의 경우 mask-icon입니다. apple-touch-icon는 사용자가 사이트를 홈 화면에 추가할 때만 적용됩니다. 다양한 기기에 대해 서로 다른 sizes를 사용하여 여러 아이콘을 지정할 수 있습니다. mask-icon는 사용자가 데스크톱 Safari에서 탭을 고정하는 경우에만 사용됩니다. 아이콘 자체는 단색 SVG여야 하며 color 속성은 필요한 색상으로 아이콘을 채웁니다.

<link>를 사용하여 각 페이지 또는 각 페이지 로드에서 완전히 다른 이미지를 정의할 수 있지만 그렇게 하지 마세요. 일관성과 우수한 사용자 환경을 위해 단일 이미지를 사용하세요. Google은 다양한 애플리케이션에 각각 다른 파비콘을 사용합니다. 예를 들어 메일 아이콘, 캘린더 아이콘 등이 있습니다. 하지만 모든 Google 아이콘은 동일한 색 구성표를 사용합니다. 아이콘을 통해 열려 있는 탭의 콘텐츠를 정확히 알 수 있습니다.

사이트의 대체 버전

rel 속성의 alternate 값을 사용하여 사이트의 번역 또는 대체 표현을 식별합니다.

사이트가 프랑스어와 브라질 포르투갈어로 번역된 버전이 있다고 가정해 보겠습니다.

<link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />

번역에 alternate을 사용하는 경우 hreflang 속성을 설정해야 합니다.

대체 값은 번역뿐만 아니라 다양한 용도로 사용됩니다. 예를 들어 type 속성이 application/rss+xml 또는 application/atom+xml로 설정된 경우 type 속성은 RSS 피드의 대체 URI를 정의할 수 있습니다.

사이트의 가상 PDF 버전 링크:

<link rel="alternate" type="application/x-pdf" href="https://machinelearningworkshop.com/mlw.pdf" />

rel 값이 alternate stylesheet인 경우 대체 스타일시트를 정의하며 title 속성을 설정하여 대체 스타일에 이름을 지정해야 합니다.

표준

머신러닝 워크숍의 번역 또는 버전을 여러 개 만들면 검색엔진에서 공신력 있는 출처를 식별하지 못할 수 있습니다. rel="canonical"를 사용하여 사이트 또는 애플리케이션의 기본 URL을 식별합니다.

번역된 모든 페이지와 홈페이지에 표준 URL을 포함하여 Google에서 선호하는 URL을 표시합니다.

<link rel="canonical" href="https://www.machinelearning.com" />

rel="canonical" 표준 링크는 원본 출처를 표시하기 위해 게시 및 블로그 플랫폼과 교차 게시하는 데 가장 자주 사용됩니다. 사이트에서 콘텐츠를 신디케이트하는 경우 원본 소스로 연결되는 표준 링크를 포함해야 합니다.

스크립트

<script> 태그에 스크립트가 포함되어 있습니다. 기본 유형은 JavaScript입니다. 다른 스크립트 언어를 사용하는 경우 MIME 유형이 포함된 type 속성 또는 JavaScript 모듈의 경우 type="module"을 포함합니다. JavaScript 및 JavaScript 모듈만 파싱되고 실행됩니다.

<script> 태그는 코드를 캡슐화하거나 외부 파일을 다운로드하는 데 사용할 수 있습니다. MLW에는 외부 스크립트 파일이 없습니다. 일반적으로 알려진 바와 달리 기능적인 웹사이트에는 JavaScript가 필요하지 않기 때문입니다. 이것은 JavaScript 학습 과정이 아닌 HTML 학습 과정입니다.

나중에 이스터 에그를 만들기 위해 약간의 JavaScript를 포함할 것입니다.

<script>
  document.getElementById('switch').addEventListener('click', function() {
    document.body.classList.toggle('black');
  });
</script>

이 스니펫은 ID가 switch인 요소의 이벤트 핸들러를 만듭니다. JavaScript를 사용할 때는 요소가 존재하기 전에 요소를 참조하지 않아야 합니다. switch가 아직 없으므로 이벤트 핸들러는 아직 포함하지 않습니다.

조명 스위치 요소를 추가할 때는 <head>이 아닌 <body> 하단에 <script>을 추가합니다. 그 이유는 무엇인가요? 두 가지 이유가 있습니다. 이 스크립트는 DOMContentLoaded 이벤트를 기반으로 하지 않으므로 스크립트가 참조하는 요소가 스크립트가 발견되기 전에 존재해야 합니다. 또한 JavaScript는 주로 렌더링 차단일 뿐만 아니라 스크립트가 다운로드되면 브라우저가 모든 애셋의 다운로드를 중지하고 JavaScript 실행이 완료될 때까지 다른 애셋의 다운로드를 재개하지 않습니다. 따라서 JavaScript 요청은 헤드가 아닌 문서 끝에 있는 경우가 많습니다.

JavaScript 다운로드 및 실행의 차단 특성을 줄일 수 있는 속성에는 defer와 async 두 가지가 있습니다. defer를 사용하면 다운로드 중에 HTML 렌더링이 차단되지 않으며 JavaScript는 문서의 렌더링이 완료된 후에만 실행됩니다. async를 사용하면 다운로드 중에도 렌더링이 차단되지 않지만 스크립트 다운로드가 완료되면 JavaScript가 실행되는 동안 렌더링이 일시중지됩니다.

비동기 및 지연을 사용하는 경우 로드 — 스크립트의 다양한 로드 전략을 보여주는 그림 일부 스크립트는 실행을 지연하는 것이 좋고, 일부는 `async` 속성으로 로드될 때 즉시 실행할 수 있습니다. **참고:** `<script type="module">`를 사용하여 로드된 모듈 스크립트에는 기본적으로 `defer`가 사용 설정되어 있습니다.

외부 파일에 MLW의 JavaScript를 포함하려면 다음과 같이 작성하면 됩니다.

<script src="js/switch.js" defer></script>

defer 속성을 추가하면 모든 항목이 렌더링될 때까지 스크립트 실행이 지연되어 스크립트가 성능에 영향을 미치지 않습니다. async 및 defer 속성은 외부 스크립트에서만 유효합니다.

기본

<head>.에서만 발견되는 또 다른 요소가 있습니다. 자주 사용되지 않는 <base> 요소를 사용하면 기본 링크 URL과 타겟을 설정할 수 있습니다. href 속성은 모든 상대 링크의 기본 URL을 정의합니다.

<base>뿐만 아니라 링크와 양식에서도 유효한 target 속성은 이러한 링크가 열릴 위치를 설정합니다. _self의 기본값은 연결된 파일을 현재 문서와 동일한 컨텍스트에서 엽니다. 다른 옵션으로는 모든 링크를 새 창에서 여는 _blank, 오프너가 iframe이 아닌 경우 self와 동일할 수 있는 현재 콘텐츠의 _parent, 동일한 브라우저 탭에 있지만 전체 탭을 차지하기 위해 컨텍스트에서 팝아웃되는 _top이 있습니다.

대부분의 개발자는 <base>를 사용하는 대신 링크나 양식 자체에서 새 창으로 열고 싶은 링크에 target 속성을 추가합니다.

<base target="_top" href="https://machinelearningworkshop.com" />

웹사이트가 Yummly와 같은 사이트의 iframe 내에 중첩되어 있는 경우 <base> 요소를 포함하면 사용자가 문서 내 링크를 클릭할 때 링크가 iframe에서 팝업되어 전체 브라우저 창을 차지하게 됩니다.

이 요소의 단점 중 하나는 앵커 링크가 <base>로 확인된다는 것입니다. <base>는 링크 <a href="#ref">를 <a target="_top" href="https://machinelearningworkshop.com#ref">로 효과적으로 변환하여 프래그먼트가 연결된 기준 URL에 대한 HTTP 요청을 트리거합니다.

<base>에 대한 추가 정보:

문서에는 <base> 요소가 하나만 있을 수 있습니다.
스크립트 또는 스타일시트 참조를 비롯한 모든 상대 URL이 사용되기 전에 와야 합니다.

이제 코드가 다음과 같이 표시됩니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Machine Learning Workshop</title>
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="css/styles.css" />
    <link rel="icon" type="image/png" href="/images/favicon.png" />
    <link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
    <link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
    <link rel="canonical" href="https://www.machinelearning.com" />
  </head>
  <body>

    <!-- <script defer src="scripts/lightswitch.js"></script>-->
  </body>
</html>

HTML 의견

스크립트는 꺾쇠 괄호, 대시, 느낌표로 래핑되어 있습니다. 이는 HTML을 주석 처리하는 방법입니다.  사이의 내용은 표시되거나 파싱되지 않습니다. 스크립트 또는 스타일 블록 내를 제외한 페이지의 어느 곳에나 HTML 주석을 배치할 수 있습니다. 스크립트 또는 스타일 블록 내에서는 JavaScript 및 CSS 주석을 사용해야 합니다.

<head>에 들어가는 기본적인 내용을 다뤘지만 기본 이상의 내용을 배우고 싶습니다. 다음 섹션에서는 메타 태그와 소셜 미디어에서 웹사이트가 링크될 때 표시되는 항목을 제어하는 방법을 알아봅니다.

이해도 테스트

문서 구조에 대한 지식을 테스트합니다.

문서의 언어를 어떻게 식별하나요?

HTML 태그에 language 속성을 추가합니다.

다시 시도해 보세요.

HTML 태그에 lang 속성을 추가합니다.

정답입니다.

Add the <lang> 요소를 <head>에 추가합니다.

다시 시도해 보세요.

<head>에 포함될 수 있는 요소를 선택합니다.

<p>

다시 시도해 보세요.

<title>

정답입니다.

<meta>

정답입니다.

HTML 개요

Metadata

문서 구조 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

모든 HTML 문서에 추가

<!DOCTYPE html>

<html>

콘텐츠 언어

<head>

<head> 내의 필수 구성요소

문자 인코딩

문서 제목

표시 영역 메타데이터

기타 <head> 콘텐츠

CSS

<link> 요소의 기타 용도

파비콘

사이트의 대체 버전

표준

스크립트

기본

HTML 의견

이해도 테스트

문서 구조

`<!DOCTYPE html>`

`<html>`

`<head>`

`<head>` 내의 필수 구성요소

기타 `<head>` 콘텐츠

`<link>` 요소의 기타 용도