[HTML] 0. HTML5(HTML의 개요)
Front-end의 종류를 알아보고 가장 기초 뼈대가 되는 HTML의 개요에 대해 공부해 보자
프론트앤드(Front-end)
HTML 👉🏻 뼈대
CSS 👉🏻 꾸미기
JavaScript 👉🏻 만들어진 화면에 동적인 요소 추가
jQuery 👉🏻 JavaScript의 문법 간략화 API library
작업 환경 구성하기
HTML5
인터넷: 전 세계의 컴퓨터들이 네트워크를 통해 연결되어 정보를 공유하는데 목적을 두며 프로토콜을 이용하여 통신
👉🏻 초기에는 군사용, 민간용으로 구분되었고 민간용이 지금의 인터넷이 됨
👉🏻 프로토콜은 컴퓨터 내부에서, 또는 컴퓨터 사이에서 데이터의 교환 방식을 정의하는 규칙 체계
웹: 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 공간
👉🏻 인터넷의 통신망 위에서 작동하는 서비스
웹 표준: 모든 웹 브라우저에서 웹 서비스가 정상적으로 보여질 수 있도록 하는 것
👉🏻 어느 때든, 어떤 상황에서든 정상적으로 작동할 수 있게 함
👉🏻 표준안으로 HTML5를 권고
HTML의 개요
HTML: Hyper Text Markup Language
👉🏻 Hyper Text: 문서와 문서가 서로 연결되어 있다
👉🏻 Markup: 태그로 이루어져 있다
✔️ 수 많은 태그로 이루어진 문서가 서로 연결되어 있는 언어
HTML5의 특징
👉🏻 구조적 설계 지원(시멘틱: 이름만 봐도 역할을 짐작할 수 있음)
👉🏻 그래픽 및 멀티미디어 기능 강화
👉🏻 CSS3 및 javascript 지원
👉🏻 다양한 API 제공
👉🏻 인터넷이 연결되지 않은 상태에서도 애플리케이션 동작
태그의 구성 요소
<p> 안녕하세요 </p>: 시작 태그와 종료 태그가 1set로 같이 이루어진 케이스
👉🏻 시작 태그, 종료 태그, 콘텐트(내부 문자)로 구성됨
<img src="~~~">: 오로지 시작 태그 1개로 이루어진 케이스
👉🏻 1set가 요소(시작 태그~종료 태그까지 전체를 의미함)가 됨
| 구성요소 | 내용 |
| 태그(Tag) | '<'와 '>'로 묶인 명령어 시작태그(<태그>)와 종료태그(</태그>)를 한 쌍으로 이용 |
| 요소(Element) | 시작 태그와 종료 태그로 이루어진 모든 명령어 하나의 HTML문서는 요소들의 집합 |
| 속성(Attribute) | 요소의 시작 태그에만 사용 / 명령어 구체화 역할 여러 개의 속성을 사용할 수 있으며 속성의 구분은 공백 |
| 변수/속성값(Argument) | 속성이 가지는 값, 값 입력 시 " " 혹은 ' '를 이용 |
웹 처리 과정
👉🏻 네트워크를 통해 서로 연결된 컴퓨터들 간에 서버와 클라이언트의 역할을 나누고 HTML이라는 마크업 언어를 통해 자료를 주고받음