HTML(Hyper Text Markup Language)
페이지의 제목, 문단, 표, 이미지, 동영상 등 웹의 구조를 담당.
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>
<link rel="stylesheet" href="./main.css">
<script src="./main.js"></script>
</head>
<body>
</body>
</html><!DOCTYPE html>
: 문서의 HTML 버전을 지정, DOCTYPE(DTD, Document Type Definition)은 마크업 언어에서 문서 형식을 정의하며, 웹 브라우저가 어떤 HTML 버전의 해석 방식으로 페이지를 이해하면 되는지를 알려주는 용도.
<html> </html>
시작태그, 문서의 전체 범위, HTML 문서가 어디에서 시작하고, 어디에서 끝나는지 (브라우저에게)알려주는 역할.
<head> </head>
문서의 정보를 나타내는 범위
웹 브라우저가 해석해야 할 웹페이지의 제목, 설명, 사용할 파일 위치, 스타일(CSS) 같은, 웹페이지의 보이지 않는 정보를 작성하는 범위
<meta charset="UTF-8">문자인코딩 방식
- charset(Character Set 단어의 약어)은 문자 인코딩 방식을 지정하는 HTML 속성(Attribute)이다. 문자 인코딩(Encoding)이란 문자나 기호들을 컴퓨터가 이용할 수 있는 신호로 만드는 것을 말하며, 대표적으로 한글 사용에서는 EUC-KR 혹은 UTF-8 등이 사용되며, 웹에선 UTF-8의 사용을 권장 함.
<meta>
메타라는 것은 정보를 의미한다. HTML 문서(웹페이지)의 제작자, 내용, 키워드 같은 여러 정보를 검색엔진이나 브라우저에게 제공.
<meta name="viewport" content="width=device-width, initial-scale=1.0">- name="viewport" : 우리는 스마트폰(타블렛)에서 웹 사이트를 오픈 할 수 있는데 그 스마트폰이 여기서 말하는 모바일 장치(디바이스)이다. 그리고 모바일에서 웹 페이지의 가로 너비를 모바일 환경의 가로 너비와 일치시키거나, 웹 사이트가 처음 출력될 때 확대/축소 여부나 정도를 어떻게 결정하겠다 등 몇 가지 정보를 META 태그로 명시하는 개념이 name="viewport"의 내용이다.
- 일반 데스크탑에는 해당 사항 없음, 뷰포트의 가로 길이는 디바이스가 가지고 있는 가로사이즈에 맞춰 출력, 웹 페이지 처음 출력할때 기본 크기는 1.0 배수로 출력하겠다. (확대 할 수 있는데 기본 출력시 확대할 것인지 아닌지)
- content는 정보의 값이다.
<title>
HTML 문서의 제목(title)을 정의. 웹 브라우저 '탭'에 표시됨
<link rel="stylesheet" href="./main.css"/>link: 외부 문서를 가져와 연결할 때 사용.(대부분 CSS 파일)
rel: 가져올 문서와 관계
(Relationship 단어의 약어) 가져올 외부 문서(대표적으로 CSS 파일)가 현재의 HTML과 어떤 관계인지를 명시하는 HTML 속성(Attribute)이다.
href: 가져올 문서의 경로
(Hyper Test Reference 단어의 약어) 브라우저가 참조할 특정 경로(Path)를 지정하는 HTML 속성(Attribute)이다.
./ 는 주변에서 가져온다라는 상대적 개념
<script src="./main.js"></script>src : 자바스크립트(JS) 파일 가져오는 경우, (Source 단어의 약어) 는 사용할 소스 코드(파일)를 지정하는 HTML 속성(Attribute)이다.
<body> </body>
문서의 구조를 나타내는 범위
사용자 화면을 통해 보여지는 로고, 헤더, 푸터, 내비게이션, 메뉴, 버튼, 이미지 같은, 웹페이지의 보여지는 구조를 작성하는 범위
