어제 오늘 내일

체크박스는 2개의 상태를 가집니다. checked unchecked 이번 포스팅에서는 체크박스의 상태를 확인하는 예제를 정리해보았습니다. 체크박스의 체크여부 확인하기 체크하세요 function is_checked() { // 1. checkbox element를 찾습니다. const checkbox = document.getElementById('my_checkbox'); // 2. checked 속성을 체크합니다. const is_checked = checkbox.checked; // 3. 결과를 출력합니다. document.getElementById('result').innerText = is_checked; } checkbox가 선택되었는지 확인하기 위해서 checkbox element를 선택하고,..

HTML의 태그를 이용하여 가로줄을 긋고, CSS를 활용하여 가로줄의 가로 세로 길이, 색깔, 모양 등을 변경하는 방법을 정리하였습니다. HTML의 hr 태그는 Horizontal Rule의 약자로, HTML에서 가로줄을 생성해주고, 문단을 구분하는데 사용됩니다. 단순히 HTML에 태그를 추가하여 가로선을 그었습니다. 에 스타일 적용하기 HTML의 에 스타일을 적용하는 방법은 2가지가 있습니다. HTML 속성 사용하기 - align, color, size, width, noshade CSS 적용하기 HTML 속성을 사용하여 스타일을 적용하는 것은 편리합니다. 하지만, HTML5 이후, 이 속성들은 대부분 deprecated되었거나, standard가 아닌 경우가 대부분입니다. 따라서, 이 속성들을 사용하..

이번에는 CSS를 사용하여 버튼(element)을 숨기는 방법과 사용자 이벤트가 발생하였을 때 Javascript를 사용하여 버튼을 숨기고 다시 보일수 있는 방법(토글)을 정리하였습니다. [CSS] 버튼 숨기기 display : none; visibility : hidden; [Javascript] 버튼 숨기기, 보이기 (토글) display 속성 visibility 속성 1. [CSS] 버튼 숨기기 display : none; #btn2 { display : none; } 위 예제에는 원래 3개의 버튼이 존재 합니다. (버튼1, 버튼2, 버튼3) display: none; display 속성값을 none으로 설정하면 해당 버튼은 화면에서 사라지고, 더 이상 화면에서 공간을 차지하지 않게 됩니다. 이 예..

지난 번에는 Javascript로 localStorage를 다루는 방법을 알아보았습니다. [Javascript] localStorage 사용법 (읽기, 쓰기, 삭제, 키목록 등) [Javascript] localStorage 사용법 (읽기, 쓰기, 삭제, 키목록 등) 이번에는 localStorage 사용법을 정리해보았습니다. localStorage란? localStorage에 아이템 추가, 읽기 localStorage에 객체, 배열 저장하기 localStorage에 값 삭제하기 localStorage에 값 전체 삭제하기 localS.. hianna.tistory.com [Javascript] localStorage 만료 시간 설정하기 [Javascript] localStorage 만료 시간 설정하기 lo..

localStorage는 세션이 변경되어도 데이터 정보가 그대로 유지됩니다. 이번에는 localStorage 데이터에 만료 시간을 설정하고, 일정 시간이 지나면, 데이터를 이용할 수 없도록 하는 방법을 알아보도록 하겠습니다. Step1. 데이터 저장 시 만료일자 설정하기 // 만료 시간과 함께 데이터를 저장 function setItemWithExpireTime(keyName, keyValue, tts) { // localStorage에 저장할 객체 const obj = { value : keyValue, expire : Date.now() + tts } // 객체를 JSON 문자열로 변환 const objString = JSON.stringify(obj); // setItem window.localSt..

이번에는 localStorage 사용법을 정리해보았습니다. localStorage란? localStorage에 아이템 추가, 읽기 localStorage에 객체, 배열 저장하기 localStorage에 값 삭제하기 localStorage에 값 전체 삭제하기 localStorage의 아이템 갯수 구하기 localStorage의 key 이름 찾기 전체 key, value 가져오기 localStorage란? localStorage를 사용하면, 브라우저에 key-value 값을 Storage에 저장할 수 있습니다. 저장한 데이터는 세션간에 공유됩니다. 즉, 세션이 바뀌어도 저장한 데이터가 유지됩니다. 그럼 이제부터 localStorage를 사용하는 방법을 알아보겠습니다. setItem() - key, value..

이번에는 Javascript를 사용하여 사용자가 버튼 클릭시 특정 노드를 복사하고, 그 노드를 복사하는 방법을 정리하였습니다. cloneNode() Javascript에서 노드를 복사할 때는 cloneNode() 라는 함수를 사용합니다. node.cloneNode(); node.cloneNode(deep); 파라미터 deep : optional. true/false 값을 넣어준다. 해당 노드의 자식 노드까지 복사하려면 true 해당 노드만 복사하려면 false 리턴값 cloneNode 복사한 새로운 노드를 리턴한다. 노드 복사하기 - cloneNode() 만나서 반가워요 .red-border { border : 1px solid red; height : 1em; } function copyDiv() { ..

Javascript에서 함수를 주기적으로 반복적으로 실행하고 종료하기 위해서는 다음의 함수를 사용합니다. setInterval() clearInterval() setInterval() setInterval() 함수는, 일정시간 주기로, 반복적으로 함수나 코드를 수행하는 함수입니다. 이 함수는 다음의 매개변수를 입력 받습니다. function : 주기적, 반복적으로 실행할 함수 delay millisecond (optional) : 시간 간격 (밀리세컨드 단위), 1초=1000밀리세컨드 function parameters (optional) : 첫번째 파라미터의 함수에 전달할 파라미터를 나열합니다. ex) param1, param2, param3.... 이 함수는 다음 값을 리턴합니다. intervalID..

Javascript에서 정의한 Object를 그대로 출력하면 아래와 같이 [object Object] 값이 출력됩니다. const obj = { x : 'x', y : 'y', z : { z1: 'z1' } }; document.write(obj); JSON.stringify() 함수 사용하기 만약, 객체(Object)의 값을 출력하고 싶으면, JSON.stringify() 함수를 사용하여 객체를 JSON 문자열로 변환해 주어야 합니다. JSON.stringify() 함수에 대한 자세한 설명은 지난 포스팅을 참조하세요. [Javascript] 객체를 JSON으로 변환하기 [Javascript] 객체를 JSON으로 변환하기 Javascript에서 사용하는 객체(Object)를 네트워크를 통해 전송하려면 어..

postgres에서 테이블을 생성하기 위해서는 그전에 database를 생성해야 합니다. 1. database 생성하기 create database my_db; my_db 라는 데이터베이스를 생성하였습니다. 2. database 확인하기 select datname from pg_database; 등록된 모든 database의 이름을 조회합니다. 3. database 이름 변경하기 ALTER DATABASE my_db RENAME TO new_my_db; my_db 라는 database를 new_my_db 라는 이름으로 변경하였습니다. 4. database 삭제하기 drop database my_db; my_db 데이터베이스를 삭제하였습니다. my_db 데이터베이스가 없을 경우 ERROR: 오류: "my_..