SeaPlus

JQuery를 사용해서 구현 🥱 Sticky를 사용한 고정 position: sticky 속성을 적용한 박스는 평소에 문서 안에서 position : static 과 같이 일반적인 상태지만 스크롤의 위치가 임계값에 이르면 position : fixed와 같이 박스를 지정한 top, bottom, left,right 값에 맞게 고정된다. fixed 는 뷰포트를 기준으로 박스를 고정하지만 sticky는 자신을 감싸고 있는 부모의 scroll박스 를 기준으로 고정한다. [HTML] It's as easy as it sounds. [CSS] body { box-sizing: border-box; margin: 0; padding: 0; } .card-background { margin-top: 800px; ma..

서버: 접속자가 API를 통해 요청을 하면 데이터를 갖다줌 접속자의 요청 : GET, POST, PUT, DELETE API: 애플리케이션 프로그래밍 인터페이스 의 약자로 서로다른 두 애플리케이션을 프로그래밍 하기위한 프로토콜, 규약,형식 등으로 볼수 있다. AJAX: 서버에다가 GET,POST 요청을 할 수 있게 도와주는데 새로고침 없이 요청할 수 있음 JQuery를 사용해서 ajax를 간단하게 구현했다. [HTML} model : brand : price : Go somewhere 상품보여주기 [Javascript] // 버튼을 클릭하면 ajax를 통한 요청이 시작된다. $("#gethello").on("click", function () { // 지정한 url 에 GET요청을 하는 코드 // 이렇게..

데이터바인딩이란? 화면에보이는 데이터와 브라우저 메모리에 있는 데이터를 일치시키는 기법이다. - 1. 사용자가 입력한 정보를 얻어옴 - 2. 찾아온 데이터를 갱신 클라이언트 사이드 랜더링 이란? 웹서비스 개발방식은 두가지가 있습니다 서버사이드 랜더링, 클라이언트 사이드 랜더링 서버사이드 랜더링 1. 서버에서 HTML 파일을 미리 다 완성해서 보내주는 방법 클라이언트사이드 랜더링 2. 서버에서 텅빈 HTML 파일 + 중요데이터만 보내고 HTML에 데이터바인딩을 한뒤 완성하는건 클라이언스 사이드에서 자바스크립트로 하는 방법 오늘날은 서버사이드에서 모든 데이터를 처리하면 무겁고 처리 속도또한 느려지기 때문에 반드시 서버사이드에서 처리해야할 중요하고 보안성이 필요한 데이터를 제외하고는 클라이언트 사이드 랜더링으..

form 에서 상품들을 선택하면 그에 맞게 사이즈 option들이 변하는 UI 이다. 소핑몰 웹사이트에서 흔하게 볼수 있는 매우 기본적인 UI로, 하드코딩 방법과 동적프로그래밍 방법으로 구현해봤다. (JQuery 사용!) 하드코딩이란? - 상수나 변수에 들어가는 값(문자열, 정수 등)을 literal이라고 하는데, 이 값을 소스코드에 직접 쓰는 게 하드코딩 - 반대로, 소스코드에 직접 쓰지 않고 데이터를 외부 파일로 빼서 따로 관리하는 것을 '로딩'이라고 한다. 장점 - 육안으로 값을 직접 확인할수있다. - 로딩절차 없이 다이렉트로 읽을수 있어 속도가 비교적 빠르다. 단점 - 자주바뀌는 데이터를 하드코딩하면 계속해서 수정하고 ,재컴파일, 재배포 해야한다. - 유지보수, 운용이 어렵게 된다. [HTML] ..