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>
문서의 각종 정보와 문서 자체에 대한 설명을 포함
브라우저를 통해 화면에 표시되지 않음
<title><title>
웹 브라우저 상단 탭에 HTML문서의 제목을 표시할 때 사용 즐겨찾기 제목으로도 사용
<link></link>
별도 파일로 작성된 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 |