1. HTML이란 무엇인가?
Hyper Text Markup Language, 마크업 언어의 한종류이다.
✔️ 마크업언어
문서나 데이터를 처리하기 위해 문서에 추가되는 정보를 마크업이라고 한다.
그런 마크업 정보를 표현하기 위한 언어를 마크업 언어라고 한다.
HTML은 웹 사이트의 뼈대를 구성하기 위해 사용하는 마크업 언어이다.
태그를 이용하여 웹 사이트의 구조를 만든다.
2. 웹 사이트의 뼈대를 구성하는 태그들
가장 기본적이고 필스적인 태그들이 존재한다.
<html>
<head>
</head>
<body>
</body>
</html>- html
HTML의 시작과 끝을 알리는 태그이다. - head
머리 부분
우리가 사람을 볼 때 얼굴이 있는 머리를 보면 그 사람이 누군지 알 수 있는 것처럼, 웹사이트의 head는 이 웹사이트가 어떤 웹사이트인지 알 수 있는 여러 가지 속성(제목, 설명 등)을 담고 있는 곳이다. 이러한 속성들을 메타데이터(metadata)라고 부른다. 따라서, 태그 안에 있는 내용들만 살펴봐도 해당 웹사이트가 대략 어떤 사이트인지 알 수 있다.
- body
몸통 부분
실제로 웹사이트에서 보이는 콘텐츠가 들어간다. 그래서 태그 안에 들어있는 내용이 바로 우리가 실제로 웹브라우저에서 보게 되는 내용이다.
3. SPA
우리가 보는 웹페이지는 각 페이지별로 HTML 파일이 따로 존재하며, 페이지를 이동하게 될 경우 브라우저에서는 해당 페이지의 HTML 파일을 받아와서 화면에 표시해준다. 수많은 페이지를 관리하기 위해서 나오게 된 것이 바로 SPA(Single Page Application) 이다.
SPA = 하나의 페이지만 존재하는 웹사이트(웹 애플리케이션)
👉🏼MPA vs SPA
✔️ MPA(Multi Page Application)
전통적인 방식의 웹 애플리케이션이다.
사용자가 페이지를 요청할 때마다 새로운 페이지가 로딩되어 화면에 나타나는 것이다. 그리고 각 페이지는 각각의 HTML 파일을 갖고 있다.
✔️ SPA(Single Page Application)
처음에는 HTML파일의 태그의 내부가 텅 비어있다가 해당 페이지에 접속할 때, 그 페이지에 해당하는 콘텐츠를 가져와서 동적으로 태그 내부를 채워 넣게 된다.
CSS(Cascading Style Sheets)
웹 사이트의 레이아웃과 글꼴, 색상 등의 디자인을 입히는 역할을 하는 언어이다.
HTML로 웹 사이트의 구조를 만들었다면, 그 위에 CSS를 사용해서 디자인을 입혀야 아름다운 웹사이트가 완성된다.
프론트엔드 개발자 취준생입니다.