본문 바로가기

분류 전체보기

 (207)
Ajax (1) - Intro 이번 포스트는 이고잉님의 'Ajax' 강의를 듣고 정리한 내용입니다. https://opentutorials.org/course/3281 Ajax - 생활코딩 수업소개 웹페이지에서 일부 정보가 달라졌음에도 전체 페이지를 리로드하는 것은 효율적이지 않습니다. Ajax는 리로드 없이 웹서버에게 정보를 요청해서 부분적으로 정보를 갱신해주는 기술입 opentutorials.org 웹페이지에서 일부 정보만 달라졌음에도 불구하고 전체 페이지를 리로드하는 것은 효율적이지 않다. 구글 검색창을 생각해보면 내가 검색창에 a만 쳤는데도 화면이 다시 리로드 된다면.. 내 apple iphone release 라고 가정했을때, 페이지가 무려 18번 리로드 되어야 한다. 하지만 전체 페이지는 그대로 있고 검색창 부분만 달라진다..
HTTP (3) HTTP Response Message 이번 포스트는 이고잉님의 'HTTP 소개' 강의를 듣고 정리한 내용입니다. https://opentutorials.org/course/3385/21675 HTTP Response message - 생활코딩 수업소개 HTTP 응답 메시지의 자세한 내용을 살펴봅니다. 강의 opentutorials.org content-encoding:gzip - 웹서버가 어떤 형식으로 데이터를 압축해서 웹브라우저에게 보내주었는지 content-length - 데이터의 크기. 단위는 Byte content-type - text/html : 웹 서버가 응답할 때, "이 응답은 text이고 html이라는 컴퓨터 언어다 ~" 웹 브라우저는 이 것을 보고 html로 해석해서 화면에 보여준다. - image/jpg : 이미지 파일일 ..
HTTP (2) HTTP Response Message 이번 포스트는 이고잉님의 'HTTP 소개' 강의를 듣고 정리한 내용입니다. https://opentutorials.org/course/3385/21675 HTTP Response message - 생활코딩 수업소개 HTTP 응답 메시지의 자세한 내용을 살펴봅니다. 강의 opentutorials.org 강의를 듣고 복습하기 위해 F12를 눌러서 ㅋㅋ 개발자 도구에 들어왔다. 이고잉님 화면과 다르지만 겹치는 부분 위주로 복습을 해보겠다! HTTP Request Header는 이렇게 이루어져 있다. Request Line과 Request Headers를 합쳐서 Request Message Header 그리고 혹시 웹브라우저가 서버에게 보내야 할 컨텐츠가 있다면? (GET이 아니라 POST Method 이용한 ..
HTTP (1) Intro 이번 포스트는 이고잉님의 'HTTP 소개' 강의를 듣고 정리한 내용입니다. https://opentutorials.org/course/3385/21673 HTTP 소개 - 생활코딩 수업소개 HTTP가 무엇인지를 살펴봅니다. 크롬 개발자 도구 내의 네트워트 기능도 살짝 살펴봅니다. 강의 opentutorials.org 지난 시간에 Client와 Server가 무엇인지에 대해 배웠다. 이번 시간에는 HTTP에 대해 배워보려고 한다. Client가 Server에게 html과 같은 데이터를 요구하는 것을 'request'라고 한다. 그에 응답해 Server가 Client에게 데이터를 보내주는 것을 'response'라고 한다. 이렇게 데이터를 주고 받기 위해 서버와 클라이언트가 알아들을 수 있는 공통의 메시지가..
인터넷 Server와 Client 이번 포스트는 이고잉님의 '인터넷을 여는 열쇠: 서버와 클라이언트' 강의를 듣고 정리한 내용입니다. https://opentutorials.org/course/3084/18890 인터넷을 여는 열쇠 : 서버와 클라이언트 - 생활코딩 --- 지금부터 인터넷이 동작하는 기본적인 원리를 알아보겠습니다. 질문입니다 인터넷이 동작하기 위해서는 컴퓨터가 최소 몇 대가 있어야 할까요? 2대입니다 1대는 인터넷이 아니고 3대는 본질 opentutorials.org 처음 팀 버너스 리는 인터넷을 이용해서 웹을 만들기로 한다. 컴퓨터 2대를 장만하고 이 컴퓨터들을 인터넷으로 연결한다. 각 컴퓨터에 프로그램을 하나씩 개발하는데, 한 프로그램은 '웹 브라우저'이고 다른 프로그램은 '웹 서버'이다. 그는 '웹 서버' 프로그램이..
Video and Audio APIs (MDN 정리) https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs Video and Audio APIs I think we've taught you enough in this article. The HTMLMediaElement API makes a wealth of functionality available for creating simple video and audio players, and that's only the tip of the iceberg. See the "See also" section below for links to more comp developer.mozilla.or..
Movie Seat Booking (4) make Screen 3D parent element에 perspective 속성을 효과를 주려는 child element에 transform 속성을 줘서 3D로 만드는 방법 참고 https://3dtransforms.desandro.com/perspective Perspective · Intro to CSS 3D transforms Perspective To activate 3D space, an element needs perspective. This can be applied in two ways. The first technique is with the transform property, with perspective() as a function: transform: perspective(400px); For example..
Movie Seat Booking (2) - CSS colors 색깔과 사용할 폰트만 가져왔다. 내일 나머지는 혼자 만들어 보려고! @import url('https://fonts.googleapis.com/css?family=Lato&display=swap'); * { box-sizing: border-box; } body background-color:#242333; color:#fff; font-family:'Lato', sans-serif; .movie-container select background-color:#fff; .seat background-color:#444451; seat.selected #6feaf6; .seat.occupied #fff; .showcase background:rgba(0,0,0,0.1); color:#777; .screen ..

티스토리툴바