HTML 문서에는 문서 유형 선언과 <html> 루트
요소가 포함됩니다. <html> 요소 내에는 문서 헤드와 문서 본문이 중첩되어 있습니다.
문서 헤드는 코드 외부에서 볼 수 없지만 사이트가 작동하는 데는 필수적입니다. 여기에는 검색엔진 및 소셜 미디어 결과, 브라우저 탭 및 모바일 홈 화면 바로가기 아이콘, 콘텐츠의 동작 및 프레젠테이션을 위한 정보를 비롯한 모든 메타 정보가 포함됩니다. 이 섹션에서는 보이지는 않지만 거의 모든 웹페이지에 있는 구성요소를 알아봅니다.
MachineLearningWorkshop.com (MLW) 사이트를 만들려면 모든 웹페이지에 필수적인 구성요소인 문서 유형, 콘텐츠의 인간 언어, 문자 집합, 그리고 물론 사이트 또는 애플리케이션의 제목 또는 이름을 포함하는 것으로 시작합니다.
모든 HTML 문서에 추가
모든 웹페이지에 필수적인 요소가 여러 개 있습니다. 브라우저는 이러한 요소가 누락된 경우 콘텐츠를 렌더링하지만 이러한 요소를 포함해야 합니다.
<!DOCTYPE html>
모든 HTML 문서의 첫 번째 항목은 프리앰블입니다. HTML의 경우
<!DOCTYPE html>만 있으면 됩니다. 이것은 HTML 요소처럼 보이지만 실제로는 doctype 이라는 특수 노드입니다. doctype은 브라우저에 표준 모드를 사용하도록 지시합니다.
생략하면 브라우저는
쿼크 모드라는 다른 렌더링 모드를 사용합니다.
doctype을 포함하면 쿼크 모드를 방지하는 데 도움이 됩니다.
<html>
<html> 요소는 HTML 문서의 루트 요소입니다. doctype을 제외한 HTML 문서의 모든 항목을 포함하는 <head> 및 <body>의 상위 요소입니다. 생략하면 언어가 암시되지만 문서의 언어를 선언하려면 언어를 포함해야 합니다.
콘텐츠 언어
lang 속성
<html> 태그의 문서 기본
언어를 정의합니다. 값은 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 meta 태그는 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 파일에 스타일을 포함하는 두 가지 주요 방법은
외부 리소스를 <link> 요소를 사용하여 포함하거나 rel 속성이
stylesheet로 설정되거나
여는 <style> 태그와 닫는 <style> 태그 내의 문서 헤드에 CSS를 직접 포함하는 것입니다.
<link> 태그는 스타일시트를 포함하는 데 선호되는 방법입니다. 하나 또는 몇 개의 외부 스타일시트를 연결하는 것은 개발자 환경과 사이트 성능 모두에 좋습니다. CSS가 모든 곳에 흩어져 있는 대신 한 곳에서 CSS를 유지할 수 있고 브라우저가 외부 파일을 캐시할 수 있으므로 페이지 탐색마다 다시 다운로드할 필요가 없습니다.
구문은 <link rel="stylesheet" href="styles.css">입니다. 여기서 styles.css는 스타일시트의 파일 이름과 상대적 위치입니다.
type="text/css" 속성이 표시될 수 있지만 필수는 아닙니다. rel 속성은 관계를 정의하며 이 경우 stylesheet입니다. rel 속성을 생략하면 CSS가 연결되지 않습니다.
곧 다른 rel 값을 몇 개 더 알아보겠지만 먼저 CSS를 포함하는 다른 방법을 알아보겠습니다.
외부 스타일시트 스타일이 캐스케이드 레이어 내에 있지만
CSS 파일을 수정할 수 없는 경우
@import를 사용하여 CSS를 포함해야 합니다.
<style>
<style>
@import "styles.css" layer(firstLayer);
</style>
@import를 사용하여 스타일시트를 문서로 가져올 때(선택적으로
캐스케이드 레이어로 가져올 때) @import 문은 문자 집합 선언 외부의
<style> 또는 연결된 스타일시트의 첫 번째 문이어야 합니다.
캐스케이드 레이어는 아직 비교적 새로운 기능이며 헤드 <style>에서
@import를 발견하지 못할 수도 있지만
헤드 스타일 블록에서 선언된 맞춤 속성을 자주 볼 수 있습니다.
<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 속성의 값으로 정의됩니다. `rel` 속성에 사용할 수 있는 값은 25개이며 rel
<link>, <a>, <area> 또는 <form>과 함께 사용할 수 있으며 일부는 모두와 함께 사용할 수 있습니다. 메타
정보와 관련된 항목은 헤드에 포함하고 성능과 관련된 항목은 <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을 포함하여 선호하는 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가 실행되는 동안 렌더링이 일시중지됩니다.
외부 파일에 MLW의 JavaScript를 포함하려면 다음을 작성하면 됩니다.
<script src="js/switch.js" defer></script>
defer
속성을 추가하면 모든 항목이 렌더링될 때까지 스크립트 실행이 지연되어
스크립트가 성능을 저해하는 것을 방지할 수 있습니다. async 및 defer 속성은 외부 스크립트에서만 유효합니다.
베이스
<head>.에만 있는 다른 요소가 있습니다. 자주 사용되지 않는 <base> 요소를 사용하면 기본 링크 URL과 타겟을 설정할 수 있습니다. href 속성은 모든 상대 링크의 기본 URL을 정의합니다.
링크와 양식뿐만 아니라 <base>에서도 유효한 target 속성은 링크가 열릴 위치를 설정합니다. 기본값인 _self는 연결된 파일을 현재 문서와 동일한 컨텍스트에서 엽니다. 다른 옵션으로는 모든 링크를 새 창에서 여는 _blank, 오프너가 iframe이 아닌 경우 자체와 동일할 수 있는 현재 콘텐츠의 _parent, 동일한 브라우저 탭에 있지만 컨텍스트에서 팝업되어 전체 탭을 차지하는 _top이 있습니다.
대부분의 개발자는 target 속성을 사용하는 대신 링크 또는 양식 자체에서 새 창으로 열려는 링크(있는 경우)에
를 추가합니다.<base>
<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을 주석 처리하는 방법입니다. <!--와 --> 사이의 모든 항목은 표시되거나
파싱되지 않습니다. JavaScript 및 CSS 의견을 사용해야 하는 스크립트 또는 스타일 블록을 제외하고 페이지의 어느 곳에나 HTML 의견을 배치할 수 있습니다.
<head>에 포함되는 항목의 기본사항을 다루었지만 기본사항보다 더 자세히 알아보고 싶습니다. 다음 섹션에서는 메타 태그와 웹사이트가 소셜 미디어에 연결될 때 표시되는 항목을 제어하는 방법을 알아봅니다.
이해도 테스트
문서 구조에 관한 지식을 테스트해 보세요.
문서의 언어를 어떻게 식별하나요?
language 속성을 추가합니다.lang 속성을 추가합니다.<head>에 Add the <lang> 요소를 추가합니다.<head>에 포함할 수 있는 요소를 선택합니다.
<p><title><meta>