Pull Request

Quest00/README.md

@@ -16,10 +16,30 @@
 
 ## Checklist
 * 형상관리 시스템은 왜 나오게 되었을까요?
+```
+형상관리 시스템은 특정 시점에 대해 상태를 기록해 놓으면 이후라도 언제든지 그 환경으로 돌아갈 수 있게 도와주는것
+인데 왜 이 시스템이 나왔냐면 협업의 특성상 여러 사람들이 프로젝트를 함께 참여하게 되는데 이 때 누군가의 실수로 잘못된 버전이나 버그들이 생길경우들이 많아서
+그러한 일들을 막기위해 생긴 시스템이다.
+```
 * git은 어떤 형상관리 시스템이고 어떤 특징을 가지고 있을까요? 분산형 형상관리 시스템이란 무엇일까요?
+```
+git의 경우 버전별로 관리할 수 있는 형상관리 시스템이다.
+분산형 형상관리 시스템은 마지막 저장한 것을 전부 복제하는것.(이와 반대되는것이 중앙집중식 버전 관리 시스템이다.)
+```
   * git은 어떻게 개발되게 되었을까요? git이 분산형 시스템을 채택한 이유는 무엇일까요?
+  ```
+  git은 Linux 커널이 BitKeeper을 만들면서 이익을 추구하는 회사와 관계가 틀어져 무료 사용이 재고된 후,자체 도구를 만드는 계기가 되었는데 이 도구가 Git이다.
+  git이 분산형 시스템을 채택한 이유는 빠른 속도,단순한 구조, 비선형적인 개발,완벽한 분산,대형 프로젝트에서도 유용하기 때문이다.
+  ```
+
 * git과 GitHub은 어떻게 다를까요?
+```
+git과 Github와 차이점은 Local git/Remote git, 터미널을 사용하는git/UI를 지원하는 Github, PR(Pull Request) 기능을 지원하는 Github
+Github는 git을 서비스하지만 추가적인 여러 기능들을 지원하는 시스템이다.
+```
 * git의 clone/add/commit/push/pull/branch/stash 명령은 무엇이며 어떨 때 이용하나요? 그리고 어떻게 사용하나요?
+
+
 * git의 Object, Commit, Head, Branch, Tag는 어떤 개념일까요? git 시스템은 프로젝트의 히스토리를 어떻게 저장할까요?
 * 리모트 git 저장소에 원하지 않는 파일이 올라갔을 때 이를 되돌리려면 어떻게 해야 할까요?
 
@@ -29,7 +49,14 @@
   * 앞으로의 git 작업은 되도록 커맨드라인을 통해 하는 것을 권장합니다.
 * 이 문서가 있는 폴더 바로 밑에 있는 sandbox 폴더에 파일을 추가한 후 커밋해 보기도 하고, 파일을 삭제해 보기도 하고, 수정해 보기도 하면서 각각의 단계에서 커밋했을 때 어떤 것들이 저장되는지를 확인합니다.
 * `clone`/`add`/`commit`/`push`/`pull`/`branch`/`stash` 명령을 충분히 익혔다고 생각되면, 자신의 저장소에 이력을 push합니다.
+clone(현재 자신이 있는 디렉토리 하위에 그 repository가 저장. 클라우드에 저장된 repository를 로컬에 저장하는 것.)
+add(repository(Working directory)에 변경된 내용을 Staging Area에 저장한다.)
+commit(Staging Area에 있는 내용들을 local repository에 전달한다.)
+push(local repository의 파일을 remote repository에 저장한다.)
+pull(원격 repository에 있는 내용을 로컬 repository로 다운로드 하는 명령어.)
+branch(브랜치 생성, 수정, 삭제를 하는 명령어)
+stash(아직 마무리하지 않은 작업을 스택에 잠시 저장할 수 있도록 하는 명령어이다. 이를 통해 아직 완료하지 않은 일을 commit하지 않고 나중에 다시 꺼내와 마무리할 수 있다.)
 
 ## Advanced
 * Mercurial은 어떤 형상관리 시스템일까요? 어떤 장점이 있을까요?
-* 실리콘밸리의 테크 대기업들은 어떤 형상관리 시스템을 쓰고 있을까요?
+* 실리콘밸리의 테크 대기업들은 어떤 형상관리 시스템을 쓰고 있을까요?

