[꼼꼼한 개발자] 꼼코더
[React] - [처음 만난 리액트] - 01. HTML과 CSS (MPA, SPA, React) 본문
🧹 두서없이 적는 쉬운 정리
1. HTML은 쉽게 말 해 생선 뼈
2. CSS는 생선 살(눈, 비늘, 색깔 등)
3. <head>를 보고 웹 사이트의 성격 및 속성들을 확인할 수 있다.(제목, 이름)
4. <head> 속 정보들을 메타 데이터라고 한다.
5. SPA는 HTML하나로 구성되어있고 비어있는 <body>가 있다. 그 비어<body> 속을 동적으로 변경하면서 보여준다.
6. 동적으로 변경해 주는 걸 리엑트로 구현할 수 있다.
(자세한 내용은 아래 참고)
☠️ HTML란?
'웹 사이트의 뼈대를 구성하기 위해 사용되는 마크업 언어'이다.
HTML은 태그를 사용하여 구조적인 요소를 정의한다.
'태그'는 여는 태그(<tag>)와 닫는 태그(</tag>)의 형식으로 작성된다.
예를 들면 <body></body>는 웹 사이트의 내용을 감싸는 태그이다.
🔖 주요 태그들
웹 사이트의 뼈대를 구성하는 주요 태그들은 다음과 같다.
- <html>: HTML 문서의 루트 요소를 나타냅니다.
- <head>: 웹 사이트의 속성이나 메타 데이터를 포함하는 요소입니다.
- <body>: 웹 사이트의 실제 콘텐츠를 포함하는 요소입니다.
👩👦 MPA란? (Multi-Page Application)
여러 페이지로 구성된 웹 사이트나 웹 애플리케이션을 의미.
사용자가 요청할 때마다 새로운 페이지가 로딩되어 나타난다.
각 페이지마다 별도의 HTML 파일이 존재하기 때문에
페이지의 수가 많아질수록 HTML 파일의 양이 기하급수적으로 늘어날 수 있다.
🤰🏻 SPA 란? (Single Page Application)
단일 페이지로 구성된 웹 사이트나 웹 애플리케이션.
말 그대로 HTML파일이 하나만 존재한다. <body> 속 내용은 비어있으며 이후 요청마다 내용을 채워준다.
사용자가 요청시 한 페이지에서 필요한 콘텐츠를 동적으로 로드하여 사용자에게 보여준다.
React에서도 SPA 개발이 가능하다.
React는 해당 페이지에 대응하는 컨텐츠를 동적으로 렌더링 하여 <body>를 채워준다.
🎨 CSS란? (Cascading Style Sheets)
웹 사이트의 디자인과 레이아웃을 담당하는 스타일 시트.
CSS를 사용하면 같은 내용이지만 완전 다른 모습으로 보여줄 수 있다.
(속성의 양은 너무 방대하여 일일이 외울 수 없는 양이다!)
CSS는 HTML과 함께 사용하여 웹 페이지를 시각적으로 표현하는 데 중요한 역할을 한다.
위 내용은 '소플' 님의 '처음 만난 리액트' 영상을 참고하여 작성되었습니다.
'React > 처음 만난 리액트' 카테고리의 다른 글
| [React] - [처음 만난 리액트] - 06. 리액트의 장점과 단점 (렌더링, DOM, 컴포넌트, 모바일 웹 개발) (0) | 2023.06.27 |
|---|---|
| [React] - [처음 만난 리액트] - 05. 리액트란? (리액트는 무엇인가?, React란?) (0) | 2023.06.26 |
| [React] - [처음 만난 리액트] - 04. JavaScript의 함수(arrow function) (0) | 2023.06.25 |
| [React] - [처음 만난 리액트] - 03. JavaScript의 연산자 (0) | 2023.06.24 |
| [React] - [처음 만난 리액트] - 02. JavaScript 소개 및 자료형(JavaScript 자료형) (0) | 2023.06.23 |
