SeaPlus

[기능 구현] 이 버튼효과는 보기에는 약간 복잡해 보이지만 가상선택자 after 와 before을 통해서 간단히 만들수 있다. 구체적인 순서는 1. 버튼 구현 a 태그로 버튼모양 구현 2. after, before을 이용해 border의 모양 바꾸기 a::before 가상선택자로 기존의 a 태그보다 x축으로 넓이가 좀더 길고 y축으로 높이가 좀더 짧은 가상요소를 생성한다. a::after 가상선택자로 기존의 a 태그보다 Y축으로 높이가 좀더 길고 x축으로 넓이가 좀더 짧은 가상요소를 생성한다. 3. transition과 transform 활용 -transform의 scale을 줄이는 효과 를 적용하고 transition으로 부드럽게 사라지도록 한다. after요소는 x축 넓이가 커서 결과적으로 borde..

[구현 효과] 360도 회전하는 원형 모양의 요소 3개를 생성한다. 약간 찌그러진 원형의 모양은 Fancy Border Radius Generator 라는 사이트를 이용해 쉽게 구현할 수 있다. [ https://9elements.github.io/fancy-border-radius/#49.69.55.31--. ] Fancy Border Radius Generator Generator to build organic shapes with CSS3 border-radius 9elements.github.io [HTML] Loading... [css] * { box-sizing: border-box; margin: 0; padding: 0; } body { display: flex; justify-conten..

[구성효과] 1. text 색상이 #000 -> #fff로 바뀐다. 2. 마우스가 올라갈 시 버튼 배경의 painting 효과가 나타난다. 두개의 효과 다 transition 을 사용해 구현할수 있고, painting 효과는 넓이가 0%->100% 로 변환 하게 하면 된다. painting 효과는 img 파일. [HTML] Read More Read More [css] @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap"); * { box-sizing: border-box; margin: 0; padding: 0; font-family: "Poppins", sans..

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