WebDevCurriculum / HTML과 웹의 기초

Knowre-Dev의 WebDevCurriculum의 레포지토리를 Fork하여 퀘스트를 해결해 나가는 글입니다.

Introduction

• HTML은 HyperText Markup Language의 약자로, 웹 브라우저에 내용을 표시하기 위한 가장 기본적인 언어입니다. 이번 퀘스트를 통해 HTML에 관한 기초적인 사항들을 알아볼 예정입니다.

Checklist

• HTML 표준의 역사는 어떻게 될까요?

HTML은 1991년에 처음 등장하여, 그 후 많은 버전이 나왔습니다.

HTML 버전의 발전은 다음과 같습니다.

• HTML 1.0 (1993년): HTML의 초기 버전으로, 기본적인 마크업 언어의 기능만을 제공합니다.
• HTML 2.0 (1995년): 몇 가지 추가적인 기능이 도입되었습니다.
• HTML 3.0 (1995년): 스타일 시트, 표 등과 같은 다양한 기능이 추가되었습니다.
• HTML 4.0 (1997년): 이전 버전의 오류가 수정되고, 폼과 프레임 등과 같은 기능이 추가되었습니다.
• XHTML (2000년): XML 기반의 HTML 버전입니다. 더 엄격한 문법 규칙과 보다 일관된 문서 구조를 가지고 있습니다.
• HTML5 (2014년): 최신 버전으로, 비디오 및 오디오, 드래그 앤 드롭 등과 같은 다양한 기능이 추가되었습니다.

HTML은 W3C(World Wide Web Consortium)에서 관리하는 표준화된 마크업 언어이며, 최신 버전인 HTML5는 현재 널리 사용되고 있습니다. 결론적으로 표준화를 위한 노력 끝에 XHTML 등을 제치고 HTML5가 완전한 표준으로 정착되었습니다.

 

• HTML 표준을 지키는 것은 왜 중요할까요?

• 브라우저 호환성: HTML 표준을 준수하는 웹 페이지는 브라우저 호환성이 높아지기 때문에 다양한 브라우저에서 동일한 결과를 보여줍니다. 이는 웹 페이지 개발자와 사용자 모두에게 이점이 됩니다.
• 웹 접근성: HTML 표준을 준수하면 웹 접근성이 향상됩니다. 웹 접근성은 모든 사용자가 웹 페이지의 콘텐츠와 기능을 접근할 수 있는 능력을 말합니다. HTML 표준 준수는 스크린 리더 사용자나 시각 장애인, 청각 장애인 등 장애를 가진 사용자들이 쉽게 웹 페이지에 접근할 수 있도록 돕습니다.
• 검색 엔진 최적화: HTML 표준을 준수하면 검색 엔진 최적화(SEO)가 쉬워집니다. 검색 엔진은 웹 페이지의 콘텐츠를 인식하는 데 HTML 표준 준수가 중요합니다. HTML 표준을 준수하면 검색 엔진에서 웹 페이지의 콘텐츠를 정확하게 파악할 수 있기 때문입니다.
• 보안: HTML 표준을 준수하면 보안이 강화됩니다. HTML 표준 준수는 웹 페이지 개발자가 콘텐츠를 제어하고, 사용자가 웹 페이지에서 안전하게 데이터를 입력하고 제출할 수 있도록 보장합니다.

따라서, HTML 표준을 준수하는 것은 웹 페이지 개발자와 사용자, 검색 엔진, 보안 측면에서 모두 이점을 가져다 줍니다.

 

• XHTML 2.0은 왜 세상에 나오지 못하게 되었을까요?

XHTML 2.0은 W3C에서 개발되었던 XHTML의 다음 버전으로, 기존의 XHTML 1.0과 XHTML 1.1을 대체하고자 하였습니다. 그러나 XHTML 2.0은 최종적으로 발표되지 않았습니다. 이에는 여러 가지 이유가 있습니다.

