Internet
- 1950년대 군사 문서의 전달 목적으로 개발되었지만 1986년 미국과학재단(National Science Foundation)이 5곳의 슈퍼컴퓨터 센터를 연결하여 NSFnet을 만들었는데 NSFnet의 등장은 네트워크 기술이 정부나 공공기관 중심이 아닌 민간부문까지 확대되었다.
- 1989년에는 그래픽 환경이 개선되고 /팀 버너스리/에 의해 최초의 graphical broswerd인 월드와이드웹이 등장하였다.
웹의 발전
1세대 (HTML, CSS)
- HTML언어로 텍스트와 링크 연결짓는 형태의 정적인 화면을 구현
- 웹 서버가 HTML 페이지 전체를 클라이언트(ex. Web browser)에게 전송
HTML(HyperText Markup Language)
Hypertext : 문서 내 특정 단어가 데이터베이스 등과 링크되어 있어 사용자가 관련 문서를 넘나들며 원하는 정보를 얻을 수 있는 텍스트
Markup Language : 표시가 되어 있는 언어
2세대 (UI 증가로 동적인 웹을 구현하기위해 JS)
- 넷스케이프사에서 JS를 개발하여, JS를 이용한 동적인 브라우저가 생겼지만 여전히 HTML, CSS가 주로 이룸
- JavaScript는 일부부만 사용되었고 지금의 API의 개념이 아직 널리 사용 되지 않음
- 자료를 서칭하는 것 말고도 글을 쓰거나 바꾸면서 직접 컨텐츠를 만듬
3세대 (SPA, FE / BE 구별)
- SPA(Single Page Application): 하나의 html파일로 연결시켜 전체 사이트를 구현할 수 있게 됨
- 대규모 프로젝트를 수월하게 하기 위해여 발달
- 2세대와 달리 동적인 요소가 더 중요시 되면서 JS위주의 코드로 작성
- 그러므로 FE(눈에 보이는 부분<UX, UI>) / BE(데이터의 가공, 관리)로 나누어지게 됨
- 기존 방식대로 서버가 필요한 요소가 있을 때마다 데어터를 전송하는게 아니라, 파일은 처음 한 번만 송수신하고 그 다음 실시간으로 데이터만 주고 받음
시대에 따른 역사
1970
- 인터넷이 발명된 시기지만 웹이 널리 사용되게 된건 1990년대 부터 시작 되었다.
1990- 1995
- 세계 첫 웹 페이지(WWW)의 탄생, graphical broswer를 이용가능해졌다.
- table로 layout을 만들어 조금 더 발전한 애니메이션을 선보이며, JavaScript이 만들어지기도 하였다.
1996 - 1999
- CSS1로 style파일을 만들어 HTML에 연결하였다.(그 전에는 HTML안에 style을 줘서 만들었었다)
- 점차 발전하여 이미지를 3D같이 보일 수 있게 되었다.
- JavaScript로 동적인 애니메이션을 만들어 페이지를 꾸몄다 (눈이 흩날이는 모습 등)
2000 - 2009
- flash5와 ActionScript1을 사용할 수 있게 되었고 이용한 플래쉬게임이 발전하였다.
- CSS3으로 발전.
- vector image인 SVG 포멧이 처음 탄생하였고 XML언어로 사용할 수 있게 되었다.
WordPress(개인용 홈페이지 만드는 사이트)가 처음으로 탄생하였으며 지금의 블로그처럼 게시물들을 사이트에서 생성시킬 수 있게 되었다.- 작은 아이콘을 한 곳의 이미지에 모아
background속성을 사용하여 위치를 지정해 내가 원하는 작은 아이콘만 보일 수 있게 되어 웹 디자이너들이 더 graphical한 content를 넣을 수 있게 되었다. - scss으로 더 복잡한 효과를 줄 수 있게 되었다.
- table속성에서 floating 속성에서 grid 속성의 사용하며 점차 점차 개발하기 좋은 속성을 사용하였다
- CSS flexbox를 사용하여 flexible한 layout이 사용되었다.
2010 - 2015
- 모바일 사이트를 따로 만드는게 아닌 스크린 사이즈에 따라 다르게 보일 수 있게 되었다
- 미디어 쿼리로 반응형 사이트를 만들 수 있게 되었고 parallax scrolling 컨셉을 가진 페이지도 만들 수 있게 되었다
- 구글 폰트의 탄생으로 창의로운 타이포그래픽을 이용한 웹디자인이 사용되었다
- YouTube가 Flash Player를 더이상 쓰지 않고 html5 player을 사용하였고 css3의 애니메이션과 transition의 속성으로 반응형 버튼을 만들게 되었다.
- now
- basic layout에 갇혀있지 않고 video나 WebGL같은 animated background을 이용해 페이지를 만들고 있다.