Quest01/README.md

@@ -28,20 +28,156 @@
 
 ## Checklist
 * HTML 표준의 역사는 어떻게 될까요?
+```
+HTML 1.0 = 거의 텍스트위주의 정보전달 목적
+W3C 웹의 표준을 정의하는 국제 컨소시엄
+HTML 2.0 ~ HTML 3.2 = 표준화를 위한 노력 
+HTML 4.01 안정된 표준의 HTML, CSS사용으로 디자인적 요소 구분. 그러나 W3C에서 더 이상은 기술적인 한계에 부딛혔다고 판단,HTML을 발전시키지 않을 것을 공표.
+XHTML XML과 HTML을 합성, 정확한 문법 사용 *XML W3C에서 개발한 특수한 목적을 갖는 마크업 언어를 만드는데 사용하도록 권장하는 다목적 마크업 언어.
+WHATWG(Web Hypertext Application Techology Working Group) HTML 5의 시초
+HTML 5 완벽한 표준의 정착.
+결국 W3C도 자세를 낮추고 XHTML을 표준에서 탈락시키게 되고, WHATWG에서 정의한 표준을 따르기로 한다. 결론적으로 HTML5와 CSS3가 표준으로 확정되게 되고, 지금의 HTML5 표준이 완성된 것이다.
+```
   * HTML 표준을 지키는 것은 왜 중요할까요?
+  ```
+  인류가 단위를 통일한 것이 공학의 발전 산업에 전반적인 효율성을 증가시킨것 처럼 웹표준역시 웹개발에서 효율성을 증대시키기 때문이다. 웹표준에대한 이해를 가지고 웹개발을 하는 것이 중요하다.
+  ```
   * XHTML 2.0은 왜 세상에 나오지 못하게 되었을까요?
+  ```
+  XHTML2의 가장 큰 문제점은 HTML4와 XHTML1.0과 전혀 다른 새로운 표준이라는 것입니다. 한마디로 웹 브라우저 업체들에게는 렌더링 엔진을 바닥 부터 새로 짜야 할 만큼 하위 호환성에 대한 보장이 거의 없음.
+  ```
   * HTML5 표준은 어떤 과정을 통해 정해질까요?
+  ```
+  표준화 단체인 W3C(World Wide Web Consortium)에서 HTML5 표준 작업 그룹을 구성합니다.
+  HTML5 표준 작업 그룹에서 초안을 작성하고, 이를 공개적으로 검토 및 토론합니다.
+  작업 그룹에서 검토 및 토론을 거친 최종 초안을 W3C에 제출합니다.
+  W3C에서는 해당 초안을 검토하고, 표준화 과정을 진행합니다.
+  W3C의 표준화 과정을 거친 후, 최종적으로 HTML5 표준이 발표됩니다.
+  ```
+
 * 브라우저의 역사는 어떻게 될까요?
+```
+웹 브라우저의 역사는 인터넷의 발전과 함께 시작되었습니다. 초기 인터넷에서는 텍스트 기반의 터미널 환경에서만 이용이 가능했습니다. 하지만 1990년대 중반, 그래픽 사용자 인터페이스(GUI)를 지원하는 웹 브라우저의 등장으로 인터넷의 사용이 대폭 증가하게 되었습니다.
+
+이후, 다양한 웹 브라우저가 등장하였으며, 이들은 서로 다른 렌더링 엔진을 사용하여 동작하였습니다. 이때 사용되는 렌더링 엔진은 HTML, CSS, JavaScript 등의 웹 페이지를 해석하고 브라우저 창에 렌더링하는 역할을 합니다.
+
+1995년, 마이크로소프트에서는 인터넷 익스플로러(IE)를 출시하여 대규모로 보급되었으며, 이는 넷스케이프(Netscape)와의 브라우저 전쟁을 일으키기도 했습니다.
+
+하지만 이후, 오픈 소스 기반의 모질라 스위트(Netscape Navigator의 코드를 기반으로 한)에서 파생된 파이어폭스(Firefox)와, 사파리(Safari), 오페라(Opera) 등 다양한 브라우저가 등장하게 되었습니다.
+
+2010년대 이후로는 구글에서 개발한 크롬(Chrome)이 대세가 되었으며, 모바일 기기용 브라우저인 안드로이드 기본 브라우저에서도 크롬 기반으로 변경되었습니다.
+
+최근에는 웹 표준을 준수하며 보안과 성능에 중점을 둔 브라우저의 필요성이 부각되면서, 모든 브라우저에서 웹 표준을 따르도록 노력하고 있습니다.
+```
+
   * Internet Explorer가 브라우저 시장을 독점하면서 어떤 문제가 일어났고, 이 문제는 어떻게 해결되었을까요?
