웹, HTML5 기본 구조와 용어의 의미 정리
- HTML/HTML 기초
- 2020. 8. 1.
한동안 HTML, CSS, 웹 프로그래밍 등에 관한 기초강좌 연재를 중단했습니다. 다시 약간의 기초 내용을 보충 연재하려고 합니다. 내용의 수준을 저와 같은 기초 레벨로 잡았기 때문에 내용을 이미 알고 계시는 분들이 보면 다소 유치하게 보일 수도 있습니다.
이번 페이지에서는 용어들에 대해 정리해 보고자 합니다. 많이 듣긴했는데 그게 무엇을 의미하냐고 물어본다면 대답하지 못하는 단어들을 중심으로 정리해 보았습니다.
- 도메인 : 사용자들이 기억하기 힘든 숫자 형태의 아이피주소를 tistory.com 등과 같이 문자 형태로 연결시켜 주는 역할을 합니다.
- 네임서버(DNS) : Domain Name System의 약자로 도메인을 아이피 주소로 변환시켜주는 역할을 담당합니다. 예를 들자면 크롬에 www.google.com이라고 타이핑하면 이러한 도메인명의 아이피 주소인 216.58.221.164와 같은 아이피 주소를 알려주게 됩니다.
- IP 주소 : Internet Protocol의 약자로 인터넷에 현재 연결되어 있는 기기를 식별할 수 있게 해주는 실제 주소입니다. 즉, 위의 네임서버 설명 항목에서 서술한 216.58.221.164는 구글의 실제 주소입니다.
- HTML : Hyper Text Markup Language(하이퍼 텍스트 마크업 언어)의 약자로 웹문서 또는 웹페이지를 작성하기 위한 언어를 말합니다. 하이퍼 텍스트란 하이퍼링크를 포함하고 있는 텍스트로서 HTML 페이지를 빠르게 이동할 수 있는 링크를 말합니다. 마크업 언어는 문서의 내용 외에 문서 내에 포함되어 있는 서식이나 링크 등의 부호를 지칭합니다.
- HTML5 : 2014년 W3C(World Wide Web Consortium)에 의해 차세대 웹 표준으로 확정된 형식을 말하며, 이전 버전과의 차이점은 액티브엑스, 플래시, 실버라이트 등의 추가 프로그램 설치 없이 다양한 멀티미디어 환경을 지원한다는 데 있습니다.
- HTML5의 구조 : 이전 버전들에서 사용하던 <div>태그를 버리고 <selection>, <header>, <article>, <footer> 등의 태그를 사용하여 문서의 구조를 보다 명확하게 표현합니다. 기본 구조도를 도식화하면 아래와 같습니다.
- HTML5의 기본 태그들의 의미
<header> 문서의 머리말 또는 사이트 소개나 네비게이션 표시
<nav> 문서의 목차와 같은 네비게이션 표시
<aside> 문서의 부분 또는 사이드 콘텐츠 표시
<footer> 문서의 꼬리말 또는 저작권 기타 사이트의 제작자 등의 표시 부분
<selection> 일반적인 문서 영역을 표시
<atricle> 뉴스, 기사, 블로그 등 문서의 독립적인 콘텐츠 영역 표시
- DTD : Document Type Definition의 약자이며 Doctype이라고 불리기도 하는데 HTML 버전에 따라 브라우저가 해석하는 방식이 다르기 때문에 해당 웹 페이지가 어떤 HTML을 사용하는지 브라우저에게 알려주는 역할을 합니다. HTML5는 파일의 첫 줄에 표시해야 하며, 브라우저는 이를 확인하고 이 문서를 HTML5로 해석해야 하는 문서임을 인지하게 되는 것입니다. <!DOCTYPE html>과 같이 표시됩니다.
아래의 이미지는 티스토리 html 편집의 첫줄에 존재하는 html5 문서임을 선언하는 부분을 보여주고 있습니다.
- <html lang="ko"> : 위에서 예로 들었던 티스토리 html 최상단 이미지 중 doctype 선언 다음으로 오는 것으로 html에서 보일 콘텐츠의 언어를 지정하는 태그입니다. html5 문서의 구조 태그는 크게 <html>, <head>, <body>로 나눌 수 있으며, <html> 내용 </ html>은 문서의 시작과 끝을 나타냅니다.
- <head> : <head> 헤드의 내용 </ head>와 같은 구조에서 헤드의 내용에는 문서의 제목과 메타 태그, 스타일 시트, 자바 스크립트, 외부 참조 파일 등이 들어 있습니다. 헤드의 내용은 제목을 제외하면 밖으로 드러나지 않습니다.
- <title> : <head>태그 내에 존재하게 되며, <title> 문서 제목 </ title>과 같은 구조를 취하합니다. 기본적으로 html 문서의 제목이나 이름을 나타내게 되며, 브라우저의 제목이나 브라우저 탭 제목에 나타나게 됩니다.
- <meta> : 메타태그는 스스로 닫는 태그로서 헤드 태그 내에서 기본적으로 html의 문서 인코딩을 표시하는 방법을 지정합니다. <meta charset="utf-8" />과 같이 표현하며 한글 인코딩 방식으로 예전에는 "euc-kr"을 사용하였지만, 최근에는 전 세계의 모든 문자를 표현할 수 있는 유니코드 표준 인코딩 방식인 "utf-8"을 주로 사용합니다.
이상으로 간단하게나마 html5의 가장 기본적인 용어들의 의미를 알아보았습니다.
'HTML > HTML 기초' 카테고리의 다른 글
| HTML5, abbr 태그 알아보기 (0) | 2020.08.02 |
|---|---|
| HTML5, Pre 태그 알아 보기 (0) | 2020.08.02 |
| 줄바꿈이 안되는 경우 CSS : white-space, word-break (0) | 2020.05.25 |
| 많이 쓰는 브라우저용 단축키 16가지 (0) | 2020.04.30 |