• XHTML 2.0의 복잡성: XHTML 2.0은 이전 버전인 XHTML 1.x와 비교하여 훨씬 복잡한 문법과 규칙을 가지고 있었습니다. 이는 웹 개발자들이 새로운 문법과 규칙을 배워야 하며, 기존의 웹 페이지를 새로운 버전으로 이전하는 데 어려움을 겪을 수 있었습니다.
• XHTML 2.0의 대안 출현: XHTML 2.0의 개발 과정 중에 HTML5가 등장하게 되면서, W3C는 XHTML 2.0 대신 HTML5에 집중하게 되었습니다. HTML5는 이전 버전보다 간단하고 유연한 구조를 가지고 있으며, 기존의 HTML과의 호환성도 높았습니다.
• 시장의 변화: XHTML 2.0 개발 당시에는 웹 애플리케이션이나 모바일 웹 개발 등에 대한 요구가 높아지기 시작하였습니다. 이러한 변화로 인해 XHTML 2.0의 개발 방향이 너무 엄격하다는 지적이 제기되었고, 이로 인해 XHTML 2.0의 발표가 늦어지게 되었습니다.
• 개발자들의 관심 이동: XHTML 2.0은 최종적으로 발표되지 않았지만, 이전 버전의 XHTML과 HTML5의 개발 과정에서 많은 웹 개발자들이 참여하였습니다. 이에 XHTML 2.0이 대체될 수 있는 다양한 대안이 등장하게 되었고, 이로 인해 XHTML 2.0에 대한 관심이 떨어지게 되었습니다.

이러한 이유들로 인해 XHTML 2.0은 최종적으로 발표되지 않았습니다. 대신 HTML5가 등장하여 웹 개발자들의 요구에 부합하며, 현재까지도 널리 사용되고 있습니다.

 

• HTML5 표준은 어떤 과정을 통해 정해질까요?

HTML5 표준은 W3C(월드 와이드 웹 컨소시엄)과 WHATWG(Web Hypertext Application Technology Working Group)가 공동으로 개발하고 있습니다. HTML5 표준의 개발 과정은 크게 다음과 같은 단계를 거칩니다.

1. Working Draft: HTML5의 초안을 작성하는 단계입니다. W3C와 WHATWG에서는 이 단계에서 개발자들이 의견을 제시할 수 있도록 다양한 공개 피드백을 받고, 문서를 수정하고 개선해 나갑니다.
2. Candidate Recommendation: 초안 단계가 끝나면, 이제 HTML5의 후보 권고안을 만드는 단계입니다. 이 단계에서는 HTML5의 주요 기능이 모두 구현되어야 하며, 표준화된 테스트 케이스를 통해 이를 검증합니다.
3. Proposed Recommendation: 후보 권고안이 완성되면, 이제 HTML5의 제안된 권고안을 작성하는 단계입니다. 이 단계에서는 HTML5의 표준 규격을 정확하게 기술하고, 표준을 준수하는 브라우저 및 개발 도구가 출시될 수 있도록 하는 것이 목표입니다.
4. Recommendation: 제안된 권고안이 모든 과정을 거쳐 승인되면, HTML5 표준이 최종적으로 발표됩니다. 이 단계에서는 HTML5가 공식적으로 웹 기술 표준으로 인정되며, 이에 따라 브라우저 및 다른 웹 기술들이 이를 따르게 됩니다.

위와 같은 과정을 통해 HTML5 표준은 다양한 개발자들의 의견과 피드백을 받아 계속해서 업데이트되고 개선됩니다. 이를 통해 HTML5는 현재 웹 기술의 핵심 표준 중 하나로 자리 잡았으며, 웹 기술 발전의 중심 역할을 수행하고 있습니다.

 

•  
• 브라우저의 역사는 어떻게 될까요?

