-------
개발 블로그를 티스토리로 옮기며 기존의 네이버 블로그에 작성한 내용을 그대로 옮겼습니다.
https://blog.naver.com/0yeonjae2/222274730122
-------
<수업에서 배운 내용 정리>
1-1 웹이란 무엇인가?
웹은 World Wide Web의 줄임말로 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 정보공간이다. 웹을 흔히 인터넷과 혼동하곤 하는데 웹은 인터넷이 아니다. 웹은 인터넷 상에서 제공되는 많은 서비스를 통합적으로 사용할 수 있는 일종의 접속도구이다. 웹의 개발자인 팀 버너스 리는 하이퍼 텍스트를 사용해 인터넷으로 연결된 각기 다른 컴퓨터의 문서에 접근할 수 있는 정보관리 시스템을 제안했다. 이후 HTML, HTTP, URLs의 기반이 되는 기술을 개발하고 웹까지 개발하게 된다. 웹은 역사상 첫 번째 웹 브라우저이다. 팀 버너스 리는 웹이 모두를 위한 기술이 되길 바라서 무료로 배포했다고 한다.
1994년 팀 버너스 리는 W3C라는 웹 표준화 단체를 창설했는데, W3C는 표준을 강제하지 않아서 웹 브라우저 전쟁이 시작되게 된다.
1-2 1차 웹 브라우저 전쟁(1990년대) : Netscape vs Internet Explorer
1993년 NCSA의 대학생인 마크 앤드리슨과 에릭 비나는 세계 최초의 GUI*기반의 웹브라우저 Mosaic를 만들었다. 그 후 동명의 회사(Mosaic Communication)를 설립하는데, Mosaic 웹 브라우저는 법적으로 NCSA의 재산이었기 때문에 이름을 Netscape라 바꾸게 된다. Netscape는 초기에 큰 인기를 얻어 90%의 점유율을 차지했다. 1995년 Microsoft는 Mosaic를 가진 회사에 저작권료를 지급하고 Mosaic 웹 브라우저의 소스코드를 활용해 Internet Explorer를 개발한다. Microsoft는 Netscape의 시장 점유율을 넘어서기 위해 윈도우 운영체제에 Inter Explorer를 무료 배포하고, 애플과 계약을 맺어 5년 동안 매킨토시의 기본 웹 브라우저로 Inter Explorer를 설정했다. 그 덕분에 1999년 이후에 Internet Explorer가 Netscape 대신 세계에서 가장 많이 쓰이는 웹 브라우저가 된다.
* GUI는 그래픽 유저 인터페이스의 준말이다. 사용자가 편리하게 사용할 수 있도록 입출력 등의 기능을 그래픽으로 나타낸 것이다.
1-3 플러그인 시대
플러그인은 사용자pc에 프로그램을 추가로 설치해 웹 브라우저의 기능을 확장하는 방법이다. 그 예로 최근에 지원을 종료한 Adobe Flash가 있다. 플러그인을 사용해서 동영상 시청, 은행업무가 가능해졌지만 점차 그 자취를 감추고 있는 추세다.
1-4 2차 웹 브라우저 전쟁(2000년대): Firefox, Edge, Safari, Chrome
Internet Explorer가 플러그인을 삽입해 웹사이트가 무거워지는 와중, W3C회의에서 새로운 HTML 표준을 제안하지만 Internet Explorer가 이를 거절한다. 그래서 Internet Explorer를 제외한 나머지 기업들은 새로운 웹 표준기관인 WHATWG를 설립하고 HTML 5표준을 제정한다. W3C와 Microsoft는 이에 함께 XHTML 2.0 표준을 작성하는데, 기존 표준과 너무 동떨어져 폐기된다. 이에 따라 WHATWG의 HTML 5표준이 새로운 웹 표준이 되면서 Internet Explorer만 최신 표준을 지원하지 못하게 된다. 이 상황을 이용해 많은 브라우저가 엄청난 속도로 업데이트를 진행하게 되고 올해 2월 기준으로 Chrome > Safari > Firefox >Edge> Samsung Internet > Opera 순으로 점유율을 차지한다고 한다.
2-1 웹의 동작원리 : 클라이언트의 요청과 서버의 응답
웹은 CLIENT의 REQUESTS와 SERVER의 RESPONSES로 동작한다. 이때웹 브라우저는 HTTP를 사용해 웹 서버와 통신한다. 웹 브라우저는 검색을 시작하거나 폼을 전송할 때 HTTP Request를 서버에 보낸다.
이때 URL은 대상 서버 및 리소스를 식별한다. 메소드는 필요한 행동을 정의할 때 사용한다. 예를 들면 특정리소스를 얻고자 할 때 GET, 새로운 리소스를 만들 때 POST, 특정 리소스를 삭제할 떄 DELETE를 사용한다.
2-2 정적 웹 사이트의 동작원리
(1) 브라우저가 서버로 HTTP Request를 보낸다
(2) 서버는 요청을 읽고 페이지를 HTTP Response로 클라이언트 측에 보낸다.
웹 서버는 이미 만들어져 있는 파일 시스템에서의 파일을 탐색해 요청한 페이지를 찾으면 페이지와 상태 코드를 함께 보낸다 (ex. 찾았으면 200 ok, 페이지를 찾을 수 없다면 404 not found)
2-3 동적 웹 사이트의 동작원리
클라이언트와 서버와의 통신은 정적 웹 사이트와 동일하다. 다만 클라이언트가 get 뿐만 아니라 다양한 요청을 할 수 있기 때문에 서버가 그 요청을 받고 정적요청인지 동적요청인지 식별한다. 동적요청이라면 웹 어플리케이션에 이 요청을 전달하게 되고 미리 만들어져 있는 HTML Templates를 가지고 새로운 페이지를 생성할 수 있다.
3-1 웹 표준기술
현재 웹 페이지에서 사용되는 표준기술은 HTML 표준, CSS 표준, ECMAScript 표준(ECMA에서 제정한 Javascript의 표준 명칭)이다.
HTML (HyperText* Markup Language) : 웹의 구조를 담당한다.
*하이퍼링크를 통해 사용자가 한 문서에서 다른 문서로 즉시 접근 가능하게 하는 텍스트
CSS (Cascading Style Sheets) : 웹의 시각적 표현을 담당한다.
Javascript (JS) : 웹의 동적 처리를 담당한다. (Java와 아무런 관련이 없다.)
<과제 수행하기>
이번 주의 과제는 웹사이트에 시 쓰기였다!
처음에는 혼자 어떻게든 해 보려고 했는데 행과 연을 구분하고 시 제목과 내용 사이 간격을 어떻게 표현할 수 있을지부터 막혔다. 그래서 고민하다가 교수님께서 올려주신 예시를 참고했다. 그 후 codepen에 가입해서 배경색, 글자색 넣는 방법도 찾아보고 바로 적용했다.
이렇게 해서 1차적으로 과제를 마무리했다!
<별은 너에게로>가 내가 만든 것이고 <구관조 씻기기>가 교수님이 예시로 보여주신 것이다.
시에서의 주된 키워드가 별이라서 어두운 배경이 어울리겠다고 생각했다. 그래서 main.css의 body 부분에 background-color를 RGB(6,6,27)로 설정했다. 처음에는 자동완성에서 뜨는 색인 darkblue를 설정했는데 색 옆에 뜨는 작은 상자에 마우스를 가져다 대니 색상표가 나와서 원하는 색을 찾을 수도 있었다! # 000000 같은 방식으로 원하는 색이 어떻게 표현되는지 미리 찾은 후 색을 검색하는 것보다는 훨씬 편하게 원하는 색을 찾을 수 있어서 좋았다.
(시 내용의 글자 색을 지정하고 싶으면 main.css의 .poem에서, 시 제목의 색깔을 지정하고 싶으면 main.css의 # title에서 color: 를 적고 색을 고르면 된다.)
추가적으로 내가 가장 좋아하는 부분을 강조하고 싶어서 나머지 부분보다 진한 노란색으로 따로 지정했다.
index.html에서 원하는 구절 부분을 찾고 <p> 를 <p style="color : 원하는 색">으로 변경하면 특정 부분만 색을 설정할 수 있다!
codepen에서 poem를 검색해보니 정말 다양한 작업물들을 볼 수 있었다. 애니메이션 기능이 적용된 작업물을 봤는데 신기해서 여러 번 봤다. 그중에서 사진을 넣는 기능이 있다는 것도 알았다!!! 그래서 바로 다시 visual studio code를 켜서 적용해봤다.
위의 링크에서 본 방법을 그대로 적용했다. image를 img로 줄여서 표현해도 똑같은 결과가 나온다. 처음에 입력하고 난 후 계속 오류가 떠서 원인을 찾아봤다. 알고 보니 <body>가 계속 <image>로 변경되어서 짝이 안 맞아서 생긴 오류였다. 고치니까 바로 깔끔하게 적용됐다.
이렇게 과제를 마무리하고 github desktop에서 변경사항에 대한 간단한 이름을 정하고 github으로 commit, push 했다!
느낀 점
<수업에서 배운 내용 정리>
웹에 대해 잘 몰랐고 실제로 인터넷과 같은 거라고 생각했는데 아니란 것을 새롭게 알게 되었다. 그리고 웹 브라우저 전쟁 파트에서 '내가 생각보다 많이 웹 브라우저에 대해 모르는구나'라는 생각이 들었고 한 순간의 선택이 엄청난 결과를 가져올 수 있다는 것을 느꼈다.
<과제 수행하기>
교수님과 다른 codepen 유저들의 작업들을 참고해서 내가 표현하고 싶은 것을 표현해보니 정말 재밌었다.
계속 수업을 들으면서 공부해서 학기가 끝날 때쯤에는 더욱 나의 목표와 의도를 잘 반영한 사이트를 만들어보고 싶다!
'전공과목 정리 > 웹프로그래밍기초' 카테고리의 다른 글
| [웹프로그래밍기초🎀] 7~8주차 개발일지 (0) | 2022.01.31 |
|---|---|
| [웹프로그래밍기초🎀] 6주차 개발일지 (0) | 2022.01.31 |
| [웹프로그래밍기초🎀] 5주차 개발일지 (0) | 2022.01.31 |
| [웹프로그래밍기초🎀] 4주차 개발일지 (0) | 2022.01.31 |
| [웹프로그래밍기초🎀] 3주차 개발일지 (0) | 2022.01.31 |