자료의 출처는 codecademy(https://www.codecademy.com/) 'front-end engineer' course이며, 학습 후 정리한 내용입니다.
⚡️ 올바르지 않은 내용이 있을 경우 댓글로 남겨주시면 감사하겠습니다. ⚡️
HTML DOCUMENT STANDARDS
Preparing for HTML
HTML 파일 설정하는 방법
HTML 파일에는 문서를 올바르게 설정하려면 특정 요소가 필요하며, document type declaration(문서 유형 선언)으로 문서를 시작하여 웹브라우저에게 HTML을 사용중임을 알릴 수 있다.
<!DOCTYPE html><!DOCTYPE html>은 HTML 문서의 첫 번째 코드 줄이어야한다.
Question: 왜 html만 DOCTYPE을 필요로 하는가?
DOCYTPE 선언은 html 기반 문서에만 필요하다. 다른 JavaScript 또는 CSS 파일은 실제로 link 또는 태그를 사용하여 페이지에 로드된다. 이러한 태그는 브라우저에 파일 형식을 표시하므로 브라우저가 파일을 제대로 구문 분석할 수 있다.
<html> tag
<html> tag
<!DOCTYPE html> 선언은 브라우저에 두 가지 정보(문서의 종류와 예상되는 HTML 버전)를 제공하지만 실제로 HTML 구조나 콘텐츠를 추가하지는 않는다.
HTML 구조와 콘텐츠를 생성하려면 <!DOCTYPE html> 선언 후 opening과 closing <html> tag를 추가해야한다.
<!DOCTYPE html>
<html>
</html>opening <html>과 closing <html> 사이의 모든 것은 HTML 코드로 해석된다.
이러한 태그가 없으면 브라우저가 HTML 코드를 잘못 해석할 수 있다.
Head
<head> element
<head> 요소는 이 HTML 은유(metaphor)의 일부이다.
<head> 요소에는 웹 페이지의 메타데이터(metadata)가 포함되어 있다.
(메타데이터(metadata): 웹 페이지에 직접 표시되지 않는 페이지에 대한 정보)
<body> 태그의 내부 정보와 달리, 헤드의 메타데이터는 페이지 자체에 대한 정보이다.
일반적으로 opening 과 closing head tag는 첫 번째 HTML 태그 뒤에 첫 번째 항목으로 나타난다.
<head>
</head>Question: 브라우저는 paga에 대한 metadata가 왜 필요한가?
메타데이터의 분류는 서로 다르지만, 일반적으로 메타데이터는 "데이터에 관한 데이터"이다.
브라우저에는 대부분의 메타데이터가 필요하지 않지만, 사용자 경험을 향상시키기 위해 메타데이터를 사용하는 경우가 많다.
페이지에 표시되지 않지만 페이지 뒤에는 다른 소프트웨어(웹 크롤러, 검색엔진, 브라우저 등)가 모든 종류의 흥미로운 정보(지리적 좌표, 캘린더 이벤트, 연락처 정보 등)를 처리, 인코딩, 추출 또는 색인화하는 데 사용할 수 있다.
더욱이 기업들은 종종 SEO(검색 엔진 최적화)를 개선하기 위해 메타데이터를 사용하는 것에 관심이 있다.
(출처: https://discuss.codecademy.com/t/why-does-the-browser-need-metadata-about-the-page/341026)
Page Titles
<title> element
브라우저의 탭에는 <title> tag에 지정된 제목이 표시된다.
<title> 태그는 항상 <head> 안에 있다.
<title> tag는 <head> 요소에 포함할 수 있는 웹 페이지의 메타데이터 유형 중 하나이다.
<!DOCTYPE html>
<html>
<head>
<title>Gritti-fy</title>
</head>
</html>
HTML 코드가 포함된 파일을 열면 브라우저에 제목 표시줄(또는 탭의 제목)에 "Gritti-fy"이라는 단어가 표시된다.
Linking to Other Web Page (따른 웹 페이지에 링크하기)
anchor element <a> / href attribute
HTML과 인터넷의 강력한 측면 중 하나는 다른 웹 페이지로 연결되는 기능이다.
anchor element <a> 를 추가함으로써 opening 과 closing tag 사이에 링크 텍스트를 포함하여 웹 페이지에 링크를 추가할 수 있다.
<a>This Is A Link To Wikipedia</a>위의 예제는 불완전 하며 실제 페이지로 유도할 URL이 필요하다.
이때 필요한 것이 href attribute이다.
href attribute은 하이퍼링크 참조를 나타내며 파일이 있는 경로 또는 주소(컴퓨터에 있든 다른 위치에 있든)에 연결하는 데 사용된다.
href 속성에 제공된 경로는 URL의 경우가 많다.
<a href="https://www.wikipedia.org/">This Is A Link To Wikipedia</a>위의 예에서 href 속성은 URL https://www.wikipedia.org/의 값으로 설정되었다.
Opening Links in a New WIndow (새 창에서 링크 열기)
target attribute (대상 속성)
target attribute은 링크된 새로운 웹 페이지를 여는 방법을 지정한다.
웹 페이지에 있는 하나 이상의 링크가 완전히 다른 웹 사이트에 연결될 수 있다.
target 속성을 이용하여 연결된 웹 사이트를 읽거나 웹 페이지로 돌아가기를 할 수 있다.
새 창에서 링크를 열려면 target attribute 값이 _blank여야 한다.
target attribute은 href 속성처럼 anchor 요소의 opening tag에 직접 추가할 수 있다.
<a href="https://en.wikipedia.org/wiki/Brown_bear" target="_blank">The Brown Bear</a>target attribute은 _self, _blank, _parent, _top 4개의 값을 가지고 있다.
- _blank: 새로운 창을 열어서 웹 페이지를 연다.
- _self: 현재 페이지에 그대로 링크된 웹페이지를 연다.
- _parent: 현재 프레임(페이지)의 부모 프레임(페이지)에서 새 페이지를 연다.
A 페이지에서 B 페이지를 열었을 때, B 페이지에서 _parent로 링크된 페이지를 열면 A 페이지에서 열린다. - _top: 최상위 페이지에서 열린다. 가장 최상위 부모 창에서 새로운 페이지가 열린다.
Linking to Relative Page (상대 경로로 링크하기)
내부 웹 페이지 연결하는 방법
내부 페이지 간 링크하는 방법에 대해 배우기 전에 파일이 저장되는 위치를 설정한다.
다중 페이지 정적 웹 사이트를 만들 때 웹 개발자들은 종종 HTML 파일을 root directory 또는 프로젝트의 모든 파일이 저장되는 기본 폴더에 저장한다.
작성하는 프로젝트의 크기가 커지면 기본 프로젝트 폴더 내의 추가 폴더를 사용하여 코드를 구성한다.
project-folder/
|—— about.html
|—— contact.html
|—— index.html
한 폴더에 약 .html, contact.html, index.html의 세 가지 다른 파일이 있다.
HTML 파일은 위의 예와 같이 동일한 폴더에 저장되는 경우가 많다.
브라우저가 현재 index.html을 표시하고 있는 경우 about.html과 contact.html이 동일한 폴더에 있음을 알 수 있다.
파일이 같은 폴더에 저장되기 때문에 상대 경로를 사용하여 웹 페이지를 연결할 수 있다.
<a href="./contact.html">Contact</a>이 예에서 <a> 태그는 현재 HTML 파일에서 동일한 폴더의 contact.html 파일로 링크하는 상대 경로와 함께 사용됩니다.
웹 페이지에 연락처(Contact)가 링크로 나타납니다.
- 상대 경로(relative path): 로컬 파일(예: ./index.html와 같은 동일한 웹 사이트의 파일)의 경로를 표시하는 것
- 절대 경로(absolute path): (예: 다른 폴더에 저장된 https://www.codecademy.com/learn/learn-html와 같은 전체 URL)의 경로를 표시하는 것
./index.htm에서 "./"l은 브라우저에 현재 폴더에서 파일을 찾도록 지시하지만, 사용하지 않아도 무방하다.
하지만 현재 디렉토리에서 파일을 찾는 것이 더 명확하기에 사용한다.
Linking At Will (마음대로 링크하기)
<a href="https://en.wikipedia.org/wiki/Opuntia" target="_blank">Prickly Pear</a>텍스트로만 구성된 링크 이외에도 anchor element를 통해 대부분의 요소를 링크로 변환할 수 있다.
ex) <img> 요소를 <a> 요소로 감싸기만 하면 이미지를 링크로 변환할 수 있다.
<a href="https://en.wikipedia.org/wiki/Opuntia" target="_blank"><img src="https://www.Prickly_Pear_Closeup.jpg" alt="A red prickly pear fruit"/></a>Linking to Same Page (같은 페이지에 링크하기)
사용자가 사이트를 방문할 때 링크를 클릭하여 페이지를 특정 섹션으로 자동으로 스크롤할 수 있도록 한다.
동일한 페이지의 대상에 연결하려면 다음과 같이 target에게 id를 제공해야한다.
<p id="top">This is the top of the page!</p>
<h1 id="bottom">This is the bottom! </h1>이 예에서 <p> 요소에는 "top"의 id가 할당되고 <h1> 요소에는 "bottom"이 할당된다.
id는 웹 페이지의 대부분의 요소에 추가할 수 있다.
id는 링크의 목적을 쉽게 기억할 수 있도록 설명되어야 한다.
대상 링크는 # 문자와 대상 요소의 id를 포함하는 문자열이다..
<ol>
<li><a href="#top">Top</a></li>
<li><a href="#bottom">Bottom</a></li>
</ol>위의 예에서, <p id="top"> 및 <h1 id="bottom">에 대한 링크는 순서 목록(ordered list)에 포함되어 있다.
이러한 링크는 브라우저에 numbered list의 링크로 표시된다.
(id는 특히 div에 속하는 콘텐츠를 구성하는 데 유용하다.)
<div id="introduction">Whitespace
HTML 파일의 코드가 증가함에 따라 요소들이 어떻게 연관되어 있는지 추적하기가 점점 어려워짐에 따라,
프로그래머는 요소들 사이의 관계를 시각화하기 위해 (공백)whitespace과 들여쓰기(indebtation) 두 가지 도구를 사용한다.
두 도구 모두 브라우저의 요소 위치가 index.html 파일의 공백이나 들여쓰기 양과는 무관하다.
예를 들어, 웹 페이지에서 두 문단 사이의 공간을 늘리려는 경우, index.html 파일의 문단 요소 사이에 공백을 추가하여 이를 수행할 수 없습니다.
브라우저는 웹 페이지를 렌더링할 때 HTML 파일의 공백을 무시하므로 코드를 읽고 따르기가 더 쉬운 도구로 사용할 수 있다.
<body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</body>Indentation
웹 개발자들이 코드 구조를 읽기 쉽게 하기 위해 사용하는 두 번째 도구는 들여쓰기이다.
키보드의 공백과 탭 표시줄을 사용하여 공백을 삽입합니다.
World Wide Web Consortium(W3C)는 HTML의 스타일 표준을 유지하는 것을 담당한다.
코드는 정확히 두 개의 공백 없이 작동하지만, 이 표준은 대다수의 전문 웹 개발자들이 뒤따른다.
들여쓰기는 다른 요소 내에 내포된 요소를 쉽게 시각화하는 데 사용됩니다.
<body>
<p>Paragraph 1</p>
<div>
<p>Paragraph 2</p>
</div>
</body>위의 예에서 paragraph 1과 <div> 태그는 <body> 태그 내부에 내포되어 있으므로 두 공백이 들여쓰기된다.
paragraph 2 요소는 <div> 태그 내부에 내포되어 있으므로 두 공백을 추가로 들여쓴다.
Comments
HTML 파일을 사용하면 코드에 주석을 추가할 수 있다.
코멘트는 <!-- 로 시작하고 -->로 끝나며, 브라우저는 그 사이의 문자를 무시한다.
<!-- This is a comment that the browser will not display. -->참고
'IT > HTML' 카테고리의 다른 글
| Semantic HTML (0) | 2021.05.01 |
|---|---|
| HTML: Tables (0) | 2021.04.30 |
| HTML: Elements (0) | 2021.04.25 |
댓글