전체 글 (367) 썸네일형 리스트형 [js] fetch 를 이용한 HTTP 요청 fetch API는 HTTP 요청을 보내고 응답을 받기 위한 메서드를 제공하는데, 이 중 GET, POST, PUT, DELETE 메서드를 이용하여 요청을 보내는 방법을 정리한다. GET 요청 GET 요청 GET 요청은 서버로부터 데이터를 가져오기 위한 메서드. GET 요청을 보내려면 fetch() 메서드에 URL을 전달하면 된다. fetch() 메서드는 Promise 객체를 반환한다. 따라서 then() 메서드를 사용하여 응답 데이터를 처리할 수 있다. fetch('https://~~') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error)); POST 요청 POST 요.. [js] 자바스크립트 아코디언(toggle 메서드를 이용한 단순 아코디언) HTML 삽입 미리보기할 수 없는 소스 HTML 제목 1 내용 1 제목 2 내용 2 제목 3 내용 3 CSS .accordion { font-family: Arial, sans-serif; width: 100%; background-color: #f6f6f6; /* 배경색 지정 */ } .accordion-item { border: 1px solid #ddd; margin-bottom: 10px; } .accordion-header { background-color: #eee; color: #333; cursor: pointer; display: flex; justify-content: space-between; padding: 10px; } .accordion-header h3 { margin: 0; .. [html/css] js 코드 없는 아코디언 "클릭하면 스르륵 답변창이 나오는 게시판?" 결과 See the Pen Untitled by youngwan2 (@youngwan2) on CodePen. HTML 제목▽ accrodionaccrodionaccrodionaccrodionaccrodionaccrodi onaccrodionaccrodionaccrodionaccrodionaccrodionaccrod ionaccrodionaccrodionaccrodionaccrodionaccrodionaccro dionaccrodionaccrodionaccrodionaccrodionaccrodionaccrod ionaccrodion 제목▽ 여기에 추가되는 답변 영역 제목▽ 여기에 추가되는 답변 영역 제목▽ 여기에 추가되는 답변 영역 CSS body { width: 100vw; } /* id *= "" 은.. [js] 카테고리 클릭 시 자동으로 따라오는 밑줄 애니메이션 만들기 결과 - 0.5x 로 각 메뉴를 클릭해 보세요. - 그 후 더 작은 x 배율로 바꿔 보세요. 브라우저 크기에 맞춰 위치가 변경되는 것을 볼 수 있습니다. HTML 삽입 미리보기할 수 없는 소스 HTML 코드 Home About Programs Products Images CSS 코드 body { background-color: mediumaquamarine; } * { list-style: none; } /* nav */ .menu_nav { position: relative; width: 100vw; text-align: center; } /* 유니크 요소 */ .menu_nav .menu_ul { min-width: 600px; } /* 각 리스트 요소 */ .menu_nav .menu_ul .men.. [js] 우주선이 지나가는 진행바(프로그래스바) 완성본(체험용) 예시 코드에 보면 로딩바가 적힌 부분이 있는데, 진행바 이다(오타). - UFO 이미지는 픽시베이에서 링크 해온거라 어느 순간 안 될 수도 있음. HTML 삽입 미리보기할 수 없는 소스 HTML 코드 스크롤 CSS 코드 * { margin: 0; box-sizing: border-box; } body { width: 100%; height: 10000px; background: linear-gradient(160deg, black, black); } h1 { width: 100%; top: 3rem; color: rgb(219, 204, 74); position: fixed; text-align: center; } /* 프로그래스 테두리 */ .progress { position: fix.. [js] 자바스크립트에서 가속도 더하는 공식 및 디바이스 기울기 이벤트/USERAgent/ 보호되어 있는 글입니다. [js] 대상 객체에 마우스 호버 시 적용되는 애니메이션 만들어보기 결과물 - 배율 0.25 추천 HTML 삽입 미리보기할 수 없는 소스 HTML 코드 성인 이신가요? 맞습니다. 아닙니다. CSS 코드 * { margin: 0; padding: 0; color: white; cursor: none; } body { background: linear-gradient(0deg, rgb(127, 131, 204), rgb(132, 33, 74)); position: relative; width: 100%; height: 100vh; overflow: hidden; } /* 모달창 전체 컨테이너 */ .modal_con { position: relative; border-radius: 5px; width: 400px; height: 200px; position: absolute.. [js] 브라우저 화면의 중간값을 구하기(중심축을 이용한 애니메이션) 결과 HTML 삽입 미리보기할 수 없는 소스 구하는 법 clientX, 와, clientY 는 유저가 현재 브라우저 화면을 바라봤을 때 시야에 들어오는 가로축과 세로축 전체를 의미한다. 또한 고정된 값이 아니라 지속적으로 변화된 값을 추적하기 때문에, 유동적이다. 또한 innerWidth 와 innerHeight 도 동일하게 유저가 인지 가능한 시야에 보이는 브라우저 내부 창의 총높이과 넓이와 동일하다. 그래서 최대값만 보았을 때 client 값과 inner 값은 서로 동일하다. 다만, 고정적인 값이기 때문에 브라우저를 새로고침하지 않는 이상 변화된 값이 브라우저에 반영되지 않는다. 이러한 특성을 이용하여, client 축의 시작점, 중간지점, 끝지점의 위치값과 inner 값의 차이를 이용하면 중간지점을.. 이전 1 ··· 31 32 33 34 35 36 37 ··· 46 다음