1. Mosaic (1993) : 인터넷 역사상 최초의 그래픽 웹 브라우저 중 하나로, 이미지와 하이퍼링크를 지원하며, 웹의 대중화를 이끌었습니다.
2. Netscape Navigator (1994) : Mosaic을 기반으로 만들어졌으며, 시장 점유율 90% 이상을 차지하는 대세 브라우저로 자리 잡았습니다.
3. Internet Explorer (1995) : Microsoft에서 출시한 브라우저로, Windows 운영체제와 함께 제공되어 시장 점유율이 급격히 증가했습니다.
4. Mozilla Firefox (2002) : Netscape Navigator의 오픈 소스 버전인 Mozilla에서 파생된 브라우저로, 기능과 보안성에서 우수한 성능을 보여 시장에서 강세를 보였습니다.
5. Google Chrome (2008) : Google에서 출시한 브라우저로, 빠른 속도와 안정성, 직관적인 UI 등이 인기를 끌어 시장 점유율 60% 이상을 차지하고 있습니다.
6. Microsoft Edge (2015) : Internet Explorer의 후속 버전으로, Google의 오픈 소스 엔진인 Chromium 기반으로 개발되어 빠른 속도와 호환성, 보안성 등에서 경쟁력을 갖추고 있습니다.

위와 같은 브라우저들은 인터넷의 발전과 함께 계속해서 기능과 성능을 개선해오면서, 현재는 더 나은 웹 경험을 제공하기 위한 새로운 기술과 기능을 개발하고 있습니다.

 

• Internet Explorer가 브라우저 시장을 독점하면서 어떤 문제가 일어났고, 이 문제는 어떻게 해결되었을까요?

• 웹 표준의 무시 : Internet Explorer는 웹 표준을 준수하지 않았기 때문에, 다른 브라우저에서는 잘 작동하는 웹 페이지도 Internet Explorer에서는 제대로 표시되지 않는 경우가 발생했습니다.
• 보안 문제 : Internet Explorer는 보안 취약점이 많아, 해커들이 쉽게 공격할 수 있는 대상이 되었습니다.
• 기술적 한계 : Internet Explorer는 많은 기술적 한계를 가지고 있어, 사용자들이 웹 페이지를 보는 데 불편함을 느끼게 되었습니다.

이러한 문제들은 웹의 발전과 함께 점점 더 심각해졌고, 이에 대한 해결책으로 Mozilla Firefox, Google Chrome 등의 새로운 브라우저가 등장하면서 시장 경쟁이 심화되었습니다. 이들 브라우저는 Internet Explorer보다 더 나은 기술과 보안성을 제공하며, 웹 표준을 잘 준수하는 브라우저로 자리 잡게 되었습니다. 또한, 웹 표준을 지키는 것이 중요하다는 인식도 높아졌고, Internet Explorer를 포함한 다른 브라우저들도 점점 더 웹 표준을 준수하기 위해 노력하게 되었습니다. 이러한 과정에서 Internet Explorer의 시장 점유율은 급격히 감소하게 되었습니다.

 

• 현재 시점에 브라우저별 점유율은 어떻게 될까요? 이 브라우저별 점유율을 알아보는 것은 왜 중요할까요?

이 글을 쓰는 2023년 5월 기준 전 세계 브라우저별 점유율은 다음과 같습니다.

• Google Chrome : 약 62.3%
• Safari : 약 16.6%
• Mozilla Firefox : 약 6.6%
• Microsoft Edge : 약 6.2%
• Samsung Internet : 약 2.1%
• Opera : 약 1.6%
• UC Browser : 약 1.3%
• Android Browser : 약 0.6%
• Internet Explorer : 약 0.3%

전반적으로 Google Chrome과 Safari가 높은 점유율을 차지하고 있습니다.

 

브라우저별 점유율을 알아보는것은 다음과 같은 3가지 이유 때문입니다.

1. 웹 개발 시 참고할 수 있음 : 점유율이 높은 브라우저에 대한 호환성을 우선 고려해야 합니다. 이는 웹 개발자가 웹 사이트나 웹 애플리케이션을 개발할 때, 특정 브라우저에서 동작하지 않을 가능성이 높은 기능이나 코드를 작성하지 않도록 하기 위함입니다.
2. 사용자 경험 개선 : 대부분의 사용자가 점유율이 높은 브라우저를 사용하기 때문에, 해당 브라우저에서 웹 사이트나 웹 애플리케이션이 잘 동작하도록 개발하는 것이 사용자 경험을 개선하는 데 중요합니다.
3. 시장 동향 파악 : 브라우저별 점유율은 시장 동향을 파악하는 데도 사용됩니다. 특정 브라우저의 점유율이 감소하거나 증가하는 추세를 파악하여, 해당 브라우저의 사용자들이 원하는 기능이나 특성을 파악할 수 있습니다. 이를 기반으로 브라우저 개발자들은 해당 브라우저를 보완하거나 새로운 기능을 추가하여 사용자들의 요구를 충족시키기 위한 노력을 기울일 수 있습니다.

 

