목록Ajax (2)

위어드섹터 공식 블로그

[ 프론트엔드 / css, jquery ] 버튼 애니메이션

프로젝트를 진행하면서 버튼에 마우스를 올리면, 최상단에 있는 버튼이 오른쪽 → 왼쪽으로 이동하면서 아래에 있는 버튼이 보이도록 구현해야 했습니다. 무슨 말인지 잘 이해가 안 가시죠? 아래 동영상으로 확인해주세요ㅎㅎ :) 1. 시도했던 방법 처음에 저는 아래와 같이 스타일을 주었습니다. a. 회색 버튼 위에 노란색 버튼을 position: absolute를 주어 회색 버튼 위에 배치합니다. b. 노란색 버튼에 마우스가 hover하거나, focus가 가면 노란색 버튼의 left 값을 -101% 를 주어 왼쪽으로 이동하도록 합니다 자연스럽게 이동되도록 transition 효과도 주었습니다:) 이렇게 했더니 노란색 버튼이 왼쪽으로 이동하면서 마우스가 노란색 버튼에 hover 되지 않고, 회색 버튼에 hover ..
Developing/프론트엔드 2022. 8. 8. 19:47
[프론트엔드 & 백엔드 with Vanilla JS] Vanilla JS로 Ajax를 어떻게 구현할 수 있나요?

AJax(JQuery api)를 서버와 통신할 때 사용해보긴 했지만, 그 원리 및 통신의 과정을 몰랐습니다. 그래서 이 부분을 더 공부해보려고 AJax를 Vanilla JS로 구현해보았습니다. MDN 문서로 ajax와 관련된 문서를 찾아보니 아래의 과정을 거치는 것을 알게 되었습니다. 첫째로, XMLHttpRequest 라는 web api를 이용하여 통신의 위한 객체를 만듭니다. 둘째로, 클라이언트에서 아래의 a,b,c를 고려하여 서버에 요청을 보냅니다. a. 어떤 서버(도메인)와 연결하는가?, b. 어떤 http method를 이용하는가? (ex. GET, POST etc) c. 브라우저에서 서버에서 받을 문서를 해석할 준비를 할 수 있게끔 어떤 문서의 타입을 요구하는가? 출처: https://deve..
Developing 2022. 7. 5. 12:12
이전 Prev 1 Next 다음