HTML은 HyperText Markup Language의 약자로
HyperText는 웹 페이지를 다른 페이지로 연결하는 링크고,
Markup Language는 태그 등을 이용해서 문서나 데이터의 구조를 명기하는 언어다.
대충 링크를 누르면 이 페이지, 저 페이지 이동할 수 있는데 그게 태그로 구조화된 것 같다.
그래서 어떨 때 사용할까?
웹 콘텐츠의 '의미'와 '구조'를 정의할 때 사용한다.
html은 <> </> 안에 원하는 요소를 적어서 문서를 구조화할 수 있는데
<> 안에는 태그 외에도 필요한 속성을 적을 수 있다.
</>는 닫는 태그인데 경우에 따라 필요없는 경우도 있다.
<title>hello world!</title>
<!--html 태그는 기본적으로 여는태그 <>와 닫는태그 </>로 이루어진다.-->
<img src="images/firefox-icon.png" alt="my test image">
<!--닫는태그가 필요 없는 경우도 있으며, 여는태그 <> 안에 다양한 속성을 추가할 수 있다.-->
<a href="https://www.mozilla.org/en-US/about/mainfesto/">Mozilla Manifesto</a>
<!--다른 웹 페이지 링크를 추가할 수 있다.-->
html은 이런 태그들을 이용해서 하이퍼링크도 만들고, 문서 구조도 만들고, 입력창, 버튼, 표 등을 만들 수 있다.
기본적인 html 문서 구조는 이렇다.
이걸 일일히 직접 칠 수도 있지만, 대부분 에디터에서! 를 누르면 emmet 단축키를 통해서 자동으로 기본적인 html 문서가 형성된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>momo</title>
</head>
<body>
</body>
</html>하나씩 살펴보면
<!DOCTYPE html>이 문서가 html 문서라는 것을 알려준다.
<html lang="en">html 요소에 lang 속성을 추가해 문서가 어떤 언어로 작성된건지 알려준다. 한국어는 ko로 바꾸면 된다.
<head>
<meta charset="UTF-8">
<!-- html 문서의 인코딩을 utf-8로 설정한다.-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>momo</title>
</head>사용자가 볼 수는 없지만, 웹 페이지의 제목이나, 검색 결과에 나타날 키워드, 다른 파일들과의 연결 등을 맡는 부분이다.
<body>
</body>실제로 웹 페이지에 보이는 콘텐츠를 작성하는 영역이다.
</html>위의 <html> 속성의 닫는태그로 html 문서의 끝을 알려준다.
참고 : https://developer.mozilla.org/ko/docs/Web/HTML
참고 : https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/Getting_started
참고 : https://ko.wikipedia.org/wiki/%EB%A7%88%ED%81%AC%EC%97%85_%EC%96%B8%EC%96%B4
댓글