01-1 HTML과의 첫 만남
HTML: 하이퍼텍스트 마크업 랭귀지의 줄임마로 말 그대로 해석하면 하이퍼텍스트를 마크업 하는 언어이다.
'하이퍼텍스트'란? 웹 사이트에서 링크를 클릭해 다른 문서나 사이트로 즉시 이동할 수 있는 기능을 말한다.
'마크업' 이란? 태그를 사용해 문서에서 어느 부분이 제목이고 본문인지, 어느 부분이 사진이고 링크인지 표시하는 것을 말한다.
화면에 표시할 내용에 태그를 사용해서 역할을 구별해 주는 것.
즉, 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어가 HTML이라고 정리할 수 있습니다.
HTML5는 웹 표준 기술이다.
웹 표준을 지켜 사이트를 제작하면 일반 사용자는 장소나 브라우저와 상관없이 쉽게 웹 사이트를 볼 수 있다.
01-3 HTML 기본 문서 구조
vs code에서 ! + tab 누르면 html 문서 기본 구조 자동 완성
<!doctype html>: 현재 문서가 HTML5 언어로 작성된 웹 문서라는 뜻이다.
<html></html>: 웹 문서의 시작과 끝을 나타내는 태그이다. 웹 브라우저가 <html> 태그를 만나면 </html>까지의 소스를 읽어 HTML 문법에 맞추어 브라우저에 표시한다.
-lang이라는 속성을 사용해 문서에서 사용할 언어를 지정할 수 있다. ex)<html lang="ko">
<head></head>: 웹 브라우저가 웹 문서를 해석하기 위해 필요한 정보들을 입력하는 부분이다. 여기에 있는 정보는 실제 문서 내용이 아니기 때문에 문서 제목만 브라우저 창에 표시되고 나머지는 웹 브라우저 화면에 표시되지 않는다. 스타일 및 스크립트 등이 포함되기도 한다.
-<title> 태그: 문서 제목
-<meta> 태그: 문자 세트를 비롯한 문서 정보
메타 태그는 웹 브라우저 화면에는 보이지 않지만 웹 문서와 관련된 정보들을 지정한다.
=>문자 세트 지정하기: 화면에 글자를 표시할 때 어떤 인코딩 방법을 사용할지 지정하는 것이다. 웹 서버는 영어를 기본으로 하기 때문에 영어 이외의 문자를 화면에 표시하기 위해 미리 약속된 문자 세트를 사용해야 하는데 이때 HTML5에서는 <meta> 태그를 사용해 'utf-8'이라는 문자 세트를 사용한다고 웹 브라우저에게 알려준다.
ex)<meta charset="UTF-8">
=>모바일 기기 고려하기: 스마트폰 등의 기기에서 웹 문서를 제대로 표시할 수 있도록 해야한다.
ex)<meta name="viewport" content="width=device-width, initial-scale=1.0">
=>인터넷 익스플로러 브라우저 고려하기: 인터넷 익스플로러는 최신 웹 기술이 사용된 웹 문서를 제대로 해석하지 못한다. 그래서 인터넷 익스프로러 사용자까지 고려해야 하는 웹 사이트를 제작할 경우 다음과 같은 <meta>태그를 사용해서 현재 웹 문서를 최신 표준 모드로 해석하라고 알려준다.
ex)<meta http-equiv="X-UA-Compatible" content="ie=edge">
=>검색 엔진 고려하기: <meta> 태그를 사용해서 웹 사이트의 키워드나 간단한 설명, 제작자 등의 정보를 지정할 수 있다. 이 정보들은 검색 엔진에서 사이트를 검색할 때 참조하는 정보인데 검색 엔진에 따라 참고하는 정보는 달라질 수 있다.
ex) <meta name="keywords" content="html5, 웹표준"> 해당문서의 키워드
<meta name="description" content="html5를 통해 웹 표준 공부하기"> //해당 문서의 설명
<meta name="author" content="Kyunghee Ko">// 해당 문서의 소유자 또는 제작자
<body></body>: 실제로 웹 브라우저 화면에 나타날 내용이다. 앞으로 우리가 공부하게 될 HTML 태그들은 대부분 <body> 태그 안에 들어간다.
