TIL
HTML
태그 (Tag)
기본적으로 <> 시작 태그(여는 태그) 종료 태그(닫는 태그)의 쌍으로 구성되어있다.
요소의 포함
<p>
HTML은 요소 안에
<strong>다른 요소</strong>가 들어갈 수 있습니다
</p>
<!-- 잘못 사용된 예 -->
<p>
HTML은 요소 안에
<strong>다른 요소 가 들어갈 수 있습니다
</p>
</strong>"주석"은 프로그램 동작에 영향을 미치지 않으며, 최소한으로 남기는 것이 좋다!
!DOCTYPE html
"이 문서는 html Living Standard 문서!" 라는 의미이다. 해당 코드를 통해 어떤 모드로 페이지를 랜더링할지 결정하며, 작성 시 완전 표준 모드로 랜더링을 한다.
html
HTML 문서의 루트, 최상단 요소이다.
lang 속성을 통해 해당 페이지의 주 언어가 무엇인지 설멍할 수 있으며, 한국은 ko로 설정한다.
head
검색엔진을 위한 다양한 정보들이 담기는 곳이다.
사용자에게는 title과 파비콘, viewport 정보등이 보이게 된다.
meta
메타 데이터 : "어떤 목적을 위해 만들어진 데이터"
charset
<meta charset="utf-8">문자 깨짐 오류가 발생할 수 있으므로 문자 코드의 종류를 설정해 준다.
"utf-8"은 전 세계적인 언어들을 지원하도록 한다. 그래서 어떤 언어로 작성하더라도 웹페이지를 읽을 수 있다. (국제적인 코드 규약)
viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">-
width : 뷰포트의 너비를 제어한다. width=600과 같이 픽셀값으로 지정할 수도 있다.
-
height : 뷰포트의 높이를 제어한다.
-
initial-scale : 페이지가 처음 로드 될 때 확대 및 축소 수준을 제어한다. 최소 0.1, 기본 1, 최대 10
-
minimum-scale : 축소 정도를 제어한다.
-
maximum-scale : 페이지에 허용되는 확대 정도를 제어한다. 3보다 작은 값은 접근성에 맞지 않다.
title
브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 정의한다. 텍스트만 가능 (특수 문자 X)
약 60자를 넘지 않아야 한다.
link
<html>
<head>
<!-- 스타일 시트 링크 -->
<link rel="stylesheet" href="style.css">
<!-- 폰트 링크 -->
<link rel="stylesheet" href="font.ttf">
<!-- 파비콘 링크 -->
<link rel="shortcut icon" href="favicon.ico">
</head>
<body>
</body>
</html>현재 문서와 외부 리소스의 관계를 명시한다.
외부 스타일 시트, 폰트, 파비콘을 연결할 때 사용한다. 빈 태그, 속성만을 포함한다.
- head : 요소 내부에만 위치할 수 있다.
- rel : relations 관계. 대상 파일의 속성을 나타낸다.
- href : hyper-references 경로, 연결 시 참조할 파일의 위치를 나타낸다.
