강의03 - kyagrd/htmlcss2018spring GitHub Wiki

2018-03-09

HTML의 역사

참고자료: 웹디자이너를 위한 HTML5 (제레미 키스 지음, 김중철 및 웹액추얼리북스 팀 옮김, 웹액추얼리북스 2011)

  1. 최초의 HTML
    • 1991년 팀 버너스-리 경(Sir Tim Berners-Lee)가 HTML Tags라는 글에서 웹페이지 작성을 위한 태그 약 20개 제안
    • 처음부터 완전히 새로운 걸 만든 게 아니라 SGML에서 쓰던 방식의 태그 사용 (<로 시작해서 >로 끝나는 태그 문법)
    • 처음에는 <img> 태그는 없었다!!!
  2. 최초로 공식적으로 표준화된 HTML 2.0
    • Internet Engineering Taskforce (IETF)에서 HTML 2.0 표준이 만들어짐
    • 이미 1994년경에 주로 쓰이던 Mosaic 브라우저에서 <img> 태그가 쓰이고 있었고 이것을 표준에 포함하도록 반영
    • HTML 1.0이라는 표준은 없었다! (최초 팀 버너스-리 경이 제안한 게 있으니까 그냥 그거 다음에 만든 표준이라 2.0으로 번호 붙임)
  3. W3C가 설립되어 IETF의 HTML등의 표준화 역할을 대체 (지금도 IETF는 HTTP를 비롯한 인터넷 프로토콜 표준을 개발하고 있다), 90년대 후반에 이르러서는 HTML 표준에 많은 개정이 이루어짐
    • 1999년 정리된 HTML 4.01 표준이 지금의 최신 표준인 HTML5가 나오기 전에 가장 널리 받아들여지고 쓰임
    • 그러나 이 이후 HTML 관련 표준은 혁명과 혼란의 시기를 겪게 되는데 ...
  4. 실패로 끝난 XHTML 혁명 시도 (그러나 그 정신은 CSS와 함께 살아있다!)
    • XHTML 1.0 문법을 더 엄격하게 - 기존 HTML 4.01에서 태그 문법만 XML처럼
      • 기존의 <img alt="사과" src="apple.jpg">, <br> 같은 태그를 허용하지 않고 다음과 같은 XML문법에 맞는 태그만 하용
        • <img alt="사과" src="apple.jpg" />, <br />
        • <img alt="사과" src="apple.jpg"></img>, <br></br>
      • 속성(attribute)의 값은 반드시 큰따옴표(")를 써야 하고 작은따옴표는 허용하지 않음
      • 중첩 구조가 명확해야 함
        • <p> 안녕하세요 <em>강조1</p><p>강조2</em> 안녕하가세요 </p> 허용하지 않으며
        • <p> 안녕하세요 <em>강조1</em></p><p><em>강조2</em> 안녕하가세요 </p> 이렇게 써야
    • XHTML 1.0 발표에 때맞추어 웹 브라우저들의 CSS 지원 향상
    • 웹디자이너나 웹개발 전문가들은 XHTML의 업격한 문법을 마크업을 작상하는 "가장 좋은 예"로 선호.
    • XHTML 1.1 태그 뿐만 아니라 문서 전체가 완전히 XML 문법을 따름
      • 이 표준에 따르면 text/html이 아니라 text/xml 마임 타입을 사용해야 함
      • 너무 혁명적으로 표준위원회만 앞서나간 결과 현실과 동떨어짐 (하위호환성의 저주/속박)
      • 이 표준 발표 당시 이에 따라 문서를 작성했을 때 제대로 보여저는 브라우저가 거의 없었음
    • XHTML 2.0 표준을 발표하긴 했으나 현실에 영향을 거의 미치지 못함 (거의 아무도 안씀)
  5. W3C의 현실과 동떨어져가는 XHTML 표준에 반발하여 WHATWG가 만들어져 새로운 하위호환성을 고려한 HTML 표준을 독립적으로 만들기 시작
    • 설계원칙: 기존 컨첸지 지원, 바퀴를 새로 발명하지 말라, 비포장 도로가 있으면 포장(웹디자이너가 사용하는 기존의 방법을 수용) 등
    • 실용적 접근: 설계시 충돌이 발상할 경우 "사용 기반 우선권"
      이론적 순수성 < 기술 명세 < 구현자(웹브라우저) < 개발자(웹디자이너, 웹개발자) < 사용자
  6. W3C도 XHTML의 실패를 인정하고 WHATWG가 만든 HTML 표준을 검토하여 HTML5 표준으로 승인하는 방식 (지금도 두 기구가 다 존재)

HTML5에서 바뀐 것들

  • 퇴화(obsolete)된 태그들(<font>, <big>, <center> 등등)은 웹브라우저가 보여주지만 HTML5에서 쓰지 말기를 권고하는 것들이며 주로 CSS로 처리할 수 있는 기능에 해당
  • <small> (요약본), <b>, <i> 태그처럼 과거와 뜻을 다르게 HTML5에서 재정의해 쓰는 것도 있다. 하지만 개인적인 의견으로는 웬만하면 <b> 대신에 <strong>을 <i> 대신에 <em>을 쓰는 게 좋다. HTML5는 현실을 반영하며 사용자를 우선해서 설계되어 워낙 많이 쓰이고 있던 <b>나 <i>를 없애지는 못하는 대신 그 정의를 굉장히 애매하게 바꿔버렸다.
  • <meta charset="utf-8"> 주교재 p. 279 참고

다음 실습을 위한 준비

후반부 한시간 강의에는 다음 실습(주교재 2장) 내용을 미리 살펴보고 필요한 소프트웨어 설치방법(Atom 에디터)에 대해서 소개해 드렸습니다.

⚠️ **GitHub.com Fallback** ⚠️