정의
- 브라우저가 웹 페이지를 표시할 수 있도록 구조를 잡아주는 마크업 언어(markup language)
구조
VS Code 에서 html을 만들고 '!'를 누르면 다음과 같은 구조가 자동으로 완성된다.
<!DOCTYPE html>
- 어떤 버전의 HTML 으로 작성됐는지 웹 브라우저에 알려주는 역할
- 현재는 HTML5이 웹 표준이다.
- HTML 문서 내용이 같아도 브라우저 환경에 따라 결과물이 달라질 수 있으므로 브라우저가 HTML 문서를 동일하게 인식할 수 있도록 선언
- HTML 구버전인지 신버전인지에 따라 사용된 태그의 적용 여부가 달라지기 때문에 작성이 필요하다.
<html lang = "__">
- 웹 문서에 언어 지정
- ko로 바꿔서 사용하면 된다.
<head>
-
브라우저가 html 태그를 보고, 화면을 그릴 준비를 한다.
-
<meta Charset="UTF-8">: HTML 문서의 인코딩 방식, UTF-8 은 유니코드를 위한 문자셋. 한글, 일본어, 중국어가 포함된 페이지라면 UTF-8을 입력해줘야 한다. -
<meta name="viewprot" content="width=device-width, intial-scale=1.0">: 뷰포트(웹페이지가 사용자에게 보여지는 영역)를 장치 너비에 맞추어 표시 -
<title>웹페이지의 제목, 브라우저 제목표시줄이나 페이지 탭에 표시됨
<body>
- 페이지를 통해 전달하고자하는 정보가 담기는 구역
- body 에 태그를 이용하여 내용을 표시한다.
태그와 요소
- 태그(tag)
<div>,<p>,<a>,<h1>,<img>등이 있으며, 이미지나 텍스트를 그리기 위해 적절한 태그를 사용해야 한다.- <> 시작 태그, </> 종료 태그
<img>,<br>처럼 태그 안에 내용이 필요 없는 경우 종료 태그가 없는 경우도 있다!
-
내용(content) : 시작 태그와 종료 태그 안에 기재되는 것, 내용은 화면에 보여진다.
-
속성(attribute)
<div class = "aaa">에서의 class<img src= "#">에서의 src<a href= "#">에서의 href 등 시작 태그 쪽에 위치
- 요소(element)
- 시작 태그부터 종료 태그가 있고, 태그 사이에 내용이 있는 구조
- 종료 태그가 없는 것은 태그 그 자체로 요소가 된다.
<div> 반갑습니다! </div>가 하나의 요소
영차영차 !! 오늘도 화이팅 !!