Let's Start 에서 마지막 포스팅이 되는 WWW입니다!
이번 포스팅은 정말 웹 프로그래밍에서 다루는 것은 무엇인지 그리고 우리가 사용하는 웹의 역사가 무엇인지 정말 간단히 기재를 하겠습니다 !
아, Web Programming 카테고리 에서는 Let's Start -> HTML -> CSS -> JavaScript 순으로 업로드가 됩니다! 참고해주세요
포스팅 시작하겠습니다 ^^!
먼저 WWW ? 이것은 World Wide Web 이라고하는데요 Web은 거미줄이라고 해석해보면 World Wide(세계적으로 넓게 , 세계적인) Web(거미줄, 거미집) 이라 불리는 HTTP 프로토콜을 사용하기 위한 인터페이스라고 보시면 됩니다.
이 WWW의 역사를 보면 info.cern.ch 이 사이트를 들어가 보시면 최초의 웹페이지를 볼 수 있습니다.
Cern은 유럽의 입자물리학 연구소 인데 이 WWW는 1989년 3월 팀 버너스 리(Tim Berners Lee)의 제안으로 연구가 시작되어서 개발이 되었다고 합니다.
그렇다면 어떤 제안으로 왜 연구를 했을까 ? 사실 이때만 해도 연구소에서는 여러 논문을 보며 참고를 하고 논문이 필요하면 받아오고 필요한 곳으로 보내는 형식을 사용했는데 팀 버너스리는 이 논문을 우리가 직접 혹은 누군가를 통하여 전송을 하고 받아보지 말고 화면으로 보면 어떨까 해서 만들어 졌다고 합니다 .
이것이 바로 www를 설명한 제안서의 첫 페이지 입니다 !
그렇다면 웹을 개발하려는데 필요한 것이 무엇이냐 ??
첫번째로는 논문 문서가 필요하겠죠 이 논문을 작성을 하고 필요로 하게 되는 것이니 반드시 필요한게 논문 문서입니다!
두번째는 바로 논문을 저장할 공간이 필요합니다! 논문이 한두개가 아닌 수백 수천개의 논문이 존재할 수 있고 우리는 이 논문을 저장할 공간이 필요합니다. 후에 이 저장할 공간을 서버라고 합니다.
세번째는 논문을 볼 수 있는 컴퓨터가 필요합니다 ! 이 논문이 저장이 되어있다 해도 컴퓨터가 없으면 이 논문을 볼 수가 없겠죠 !
후에 이 부분을 클라이언트라 합니다.
그렇다면 또 웹에 필요한 것은 무엇인가 ? 바로 컴퓨터에 설치되어 있는 프로그램중 우리가 사용하는
크롬 , 파이어폭스 , 인터넷 익스플로어, 엣지, 웨일 , 오페라 같은 브라우저라는 앱이 필요하게 됩니다 !
여기서 그럼 WWW는 어떤 개념인지 복습 해보자면
이런식의 구조를 가지고 있다고 보면 되겠네요 !!
말로 풀어서 쓰자면 서버에 있는 HTML(문서)을 클라이언트의 브라우저를 통해 보는것 !
여기서 이제 정리를 해보겠습니다.
WWW이란?
1. World Wide Web
2. 웹은 인터넷 상에서 동작하는 하나의 서비스
3. 인터넷 자체와 혼동하여 사용하나 엄밀히 말하면 다르다!
4. Telnet, e-mail,usenet, FTP 등 (이 부분은 처음엔 모르셔도 됩니다!)
5. 최초의 웹사이트는 http://info.cern.ch/
그렇다면 아직 설명을 안한 부분이 있죠 ! 바로 HTML 인데요 HTML에 대해서 간략히 설명을 드리겠습니다. 첫번째 포스팅에서 간단히 설명을 했지만
HTML ( Hyper Text Markup Language ) 이란
1. 전세계가 모두 볼 수 있는 정보를 작성하기 위한 언어
2. 온라인 문서를 제목, 문장, 표, 목록, 사진 등을 포함하여 발행
3. 초기에 논문(책) 수준의 데이터만 표현이 가능하게 만들어짐
4. 웹사이트의 발전으로 더 많은 표현과 인터렉션이 필요하게됨
이런식으로 HTML 을 표현할 수 있겠습니다 !
그렇다면 Hyper Text 란 무엇일까요 ? 이것은 책으로 비유 해보겠습니다
일단 기존의 문서는 순차적이면서 ! 서열형 구조를 가지고 있지만
하이퍼 텍스트는 링크에 따라 그 차례가 바뀌는 임의적이면서 나열형 구조입니다! 즉 하이퍼링크를 통하여 원하는 페이지로 갈 수있다는 말입니다.
만약 HTML 이 나열형 구조가 아닌 서열형 구조였으면 원하는 논문은 600페이지에 있는데 이 논문을 보려면 599페이지를 모두 넘겨야 볼 수있다는 말입니다ㅜㅜㅜ 하지만 나열형 구조로 인하여 우리는 한번에 그 600페이지에 도달 할 수 있씁니다. 어느정도 설명이 되었나요 ?
다음 Mark up 입니다 ! 혹시 Markup 이라는 말을 들으신 적이 있나요 ? 저도 이 Markup은 정확히 모르는데요 !
대충 우리가 공부할때 줄을 치거나, 형광펜으로 칠하는 작업을 마크업이라 생각하시면 됩니다.
Markup example
이 HTML 에서도 M 부분을 마크업이라 일컫는데요 HTML 에서는 ' < > ' 즉, 태그가 Markup 요소라 합니다 !
이런식으로 기재하는 것이 HTML에서는 마크업 이라고 합니다 !
그렇다면 HTML 에서의 목표는 무엇일까요 ?
1. 생산자들이 만든 문서가 다른 브라우져, 플랫폼에서 다르게 표현되지 않아야 함 (크로스브라우징)
2. 여러 해상도, PC , 휴대폰, 모바일 기기 등의 모든 장치들이 정보를 이용하게 가능 하도록 발전됨 (N 스크린)
이 말고도 자세한 웹의 표준이라던가 웹에 대하여 자세한 설명은
사이트에 자세히 나와있습니다. 이 사이트는 웹을 위한 표준을 개발하고 장려하는 조직으로 CSS, HTML, XHTML, XML 등의 표준화 라고 볼 수 있습니다!
웹표준은 HTML CSS JavaScript 로 이루어져 있으며 !
표준에 맞는 마크업을 해야하고 의미에 맞게 마크업 해야합니다 !
정말 중요한 웹 표준에 대해 말씀 드리고 이번 포스팅을 마무리로 본격적으로 웹 프로그래밍으로 들어가 보겠습니다 !
구조 와 데이터는 HTML 이 담당한다.
표현 및 레이아웃(표현 및 동작)은 CSS 가 담당하고
제어 및 작동은 JavaScript 가 담당한다.
다음 포스팅에서 뵙겠습니다 !
'Front-end > Let's Start !' 카테고리의 다른 글
2. 코딩폰트의 적용(D2 Coding) (0) | 2018.07.22 |
---|---|
1. 프론트 앤드(Front end) IDE (1) | 2018.07.22 |