반응형
HTML (Hypertext Markup Language) 이란
우리가 보는 웹페이지를 브라우저를 통하여 볼 수 있도록 하는 마크업 언어입니다. 텍스트를 통해 페이지를 이동할 수 있는 언어다 라는 의미도 있습니다. 브라우저를 통해 보여지는 언어라 웹으로 무엇인가를 만들려는 분들이라면 어느정도 기초적인 HTML 은 알고 있어야 하겠지요. HTML 이란 언어도 전문적으로 알려면 끝도 없겠지만 제가 아는 범위안에서 간단히 문서 하나 정도는 만들수 있을 범위안에서 간단히 설명해 보겠습니다.
1. html의 구조
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 문서의 제목 </title>
</head>
<body>
html의 글내용
</body>
</html>
- <head> </head> 영역에서 html 문서의 기본 성격을 정의해 줍니다.
- <body> </body> 영역 내용을 입력해 줍니다.
2. html 문서의 기본 성격의 정의
HTML 문서 버전의 종류에는 HTML5, HTML4 이하 및 XHTML이 있습니다 여기서 < !DOCTYPE html > 은 이 문서는 HTML 몇버전의 문서입니다라고 웹브라우저에 알려주는 역할을 합니다. !DOCTYPE html 은 HTML5 버전으로 작성된 문서입니다. HTML 문서 버전의 종류에는 HTML5, HTML4 이하 및 XHTML이 있습니다.
< html lang="en" >
html 문서의 시작과 끝을 알려줍니다. html의 속성인 lang는 문서가 어떤 언어로 작성이 되었다고 알려줍니다. 우리나라는 en, ko로 선언된 형태를 자주 볼 수 있습니다. en은 영어 ko는 한국어를 의미합니다.
< head > .... </ head >
head 영역에는 문서의 특성을 지정하는 meta 태그와 문서 제목인 title, 그리고 문서의 디자인을 정의해주는 CSS 파일을 링크한 주소를 선언해 줍니다. head 사이에 들어가는 meta데이터의 종류 또한 무수히 많지만 대표적인 몇 가지를 적어보면
- 페이지의 문자인코딩을 지정해 주는 charset
- 검색 엔진을 위한 키워드 지정 keyword
- 웹페이지에 대한 간력 설명을 하는 discription
- 웹문서의 저자를 표시하는 author
등 다향합니다. (meta 태그에 대한 자세한 내용은 따로 정리해 페이지를 만들어 보겠습니다.)
< body > .... < /body >
body의 영역에는 웹페이지 문서 내용을 h1, h2 p, table 등의 다양한 태그들을 사용하여 웹피이지를 만듭니다.
HTML은 웹페이지를 프로그램하는데 있어 없어서는 안 될 기본적인 언어입니다. 배워야 할까 말까 고민할 수 있는 선택의 영역이 아닌 무조건 알아야 하는 웹프로그램 기초 언어입니다. 그렇다고 너무 무서워할 필요는 없는 것 같습니다. 이상하게 HTML언어는 배워야지 하고 마음 먹지 않더라도 웹쪽 프로그램을 하다 보면 자연적으로 익혀지기도 하니까요.
자 그럼 이제 부터 내 홈페이지를 만드는 그날까지 웹 언어에 대해 조금씩 정리해 볼게요.
오늘도 많이 행복하세요
감사합니다
반응형
'프로그램' 카테고리의 다른 글
| [html, css] flex 를 이용한 문서 중앙에 위치하는 로그인 폼 (0) | 2022.10.27 |
|---|---|
| [html, css] height 100% 높이 레이아웃 간단한 정리 (0) | 2022.10.25 |
| [html, css] height 100% 높이의 레이아웃잡기 (0) | 2021.12.15 |
| [ jquery ] div의 id 값을 찾아 텍스트 변경는 방법 (0) | 2013.10.08 |
| [html, css] Div 중앙정렬 (0) | 2013.07.19 |
댓글