Skip to content

Latest commit

 

History

History
 
 

Quest01

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
skeleton
skeleton
 
 
README.md
README.md
 
 
screen.png
screen.png
 
 

README.md

Quest 01. HTML과 웹의 기초

Introduction

  • 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 문서의 기본 구조
    • 시맨틱 엘리먼트
    • 블록 엘리먼트와 인라인 엘리먼트의 차이

Resources

Checklist

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

    • 1991's: HTML 1.0 / 팀 버너스 리가 월드 와이드 웹(WWW)을 발표하면서 내놓은 버전입니다

    • 1995's: HTML 2.0 / HTML 1.0에서 파일 업로드 양식과 프레임, 테이블, 이미지맵, 국제화 기능이 추가된 것으로 인터넷의 대중화가 시작되면서 이 때부터 HTML이 널리 알려지게되었다.

    • 1997's (1) HTML 3.2 / 표준화 작업을 담당하는 W3C에서 처음으로 나온 버전이다. 수학 수식을 사용하는 태그를 완전히 제외하고, 넷스케이프의 비쥬얼 관련 태그를 수록했다.

    • 1997's (2) HTML 4.0 / 이전버전에서 Strict, Transitional, Frameset의 세가지 문서 형태를 지원하는것이 가장 큰 특징이다. Strict는 비표준이나 비권장 태그를 절대 허용하지 않는 엄격한 문서이고, Transitional은 비표준이나 비권장 태그도 허용하는 융통성 있는 문서, Frameset은 웹브라우저 화면을 나눈 프레임 문서에 쓰는 것이다.

    • 1999's HTML 4.01 / 이전버전에서 비주얼 태그가 모두 비건장으로 지정된 것이 가장 큰 변화이며, 기존 비주얼 태그를 CSS로 빼서 사용할것을 권장 하고있다.

    • 2000's XHTML 1.0 / HTML 4.01과 함께 가장 많이 사용되고 있는 표준입니다. 내용상의 변화는 거의 없고 HTML 4.01버전을 XML형식으로 포팅한 버전이다.

    • 2014's HTML 5.0 / XTML의 상위버전이 아닌 HTML4.01을 기반으로 만든 상위버전이다.하지만 완전히 XHTML문법은 버린것이 아니라 선택적으로 이용할 수 있도록 하였고 어도비 플래시나 실버라이트와 같은 플러그인 기반 응용프로그램에 대한 필요성을 줄이는 것에 초점을 맞추고 있는 버전이다.

    • 2011's ~ HTML Living Standard / 브라우저 개발업체의 연합인 WHATWG 와 이전부터 HTML표준을 만들던 W3C 의 협의로 2011년 이후 HTML 5 이후에는 HTML Living Standard 라는 이름으로 통일해 부르게 되었다.

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

      • 표준화가 되어있지 않으면 웹끼리의 호환성의 문제가 있고 품질을 유지하기 어려울것이다. 즉 지금처럼 '크로스플랫폼'의 특징이 나타나기 어려울것입니다. 예시로 웹표준이 없던 1990년대~2000년대 초에 웹 개발자는 넷스케이프와 인터넷 익스플로러 용으로의 사실상 두개의 웹을 만들어야했고 이는 더 많은 노동력과 비용을 투자해야 했다.

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

      • XHTML 1.1을 잇는 상위버전으로 고안되었으나 하위호환성에 대한 문제가 나타남에 따라 2008년 HTML5으로 선회되었다.

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

      • W3C(World Wide Web Consortium)에서 재정되며 조직 안에 HTML Working Group이라는 전문가 그룹을 구성하여 개발됩니다. 이 그룹에서는 HTML 명세서의 초안을 작성하고 이를 수정하는 과정을 거쳐 최종 HTML 표준 명세서를 제정하게되고 이를 발표하게 됩니다.
  • 브라우저의 역사는 어떻게 될까요?
      1. 1989 팀 버너스 리가 WWW 시스템을 정의
      1. 1990년대 초반 대표적인 브라우저로는 WorldWideWeb과 Lynx등이 있었다. -> 텍스트 기반으로 작동하였고 이미지나 그래픽등의 멀티미디어를 지원하지 않았다.
      1. 1993년 마크 앤드리슨과 그 팀이 Mosaic 브라우저를 개발하였다. -> 멀티미디어 콘텐츠를 지원하고 이미지와 텍스트를 조합한 웹페이지를 보여주었다.
      1. 1994년 Mosaic 브라우저를 기반으로 Netscape Navigator 브라우저를 출시하였다.
      1. 1995년 MS사에서 IE를 출시하면서 웹브라우저의 경쟁이 시작되었다.
      1. 2000년대 Mozilla Firefox, Apple Safari, Google Chrome 등등 다양한 브라우저가 출시되고 서로 경쟁하면서 브라우저의 기능과 안전성이 점차 향상되었다.

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

      • IE가 브라우저 시장을 독점하게 되자 표준기술지원을 지키지 않는 모습을 보여주었고 표준기술에 다양한 확장과 수정을 가해 자신만의 표준을 만들어버리는등 다양한 문제점이 발견되었다. / 하지만 다른 브라우저들의 기술적인 발달과 IE의 고질적인 보안과 호환성에 대한 문제가 계속 지적되면서 점유율이 줄어들게 되었고 이에 자연스럽게 해결되었다.

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

      • 2023년 3월 기준으로 모든 플랫폼에 대하여 1위는 65.76%로 구글 크롬, 2위는 19.5%의 애플 사파리 3위는 4.63%로 MS사의 엣지 4위는 2.93%의 점유율을 차지한 모질라 파이어폭스가 차지하고 나머지 점유율은 삼성, 오페라 등등 기타 브라우저가 나누어 분포중 입니다. / 웹 개발에 있어 어떤 브라우저에 중점을 두고 개발해야할지 도움을 줄 수 있으며 브라우저의 보안이나 성능 이슈를 파악하는데 도움을 주기 떄문입니다.

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

      • 웹브라우저의 핵심적인 기능중 하나로 웹페이지를 렌더링하고 인터렉티브한 기능을 제공하는 역할을 합니다. 또 웹페이지의 구성요소인 HTML CSS JavaScript 와 같은 콘텐츠를 해석하고 이를 사용자에게 보여주기 위해 필요한 동작을 수행하는 역할을 합니다.

      대표적인 브라우저 엔진으로는 Chromium ,Gecko, WebKit 엔진등이 있으며 Chromium 엔진은 대표적으로 구글 크롬과 오페라, 네이버 웨일, MS 엣지에서 사용되며 Gecko 엔진은 모질라 파이어폭스, WebKit 은 애플 사파리와 모바일 크롬에서 사용되며 모바일 기기에서의 웹브라우징에 적합하게 최적화 되어있습니다.

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

      • 데스크탑 환경에서 더 나아가 모바일 환경에서의 최적화 된 기능과 인터페이스를 지원하고 있으며 다양한 플랫폼과 사용자 개인정보를 보호하는데 있어 특징점을 가지고 있습니다.
  • HTML 문서는 어떤 구조로 이루어져 있나요?

    • 보일러플레이트 코드인 <!DOCTYPE HTML> : 현재문서가 HTML 문서임을 명시한다. <HTML> : HTML문서의 루트(root)요소를 정의합니다. <head>: <HTML> 의 아래에 있으며 HTML문서의 메타데이터 를 정의한다. / 메타데이터란? HTML 문서에 대한 정보로 웹브라우저에는 직접적으로 표현되지 않는 정보를 의미합니다.

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

      • <title> : 해당 HTML문서의 제목을 나타낸다
      • <meta charset = "[인코딩 형식]">: 문서에서 허용하는 문자집합을 표기한다. 주로 utf-8 으로 출력함
      • <meta name ="" content= "">: 메타요소가 어떤 이름을 가지고 있는지(name), 실제 메타데이터의 컨텐츠내용(content)에 대해 표기 EX) <meta name = "author" content="Doori Lee">
      • <link rel = "#" href ="#"> : 주로 파비콘, 아이콘, CSS(rel = "stylesheet") 파일을 HTML문서에 적용시킬때 사용한다.

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

      • 각각의 의미를 가지고있는 태그를 의미한다. EX) form, table, article, nav, header,footer

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

          1. 검색엔진최적화(SEO) : 검색엔진은 태그를 기반으로 페이지 내 검색 키워드의 우선순위를 판단하므로 제목은 <h1>, 중요한 내용은 <strong>,<em>등 올바른 태그의 사용으로 최적화 할 수 있다.
          1. 시각장애가 있는 사용자의 경우 스크린리더를 이용하여 페이지를 탐색할 때 도움이 된다.
          1. 어플리케이션, 기업, 커뮤니티등 외부와 데이터를 공유하고 재사용하는데 있어 도움이 된다.(명확한 의미를 전달하기 때문)

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

        • <section>: 논리적으로 관계있는 문서 및 요소를 분리할 때 사용한다.
        • <div>: 요소간 논리적 관계와 상관없이 요소를 나눠야 할 필요가 있을 경우 사용한다.
        • <header>: 페이지의 소개나 탐색을 톱는것들의 그룹을 나타낼때 사용합니다.페이지의 최상단에 위치 합니다.
        • <footer>: 보통 작성자나 관리자, 저작권, 연락처응 포함하며 사이트의 가장 하단에 위치 합니다.
        • <article>: 문서 또는 요소가 독립적으로 존재할 수 있을 때 사용한다.

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

      • 블록 레벨 요소 : 태그를 사용해 요소를 삽입했을 때 혼자 한줄을 차지하는 요소입니다. (너비를 100% 사용한다.) 따라서 다음요소가 자연스럽게 줄 넘김되는 특징이 있습니다.

      • 인라인 레벨 요소: 줄을 차지 하지 않는 요소로 브라우저 같은 화면에 표시되는 컨텐츠 만큼 영역을 차지하고 나머지 공간으로는 다른 요소가 올 수 있다. 따라서 한줄에 여러개의 인라인 레벨 요소를 표시하는것이 가능합니다.

        • 특징 : 1. margin-top, margin-bottom(상하단 외부 여백)을 정의해도 적용이되지 않는다. / line-height 속성에 의해 상,하 여백이 발생된다.
        1. width,height(너비, 높이) 속성이 적용되지 않는다. 인라인요소의 너비및 태그가 품고있는 내부요소의 부피에 맞추어진다.
        2. 인라인 블록 요소가 연속으로 사용되는경우, 최소한의 간격유지를 위해 좌우 5px 가량의 외부 여백이 자동으로 발생한다.

