[HTML5] HTML 개요

HTML란?

(Hyper Text Markup Langage)

웹에서 정보를 표현할 목적으로 만든 마크 업 언어
웹 페이지를 작성하기 위해 사용되는 언어로 웹 브라우저에게 보일 문자열과

이를 감싸는 일종의 해석기호 인 태그들로 이루어진다.

하이퍼 텍스트? -> 다른 텍스트에 대한 참조("링크")를 가진 텍스트.

시용자가 의도하는 순서에 따라 관련있는 쪽으로 이동하여 정보를 얻도록 조직화된 시스템.

마크 업 (태그)

문서의 논리적인 구조를 정의하고 , 출력장치에 어떠한 형태로 보여질 것인지를 지시하는 역할

문서 내에 삽입되는 일련의 문자 또는 기호

문서의 구조

content 내용 - 문서의 실제 본문 내용 -> 의미적 마크업( 제목, 주소 등)
structure 구조 - 문서의 구성 정보(제목, 장, 절 등) -> 구조적 마크업 (문단, 제목글 등)
style 스타일 - 문서의 표현(스타일) 정보 (글꼴, 글자색, 크기 등) -> 양식적 마크업 (모양, 색상 등 )

마크 업 언어

마크 업 태그 의 형식과 규칙을 정의한 언어

절차적 마크업 언어 -> 문서의 형식이나 텍스트의 외양을 기술
Ex) 워드 '특정 마크업 언어' -> 호환성 문제
기술적 마크업 언어 -> 문서의 논리적인 구조 정보 및 속성을 표현
Ex)SGML, HTML, XML등 '범용 마크업 언어' -> 응용프로그램/시스템에 독립적

HTML 특징

구조적 설계 지원 시멘틱
그래픽 및 멀티미디어 기능 강화
CSS3 / Javascript 지원
다양한 API 제공
모바일 웹 지원 / 장치접근가능 배터리 정보 , 카메라 , GPS 등
웹 브라우저가 서버와 양방향 통신 가능
인터넷이 연결되지 않은 상태에서도 애플리케이션 동작
수정 / 관리 용이
웹 접근성 향향
브라우저 등의 호환성 확보

HTML5 -> 2014년 HTML5 권고안 발표. W3C에 의한 웹 문서의 표준

HTML 구성요소

	<p align='center'> HTML/CSS </p>
<!-- <시작태그 속성='속성값'> 내부 문자 </종료태그> -->

태그(Tag)

‘< ‘와 '>'로 묶인 명령어 시작태그(<tag>) 와 종료태그</tag>를 한쌍으로 이용

종료태그 없이 사용하는 태그들도 있음. <br> <img> 등

요소(Element)

시작태그와 종료태그로 이루어진 모든 명령어
하나의 HTML 문서는 요소들의 집합

속성(Attribute)

요소의 시작태그에만 사용 / 명령어 구체화 역할

여러 개의 속성을 사용할 수 있으며 속성의 구분은 공백

변수/속성값(Argument)

속성이 가지는 값. 값 입력 시 “ ” 혹은 ' '를 이용

HTML 주의사항

태그는 대소문자를 구분하지 않으며 , 소문자를 권장한다
시작태그로 시작하면 반드시 종료태그로 종료를 한다
파일 확장자는 반드시 html, htm 으로 설정할 것
문자의 공백은 한 개만 인식을 하고 , 공백을 추가하기 위해서는 특수기호 nbsp 를 이용해야 한다
요소안에 요소가 들어갈 수 있다.

HTML 문서의 기본구조

<!DOCTYPE html>
<html>
<head>
	  문서 제목 <title>
	, 메타 데이터 <meta>
	, 자바 스크립트 <scripte>
	, CSS <style>,<link>
</head>
<body>
	문서의 본문 내용
</body>
</html>

<html></html>

브라우저에게 HTML 문서의 시작과 끝을 알려주기 위한 것

<head></head>

문서의 각종 정보와 문서 자체에 대한 설명을 포함

브라우저를 통해 화면에 표시되지 않음

웹 브라우저 상단 탭에 HTML문서의 제목을 표시할 때 사용 즐겨찾기 제목으로도 사용

별도 파일로 작성된 CSS 스타일을 웹문서에 적용할 때 사용

<link rel="stylesheet" href="파일명.css" type="text/css">

<meta>

웹문서의 문자 인코딩 방식, 문서에 대한 간략한 설명, 문서의 키워드, 저작가 등의 다양한 정보를 표현

문자 인코딩 <meta charset="UTF_8">
내용 설명 <meta name="description" content="문서 설명">
키워드 <meta name="keyword" content="키워드1, 키워드2, ..">
저작자 <meta name="author" content="웹 문서 작성자">

<base>

웹문서의 기본적인 url 경로 지정 / body부분 내의 상대 경로로 표시된 url을 절대 경로로 취급

<body></body>

브라우저 화면에 실제로 출력해서 보여주려는 모든 내용을 포함

저작자표시 비영리 변경금지 (새창열림)

'백엔드 과정 > html css' 카테고리의 다른 글

[CSS] CSS Diner 게임 (0)	2022.02.09
[HTML] 태그 정리 (0)	2022.02.09
[HTML5] 문서 형식 선언 <!DOCTYPE html> (0)	2022.02.08