SeaPlus

[구현] 1. HTML, CSS 로 시간값을 넣을 시계틀 을 생성한다. 2. 시계요소의 반사 효과는 -webkit-box-reflect를 사용해서 구현한다. -webkit-box-reflect: below 1px linear-gradient(transparent, #0004); 3. 시간, 분 , 초 는 new Date() 함수와 setInterval()함수를 통해 구현한다. function clock() { // 시,분,초 선택자 변수 생성 var hours = document.getElementById("hour"); var minutes = document.getElementById("minutes"); var seconds = document.getElementById("seconds"); //n..

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..

🔰 AJAX(Asynchronous JavaScript and XML) 비동기식 자바스크립트 와 XML 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환 할 수 있게 하는 기법 AJAX를 이용해서 전송가능한 데이터는 XML, TEXT, HTML, JSON 브라우저가 가지고 있는 XMLHttpRequest 객체 를 사용해 전체 페이지를 새로 로드하는게 아닌 일부만을 로드하는 기법 👀 XMLHttpRequest(XHR) 객체 현재 대부분의 모던한 브라우저는 XHR객체를 내장하고 있다. 이 객체를 사용하면 웹페이지가 전부 로딩된 후에도 서버에 데이터를 요청하거나 서버로부터 데이터를 전송받을수 있습니다. 즉 AJAX 비동기 통신을 위해서XHR 객체를 사용해 서버에 데이터를 요청(Request..

서버: 접속자가 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요청을 하는 코드 // 이렇게..

DOM(Document Object Model)은 XML이나 HTML 문서에 접근하기 위해 브라우저에 내장되어 있는 API 입니다. 기존에 자바스크립트는 HTML 조작에 특화된 언어라고 알고만 있었는데 과연 어떻게 자바스크립트는 HTML를 조작할 수 있는지 생각해 본 적이 없었다. 기본적으로 자바스크립트 문법에는 , 와 같은 태그요소들을 해석하는 문법이 없다. 따라서 자바스크립트가 HTML을 해석하고 조작하기위해서 자바르크립트가 읽을 수 있게 Object 형태로 정리한게 DOM 입니다. EX) 안녕하세요 - 위와 같은 HTML 문서가 있을때 브라우저에서 이 HTML문서를 읽고 DOM을 만들게 됩니다. var document = { div태그 : { style : {color : 'red', width :..

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

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

라이브러리 링크 차트 라이브러리 chart.js( https://www.chartjs.org/docs/latest/getting-started/ ) Amchart.js ( https://www.amcharts.com/ ) 캐러셀 라이브러리 Slick( https://kenwheeler.github.io/slick/ ) SCROLL 라이브러리 Scroll Reveal - ( https://scrollrevealjs.org/ ) Animate On Scroll - ( https://michalsnik.github.io/aos/ ) 페이지 라이브러리 https://github.com/alvarotrigo/fullpage.js → 예시사이트 ( https://alvarotrigo.com/fullPage/ko/#..

JQuery란? javascript를 사용함에 있어 좀더 편리하도록 하는 오픈소스 라이브러리 입니다. 하지만 인터넷 브라우저가 IE가 대부분 이던 과거와는 달리 오늘날은 chrom과 같은 브라우저 에서 더 우수한 렌더링 엔진을 탑재하였고 빠른 버전 업그레이드를 위해 웹 표준을 신속하게 반영하였습니다. 그 결과 제이쿼리와 같은 무거운 라이브러리를 쓰지 않고도 양질의 웹 어플리케이션을 구현할수 있게 되었습니다. 하지만 개발자들 사이에서 위상이 예전과 같지 않다고 해도 여전히 사용률은 높고 기존에 jQuery로 작성된 웹 어플리케이션 또한 많은 상황 입니다. 따라서 제이쿼리의 기초적인 문법과 축약함수들을 알아둘 필요는 있다고 생각합니다. [제이쿼리 기초문법] 1. 셀렉터 //바닐라 js document.get..