[React.js] 처음 만난 리액트 1강 HTML과 CSS

Contents

HTML(Hyper Text Markup Language)

마크업 언어의 한 종류

마크업 : 문서나 데이터를 처리하기 위해 문서에 추가되는 정보

마크업 언어 : 마크업 정보를 표현하기 위한 언어

HTML은 이러한 마크업 언어의 한 종류

 

그 동안 HTML은 주로 웹에서만 사용되었다.

하지만 요즘은 웹브라우저를 이용해서 데스크탑용 앱을 만들 수 있는 기술들도 있기 때문에 그런 곳에도 HTML이 사용됨

 

정리하면, HTML은 웹사이트의 뼈대를 구성하기 위해 사용하는 마크업 언어

HTML에서는 흔히 Tag(태그)라고 부르는 것을 사용해 웹사이트의 구조를 만들고 웹사이트에 들어갈 내용들을 채워넣음

 

웹사이트 구조

head 태그에는 웹사이트의 속성이 들어감

웹사이트의 head는 이 웹사이트가 어떤 웹사이트인지 제목, 설명 등의 여러가지 속성을 담고 있음. 그리고 이런 속성 데이터들을 meta 데이터라고 부름

 

body태그에는 실제로 웹사이트에서 보이는 콘텐츠가 들어감

 

수많은 페이지가 존재하는 복잡한 웹사이트의 경우 html 파일이 수십에서 수백개가 될 텐데 이걸 어떻게 다 관리?

이러한 문제를 해결하기 위해 나오게 된 것이 SPA

 

SPA  : Single Page Application 

하나의 페이지만 존재하는 웹사이트 또는 웹 애플리케이션

어떻게 하나의 페이지로 복잡한 웹사이트를 표현?

그 비밀은 다음 강의에서 배울 React와 관련이 있다

 

MPA와 SPA

MPA(Multi Page Application)

전통적인 방식의 웹 어플리케이션

이 방식의 경우, 여러 개의 페이지가 존재하는 형태이기 때문에 Multi Page Application이라고 부르기도 함

사용자가 페이지를 요청할 때마다 새로운 페이지가 로딩되어 화면에 나타남

그리고 각 페이지는 각자의 HTML 파일을 갖고있음

SPA(Single Page Application)

단 하나의 페이지만 존재

여기서 페이지가 하나라는 것은 html 파일이 하나라는 뜻

 처음에는 이 html 파일의 body 태그의 내부가 텅 비어있다가 해당 페이지에 접속할 때 그 페이지에 해당하는 content를 가져와서 동적으로 body 태그 내부를 채워넣음

참고로 React가 이 곳에 채워넣는 역할을 담당

자세한 내용은 다음에 React 배울 때 설명

 

CSS(Cascading Style Sheets)

웹사이트의 스타일을 담당

웹사이트의 레이아웃, 글꼴, 색상 등의 디자인을 입히는 역할

html로 웹사이트의 구조를 만들었다면 그 위에 css를 사용해서 디자인을 입혀야 아름다운 웹사이트 완성

 

아래 그림처럼 html 소스코드는 동일하지만 css만 변경해도 전혀 다른 형태와 디자인의 웹사이트가 됨