Knowre-Dev · Hyunsangs · Mar 31, 2023 · Mar 31, 2023 · Mar 31, 2023 · Mar 31, 2023
diff --git a/Quest00/README.md b/Quest00/README.md
@@ -16,12 +16,90 @@
 
 ## Checklist
 * 형상관리 시스템은 왜 나오게 되었을까요?
+* - <aside>
+💡 소프트웨어의 변경사항을 체계적으로 추적하고 통제하는 것.
+
+형상 관리는 일반적인 단순 버전관리 기반의 소프트웨어 운용을 좀 더 포괄적인 학술 분야의 형태로 넓히는 근간.
+
+소프트웨어 개발에서는 단순 파일 변경내역을 관리할 뿐만 아니라 소프트웨어 개발에서 발생할 수 있는 다양한 결과물(요구사항 정의서, 설계 문서, 코드 등등)에 대해 형상을 만들고 이를 체계적으로 관리하고자 나오게되었다.
+
+</aside>
+
 * git은 어떤 형상관리 시스템이고 어떤 특징을 가지고 있을까요? 분산형 형상관리 시스템이란 무엇일까요?
+
+- 특징 : 2005년 개발된 형상관리 도구로 매우 빠른 속도를 가지고 있으며 분산형 관리 시스템을 가지고 있다. 다른 형상관리 도구에 비해 다양한 기능을 지원하며 최근 가장 대중화되어 사용되고 있다. 처음 사용시 다른 도구에 비해 사용법을 숙지하는데 어려움을 가질 수 있으나 로컬 관리와 중앙 관리가 모두 가능하여 장소에 구애받지 않고 협업을 가능케 한다.                                                                                                                              
+
+* 분산형 형상관리 시스템이란,
+ - 분산버전관리 시스템에서 저장소는 모든 클라이언트가 저장소가 될 수 있다. 예를 들어 TFS에서 get latest version을 통해 저장소에서 프로젝트를 가져오면, 저장소에서 사용자의 컴퓨터에 최신의 코드를 받아오게 된다. 이 말은 소스 코드는 물론 그동안의 변경 이력까지 모든 정보를 가져와 로컬 컴퓨터 또한 완전한 저장소가 된다
+
+
+
   * git은 어떻게 개발되게 되었을까요? git이 분산형 시스템을 채택한 이유는 무엇일까요?
+  - * git을 분산형 시스템으로 채택한 이유
+ - 하나의 서버에 집중되어 모든 작업 내역이 저장되는 중앙 집중형 형상관리 체계와 달리 개개인의 작업 히스토리 역시 각자의 서버에 저장해 관리될 수 있어 같은 파일 하나를 여러명이 동시에 작업하는 병렬 개발이 가능하며 'commit'이라는 행위 자체가 공동 코드로 즉시 병합됨을 의미하지 않아 개인 작업/공동 작업으로 분리될 수 있다. 따라서, 예기치 못 한 충돌이나 변경 사항을 해결하기 위한 시간을 최소화 시켜준다
+ - 
 * git과 GitHub은 어떻게 다를까요?
+ - git은 형상관리 도구이며,  github는 git을 공유/업로드 할 수 잇는 눈에 보이는 웹 호스팅 서비스, 즉 플랫폼이다.
+
 * git의 clone/add/commit/push/pull/branch/stash 명령은 무엇이며 어떨 때 이용하나요? 그리고 어떻게 사용하나요?
+ - git clone : 원격 저장소에 있는 작업/프로젝트를 로컬 저장소로 가지고 오는(복제) 명령어
+- git add : 작업 중인 로컬 저장소에 있는 파일들을 스테이징 상태로 변경시켜주는(커밋 가능한 상태) 명령어
+- git commit : 로컬 저장소(디렉토리)에 있는 모든 파일에 대한 스냅샷(이전 스냅샷과 비교하여 변경된 부분)을 기록하는 명령어
+- git push : 로컬 저장소에서 작업한 후 commit한 내역을 원격 저장소로 보내는 명령어
+- git pull : push와 반대로 원격 저장소에 업로드된 작업 내역을 로컬 저장소로 가져오고 싶을 때 사용하는 명령어
+- git branch : 여러 명이 각기 다른 저장소에서 작업하고 싶을 때 작업 공간(branch)를 만들어주는 명령어로 모든 브랜치의 목록을 보거나, 생성하고 삭제할 수 있음
+- git stash : 지금 바로 commit 하고 싶지는 않지만 다른 작업을 해야 할 때 저장해놓고 나중에 가져와서 쓰려고 할 때 사용하는 저장소이자 명령어
+
 * git의 Object, Commit, Head, Branch, Tag는 어떤 개념일까요? git 시스템은 프로젝트의 히스토리를 어떻게 저장할까요?