• 브라우저 엔진(렌더링 엔진)이란 무엇일까요? 어떤 브라우저들이 어떤 엔진을 쓸까요?

브라우저 엔진, 또는 렌더링 엔진은 브라우저가 웹 페이지를 렌더링하는 데 사용되는 핵심 구성 요소입니다.

브라우저 엔진은 HTML, CSS, JavaScript와 같은 웹 문서의 내용과 구조를 해석하고, 이를 브라우저 창에 표시하는 역할을 합니다.

주요 브라우저들이 사용하는 엔진은 다음과 같습니다.

 

Chrome, Edge, Opera 등 - Blink 엔진 (Chromium 프로젝트에서 파생됨)

Firefox - Gecko 엔진

Safari, iOS Safari 등 - WebKit 엔진

Internet Explorer - Trident 엔진 (현재는 EdgeHTML 엔진으로 대체됨)

Microsoft Edge - EdgeHTML 엔진 (이전에는 Trident 엔진 사용)

 

이러한 브라우저 엔진들은 각각 고유한 특성과 장단점을 가지고 있으며, 이를 바탕으로 웹 개발자들은 브라우저별로 웹 페이지를 최적화하고 호환성을 보장할 수 있습니다. 최근에는 Blink 엔진이 점차적으로 더 많은 브라우저에서 사용되고 있습니다.

 

• 모바일 시대 이후, 최근에 출시된 브라우저들은 어떤 특징을 가지고 있을까요?

• 모바일 최적화: 모바일 환경에 맞추어 최적화된 인터페이스와 기능을 제공합니다. 모바일 기기에서 사용자 경험을 최적화하기 위해, 화면 크기에 맞추어 레이아웃이 자동으로 조정되거나, 터치 인터페이스를 지원하는 등의 기능을 제공합니다.
• 개인화: 최근의 브라우저들은 사용자의 검색 기록, 즐겨찾기, 로그인 정보 등을 자동으로 동기화하고, 사용자 맞춤형 추천 기능 등을 제공합니다. 이를 통해 사용자는 자신에게 맞는 개인화된 경험을 누릴 수 있습니다.
• 보안: 최근의 브라우저들은 보안에 대한 관심이 높아져, 악성 코드나 위협으로부터 사용자를 보호하는 다양한 기능을 제공합니다. 이러한 기능으로는 샌드박스 기술, 신뢰할 수 있는 사이트 목록(TSL), 브라우저 기반 보안 등이 있습니다.
• 속도와 성능: 최근의 브라우저들은 빠른 속도와 높은 성능을 제공하도록 최적화되어 있습니다. 이를 위해 자바스크립트 엔진, 렌더링 엔진, 네트워크 성능 등을 개선하는 다양한 기술이 도입되었습니다.
• 웹 표준 준수: 최근의 브라우저들은 HTML5, CSS3, JavaScript 등의 최신 웹 표준을 준수하도록 최적화되어 있습니다. 이를 통해 개발자는 브라우저 호환성에 대한 걱정 없이 최신 기술을 사용할 수 있습니다.

이러한 특징들을 바탕으로, 최근에 출시된 브라우저들은 사용자에게 더욱 편리하고 안전한 웹 브라우징 경험을 제공하고 있습니다.

 

• HTML 문서는 어떤 구조로 이루어져 있나요?

• DOCTYPE 선언: 문서의 형식을 지정하는 선언으로, HTML 문서의 첫 줄에 위치합니다.
• head: 문서의 정보를 담고 있는 부분으로, 웹 브라우저에 표시되지 않는 메타 데이터(meta-data)를 포함합니다. 제목(title), 문자 인코딩(charset), CSS 파일 연결(link) 등의 정보를 포함할 수 있습니다.
• body: 웹 브라우저를 통해 실제로 보여지는 내용이 포함되는 부분으로, HTML 요소(element)를 사용하여 웹 페이지의 구조와 내용을 작성합니다. 예를 들어, 텍스트, 이미지, 링크, 폼(form) 등이 이 부분에 포함됩니다.