+웹 표준 준수 문제
+IE는 표준을 따르지 않는 비표준 기술을 많이 사용하여, 다른 브라우저에서는 정상적으로 작동하지 않는 웹 사이트가 많았습니다. 이로 인해 웹 개발자들은 IE에 맞춰 웹 페이지를 개발해야 하는 번거로움이 있었습니다.
+
+보안 문제
+IE는 보안 취약점이 많이 발견되어 사용자의 개인정보가 유출될 위험이 있었습니다. 이러한 보안 취약점은 해결되어야 하는 중요한 문제였습니다.
+
+이러한 문제를 해결하기 위해, 다양한 브라우저의 등장과 함께 웹 표준화의 중요성이 부각되었습니다. 특히, 오픈 소스 기반의 파이어폭스(Firefox)와 구글에서 개발한 크롬(Chrome) 등의 브라우저가 웹 표준을 준수하며 보안과 성능에 중점을 둔 브라우저를 제공하면서, IE의 독점 지배력은 낮아졌습니다.
+
+또한, 마이크로소프트도 웹 표준과 보안에 더 많은 관심을 기울이며, 최신 버전의 IE에서는 웹 표준을 준수하도록 노력하고 있습니다. 하지만, 이전 버전의 IE에서는 여전히 웹 표준 준수에 어려움이 있기 때문에, 이를 대응하기 위해 웹 개발자들은 여전히 추가 작업이 필요합니다.
+
   * 현재 시점에 브라우저별 점유율은 어떻게 될까요? 이 브라우저별 점유율을 알아보는 것은 왜 중요할까요?
+  ```
+  크롬(Chrome): 약 62%
+  사파리(Safari): 약 19%
+  파이어폭스(Firefox): 약 8%
+  엣지(Edge): 약 6%
+  기타 브라우저: 약 5%
+
+  웹 사이트 개발에 영향을 미칩니다.
+  브라우저별로 웹 표준을 준수하는 정도가 다르기 때문에, 브라우저별 점유율을 고려하지 않고 웹 사이트를 개발할 경우 특정 브라우저에서는 정상적으로 작동하지 않을 수 있습니다.
+  마케팅에 영향을 미칩니다.
+  브라우저별 점유율은 사용자들이 어떤 브라우저를 선호하는지를 보여주기 때문에, 해당 브라우저를 이용한 마케팅 전략을 세울 수 있습니다.
+  보안에 영향을 미칩니다.
+  점유율이 높은 브라우저일수록 악성코드 등의 보안 위협을 받을 가능성이 높습니다. 따라서 브라우저별 보안 취약점을 파악하고 이를 개선하는 것이 중요합니다.
+  브라우저 경쟁력을 분석할 수 있습니다.
+  브라우저별 점유율을 분석하면, 각 브라우저의 경쟁력을 파악할 수 있습니다. 이를 통해, 브라우저 개발자들은 경쟁에서 우위에 서기 위해 어떤 전략을 세워야 하는지를 파악할 수 있습니다.
+  ```
   * 브라우저 엔진(렌더링 엔진)이란 무엇일까요? 어떤 브라우저들이 어떤 엔진을 쓸까요?
+  ```
+  브라우저 엔진 또는 렌더링 엔진은 HTML, CSS 및 JavaScript와 같은 웹 페이지의 코드를 브라우저가 이해할 수 있는 형태로 변환하여 화면에 표시하는 역할을 수행하는 소프트웨어입니다. 브라우저 엔진은 웹 브라우저의 핵심 부분 중 하나이며, 사용자가 보는 웹 페이지의 레이아웃, 스타일, 콘텐츠 및 기능을 처리합니다.
+  다양한 브라우저가 있지만, 주요 브라우저의 엔진은 다음과 같습니다.
+
+  크롬(Chrome): Blink 엔진 (Google에서 개발)
+  파이어폭스(Firefox): Gecko 엔진 (Mozilla에서 개발)
+  사파리(Safari): WebKit 엔진 (Apple에서 개발)
+  엣지(Edge): Blink 엔진 (Microsoft에서 개발)
+  브라우저 엔진은 각각의 브라우저에서 지원하는 웹 표준과 기능, 성능, 안정성 등이 다르기 때문에, 웹 개발자들은 다양한 엔진을 이해하고 각각의 특성을 고려하여 웹 페이지를 개발해야 합니다.
+  ```
+
   * 모바일 시대 이후, 최근에 출시된 브라우저들은 어떤 특징을 가지고 있을까요?
