강의01 - kyagrd/htmlcss2018spring GitHub Wiki

날짜: 2018-03-02

과목 진행 방침

  • 평가 항목 비율: 중간 30%, 기말 40%, 실습/과제 25%, 출석 5%

용어 및 개념

Acronym 용어들

다른 분야 전문용어도 그렇지만 인터넷 관련 용어에도 머릿글자 준말(acronym)이 많다.

  • WWW - World Wide Web
    • HTTP 프로토콜을 통해 하이퍼텍스트, 멀티미디어 등 여러가지 정보를 얻을 수 있는 인터넷에 연결된 가상적인 정보의 공간
    • 인터넷에서 대중적으로 가장 친숙한 부분
    • 이것을 좀더 줄여서 W3라고 쓰기도 하고 (아래 W3C 항목 참고) 또는 앞으 부분을 생략하고 그냥 Web이라고 쓰기도 함
  • W3C - World Wide Web Consortium.
    • 월드 와이드 웹을 위한 표준 개발/장려하여 월드 와이드 웹의 지속적 성장을 도모하는 국제기구
    • 홈페이지 - http://www.w3.org/
  • URL - Unified Resource Locator
    • 웹에서 리소스(문서, 멀티미디어)를 찾을 수 있는 주소 (인터넷 비속어/은어/유행어로는 '좌표'에 해당)
  • URI - Unified Resource Identifier
    • URL의 상위개념으로 꼭 주소(즉 네트워크상에서 위치에 해당하는 개념)가 아니더라도 리소스를 특정할 수 있는 표기방법
    • URL말고 다른 종류 URI의 예
      • 주소가 아닌 고유한 이름으로 리소스 식별자를 표기하는 방식을 URN이라고 함
      • 토렌트에서 많이 쓰이는 마그넷 URI (흔히 마그넷 주소라고 부르기도 하지만 네트워크상의 위치를 특정하는 주소의 개념은 아님)
      • 도서의 경우 단행본 일련번호인 ISBN이나 연속 간행물 일련번호인 ISSN을 URN 형태로 표기할 수도 있다
      • Digital Object Identifier (DOI) 온라인으로 제공되는 문서 및 기타 자료를 (주로 논문, 공공정보 등) 위한 일련번호로 내용이 업데이트되거나 웹상에서 주소가 바뀌더라도 변하지 않는 식별자 제공을 위해 쓰인다
  • P2P - Peer to Peer
    • 서버가 중앙에서 정보를 총괄하여 클라이언트들에게 제공해 주는 client--server 구조가 아닌 클라이언트들끼리 네트워크를 이루는 방식
  • DOM - Document Object Model
    • HTML, XML과 같은 구조화된 문서를 JavaScript 등과 같은 프로그래밍 언어에서 다룰 수 있도록 API를 제공하기 위한 모델

우리 과목에서 주로 공부하게 되는 주제들도 이런 준말이다.

  • HTML - HypterText Markup Language
  • CSS - Cascading Style Sheets
  • HTTP - HypterText Transfer Protocol

또 최근 웹 기술과 관련해 업계에서 생겨난 개념을 줄여 쓰는 용어들도 있다 (예: IasS, SaaS, PaaS)

개념

하이퍼텍스트

연결구조를 갖는 문서.

하이퍼텍스트는 연결구조를 나타낼 수 있는 방법이 미리 약속되어 있는 구조의 문서이다. 일반 문서(텍스트)는 처음부터 끝까지 일렬로 내용이 나열되어 있고 명시적인 연결구조를 나타내는 표준적인 방법이 약속되어 있는 것은 아니다. 그냥 "앞장에서 말한 것처럼"이런 식으로 내용상 기억을 환기시키거나 하기 위해 다른 부분을 가리키는 식의 내용을 글쓴이가 자유롭게 임의의 형태로 작성할 수는 있지만.

역사 (하이퍼텍스트라는 용어가 생기기 전에도 비슷한 개념은 존재했다)

  • 옛날옛적 70년대~90년대초 나름 인기있었던 게임북도 일종의 하이퍼텍스트 형태를 갖는 문학
  • 게임북의 시초인 40년대 초반 여러 갈래로 진행되는 소설에서 하이퍼텍스트의 기원을 찾기도
  • 60년대 하이퍼텍스트라는 용어가 처음으로 사용됨
  • 80년대 초반 지금과 유사한 개념으로 하이퍼텍스트를 다룰 수 있는 컴퓨터 시스템들이 개발됨 (인터넷 아직 X)
  • 80년대 후반 유럽입자물리연구소(CERN)에서 WorldWideWeb이라는 프로젝트의 시작으로 하이퍼텍스트 문서를 인터넷을 통해 사용 시작

HTTP와 HTML

  • HTTP는 HTML 전송을 주로 염두에 두고 만들어진 프로토콜이지만 항상 둘이 붙어다녀야 하는 것은 아님
  • HTML 문서가 아닌 다른 유형의 문서/멀티미디어 파일도 HTTP로 전송 가능
  • HTTP가 아닌 다른 프로토콜로도 HTML문서를 전송할 수 있으며
  • 네트워크를 통하지 않고 그냥 자기 컴퓨터 안에 있는 HTML 문서도 바로 활용 가능

마크업 언어

여러 종류의 마크업 언어가 있다

  • HTML 및 W3C와 관련 - SGML, HTML, XML, XHTML
  • 사람이 작성하기 좋게 단순/간결하게 - Markdown, org-mode, 각종 위키 문법 마크업 언어들
  • 지면(종이)에 조판을 위한 - troff, nroff, TeX
  • 기타(설정파일, 벡터그래픽 등) - YAML, SVG

CSS

HTML, XML 등의 (내용 구성 중심으로) 구조화된 문서를 컴퓨터 스크린, 종이 지면, 또는 음성 등의 멀티미디어 형태로 표현하는 방식을 정의. HTML, XML로 작성된 구조화된 문서가 뼈대라면 CSS로 거기에 옷을 입히고 보기 좋게 장식을 하는 것에 비유할 수 있다.

실습을 위한 방침 추가 설명

나머지 시간에는 실습/과제를 위한 소프트웨어/서비스 설치방법 및 과목에서 활용방침에 대해 안내한다 (다음 실습 시간에 실제로 활용할 내용).

  • 초반에는 원활한 학습을 위해 http://codepen.io/ 활용
  • 나중에 좀 익숙해지고 나면 직접 파일을 Atom 에디터로 작성하고 소스코드의 관리도 가장 대중적으로 사용되는 분산 버전관리 시스템인 git을 지원하는 GitHub 또는 Bitbucket과 같은 서비스를 활용해 본다.