초격자 #4.

!DOCTYPE html

문서의 HTML 버전을 지정
(HTML1, HTML2, HTML3, HTML4, XHTML, HTML5(표준))

DOCTYPE은 마크업 언어에서 문서 형식을 정의하며,
웹 브라우저가 어떤 HTML 문서의 해석 방식으로
페이지를 이해하면 되는지를 알려주는 용도

HTML, HEAD, BODY

1. HTML 태그 :
문서의 전체 범위

2. HEAD 태그 :
문서의 정보를 나타내는 범위, 웹 페이지의 제목/설명/사용할 파일 위치/CSS 같은 웹페이지의 보이지 않는 정보를 작성

3. BODY 태그 :
문서의 구조를 나타내는 범위, 사용자 화면을 통해 보여지는 로고, 헤더, 푸터, 네이게이션, 메뉴, 버튼, 이미지 같이 웹페이지의 보여지는 구조를 작성하는 범위

lang

지정할 문서의 언어를 명시하는 HTML 속성
lang이 영어로 지정되어 있으면 브라우저에서 번역 기능 제공

CSS/JS 연결하기

• CSS 연결

1. <link rel="stylesheet" href="./main.css"/> 
-------------------------------------------------------------------
link tag **=> 외부 문서를 가져와 연결할 때 사용, 대부분 CSS 파일
-------------------------------------------------------------------
rel ="" : 가져올 문서와의 관계
>> stylesheet / icon ..
>> favion : 탭 화면에 뜨는 아이콘, favicon.png / favicon.ico
-------------------------------------------------------------------
href ="" : 가져올 문서의 경로
>> ./ => html 문서 파일 기준 주변에서 탐색
-------------------------------------------------------------------

2. <style> </style>
-------------------------------------------------------------------
CSS를 HTML 문서 안에 작성하는 경우에 사용

• JS 연결

1. 외부에서 JS 파일을 가지고 오는 경우
<script src="./main.js"></script>

2. 내부에서 JS를 작성하는 경우
<script> console.log("Hello World!") </script>

meta 태그

HTML 문서의 제작자, 내용, 키워드 같은 여러 정보를 검색 엔진이나 브라우저에 제공

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
=> 모바일 환경에서의 웹 페이지 가로 너비와, 처음 출력될 때 확대/축소 여부나 정도에 관한 정보
<meta charset="UTF-8"/>
=> 문자 인코딩 방식