본문 바로가기

전체 글291

modal by flex 인스타그램에서 사진을 누르면 다음과 같이 배경이 회색이 되면서 창이 나타나게 된다. 이런 것을 모달이라고 한다. 이런 것을 구현하려면 어떻게 해야할까? 1. modal을 위한 html을 작성한다. 모달 내용 닫기 modal-wrapper 안에 modal을 넣는 것이 핵심! 2. modal-wrapper에 css 적용 .modal-wrapper{ position: fixed; top: 0; left: 0; width:100%; height:100%; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; } .modal{ background: white; } modal-wrapper에 flex를 쓰면 .. 2020. 7. 3.
CookieServer 쿠키란 HTTP 프로토콜 동작 방식이 connectionless여서 보완하기 위한 장치이다. HTTP 프로토콜은 단지 클라이언트가 request를 날리면 그에 대한 응답을 서버가 해주는 것이 끝이다. 연결되어서 유지되는 방식이 아니다. 요청과 응답이 이루어지면 끝이다. 이것의 단점은 클라이언트의 사용에 대한 트래킹이 어렵다는 것이다. 왜냐면 서버에서는 클라이언트가 보내는 요청만 처리해주면 할 일이 끝나기 때문이다. 하지만 우리가 웹사이트를 이용하다보면 이용하는 정보를 알아두는 것이 유용한 경우가 많다. 쇼핑몰 웹사이트를 이용하는데 한 웹사이트에 오래 머무르면서 장바구니도 이용하고 여러가지 상품을 구경할 수 있다. 그러면 장바구니에 담았던 상품이 유지가 되고 최근 본 상품이 뜨기도 한다. 이는 쿠키라는 방.. 2020. 7. 2.
JSON JSON은 java script object notation의 약자이다. 즉, 자바스크립트의 객체를 의미한다. 따라서, JSON의 디테일을 알기 위한 독자는 javascript의 객체에 대해서 공부하면 된다. { "name" : "bob", "age" : 15} 와 같은 형태가 대표적이다. json(https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/JSON) 2020. 7. 2.
do_GET+ do_POST 예제2 예제 1에서는 localhost:8000을 입력해서 들어가면 위와 같은 입력 폼이 나오고 Post it을 누르면 썼던 내용이 화면에 나타나는 예제였다. Hello world!를 쓰고 Post it 버튼을 눌렀을 때 다음과 같이 나오려면 어떻게 해야할까? 또한, 한 번 더 Hello World2!를 쓰고 Post it을 눌렀을 때 다음과 같이 나오려면 어떻게 해야할까? 별도의 데이터베이스 없이 위와 같은 기능을 구현하려면 어떻게 해야할까? 예제 1을 다시 생각해보면 form을 만들고, do_GET을 구현하고, do_POST를 구현하면 끝이었다. 각각의 기능은 서로 영향을 미치지 않고 독립적이다. 새로운 예제2의 상황을 정리해보면 아래와 같은 흐름으로 진행된다. 1. localhost:8000에 접속하면 입.. 2020. 7. 1.

티스토리툴바