HTML (HyperText Markup Language)
웹 문서 만들기 위해 만들어진 언어
HTML의 요소와 속성, 태그
하나의 문서는 제목, 내비게이션, 본문, 하이퍼링크, 리스트, 컨트롤 등 다양한 구성요소로 이뤄지는데, 이것을 표시하기 위한 것이 바로 요소(element)이다.
✔ 요소(element)
태그(tag)로 표시하며, 단순히 구성 요소의 종류와 그 범위만을 표시한다.
요소 안에는 속성(attribute)을 사용하는데 속성은 요소를 표현하기 위한 옵션 정보로서 요소가 지니고 있는 성질을 추가로 설명한다.
HTML의 기본 구조
<!docutype html>
<html>
<head>
<!-- 웹 문서에 관한 메타 데이터 -->
</head>
<body>
<!-- 웹 문서에 들어갈 내용 -->
</body>
</html>✔ html 버전 선언
<!docutype html>
HTML이 어떤 버전으로 작성되었는지 미리 선언해, 웹 브라우저가 내용을 올바로 표시 할 수 있도록 해주는 것
해당 문서가 html5 버전으로 작성되었음을 선언
✔ head 태그
<head>
문서의 머리를 나타내는 태그이며, 브라우저 화면에 직접적으로 보이지 않으며, 숨은 데이터를 정의하는 태그들이 선언된다.
➕ head 태그 내부에 자주 사용되는 태그
<title>제목</title>
웹페이지의 제목을 지정하는 태그이며, 웹페이지 본문에는 보이지 않으며, 브라우저의 탭 등에서 확인 할 수 있다. 유저에게 문서의 제목을 알리는 용도 뿐만 아니라, 검색 엔진 등에서 가장 크게 보여지는 텍스트이므로 페이지의 특성을 드러내는 제목을 작성하는 것이 중요하다.
<link>
css 스타일시트를 첨부할 때 사용하는 태그
<style></style>
HTML 문서내에 CSS 코드를 작성할 때 사용하는 태그
<meta name="메타데이터 종류" content="메타데이터 값>
meta 태그는 HTML 문서가 어떤 내용을 담고 있고, 키워드는 무엇이며, 누가 만들었는지에 대한 정보를 담고있는 태그
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="홍수민">
<meta name="keywords" content="홍수민, 벨로그">
<meta name="description" content="설명">
<meta charset="utf-8" />charset : 문서에서 허용하는 문자 집합에 대해 간단히 표시
name : 메타 요소가 어떤 정보의 형태를 갖고 있는지
content : 실제 메타 데이터의 컨텐츠(머릿말을 요약하는데 유용)
➡ 검색엔진이 메타 태그의 content 어트리뷰트안에 있는 내용을 검색 결과와 함께 추가적으로 보여줌
-
viewport
여러가지 디바이스로 웹을 보기 때문에 어떤 식으로 화면을 조정할 것이냐
즉, 디바이스 사이즈에 따라 반응해서 알아서 브라우저의 모양을 바꾸는 사이트를 만들기 위해 요새 꼭 작성! -
width=device-width, initial-scale=1.0
화면 사이즈의 가로는 디바이스 사이즈로 맞추고 처음의 보여줄 때 1.0 배율로 보여줘! -
author
작성자 명시
태그는 웹 페이지의 보이지 않는 정보를 제공하는데 쓰이는 태그이며, 페이지의 설명 요약, 핵심 키워드, 제작자, 크롤링 정책 등 수많은 정보를 제공할 수 있다. 닫는 태그가 없는 태그로, 태그의 속성을 통해 정보를 제공한다.
<예시>
IE-Edge
Internet Explorer(IE) 10 이하 버전은 문서를 읽을 때 쿼크모드 혹은 IE7모드를 사용해서 웹 페이지를 표시한다. 즉, 최신 엔진으로 페이지를 렌더링 하도록 설정할 수 있다.
<meta http-equiv="X-UA-Compatible" content="IE-Edge">한글 인코딩
최신 IDE(통합 개발 환경)을 사용한다면, 기본적으로 인코딩 방식이 UTF-8(한글)로 설정 되어있다. 하지만 Windows 운영체제는 기본 인코딩 값이 euc-kr 방식이기에 선언해야 한다.
<meta charset="utf-8">✔ body 태그
<body>태그는 문서의 몸통을 나타내는 태그이며, 브라우저화면에 보이는 것들이 주로 들어간다.
<script scr="경로"></script>
<script>자바스크립트 코드</script>
<script src="경로"></script>body내에서 가장 마지막에 작성하는 것이 제일 좋다
HTML 문서내에 JavaScript 파일을 첨부할 때 사용하는 태그
➕ body 태그 내부에 자주 사용되는 태그
<h1>
<br>
<div>
<p>
<span>
<form>
<h1>
<a>
<img>
<table>
<ul>
<li>
<nav>