Quest

  • 이 화면의 정보를 HTML 문서로 표현해 보세요. 다만 CSS를 전혀 사용하지 않고, 문서의 구조가 어떻게 되어 있는지를 파악하여 구현해 보세요.
    • CSS Naked Day는 매년 4월 9일에 CSS 없는 웹 페이지를 공개하여 내용과 마크업에 집중한 HTML 구조의 중요성을 강조하는 행사입니다.
  • 폴더에 있는 skeleton.html 파일을 바탕으로 작업해 보시면 됩니다.

    • 화면을 구성하는 큰 요소들을 어떻게 처리하면 좋을까요?

      • 위에서 언급한 시멘틱 태그들을 활용하여 비슷한 요소들로 구분지어 나누어주는 방법이 있습니다. EX) <header>, <article>, <section>, <footer> 영역 등

    • HTML 문서상에서 같은 층위에 비슷한 요소들이 반복될 때는 어떤 식으로 처리하는 것이 좋을까요?

    1. 클래스(Class)활용 : 반복되는 요소들의 공통된 스타일을 클래스로 정의하고 해당클래스를 적용하여 반복되는 요소들을 묶어주어 처리합니다.
    • EX)
      <style>
  .card{
    [공통된 스타일 작성 (border padding background-color 등등)]
  }
  </style>
  <div class="card"> 내용 1 </div>
  <div class="card"> 내용 2 </div>
  <div class="card"> 내용 3 </div>
    1. 자식 선택자를 활용 : 1번 클래스의 활용을 더 세분화 하는 방법으로 클래스에 자식 선택자를 사용하여 더 디테일하게 요소를 다듬을 수 있습니다.
    • EX)
      <style>
  .card > p {
    [공통된 스타일 작성 (border padding background-color 등등)]
  }
  </style>

  <div class="card">
    <p>내용 1</p>
  </div>
  <div class="card">
    <p>내용 2</p>
  </div>

Advanced

  • XML은 어떤 표준일까요? 어떤 식으로 발전해 왔을까요?
  • YML, Markdown 등 다른 마크업 언어들은 어떤 특징을 가지고 있고, 어떤 용도로 쓰일까요?