+  - **Object 파일 개념 정리**
+
+깃은 Git.디렉토리 안에 objects 디렉토리에 파일과 관련해 총 세가지 유형을 가지게 된다.
+
+1. blob : 실제 데이터를 저장
+
+2. tree : commit한 시점의 버전의 파일들의 주소를 저장
+
+3. commit : tree의 주소와 이전 버전의 주소를 저장
+
+이는 위로 갈수록 세부적인 실제 데이터를 가지게 된다.
+
+working directory (working copy, working tree)
+
+기본적으로 우리가 볼 수 있는 디렉토리 우리가 지금 현재 파일을 다루는 디렉토리를 말한다.
+
+---
+
+- Head : 모든 브렌치에는 HEAD값이 존재하는데, HEAD는 브렌치의 마지막 커밋 즉 현재 속한 브랜치의 가장 최신 커밋을 의미합니다.
+
+## **예시**
+
+### checkout으로 앞뒤 이동
+
+⭐️ **^ 또는 ~: 갯수만큼 해당 브렌치의 이전(옛날)으로 이동**
+
+```
+git checkout HEAD^
+```
+
+```
+git checkout HEAD^^^
+```
+
+## **⭐️ -: 해당 브랜치의 한 단계 최근 커밋으로 이동**
+
+```
+git checkout -
+```
+
+---
+
+- Commit : commit 객체는 tree 객체에 대한 참조, 부모(이전 커밋) 객체와 작성자와 같은 메타 데이터에 대한 참조를 저장한다.
+- Branch : 효과적으로 파일의 변경사항에 대한 스냅샷을 보여주는 포인터의 일종이다. 새로운 기능을 추가하거나 버그/이슈를 수정할 때 브랜치를 생성/사용하여 효율적으로 작업을 할 수 있다.
+- Tag : 특정 commit에 별명을 붙여주는 명령어로 Tag를 통해서 commit 상태로 쉽게 변경하거나 reset을 통해 돌아가는 것 역시 쉽다. release 버전을 명시해 특정 태그에 해당하는 버전을 배포할 수도 있다.
+
+
 * 리모트 git 저장소에 원하지 않는 파일이 올라갔을 때 이를 되돌리려면 어떻게 해야 할까요?
