소개
- 먼저 개념 공부를 위해 참고한 영상입니다. 이 영상이 가장 잘 되어있는 듯합니다.
인프런 - 처음 만난 리액트 (소플) - React 다루기 전 HTML, CSS 관련 내용이에요, FE 완전 기초를 학습하실 분들은 도움이 될 듯합니다.
- Visual Studio Code가 무조건 설치 되어 있으셔야 합니다. 그리고 파일 생성하는 법과, Live server 돌리는 법은 알고 있어야해요!
Html 이란 무엇일까요?
HTML은 Hyper Text Markup Language입니다. 끝이에요 :) (진지)
-
한마디로 축약해볼게요, HTML은 마크업 언어의 한 종류라고 말할 수 있습니다.
그럼 마크업 언어가 무엇일까요? 우리는 마크업 언어에 대해서 알아야해요.
Markup Language
-
마크업 언어는 문서나 데이터를 처리하기 위해 문서에 추가되는 모든 정보를 말해요, 굉장히 큰 개념인데요 이걸 더 쉽게 풀어보자면 문서를 작성하는 방법을 정의하는 언어입니다. 이를 통해 문서의 각 부분이 어떤 역할을 하고 어디에 위치하는지를 지정할 수 있어요.
-
코딩을 한다라고 하면 보통 컴퓨터로 작업하고, 컴퓨터한테 우리가 어떻게 코딩할 건지 알려줘야 하기에 컴퓨터에게 문서의 구조와 형식을 알려줘야 합니다. 그걸 알려주는 언어가 마크업 언어 (Markup Language) 에요.
-
정리를 하자면, 컴퓨터에게 문서를 작성하도록 알려주고 정의하는 언어를 마크업 언어라고 말하는 것이고, HTML은 이 마크업 언어들 중 한 종류인 것이죠
그럼 HTML이 자주 사용돼?
-
예전에는 HTML이 주로 웹에서만 사용되었어요, 하지만 요즘은 웹브라우저를 이용해서 데스크탑 용 앱을 만들 수 있는 기술들도 생기고, 이것들이 발전했기 때문에 여기서도 HTML이 사용된다고 하네요,,, (그렇다고 합니다)
HTML은 어떻게 구성되어 있지?
- HTML은 태그 모음집입니다. <> 이런 표시들로 이루어져 있어요. 그리고 <>표시들을 용어적으로 Tag라고 부릅니다. VS CODE를 실행해서 확인해볼게요.
- 구조를 보시면 태그가 2개씩 있는 것 같습니다. 쉽게 생각해서 열어주고 닫아주기 위해서 2번 입력했다고 생각하면 편해요. 닫는 태그는 / 슬래시 표시로 닫아준 것이죠.
- 영어 범벅이라 어지러울 수 있습니다. 이제 여기에 제 설명을 추가해볼게요.
<!DOCTYPE html>
<!-- html 문서라고 나타내는 코드에요. 최신 HTML5 문서라는 점을 !DOCTYPE html 코드로 알 수 있어요-->
<html lang="en">
<!-- 이 문서가 영어로 작성되었다네요. en == english 입니다.-->
<head> <!-- 이건 head 태그에요-->
<meta charset="UTF-8">
<!-- 문자 인코딩 방식이 UTF-8 이라고 표시해주고 있어요.(기본 설정이라고 생각하면 편해요!)-->
<!-- 만약 UTF-8 방식이 아닌 이상한 코드가 적혀져 있으면 html 문서가 깨져서 나올 수 있어요 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 모바일 기기에서 웹 페이지가 올바르게 표시되도록 하는데 사용되는 태그에요 -->
<title>HTML시작하기</title>
</head>
<body> <!-- 이건 body 태그에요 -->
</body>
</html>- 주석으로 저만의 설명을 추가해봤어요. 다만 여기서 세부적으로 알아야 할 부분이 있어요. 바로 head 태그와 body 태그인데요. 하나하나 살펴보도록 할게요
문서의 머리와 몸통을 구성하는 중요한 뼈대를 소개해드림
- 먼저 head와 body를 우리가 직역해볼게요. 바로 머리와 몸통으로 직역할 수 있어요. 이처럼 사람으로 치면 사람의 머리와 몸통을 담당하는 중요한 태그가 head 태그와 body 태그입니다.
head 태그
- 사진에서 보았듯이, 사람의 머리로 생각하는게 편합니다. 그리고 우리는 머리에 속성을 넣어준다고 생각하면 될 거 같아요. 부수적으로는 웹사이트의 제목, 설명 등등 여러가지 속성이 들어가는 것이죠.
body 태그
- 우리가 실제로 사이트에서 보게 되는 내용들이 들어가게 됩니다.
구글 메인 홈페이지로 확인하는 HTML
- 개념적으로 이해가 되었다면 구글 사이트 접속 후 F12 버튼을 눌러 개발자 도구를 봐볼게요.
- 심각한 영어 뭉탱이들이 있어요. 여기서 태그들만 확인해봅니다
<!DOCTYPE html>
<head>
<body>
</body>
</head>
</html>- 앞서 말한 html 태그 안에 head 태그가 존재하고 head 태그 안에 body 태그가 위치한 것을 볼 수 있죠. (html => head => body)
- 여기서 div 태그나 script 태그는 body 태그 안에서 작동하는 다양한 태그들이라고만 알고 넘어갈게요.
- 즉 하나의 웹페이지에는 하나의 html 문서로 이루어지게 됩니다.
SPA (Single Page Application)
- 그런데 html에는 한 가지 문제가 있는데요. 예시로 우리가 회사에 들어가서 사용자 웹사이트를 만들어나간다고 생각을 해볼게요. 여기서 한 페이지당 하나의 HTML을 만들어서 코딩을 진행한다고 하면 문제가 하나 생기게 됩니다.
페이지가 많으면 많아질 수록 많은 HTML 문서를 계속 만들어야한다.
- 그래서 개발자들이 페이지를 하나만 만들고 여러가지 세부 기능들을 넣어서 동작하는 시스템을 만들었고 그것이 SPA라고 해요.
- 사진에서 왼쪽 파란색 그림들과 같이 기존에 HTML을 계속 생성하는 방식은 페이지가 수백 수천개에 달할 경우 굉장히 복잡해지고 수정하기도 힘들어집니다. 이를 좀 더 다듬어서 말하면 유지 보수하기가 힘들다라고 말해요
- 오른쪽 그림들을 보면 HTML이 하나만 있는 SPA 방식이에요. 왼쪽의 그림들보다 HTML이 하나만 존재하는 방식은 유지보수하기가 쉬운 것이죠. 그래서 SPA 방식이 더 효율적이라고 설명할 수 있어요.
- 추가로 우리가 알아가야할 React는 SPA로 이루어집니다. React 자체가 SPA 형식을 따르기 때문에 React를 공부하는 우리 입장에서 알아야하기도 합니다.
CSS (Cascading Style Sheets)
- 우리가 HTML 문서에 대해 알았다면 문서에 글자 간격을 수정하고, 크기를 맞추는 디자인 적인 요소들을 넣게 됩니다. 그런 요소들을 CSS라고 부르게 되는 것이죠.
- 앞에서 살펴본 구글 메인 홈페이지 사진을 봅시다. HTML 오른쪽에 이상한 코드들이 적혀져 있는데요. 바로 구글 페이지에 CSS입니다. 구글 페이지에 디자인 코드들을 삽입해, 지금 저희 눈에 보이는 구글 페인 홈페이지가 보여지는 것이죠. 이처럼 CSS는 디자인하기라고 이해하면 됩니다.
CSS를 Visual Studio Code에 적용해보기
- Visual Studio Code를 실행한 후에 해당과 같이 파일과, 코드를 수정해주세요
파일은 2개를 준비해주세요
start.html 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="start.css">
<!-- css를 넣기 위한 서식이에요. -->
<title>Document</title>
</head>
<body>
<div>
<h2>제목이에요</h2>
</div>
</body>
</html>start.css 코드
div {
background-color: #333;
color: #fff;
padding: 10px;
}그리고 Live Server를 돌린다면 해당과 같이 잘 출력 됩니다.
- 여기서는 간단한 배경 색상, 글자 색상, 간격을 설정해줬는데요, 여러가지 기능들을 넣어서 본인이 원하는 스타일로 만들어나가면 됩니다.
정리
- HTML은 마크업 언어의 한 종류입니다.
- HTML을 구성하는 것들을 태그라고 불어요
- 태그는 Head태그와 Body태그로 이루어져있어요.
- 여러개의 웹사이트를 만들어 코딩하는 기존의 방식을 해결하기 위한 개념이 SPA 개념이며, 우리가 공부하는 React도 SPA입니다.
- CSS는 HTML 문서에 디자인을 입혀서 깔끔한 디자인을 만들어낼 수 있게 해줍니다.
나 혼자 보려고 만든 개발 일기