-
HTML 문서 기본 구조프론트엔드/HTML 2020. 8. 18. 16:30
아래 코드는 HTML 문서의 가장 기본이 되는 형태다.
에디터에서 자동완성으로 불러오면 아래와 같은 형태의 형식이 마련된다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>◎ <!DOCTYPE html>
현재 문서가 HTML5 언어로 작성된 문서라는 뜻.
과거에는 HTML 문서에 관한 다양한 내용을 적어줬는데 지금은 많이 간소화되었다.
◎ <html>~</html>
HTML문서 가장 상위의 태그로서 웹 문서의 시작과 끝을 뜻한다.
그리고 웹 페에지 하나당 단 하나만 존재한다.
웹브라우저는 시작 태그인 <html>을 만나면 종료 태그인 </html>까지의 소스를 읽는다.
그리고 우리가 설정한 형식과 방법에 맞춰 브라우저에 표시함.
<html> 태그 안에 설정된 속성값인 'lang'는 문서에서 사용할 언어를 지정할 수 있다.
한국어는 'ko', 영어는 'en', 중국어는 'zh', 일본어는 'ja'다.
◎ <head>~</head>
웹 브라우저가 웹 문서를 해석하기 위해 필요한 정보를 입력하는 부분.
<html>과 마찬가지로 웹페이지에 단 하나만 존재한다.
해당 태그 내의 내용은 브라우저 창에 드러나지 않는다.
대신 이 내부에 있는 미리 설정한 형식에 맞춰서 <body> 태그 안의 내용을 해석한다.
<head>안의 <title>은 해당 문서의 제목을 나타내는 것.
<meta> 태그의 가장 중요한 역할은 화면에 글자를 표시할 때 어떤 인코딩 방법을 쓸지 지정하는 것이다.
웹 서버는 영어를 기반으로하기에 영어 이외의 문자는 화면에 표시하기 위해 미리 약속된 문자를 사용해야 한다.
<meta charset="UTF-8">의 "UTF-8"은 웹브라우저에게 "UTF-8"라는 문자 세트를 사용한다고 알려주는 것.
<meta> 태그 안의 속성 'name','content'는 작성한 태그가 디바이스에 맞게 크기가 조절되도록 미리 설정한 것.
그 외에도 <meta> 태그 안에는 검색 엔진에서 참고할 것들을 사이트 관련 정보나 다양한 것들을 어트리뷰트 즉 속성 값으로 넣어줄 수 있다.
◎ <body>~<body>
웹 브라우저 화면에 실제로 나타날 내용.
우리가 무언가를 웹브라우저에 띄우고 싶다면 <body> 태그 안에 내용을 넣어주어야 한다.
'프론트엔드 > HTML' 카테고리의 다른 글
Tag - 목록(list) 관련 (0) 2020.08.19 Tag - 텍스트 관련 2 (0) 2020.08.18 Tag - 텍스트 관련 (0) 2020.08.18 태그(Tag)에 관해서 (0) 2020.08.18 HTML이란? (0) 2020.08.18