일반적인 HTML 문서의 구조는 아래와 같습니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>웹 페이지 제목</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>웹 페이지 제목</h1>
    <p>웹 페이지 내용</p>
    <img src="image.jpg" alt="이미지">
    <a href="https://www.example.com">링크</a>
    <form action="#" method="post">
      <input type="text" name="name" placeholder="이름">
      <input type="email" name="email" placeholder="이메일">
      <button type="submit">제출</button>
    </form>
  </body>
</html>

위 예시에서는 <!DOCTYPE html>로 HTML5 문서 형식을 지정하고, head 부분에서 문자 인코딩, 제목, CSS 파일을 연결합니다. 그리고 body 부분에는 제목과 내용, 이미지, 링크, 폼 등의 요소가 포함되었습니다.

 

• <head>에 자주 들어가는 엘리먼트들은 어떤 것이 있고, 어떤 역할을 할까요?

<head> 엘리먼트에는 웹 페이지의 정보를 담는 메타데이터를 포함합니다. 자주 사용되는 <head> 하위 엘리먼트들은 다음과 같습니다.

• <meta>: 웹 페이지의 정보를 담는 메타데이터를 정의합니다. 일반적으로 문자 인코딩, 키워드, 설명, 작성자 등을 정의할 때 사용됩니다.
• <title>: 웹 페이지의 제목을 정의합니다. 브라우저 탭에 표시되는 제목으로, 검색 엔진에서 검색 결과로 제목이 표시됩니다.
• <link>: 다른 문서나 리소스와의 연결을 정의합니다. 대표적으로 CSS 파일을 연결할 때 사용됩니다.
• <style>: 웹 페이지의 스타일을 정의합니다. 일반적으로 내부 스타일 시트를 작성할 때 사용됩니다.
• <script>: 웹 페이지에 스크립트를 포함시킵니다. 일반적으로 자바스크립트 코드를 작성할 때 사용됩니다.
• <base>: 상대적인 URL 경로를 해석하는 기준 URL을 정의합니다. 웹 페이지에서 링크나 이미지 등을 연결할 때 사용됩니다.

 

• 시맨틱 태그는 무엇일까요?

시맨틱 태그란 웹 문서에서 구조적인 의미를 나타내는 역할을 하는 태그로, 브라우저, 검색 엔진, 개발자 등 모두에게 문서의 의미를 명확하게 전달합니다.

예를 들어,

 

<article> : 내용 단락
<aside> : 부가 단락, 본문과 관련된 부가정보를 노출
<details> : 클릭했을 때 확장되는 UI, 공지사항/FAQ
<figcaption> : figure 부가 설명
<figure> : 독립적인 콘텐츠
<footer> : 회사 정보, 소셜미디어 정보, 약관, 저작권
<header> : 문서의 제목, 로고, 작성자, 작성일
<main> : 문서에서 오직 한 번만 사용. 본문, 콘텐츠 내용 전체
<mark> : 하이라이트, 강조
<nav> : 주요 메뉴
<section> : 형식 단락
<summary> : 클릭했을 때 확장되는 UI, 공지사항/FAQ
<time> : 시간 내용

 

등이 있습니다.

시맨틱 태그는 웹 접근성, 검색 엔진 최적화(SEO), 개발자 간의 협업 등에서 매우 유용합니다.

검색 엔진은 시맨틱 태그를 사용하여 웹 페이지의 내용을 더 정확하게 파악할 수 있으며, 개발자 간의 협업에서는 시맨틱 태그를 사용하여 문서의 의미를 명확히 전달할 수 있습니다.

 

• 시맨틱 엘리먼트를 사용하면 어떤 점이 좋을까요?

• 웹 접근성이 개선됩니다.

시맨틱 엘리먼트는 각 요소가 어떤 의미를 가지는지 명확히 표시하기 때문에 스크린 리더나 다른 보조 기술을 사용하는 사용자들도 웹 페이지를 더 쉽게 이해할 수 있습니다. 시맨틱 엘리먼트를 사용하면 웹 접근성을 개선하여 모든 사용자들이 웹 페이지를 보다 쉽게 사용할 수 있습니다.

