HTML 문서에는 문서 유형 선언과 <html> 루트 요소가 포함됩니다. <html> 요소에는 문서 헤드와 문서 본문이 중첩되어 있습니다. 문서의 헤드가 정상 방문자에게는 보이지 않지만 사이트가 제대로 작동하도록 하는 것이 중요합니다. 여기에는 검색엔진 및 소셜 미디어 결과에 관한 정보, 브라우저 탭 및 모바일 홈 화면 바로가기 아이콘, 콘텐츠 동작 및 표시 방식을 비롯한 모든 메타 정보가 포함됩니다. 이 섹션에서는 보이지는 않지만 거의 모든 웹페이지에 있는 구성요소에 대해 알아봅니다.
MachineLearningWorkshop.com(MLW) 사이트를 만들려면 먼저 모든 웹페이지에 반드시 필요한 요소(문서 유형, 콘텐츠의 인간 언어, 문자 집합, 사이트 또는 애플리케이션의 제목이나 이름)를 포함해야 합니다.
모든 HTML 문서에 추가
모든 웹페이지에는 필수적으로 고려해야 하는 기능이 몇 가지 있습니다. 이러한 요소가 없는 경우에도 브라우저에서 콘텐츠를 렌더링하지만 이러한 요소가 포함됩니다. 항상을 탭합니다.
<!DOCTYPE html>
HTML 문서에서 가장 먼저 하는 것은 서문입니다. HTML의 경우 <!DOCTYPE html>만 있으면 됩니다. 이 요소는 HTML 요소처럼 보일 수 있지만 실제로는 HTML 요소가 아닙니다. 'doctype'이라는 특별한 종류의 노드입니다. doctype은 브라우저에 표준 모드를 사용하도록 지시합니다. 이를 생략하면 브라우저는 쿼크 모드라고 하는 다른 렌더링 모드를 사용합니다. doctype을 포함하면 쿼크 모드를 방지할 수 있습니다.
<html>
<html> 요소는 HTML 문서의 루트 요소입니다. <head> 및 <body>의 상위 요소로, HTML 문서에서 doctype을 제외한 모든 항목을 포함합니다. 생략해도 암시되는 것처럼 보이지만 이것이 문서의 콘텐츠 언어가 선언되는 요소이므로 포함하는 것이 중요합니다.
콘텐츠 언어입니다.
<html> 태그에 추가된 lang 언어 속성은 문서의 기본 언어를 정의합니다. lang 속성의 값은 2~3자로 된 ISO 언어 코드이며 그 뒤에 지역이 표시됩니다. 지역은 선택사항이지만 언어가 지역마다 크게 다를 수 있으므로 권장됩니다. 예를 들어 캐나다 (fr-CA)와 부르키나파소 (fr-BF)에서는 프랑스어가 매우 다릅니다. 이 언어 선언을 사용하면 스크린 리더, 검색엔진, 번역 서비스에서 문서 언어를 인식할 수 있습니다.
lang 속성은 <html> 태그로 제한되지 않습니다. 페이지 내에 기본 문서 언어와 다른 언어로 된 텍스트가 있는 경우 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>에는 사이트 또는 애플리케이션에 대한 모든 메타데이터가 포함됩니다. 본문에는 표시되는 콘텐츠가 포함됩니다. 이 섹션의 나머지 부분에서는 열기 및 닫기 <head></head> 내부에 중첩된 구성요소를 중점적으로 다룹니다.
<head> 내부의 필수 구성요소
문서 제목, 문자 집합, 표시 영역 설정, 설명, 기본 URL, 스타일시트 링크, 아이콘을 비롯한 문서 메타데이터는 <head> 요소에 있습니다. 이러한 모든 기능이 필요한 것은 아니지만 항상 문자 집합, 제목 및 표시 영역 설정을 포함해야 합니다.
문자 인코딩
<head>의 맨 처음 요소는 charset 문자 인코딩 선언이어야 합니다. 브라우저가 제목 앞에 오는 문자와 문서의 나머지 부분에 있는 모든 문자를 렌더링할 수 있습니다.
언어에 따라 대부분의 브라우저에서 기본 인코딩은 windows-1252입니다. 그러나 존재조차 몰랐던 모든 문자를 1~4바이트 인코딩할 수 있으므로 UTF-8를 사용해야 합니다. 또한 HTML5에 필요한 인코딩 유형입니다.
문자 인코딩을 UTF-8로 설정하려면 다음을 포함하세요.
<meta charset="utf-8" />
UTF-8 (대소문자를 구분하지 않음)를 선언하면 제목에 그림 이모티콘을 포함할 수도 있습니다 (단, 권장하지 않음).
문자 인코딩은 문서의 모든 항목(<style> 및 <script> 포함)에 상속됩니다. 이 간단한 선언은 클래스 이름과 selectorAPI에 이모티콘을 포함할 수 있다는 의미입니다. 그림 이모티콘을 사용하는 경우 접근성을 해치지 않으면서 사용성을 개선하는 방식으로 그림 이모티콘을 사용해야 합니다.
문서 제목
홈페이지와 모든 추가 페이지에는 각각 고유한 제목이 있어야 합니다. 문서 제목의 콘텐츠(열기 및 닫는 <title> 태그 사이의 텍스트)는 브라우저 탭, 열려 있는 창 목록, 기록, 검색 결과에 표시되며 <meta> 태그로 재정의하지 않는 한 소셜 미디어 카드에 표시됩니다.
<title>Machine Learning Workshop</title>
표시 영역 메타데이터
필수적인 또 다른 메타 태그는 표시 영역 메타 태그로, 표시 영역 너비에 관계없이 사이트 응답성을 높여 콘텐츠가 기본적으로 잘 렌더링되도록 합니다. 표시 영역 메타 태그는 2007년 6월부터 사용되어 왔지만 첫 iPhone이 출시되었을 때는 최근에 사양에 문서화되었습니다. 뷰포트의 크기와 크기를 제어할 수 있고, 960픽셀의 사이트를 320픽셀 화면에 맞추기 위해 사이트의 콘텐츠 크기를 줄일 수 없으므로 이 방법을 사용하는 것이 좋습니다.
<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> 옵션을 저장합니다.
지금까지 메타 문자 집합과 문서 제목을 살펴봤지만 <meta> 태그 외에 포함해야 할 메타데이터가 훨씬 많습니다.
CSS
<head>에는 HTML의 스타일을 포함할 수 있습니다. 스타일에 관해 알아보고 싶다면 CSS 전용 학습 과정이 있지만, HTML 문서에 스타일을 포함하는 방법을 알아야 합니다.
CSS를 포함하는 방법에는 <link>, <style>, style 속성과 같은 세 가지 방법이 있습니다.
HTML 파일에 스타일을 포함하는 기본 두 가지 방법은 rel 속성이 stylesheet로 설정된 <link> 요소를 사용하여 외부 리소스를 포함하거나 <style> 태그 내에서 문서의 헤드에 직접 CSS를 포함하는 것입니다.
스타일시트를 포함할 때는 <link> 태그를 사용하는 것이 좋습니다. 외부 스타일 시트를 하나 또는 몇 개 연결하는 것은 개발자 경험과 사이트 성능 모두에 좋습니다. CSS를 모든 곳에 흩어 놓지 않고 한 곳에서 관리할 수 있으며, 브라우저가 외부 파일을 캐시할 수 있으므로 페이지를 탐색할 때마다 다시 다운로드할 필요가 없습니다.
구문은 <link rel="stylesheet" href="styles.css">이며, 여기서 style.css는 스타일시트의 URL입니다. type="text/css"가 자주 표시됩니다. 필요하지 않습니다. CSS가 아닌 다른 항목으로 작성된 스타일을 포함하는 경우 type가 필요하지만 다른 유형이 없으므로 이 속성은 필요하지 않습니다. rel 속성은 관계를 정의합니다(이 경우 stylesheet). 이를 생략하면 CSS가 연결되지 않습니다.
곧 다른 rel 값을 확인할 수 있지만 먼저 CSS를 포함하는 다른 방법을 살펴보겠습니다.
외부 스타일 시트 스타일을 계단식 레이어 내에 배치하고 싶지만 CSS 파일을 수정하여 레이어 정보를 삽입할 수 있는 액세스 권한이 없는 경우 다음과 같이 <style> 내에 @import를 사용하여 CSS를 포함하는 것이 좋습니다.
<style>
@import "styles.css" layer(firstLayer);
</style>
@import를 사용하여 스타일시트(선택사항)를 계단식 레이어로 가져올 때 @import 문은 문자 집합 선언 외부에 있는 <style> 또는 연결된 스타일시트의 첫 번째 문이어야 합니다.
계단식 레이어는 아직 새로운 기능이며 헤드 <style>에서 @import를 발견하지 못할 수도 있지만 헤드 스타일 블록에서 선언된 맞춤 속성을 자주 보게 됩니다.
<style>
:root {
--theme-color: #226DAA;
}
</style>
<link>나 <style>를 통하거나 둘 다 사용하는 스타일이 헤드에 위치해야 합니다. 문서의 본문에 포함된 경우 잘 작동하지만 성능상의 이유로 스타일을 헤드에 포함하려고 합니다. 콘텐츠가 먼저 로드되기를 바란다고 생각할 수 있지만 실제로는 콘텐츠가 로드될 때 브라우저에서 콘텐츠를 렌더링하는 방법을 알고 싶어 하기 때문에, 이러한 방법은 직관적이지 않을 수 있습니다. 먼저 스타일을 추가하면 처음 렌더링된 후에 요소의 스타일이 지정된 경우 불필요한 다시 페인팅을 방지할 수 있습니다.
그런 다음 문서의 <head>에서 사용하지 않을 스타일을 포함하는 한 가지 방법인 인라인 스타일이 있습니다. 사용자 에이전트의 스타일시트가 기본적으로 헤드를 숨기므로 헤드에 인라인 스타일을 사용하지 않을 것입니다. 하지만 예를 들어 자바스크립트 없이 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>에 인라인 스타일을 추가할 수도 있지만 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을 아이콘으로 사용'하는 것입니다. 크기 속성은 확장 가능한 아이콘 또는 공백으로 구분된 정사각형 widthXheight 값의 목록에 any 값을 허용합니다. 여기서 너비 및 높이 값이 기하학적 시퀀스에서 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>를 사용하여 각 페이지 또는 각 페이지 로드 시 완전히 다른 이미지를 정의할 수 있지만 그렇게 하지 마세요. 일관성과 우수한 사용자 환경을 위해 단일 이미지를 사용하세요. Twitter는 파란색 버드를 사용합니다. 브라우저 탭에 파란색 새가 표시되면 탭을 클릭하지 않아도 Twitter 페이지가 열려 있는 것입니다. Google은 각각의 애플리케이션에 대해 메일 아이콘, 캘린더 아이콘 등 다양한 파비콘을 사용합니다. 하지만 모든 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을 식별합니다.
번역된 모든 페이지와 홈페이지에 Google의 선호 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를 사용하면 요소가 존재하기 전에 참조하지 않는 것이 좋습니다. 아직 존재하지 않으므로 포함하지 않을 것입니다. 조명 스위치 요소를 추가하면 <head>가 아닌 <body> 하단에 <script>를 추가합니다. 왜냐하면 이유는 두 가지입니다. 이 스크립트는 DOMContentLoaded 이벤트를 기반으로 하지 않으므로 요소를 참조하는 스크립트가 발견되기 전에 요소가 존재하도록 하려고 합니다. 또한 주로 JavaScript는 렌더링을 차단할 뿐만 아니라 스크립트가 다운로드되면 브라우저에서 모든 애셋 다운로드를 중지하고 JavaScript가 실행을 완료할 때까지 다른 애셋 다운로드를 재개하지 않습니다. 이러한 이유로 JavaScript 요청은 헤드가 아닌 문서 끝에 표시되는 경우가 많습니다.
JavaScript 다운로드 및 실행의 차단 특성을 줄일 수 있는 두 가지 속성은 defer 및 async입니다. defer를 사용하면 다운로드 중에 HTML 렌더링이 차단되지 않으며 JavaScript는 문서에서 렌더링을 완료한 후에만 실행됩니다. async를 사용하면 다운로드 중에도 렌더링이 차단되지 않지만 스크립트 다운로드가 완료되면 JavaScript가 실행되는 동안 렌더링이 일시중지됩니다.
MLW의 자바스크립트를 외부 파일에 포함하려면 다음과 같이 작성할 수 있습니다.
<script src="js/switch.js" defer></script>
defer 속성을 추가하면 모든 것이 렌더링될 때까지 스크립트 실행이 지연되므로 스크립트가 성능을 저하시키지 않습니다. async 및 defer 속성은 외부 스크립트에서만 유효합니다.
기본
<head>.에서만 자주 사용되지 않는 또 다른 요소가 있습니다. <base> 요소를 사용하면 기본 링크 URL 및 대상을 설정할 수 있습니다. href 속성은 모든 상대 링크의 기본 URL을 정의합니다.
<base>는 물론 링크 및 양식에도 유효한 target 속성은 이러한 링크가 열려야 하는 위치를 설정합니다. 기본값인 _self을 사용하면 현재 문서와 동일한 컨텍스트에서 연결된 파일이 열립니다. 다른 옵션에는 모든 링크를 새 창에서 여는 _blank, 현재 콘텐츠의 _parent(열기가 iframe이 아닌 경우 self와 동일할 수 있음, 동일한 브라우저 탭에 있지만 어떤 컨텍스트에서 벗어나도 표시되어 전체 탭을 차지하는 _top)가 있습니다.
대부분의 개발자는 <base>를 사용하는 대신 링크 또는 양식 자체의 새 창에서 열고자 하는 링크에 target 속성을 추가합니다.
<base target="_top" href="https://machinelearningworkshop.com" />
Google 웹사이트가 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" src="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 주석은 헤드나 본문 등 페이지의 어느 곳에나 삽입할 수 있습니다. 단, 자바스크립트 및 CSS 주석을 각각 사용해야 하는 스크립트 또는 스타일 블록은 예외입니다.
<head>에 포함된 기본적인 내용을 다루었지만 기본사항보다 더 자세히 알아보고 싶습니다. 다음 섹션에서는 메타 태그 및 웹사이트가 소셜 미디어에 연결될 때 표시되는 내용을 관리하는 방법을 알아봅니다.
이해도 테스트
문서 구조에 대한 지식을 테스트합니다.
문서의 언어는 어떻게 식별하나요?
language 속성을 HTML 태그에 추가합니다.lang 속성을 HTML 태그에 추가합니다.Add the <lang> 요소를 <head>에 추가합니다.<head>에 포함될 수 있는 요소를 선택합니다.
<p><title><meta>