HTML 이란?
- HTML은 월드 와이드 웹(World Wide Web) 문서를 작성하는 Hyper Text Markup Language 이다.
Hyper Text : 한 문서 안의 특정 단어나 그림에 다른 문서가 연결된 형태
Hyper Link : 특정 단어나 그림에 또 다른 문서나 그림을 꼬리에 꼬리를 물고 연결하는 것
- 웹 브라우저를 통하여 사용자에게 보여지는 문서의 내부 형식을 규정하는 언어이다.
- 제목, 본문, 목록, 링크, 이미지 등 다양한 컨텐츠를 의미 있게 마크업 할 수 있다.
- 웹 브라우저는 HTML태그를 읽고 분석하여 표현 내용을 화면에 나타낸다. 이로 인해 서로 다른 웹 브라우저라도 사용자에게는 동일한 형태의 웹 페이지를 표시할 수 있다.
- HTML 문서는 *.html, *.htm 등의 확장자를 사용한다.
Markup Language
- 마크업 언어는 태그(tag) 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지이다.
- 태그는 원래 텍스트와는 별도로 원고의 교정부호와 주석을 표현하기 위한 것이었으나 용도가 점차 확장되어 문서의 구조를 표현하는 역할을 하게 되었다. 이러한 태그 방법의 체계를 마크업 언어라 한다.
- Markup은 문장, 그림, 표 배치, 폰트의 모양 및 크기, 들여쓰기, 줄 간격, 여백 등에 대한 정보를 의미한다.
웹 브라우저(Web Browser)
- HTML 문서와 그림, 멀티미디어 파일 등 월드 와이드 웹을 기반으로 한 인터넷 컨텐츠를 검색 및 열람하기 위한 응용 프로그램이다.
웹 페이지는 HTML, Javascript, CSS 의 3요소로 구성된다.
- HTML
웹 페이지상에서 문단, 제목, 표, 이미지, 동영상 등을 정의하고 그 구조와 의미를 부여하는 마크업 언어이다.
표준화된 태그로 웹 페이지를 작성한다. <html>, <head>, <body>, <img>, <a>, <table>, <div> 태그 등
- Javascript
객체 기반의 스크립트 프로그래밍 언어로 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다.
Node.js와 같은 런타임 환경과 같이 서버 사이드 네트워크 프로그래밍에도 사용되고 있다.
동적으로 컨텐츠를 바꾸거나 멀티미디어를 다루고, 움직이는 이미지 등 웹 페이지를 꾸며주도록 하는 프로그래밍 언어이다.
- CSS(Cascading Style Sheets)
CSS는 HTML 문서 내에 서체의 종류, 크기, 색, 여백 등을 지정하여 사용자의 web brower 환경에 상관 없이 일정한 화면을 보여주는 기능이다.
HTML 문서의 기본 형식
- DTD(Document Type Definition) 선언 : 문서의 첫 줄에 DTD 선언하며, DTD는 정의하는 문서에서 사용되는 언어와 버전 등을 지정한다.
- <html>~</html> : HTML 문서의 최상위 요소로 모든 HTML 문서는 하나의 <html> 요소를 갖는다.
- <head>~</head> : HTML 문서의 메타데이터(metadata)를 정의하며, 메타데이터는 HTML 문서에 대한 정보를 의미한다. 메타데이터는 <title>, <style>, <meta>, <link>, <script>, <base>태그 등을 이용하여 표현한다.
- <body>~</body> : 웹 브라우저를 통해 보이는 내용(content) 부분을 나타낸다.
태그(tag)의 기본 구성
- 요소 (element) : 시작과 종료를 나타내는 태그로 이루어진 모든 명령
- 태그 '<'과 '>'으로 둘러 쌓인 요소의 일부로 시작 태그(<tag>)와 종료 태그(</tag>)로 이루어져 있지만 종료 태그가 없는 태그도 있다.
- 속성(attribute) : 요소의 시작 태그 내에서 사용하며 명령어를 구체화 시키는 역할을 한다.
- 속성 값 : 속성과 관련된 값
- 태그와 속성은 대소문자를 구분하지 않는다.
<!DOCTYPE> 태그 >>
- 문서 정의 태그(Document Type Definition)
- 문서에서 사용되는 언어와 버전을 지정하는 데 사용한다. 즉, HTML이 어떤 버전으로 작성되었는지 미리 선언해 웹 브라우저가 내용을 올바로 표시할 수 있도록 해준다.
- <! DOCTYPE> 태그는 모든 HTML문서의 최 상단에 기술한다.
DTD(Document Type Definition)
문서 형식 정의(DTD)는 페이지를 불러오기 위한 기본이 되는 문서타입을 정하는 것으로 브라우저에 현재의 웹 페이지가 어떤 문서 형식을 가지는지 전달해준다.
- 호환모드(Transitional Mode) : Transitional//EN : 생략해도 실행하는데 지장이 없는 트랜지셔널 모드를 말한다.
- 엄격모드(Strict Mode) : Strict//EN : 생략을 허용하지 않는 xml같이 올바른 형식의 문서(Well formed Document)를 의미한다.
'쌍용강북교육센터 > 9월' 카테고리의 다른 글
| 0913_HTML : 기본 태그 (2) (1) | 2021.09.14 |
|---|---|
| 0913_HTML : 기본 태그(1) (1) | 2021.09.14 |
| 0901~0910_JDBC : Semi Project 빵켓컬리 (1) | 2021.09.13 |
| 0907_Java : 채팅프로그램 만들기 (1) | 2021.09.08 |
| 0907_Java : java.net.InetAddress, java.net.URL 클래스 (0) | 2021.09.08 |