+```
+모바일 최적화: 모바일 기기에서의 사용성을 고려한 최적화가 이루어졌습니다. 모바일 환경에서의 터치 인터페이스, 제스처 제어, 반응형 레이아웃 등을 지원하여 모바일 사용자들에게 더 나은 경험을 제공합니다.
+
+속도 향상: 브라우저 엔진의 발전과 함께 더욱 빠른 속도를 제공합니다. 특히, 브라우저 캐시 및 프리페칭 기술 등을 이용하여 페이지 로딩 속도를 높였습니다.
+
+보안성 강화: 웹 상에서의 보안 위협이 증가함에 따라 보안성이 강화되었습니다. HTTPS 프로토콜을 강제화하고, XSS, CSRF 등의 공격 방어 기능을 탑재하여 사용자 정보를 보호합니다.
+
+확장성: 브라우저 확장 프로그램 등을 통해 다양한 기능을 추가할 수 있으며, 웹 표준을 지원하여 다양한 웹 사이트와 호환됩니다.
+
+인공지능 기술 도입: 최근에는 인공지능 기술을 이용하여 더욱 편리하고 개인화된 웹 서비스를 제공합니다. 예를 들어, 취향에 맞는 콘텐츠 추천, 음성 인식 검색 기능 등이 있습니다.
+
+에코 시스템: 브라우저 제작사들은 자사의 생태계를 강화하기 위해 다양한 기술과 서비스를 제공합니다. 이를 통해 브라우저 사용자들에게 더욱 편리한 환경을 제공하고, 생태계의 확장을 위한 시너지 효과를 기대할 수 있습니다.
+```
 * HTML 문서는 어떤 구조로 이루어져 있나요?
+```
+구조를 담당하는 요소 (Semantic Elements)
+HTML 문서는 마크업 언어로 웹 페이지의 구조를 정의합니다. 이를 담당하는 요소들은 시맨틱 요소(Semantic Elements)라고 하며, 웹 페이지의 의미와 구조를 명확하게 전달합니다.
+콘텐츠를 담당하는 요소
+콘텐츠를 담당하는 요소는 HTML 문서에서 실제로 보여지는 내용을 담당합니다. 예를 들면 <h1>~<h6>, <p>, <img>, <a>, <ul>, <ol>, <li>, <table>, <form> 등이 있습니다.
+```
+
   * `<head>`에 자주 들어가는 엘리먼트들은 어떤 것이 있고, 어떤 역할을 할까요?
+```
+<title> 요소
+<title> 요소는 웹 페이지의 제목을 정의합니다. 브라우저의 제목 표시줄에 표시되며, 검색 엔진에서 페이지 제목으로 사용됩니다.
+
+<meta> 요소
+<meta> 요소는 다양한 메타데이터를 정의합니다. 예를 들어, 문서의 문자 인코딩, 검색 엔진에 대한 설명, 페이지의 설명 등을 정의할 수 있습니다.
+
+<link> 요소
+<link> 요소는 웹 페이지에서 사용할 외부 파일, 예를 들어 스타일 시트 파일, 아이콘 파일 등을 연결합니다.
+
+<script> 요소
+<script> 요소는 자바스크립트 코드를 정의합니다. 이를 통해 웹 페이지의 동작을 제어하거나, 서버와의 데이터 통신 등을 수행할 수 있습니다.
+```
   * 시맨틱 태그는 무엇일까요?