• 검색 엔진 최적화(SEO)가 용이해집니다.

시맨틱 엘리먼트는 웹 페이지의 구조를 명확히 표시하므로 검색 엔진이 페이지의 내용을 이해하고 적절한 검색 결과를 제공하기가 더 쉬워집니다. 따라서 시맨틱 엘리먼트를 사용하면 검색 엔진 최적화(SEO)를 개선할 수 있습니다.

• 코드 가독성과 유지보수성이 향상됩니다.

시맨틱 엘리먼트를 사용하면 코드의 가독성과 유지보수성이 향상됩니다. 시맨틱 엘리먼트를 사용하면 각 요소가 어떤 의미를 가지는지 명확히 표시하기 때문에 코드를 이해하기가 더 쉬워집니다. 또한, 시맨틱 엘리먼트를 사용하면 코드의 일관성을 유지할 수 있고, 다른 개발자들이 코드를 이해하기 쉬워지므로 유지보수성이 향상됩니다.

• 디자인 작업이 쉬워집니다.

시맨틱 엘리먼트를 사용하면 웹 페이지의 구조를 명확히 표시하기 때문에 디자인 작업이 더 쉬워집니다. 디자이너는 시맨틱 엘리먼트를 활용하여 적절한 스타일링을 적용하고, 웹 페이지의 구조와 디자인이 조화롭게 나타날 수 있도록 작업할 수 있습니다.

 

• <section>과 <div>, <header>, <footer>, <article> 엘리먼트의 차이점은 무엇인가요?

• <section>: 문서나 애플리케이션에서 독립적인 영역을 나타냅니다. 일반적으로 제목(<h1>~<h6>)과 함께 사용됩니다.
• <div>: 문서를 논리적인 그룹으로 나눌 때 사용합니다. 시맨틱 엘리먼트가 도입되기 이전에는 <div>를 이용해 레이아웃을 구성하는 것이 일반적이었습니다.
• <header>: 소개나 탐색에 사용되는 콘텐츠를 나타냅니다. <header> 안에는 로고, 검색 폼, 페이지 제목 등이 들어갈 수 있습니다.
• <footer>: 문서나 섹션의 바닥글을 나타냅니다. 일반적으로 연락처 정보, 저작권 정보 등이 들어갑니다.
• <article>: 문서, 페이지, 사이트 안에서 독립적인 콘텐츠 영역을 나타냅니다. 블로그 글, 뉴스 기사, 포럼 게시글 등이 예시입니다.

 

• 블록 레벨 엘리먼트와 인라인 엘리먼트는 어떤 차이가 있을까요?

HTML에서 엘리먼트는 크게 블록 레벨 엘리먼트(block-level element)와 인라인 엘리먼트(inline element)로 나눌 수 있습니다.

 

블록 레벨 엘리먼트는 새로운 줄에서 시작하고, 화면 전체의 가로폭을 차지합니다. 대표적으로 <div>, <p>, <ul>, <h1>~<h6> 등이 있습니다. 블록 레벨 엘리먼트는 기본적으로 width와 height 속성을 가지며, margin, padding 등을 이용해 레이아웃을 조정할 수 있습니다.

 

인라인 엘리먼트는 새로운 줄에서 시작하지 않고, 인라인 엘리먼트가 들어가 있는 행에서만 자신의 크기만큼 영역을 차지합니다. 대표적으로 <span>, <a>, <img>, <strong>, <em> 등이 있습니다. 인라인 엘리먼트는 width와 height 속성이 없으며, margin-right, margin-left 등과 같은 일부 속성만 적용됩니다.

 

블록 레벨 엘리먼트와 인라인 엘리먼트는 각각 특정한 목적을 가지고 있으며, 이를 조합하여 웹 페이지를 구성합니다. 예를 들어, <div>는 블록 레벨 엘리먼트이기 때문에 컨텐츠를 묶는 역할을 하며, <span>은 인라인 엘리먼트이기 때문에 텍스트 스타일링에 사용됩니다.