자바스크립트 (96) 썸네일형 리스트형 [JS] 자바스크립트로 일주일 동안 보지 않기 구현(쿠키) 쿠키(Cookie) 쿠키는 문자열로 이루어진 작은 데이터 조각이며, 일반적으로 웹 서버가 클라이언트(브라우저)에게 전달하는 작은 파일입니다. 쿠키는 이름-값 쌍으로 구성되며, 이 값은 일반적으로 문자열로 표현됩니다. 브라우저에서는 쿠키를 저장하고 이를 다음 요청에서 서버로 다시 전송하여 사용자가 방문한 웹 사이트에 대한 정보를 저장하고 추적합니다. 따라서 쿠키는 웹 개발에서 매우 유용한 기술 중 하나라고 볼 수 있습니다. 자바스크립트에서 쿠키의 생성 방법과 구성요소 자바스크립트에서 쿠키를 생성하는 방법은 document.cookie 를 이용하면 됩니다. 쿠키는 보통 이름, 값, 도메인, path(접근가능경로), Expires(만료기간),secure(https 제한 유무설정) 등으로 구성되며, 이 외에도 .. [js] 참조형 변수 '객체' 에 대해 알아보자 자바스크립트를 처음 배웠을 때, 참조형 변수는 객체 하나만 존재한다고 배웠습니다. 그런데, 참조형 변수가 무엇인가에 대한 설명을 들어보면 이게 뭔 말이지 싶은 경우가 많았습니다. 그래서 이번 시간을 들여서 참조형 변수인 객체는 메모리에 어떻게 저장되는가에 대한 부분을 정리해보고자 합니다. 참조형 변수 일단 다들 알다시피 자바스크립트에서 참조형 변수는 객체(object)입니다. 객체는 여러 개의 속성(property)으로 이루어져 있으며, 이 속성은 이름(key)과 값(value)으로 구성됩니다. 그리고, 자바스크립트에서는 다양한 종류의 객체를 지원합니다. 예를 들어, 배열(array), 함수(function), 날짜(date), 정규표현식(regular expression) 등이 모두 객체입니다. 객체는.. [js] Web Speech API 를 이용해 음성인식 가능한 검색창 만들기 체험하기 및 코드 확인 - ⏺️ 클릭 시 음성녹음 동의 창이 뜨고 동의를 누르면 녹음이 시작됩니다. - 일정시간이 지나면 인식된 음성이 텍스트로 전환되어 input 창에 나타납니다. - 만일 녹음 도중에 중지하고자 한다면 🛑 버튼을 클릭하면 일정 대기 시간 없이 즉시 종료 됩니다. - 만일 여기서 실행이 안 된다면 아래 표의 우측 상단의 코드팬 로고를 클릭하면 해당 사이트에서 실행해볼 수 있습니다. HTML 삽입 미리보기할 수 없는 소스 HTML 코드 🔎 ⏺️ 🛑 JS 코드 const searchConsole = document.getElementById("search_console"); // ----- 현재 브라우저에서 API 사용이 유효한가를 검증 function availabilityFunc() {.. [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; .. [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/ 보호되어 있는 글입니다. 이전 1 2 3 4 5 6 7 ··· 12 다음