+ - git log에서 해당 파일 업로드된 commit id 확인하고, git reset --hard 되돌리고자 하는 commit id 를 입력 하여 되돌린다.
 
 ## Quest
 * GitHub에 가입한 뒤, [이 커리큘럼의 GitHub 저장소](https://github.com/KnowRe-Dev/WebDevCurriculum)의 우상단의 Fork 버튼을 눌러 자신의 저장소에 복사해 둡니다.

diff --git a/Quest00/sandbox/CommitTest.txt b/Quest00/sandbox/CommitTest.txt
@@ -0,0 +1 @@
+commit test
diff --git a/Quest01/README.md b/Quest01/README.md
@@ -1,55 +1,110 @@
 # Quest 01. HTML과 웹의 기초
 
 ## Introduction
-* HTML은 HyperText Markup Language의 약자로, 웹 브라우저에 내용을 표시하기 위한 가장 기본적인 언어입니다. 이번 퀘스트를 통해 HTML에 관한 기초적인 사항들을 알아볼 예정입니다.
+
+- HTML은 HyperText Markup Language의 약자로, 웹 브라우저에 내용을 표시하기 위한 가장 기본적인 언어입니다. 이번 퀘스트를 통해 HTML에 관한 기초적인 사항들을 알아볼 예정입니다.
 
 ## Topics
-* HTML의 역사
-  * HTML 4.01, XHTML 1.0, XHTML 1.1
-  * XHTML 2.0과 HTML5의 대립
-  * HTML5와 현재
-* 브라우저의 역사
-  * Mosaic와 Netscape
-  * Internet Explorer의 독점시대
-  * Firefox와 Chrome의 등장
-  * iOS Safari와 모바일 환경의 브라우저
-  * Edge와 Whale 등의 최근의 Chromium 계열 브라우저
-* HTML 문서의 구조
-  * `<html>`, `<head>`와 `<body>` 등의 HTML 문서의 기본 구조
-  * 시맨틱 엘리먼트
-  * 블록 엘리먼트와 인라인 엘리먼트의 차이
+
+- HTML의 역사
+  - HTML 4.01, XHTML 1.0, XHTML 1.1
+  - XHTML 2.0과 HTML5의 대립
+  - HTML5와 현재
+- 브라우저의 역사
+  - Mosaic와 Netscape
+  - Internet Explorer의 독점시대
+  - Firefox와 Chrome의 등장
+  - iOS Safari와 모바일 환경의 브라우저
+  - Edge와 Whale 등의 최근의 Chromium 계열 브라우저
+- HTML 문서의 구조
+  - `<html>`, `<head>`와 `<body>` 등의 HTML 문서의 기본 구조
+  - 시맨틱 엘리먼트
+  - 블록 엘리먼트와 인라인 엘리먼트의 차이
 
 ## Resources
-* [MDN - HTML](https://developer.mozilla.org/ko/docs/Web/HTML)
-* [HTML For Beginners](https://html.com/)
-* [History of the web browser](https://en.wikipedia.org/wiki/History_of_the_web_browser)
-* [History of HTML](https://en.wikipedia.org/wiki/HTML)
-* [StatCounter](https://gs.statcounter.com/)
+
+- [MDN - HTML](https://developer.mozilla.org/ko/docs/Web/HTML)
+- [HTML For Beginners](https://html.com/)
+- [History of the web browser](https://en.wikipedia.org/wiki/History_of_the_web_browser)
+- [History of HTML](https://en.wikipedia.org/wiki/HTML)
+- [StatCounter](https://gs.statcounter.com/)
 
 ## Checklist
-* HTML 표준의 역사는 어떻게 될까요?
-  * HTML 표준을 지키는 것은 왜 중요할까요?
-  * XHTML 2.0은 왜 세상에 나오지 못하게 되었을까요?
-  * HTML5 표준은 어떤 과정을 통해 정해질까요?
-* 브라우저의 역사는 어떻게 될까요?
-  * Internet Explorer가 브라우저 시장을 독점하면서 어떤 문제가 일어났고, 이 문제는 어떻게 해결되었을까요?
-  * 현재 시점에 브라우저별 점유율은 어떻게 될까요? 이 브라우저별 점유율을 알아보는 것은 왜 중요할까요?
-  * 브라우저 엔진(렌더링 엔진)이란 무엇일까요? 어떤 브라우저들이 어떤 엔진을 쓸까요?
-  * 모바일 시대 이후, 최근에 출시된 브라우저들은 어떤 특징을 가지고 있을까요?
-* HTML 문서는 어떤 구조로 이루어져 있나요?
-  * `<head>`에 자주 들어가는 엘리먼트들은 어떤 것이 있고, 어떤 역할을 할까요?
-  * 시맨틱 태그는 무엇일까요?
-    * 시맨틱 엘리먼트를 사용하면 어떤 점이 좋을까요?
-    * `<section>`과 `<div>`, `<header>`, `<footer>`, `<article>` 엘리먼트의 차이점은 무엇인가요?
-  * 블록 레벨 엘리먼트와 인라인 엘리먼트는 어떤 차이가 있을까요?
+
+- HTML 표준의 역사는 어떻게 될까요?
+
+  - HTML 표준을 지키는 것은 왜 중요할까요?
+    답 : 표준을 알아야 누구나 접근할 수 있게 되어 차별없는 접근이 가능. 이러한 상호 간의 호환성이 이유이다. 산업에 있어서도 규격화된 기준이 있으면 개발과 제작물을 만드는데 편함.
+
+  - XHTML 2.0은 왜 세상에 나오지 못하게 되었을까요?
+    답: xml과 html 을 합성하여 확장된 태그와 엄격한 문법을 가진 xhtml이며, xml은 버전과 버전사이의 하위 호환성을 지원하지 않고 이전 태그들이 사용도 안되는 문제도 존재.
+
+  - HTML5 표준은 어떤 과정을 통해 정해질까요?
+    답: w3c의 정기적인 컨소시엄을 통해 10년간 w3c 권고안을 발표한다. 이런 웹에 관하여 토론할 수 있는 열린포럼, 심포지엄을 통해 사용자의 불편을 이해하고 차기 표준안을 반영할 수 있게 지속적인 활동함.
+
+- 브라우저의 역사는 어떻게 될까요?
+  답: 브라우저는 1990년대 초반에 시작되었고, 그 당시에는 텍스트와 이미지만을 표시가 가능했다. 1993년에 Mosaic 개발하면서 그래픽 및 멀티미디어 지원 가능해지고 사용자들이 웹 컨텐츠가 더 많아짐.
+
+  - Internet Explorer가 브라우저 시장을 독점하면서 어떤 문제가 일어났고, 이 문제는 어떻게 해결되었을까요?
+    답: Internet Explorer 는 웹 표준을 준수하지 않아서 사이트를 구현시 거기에 맞춰서 해야했다. 또한 보안취약점이 많아서 사용자들이 개인 정보 유출 빈도가 많았음. Eu와 미국정부에서 인터넷 익스플로러를 제거하거나 다른 브라우저를 기본 브라우저로 지정하고, 웹 표준 준수도 개선시켜, 웹 개발자들이 웹 사이트를 구현할 때 호환성 문제를 최소화시킴.
+
+  - 현재 시점에 브라우저별 점유율은 어떻게 될까요? 이 브라우저별 점유율을 알아보는 것은 왜 중요할까요?
+    답: 2020년 기준 크롬이 64.1% 압도적 1위이며 뒤이어 사파리 17.7% , 파이어폭스 4.6 %로 되어있다.
+    점유율을 알아보는 것이 중요한 이유는 웹 개발자와 디자이너에게 중요한 정보를 제공해주며, 마케팅과 비즈니스 전략 수립에 도움이되고, 웹 표준 준수를 위한 가이드 제공, 웹 기술의 발전을 예측하는 데 도움이 되기 때문이다.
+
+  - 브라우저 엔진(렌더링 엔진)이란 무엇일까요? 어떤 브라우저들이 어떤 엔진을 쓸까요?
+    답: 브라우저 엔진이란 내용 정보인 HTML, XML과 서식정보인 CSS,XML 등을 읽어들여 사람이 읽을 수 있는 문서로 표시하는, 웹 브라우저의 핵심 기능을 담당하는 소프트웨어이다.
+    구글 크롬: Blink 엔진
+    모질라 파이어폭스: Gecko 엔진
+    애플 사파리: WebKit 엔진
+    마이크로소프트 엣지: Blink 엔진 또는 이전에는 Trident 엔진
+    인터넷 익스플로러: Trident 엔진
+    오페라: Blink 엔진
+    모질라 파이어폭스는 Quantum 엔진을 개발하여 자체 엔진을 개발하여 씀.
+
+  - 모바일 시대 이후, 최근에 출시된 브라우저들은 어떤 특징을 가지고 있을까요?
+    답: 1. 모바일 퍼스트 디자인: 모바일 사용량이 PC 사용을 앞서고 나서, 최근 브라우저들이 모바일 퍼스트 디자인을 채택함. 2. 브라우저 제작사들은 보안 강화를 위해 매년 보안 업데이트 출시, 그리고 브라우저에서 HTTPS 프로토콜을 사용하여 개인정보 보호 3. HTML5와 CSS3은 최신 웹 기술의 예로서, 이제 모든 브라우저에서 이러한 웹 표준을 지원 4. 인공지능 기술의 적용: 인공지능 기술을 활용한 브라우저가 등장하고 있다. 5. 다양한 기기 지원: 모바일 기기뿐만 아니라 데스크탑, 노트북, 태블릿 등 다양한 기기에서 동작하도록 최적화된 브라우저들이 출시되고 있다.
+
+- HTML 문서는 어떤 구조로 이루어져 있나요?
+답: <!DOCTYPE html> 선언: 문서가 HTML5로 작성되었음을 나타냄
+<html> 요소: HTML 문서의 루트 요소로, 모든 내용이 포함 
+<head> 요소: 문서의 메타데이터를 정의합니다. 이 요소 안에는 문서 제목, 스타일 시트, 스크립트, 메타 태그 등이 포함
+<title> 요소: 문서의 제목을 정의합니다. 브라우저 탭에 표시
+<body> 요소: 문서의 본문을 정의합니다. 웹 페이지에서 실제로 보여지는 내용들이 포함
+<script>, <style>, <link> 등의 요소: 스크립트, 스타일 시트, 외부 파일과의 연결 등을 정의하는 요소
+
+- `<head>`에 자주 들어가는 엘리먼트들은 어떤 것이 있고, 어떤 역할을 할까요?
+  답: <head> 엘리먼트는 HTML 문서의 메타데이터, 즉 문서의 정보를 설명하는 데이터를 포함하는 부분으로, 주로 브라우저가 이용하는 정보이기 때문에 사용자에게 직접적으로 보여지지 않는다.
+
+- 시맨틱 태그는 무엇일까요?
+  답: 시맨틱이라는 '의미의' 라는 뜻을 가진 형용사로서, 시맨틱 태그는 의미를 부여한 태그라는 뜻.
+
+  - 시맨틱 엘리먼트를 사용하면 어떤 점이 좋을까요?
+    답: HTML 문서의 가독성과 유지보수가 쉬워지기 때문,
+    웹 브라우저가 HTML만 보고도 상단(header), 본문(main), 하단(footer), 사이드(aside) 어느 영역인지 쉽게 알 수 있음.
+    검색엔진이 검색을 수행할 때 HTML내의 태그를 분석할 수 있음.
+
+  - `<section>`과 `<div>`, `<header>`, `<footer>`, `<article>` 엘리먼트의 차이점은 무엇인가요?
+  답: <section>은 보통 컨텐츠를 그룹화하여 문서의 구조를 명확히하는 데 사용되고, <div>는 보통 레이아웃을 정의하거나 CSS 스타일링을 적용하기 위해 사용
+  <header>	사이트의 머리부분에 사용
+  <footer>	사이트의 바닥부분, 주로 연락처나 제작자 정보등을 기술하는 부분
+  <article>	개별 콘텐츠를 나타내는 요소
+
+- 블록 레벨 엘리먼트와 인라인
+  엘리먼트는 어떤 차이가 있을까요?
+  답:
+  블록 레벨 엘리먼트는 새로운 줄에서 시작하며, 화면의 가로 폭 전체를 차지 대표적으로 <div>, <h1>-<h6>, <p>, <ul>, <ol>, <form> 등이 있다. 블록 레벨 엘리먼트는 다른 블록 레벨 엘리먼트나 인라인 엘리먼트를 포함 가능
+  인라인 엘리먼트는 블록 레벨 엘리먼트 안에서 사용되며, 새로운 줄을 시작하지 않고, 필요한 만큼의 너비만 차지한다. 대표적으로 <a>, <img>, <strong>, <em>, <span> 등이 있다. 인라인 엘리먼트는 텍스트와 이미지 등의 작은 요소를 묶어서 스타일링하거나, 블록 레벨 엘리먼트 안에 위치시켜 레이아웃을 디자인하는 데 사용 됨.
 
 ## Quest
-* [이 화면](screen.png)의 정보를 HTML 문서로 표현해 보세요. 다만 CSS를 전혀 사용하지 않고, 문서의 구조가 어떻게 되어 있는지를 파악하여 구현해 보세요.
-  * [CSS Naked Day](https://css-naked-day.github.io/)는 매년 4월 9일에 CSS 없는 웹 페이지를 공개하여 내용과 마크업에 집중한 HTML 구조의 중요성을 강조하는 행사입니다.
-* 폴더에 있는 `skeleton.html` 파일을 바탕으로 작업해 보시면 됩니다.
-  * 화면을 구성하는 큰 요소들을 어떻게 처리하면 좋을까요?
-  * HTML 문서상에서 같은 층위에 비슷한 요소들이 반복될 때는 어떤 식으로 처리하는 것이 좋을까요?
+
+- [이 화면](screen.png)의 정보를 HTML 문서로 표현해 보세요. 다만 CSS를 전혀 사용하지 않고, 문서의 구조가 어떻게 되어 있는지를 파악하여 구현해 보세요.
+  - [CSS Naked Day](https://css-naked-day.github.io/)는 매년 4월 9일에 CSS 없는 웹 페이지를 공개하여 내용과 마크업에 집중한 HTML 구조의 중요성을 강조하는 행사입니다.
+- 폴더에 있는 `skeleton.html` 파일을 바탕으로 작업해 보시면 됩니다.
+  - 화면을 구성하는 큰 요소들을 어떻게 처리하면 좋을까요?
+  - HTML 문서상에서 같은 층위에 비슷한 요소들이 반복될 때는 어떤 식으로 처리하는 것이 좋을까요?
 
 ## Advanced
-* XML은 어떤 표준일까요? 어떤 식으로 발전해 왔을까요?
-* YML, Markdown 등 다른 마크업 언어들은 어떤 특징을 가지고 있고, 어떤 용도로 쓰일까요?
+
+- XML은 어떤 표준일까요? 어떤 식으로 발전해 왔을까요?
+- YML, Markdown 등 다른 마크업 언어들은 어떤 특징을 가지고 있고, 어떤 용도로 쓰일까요?