-    * 시맨틱 엘리먼트를 사용하면 어떤 점이 좋을까요?
-    * `<section>`과 `<div>`, `<header>`, `<footer>`, `<article>` 엘리먼트의 차이점은 무엇인가요?
+```
+시맨틱 태그는 웹 페이지의 구조와 의미를 나타내는 태그를 말합니다. 즉, 해당 태그가 어떤 내용을 포함하고 있는지를 의미하는 것입니다.
+
+시맨틱 태그를 사용하면 웹 페이지의 구조가 명확하게 나타나기 때문에, 검색 엔진이 페이지의 내용을 더 잘 이해하고 분석할 수 있으며, 웹 페이지의 접근성이 향상됩니다. 또한, 시맨틱 태그를 사용하면 CSS 스타일링이 더욱 쉬워지고, 웹 페이지의 가독성도 향상됩니다.
+
+시맨틱 태그의 예시로는 <header>, <nav>, <main>, <article>, <section>, <aside>, <footer> 등이 있습니다. 이러한 태그들은 해당하는 영역의 내용을 더 명확하게 정의하며, 웹 페이지의 구조와 의미를 더욱 분명하게 표현합니다
+```
+  * 시맨틱 엘리먼트를 사용하면 어떤 점이 좋을까요?
+```
+검색 엔진 최적화 (SEO): 시맨틱 엘리먼트를 사용하면 웹 페이지의 내용과 구조를 검색 엔진이 더욱 잘 이해할 수 있습니다. 이는 검색 엔진 최적화를 향상시키는데 도움을 줄 수 있습니다.
+
+웹 접근성: 시맨틱 엘리먼트를 사용하면 웹 페이지의 구조와 내용을 보다 명확하게 표현할 수 있어, 스크린 리더 등의 보조 기술을 사용하는 사용자들에게 웹 페이지를 이해하기 쉽게 만들어줍니다.
+
+유지보수: 시맨틱 엘리먼트를 사용하면 다른 개발자들이 나의 작성한 코드를 이해하고 수정하기 쉬워집니다. 이는 코드의 유지보수를 보다 쉽게 할 수 있게 만들어줍니다.
+
+가독성: 시맨틱 엘리먼트를 사용하면 코드의 가독성이 향상됩니다. 이는 코드의 가독성을 높이고 유지보수를 쉽게 하는데 도움을 줍니다.
+```
+  * `<section>`과 `<div>`, `<header>`, `<footer>`, `<article>` 엘리먼트의 차이점은 무엇인가요?
   * 블록 레벨 엘리먼트와 인라인 엘리먼트는 어떤 차이가 있을까요?
+```
+<section>: 문서의 일반적인 구획을 표시합니다. 보통 제목(<h1>~<h6>)과 함께 사용됩니다.
+<div>: 구획을 나누기 위해 사용되며, 목적에 따라 다양한 방식으로 사용될 수 있습니다.
+<header>: 섹션 또는 페이지의 제목을 나타냅니다. 로고, 검색 폼, 작성자 이름 등과 함께 사용될 수 있습니다.
+<footer>: 섹션 또는 페이지의 바닥글을 나타냅니다. 저작권 정보, 연락처 정보, 사이트 맵 등이 포함될 수 있습니다.
+<article>: 문서, 페이지, 사이트 안에서 독립적으로 구분되거나 재사용 가능한 영역을 나타냅니다. 뉴스 기사, 블로그 글, 포럼 게시글 등과 함께 사용될 수 있습니다.
+인라인 엘리먼트와 블록 레벨 엘리먼트의 차이점은 다음과 같습니다.
+
+블록 레벨 엘리먼트는 새로운 줄에서 시작하여 새로운 블록을 만들고, 전체 너비를 차지합니다. 반면 인라인 엘리먼트는 줄 안에서만 사용되며, 컨텐츠의 너비만큼만 차지합니다.
+블록 레벨 엘리먼트는 다른 블록 레벨 엘리먼트나 인라인 엘리먼트를 포함할 수 있습니다. 반면 인라인 엘리먼트는 다른 인라인 엘리먼트를 포함할 수 있지만, 블록 레벨 엘리먼트를 포함할 수는 없습니다.
+블록 레벨 엘리먼트는 컨텐츠를 구성하기 위해 사용되며, 인라인 엘리먼트는 텍스트와 같은 컨텐츠의 일부분을 나타내기 위해 사용됩니다.
+```
 
 ## Quest
 * [이 화면](screen.png)의 정보를 HTML 문서로 표현해 보세요. 다만 CSS를 전혀 사용하지 않고, 문서의 구조가 어떻게 되어 있는지를 파악하여 구현해 보세요.