목표
- HTML의 기본 개념과 특징을 이해한다.
- HTML의 기본 구조와 작성방법을 숙지한다.
- HTML을 작성하고 실행한다.
목차
- 마크업 언어
- HTML이란?
- HTML 관련 참고할만한 사이트
마크업 언어
마크업 언어란 태그따위를 이용하여 문서나 데이터의 구조를 명기하는 언어입니다. 일반적으로는 데이터의 구조까지만기술할 수 있기 때문에 프로그래밍언어라고 보지는 않습니다. 마크업 언어로 기술된 문서 안에는 아래와 같은 마크업들이 들어갑니다.
내용 (content) : 문서의 본문 내용
제목, 주소와 같은 데이터를 나타내는 의미적 마크업.
구조 (structure) : 문서의 구성 정보
문단, 제목글 등과 같은 구조적 마크업.
스타일 (style) : 문서의 표현 방법
모양, 생상 등을 나타내는 양식적 마크업.
마크업 언어는 절차적 마크업 언어와 기술적 마크업 언어로 나뉘는데 HTML은 기술적 마크업 언어에 속합니다. 기술적 마크업 언어는 문서의 논리적인 구조정보와 속성을 표현하는 것을 목적으로 둡니다. HTML외에도 SGML, XML등이 속합니다. XML의 경우 개발자로서도 자주 접하는 파일 포맷이므로 간단히 소개하고 넘어가겠습니다.
XML
SGML로부터 필요한 기능만 뽑아 새롭게 정의한 언어인데, 사용자가 임의로 태그를 정의해서 작성이 가능하다는 장점이 있습니다. (확장성) HTML과는 달리 문서의 논리적인 구조를 정의하는데 어떤 구조로 문서가 조직화 되어있는지에 대한 정보를 태그(마크업)로서 표현이 가능합니다. 따라서 문서 이해가 쉽고 명확하게 전달이 가능합니다. 아래 예시를 보면 어떤 정보를 기술하는지 태그와 내용만 봐도 알 수 있습니다.
<soccer-teams>
<team>
<name>fc barcelona</name>
<league>la liga</league>
<nation>Spain</nation>
<city>barcelona</city>
</team>
<team>
<name>real madrid</name>
<league>la liga</league>
<nation>Spain</nation>
<city>madrid</city>
</team>
<team>
<name>Chelsea FC</name>
<league>Premier League</league>
<nation>England</nation>
<city>London</city>
</team>
<team>
<name>Juventus F.C.</name>
<league>Serie A</league>
<nation>Intaly</nation>
<city>Torino</city>
</team>
</soccer-teams>
HTML이란?
HTML은 웹페이지를 작성하기 위한 가장 기본적인 언어입니다. HTML은 HTML 태그, style, javascript 세요소를 가진 html 문서를 가지고 웹서버와 통신합니다. HTML 태그의 기본 구성요소는 아래와 같습니다.
간단한 예시를 통해 구현방법을 보겠습니다. 아래 세가지 요소를 표시하려고합니다.
- kghworks 블로그 타이틀
- 기술블로그임
- 사진블로그임
위 세 요소를 아래와 같이 HTML로 작성합니다.
<h1>kghworks</h1>
<p>tech blog</p>
<p>photography blog</p>
위 html문서를 크롬 웹브라우저에서 아래와 같이 해석하여 표시합니다.
하이퍼텍스트
HTML은 하이퍼텍스트로 이루어진 언어인데 하이퍼 텍스트란 다른 텍스트에 대한 참조(링크)를 가진 텍스트를 말합니다. HTML은 하이퍼텍스트를 이용하여 사용자가 연상하는 순서에 따라 관련된 쪽으로 이동하여 정보를 출력하도록 합니다. 자주 접속하는 나무위키 사이트가 아주 간단한 하이퍼텍스트의 예시입니다.
나무위키 문서에 들어가면 각 텍스트에 링크가 걸려있고 그 링크를 클릭하면 해당 문서의 위치 혹은 해당 텍스트 문서로 이동이 됩니다. 이것이 하이퍼텍스트입니다.
HTML의 장점
- W3C (표준 개발 기구)에 의한 웹 문서의 표준입니다. 표준이기 때문에 수정 / 관리에 용이하고 웹에 대한 접근성과 브 라우저 호환성이 어느정도 보장됩니다.
- 마크업 언어이기 떄문에 파일의 용량이 작아 빠른 통신이 가능합니다.
- 일반적인 텍스트파일이기 때문에 메모장 수준의 간단한 소프트웨어로도 작성이 가능합니다.
- 시스템 (운영체제)에 독립적입니다.
HTML의 단점
- 문서 자체의 목적이 웹브라우저를통해 표현하는 것이기 때문에 문서 자체의 내용의 의미를 표현하는데에는 한계가 있습니다.
- 정보의 구조화나 데이터간의 연관성을 자유롭게 표현하는데 한계가 있습니다.
- XML과 달리 사용 가능한 태그가 정해져있습니다.
- 문서의 유효성을 검증하거나 정확성을 검증하는것이 어렵습니다.
HTML 작성 시 주의사항
- 태그에서는 대소문자를 구분하지 않습니다. 소문자 표기를 권고. <html> (O) <HTML> (X), <Html> (X)
- 파일의 확장자는 html (또는 htm)
- 공백 (화이트스페이스)은 입력한 의도대로 적용되지 않습니다. 연속된 공백은 하나의 공백으로 인식
HTML 작성 준비물
- html문서를 작성할 텍스트 편집기 (메모장 등)
- html문서를 실행할 웹브라우저 (엣지, 크롬, 오페라 등)
HTML문서의 기본 구조
<!DOCTYPE html>
<!--html의 시작임을 알림-->
<html>
<head>
<!--브라우저에 출력 하지 않는 html 문서 자체에 대한 설명-->
<title>
<!--브라우저 상단 탭에 표시. html의 제목-->
</title>
<!--문서에 대한 메타데이터. 저작자, 키워드 등을 표시-->
<meta name="description" content="문서 설명">
<meta name="author" content="kgh">
<!--별도 외부로 참조하여 적용하는 csss 문서-->
<link rel="stylesheet" href="">
<!--자바스크립트-->
<script>
</script>
<!--스타일, css-->
<style>
</style>
</head>
<!--브라우저에 출력하여 표시할 모든 내용-->
<body>
</body>
</html>
HTML 웹프로그래밍
HTML 관련 참고할만한 사이트
https://www.w3.org/https://whatwg.org/
World Wide Web Consortium (W3C)
First Public Working Draft: MediaStreamTrack Insertable Media Processing using Streams 10 February 2022 | Archive
www.w3.org
Statcounter Global Stats - Browser, OS, Search Engine including Mobile Usage Share
Tracks the Usage Share of Search Engines, Browsers and Operating Systems including Mobile from over 10 billion monthly page views.
gs.statcounter.com
Can I use... Support tables for HTML5, CSS3, etc
caniuse.com
'Programming > Languages (Java, etc)' 카테고리의 다른 글
| 알고리즘을 공부하기 위한 기초지식 - 자료구조 (0) | 2022.03.11 |
|---|---|
| js, css, html 파일 웹 브라우저 캐싱 방지 - 쿼리 스트링 (2) | 2022.03.04 |
| [JAVA] Garbage Collection (가비지 컬렉션) (0) | 2022.02.16 |
| [JAVA] String 데이터 타입, String pool (0) | 2022.01.28 |
| [JAVA] stack, heap (스택과 힙) 메모리 런타임 (0) | 2022.01.26 |
댓글