반응형

퍼블리셔 8

[자바스크립트] input value 에 JSON으로 데이터 전달하기

input 태그에 에 JSON으로 데이터 전달 input 태그를 사용하다 보면 value 값으로 데이터를 한 번에 여러개를 전달하는 일이 생깁니다. 그냥 일차원 적으로 value="값1, 값2, 값3" 이렇게 생각을 할 수도 있는데, 이렇게 코딩을 하면 value 값을 자바스크립트로 뽑아낼 수는 있으나.. 비효율적인 코딩 입니다. 한 번에 여러 데이터를 전달하고 싶다면, Key : Value 로 이루어진 오브젝트 형인 JSON 형태로 전달을 하는게 깔끔합니다. JSON JSON은 Key : Value 로 구성하여 만듭니다. { key1 : value1, key2 : value2, key3 : value3, key4 : value4, key5 : value5 } JSON 데이터 전달하기 let jsonTe..

[CSS/html] 테이블 헤드 고정하고 스크롤 하는 방법. table with fixed thead and scrollable tbody

테이블 헤드 고정 바디 스크롤 테이블을 만들면서 데이터 리스트들을 뿌려줄때 페이징 처리가 아니라, 스크롤 형태의 테이블을 만들고 싶은데, 일반적으로 만들면 테이블 전체에 스크롤이 적용됩니다. 아래의 방법으로 만들면 헤드부분은 고정되며 리스트로 뿌려진 데이터들만 스크롤이 적용됩니다. 모든 브라우저 공통 작동하는 코드 단점이라면 css 코드가 길어진다는 단점 CSS HTML Table Header 1 Table Header 2 Table Header 3 Data1111111111111111111111111 Data Data Data Data2222222222222222222222222 Data Data Data Data3333333333333333333333333 Data Data Data Data Data..

프로그래밍/CSS 2020.06.30

input 입력시 천 단위마다 자동으로 콤마(,) 입력

자동으로 콤마(,) 입력 input 태그에 숫자를 입력시에 천 단위마다 자동으로 콤마를 찍어주는 팁입니다. "common.js" 라는 파일을 만들어 이렇게 전역적으로 사용되는 파일들을 작성하고 사용하시면 더 깔끔하게 사용하실 수 있어요. HTML 작성 위의 input 태그처럼 작성해주고 onkeyup 속성으로 스크립트를 호출합니다. script (common.js) function inputNumberFormat(obj) { obj.value = comma(uncomma(obj.value)); } function comma(str) { str = String(str); return str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,'); } function uncomma(s..

[jQuery] 체크박스 값(checkbox value) 가져오기

Checkbox 체크박스에 제이쿼리나 자바스크립트로 이벤트를 처리해야할 경우가 종종 있다. checked 여부 확인하기 id로 확인하기 $('input:checkbox[id="checkbox_id"]').is(":checked") == true name 으로 확인하기 $('input:checkbox[name="checkbox_name"]').is(":checked") == true $('input[name="checkbox_name"]').is(":checked") 제이쿼리 prop() 메소드 $('#checkboxId').prop("checked"); checked 처리 하기 개별 처리 $('input:checkbox[id="checkbox_id"]').attr("checked", true); 전체 처..

[CSS] checkbox 사이즈 조절(네모 크기 늘리기)

checkbox 사이즈(크기) 조절 방법 첫 번째 방법 input[type=checkbox] { -ms-transform: scale(2); /* IE */ -moz-transform: scale(2); /* FF */ -webkit-transform: scale(2); /* Safari and Chrome */ -o-transform: scale(2); /* Opera */ padding: 10px; } 두 번째 방법 input[type="checkbox"]{ width: 30px; /*Desired width*/ height: 30px; /*Desired height*/ cursor: pointer; -webkit-appearance: none; appearance: none; } 세 번째 방법 in..

프로그래밍/CSS 2020.06.20

우분투(Ubuntu)에 아파치(웹서버), 톰캣(Tomcat), JDK(SDK) 설치하기

우분투(Ubuntu)에 아파치(웹서버), 톰캣(Tomcat), JDK(SDK) 설치하기 AWS 우분투 설치 인스턴스 : Ubuntu Server 18.04 LTS 현재 계정에서 root 권한을 이용하여 명령어를 실행할 때에는 모든 명령어 앞에 "sudo" 를 붙여주시기 바랍니다. 예 sudo apt-get update 아파치(Apache) 웹서버(Web Server) 설치 AWS 보안 그룹에서 HTTP 포트 80 추가 되어 있는지 확인 패키지 업데이트 apt-get update 아파치 설치 apt-get install apache2 설치확인 apache2 -v 시작 service apache2 start 정지 service apache2 stop 재시작 service apache2 restart 아파치 ..

프로그래밍/AWS 2020.06.18

[CSS] 테이블(table)에 스크롤 기능 만들기

테이블 스크롤 기능 table 태그를 만들어서 작업하다보면 반응형에서 문제를 일이큽니다. 크기는 줄어드는데, 테이블의 데이터들 때문에 넓어지고나 늘어나거나 길어지곤 합니다. 이럴 때 테이블에 가로 또는 세로 스크롤 기능을 사용하면 됩니다. 순서 div 하위에 table 생성 div에 width 값이나 height 값을 지정 overflow 속성을 사용하여 스크롤 여부 속성을 지정 필수 : table 에 white-space:nowrap; 적용 물론 테이블 마다 사용법이 다르겠지만 , 일반적으로 정보 전달을 위한 테이블 요소인데, 정보의 내용이 많다면 nowrap를 사용하여 줄바꿈을 막아주어야 테이블이 깨지지 않고 올바르게 보여지게 됩니다. /*해당 범위를 벗어나지 않으면 그대로 표시하고, 벗어나면 스크롤..

프로그래밍/CSS 2020.06.14

[Database] 데이터베이스의 정의

데이터와 정보 데이터 일련의 작업을 목적으로 수집된 의미있는 값 연구나 조사 등의 바탕이 되는 재료 정보 뜻을 가지는 자료 특정한 목적의 의사결정을 위하여 가공한 형태 일정한 형식으로 표현한 모든 종류의 자료 또는 지식 파일시스템 정의 데이터를 파일에 저장하고, 파일을 수정, 삭제, 검색하는 기능을 제공하여 사용자가 파일을 손쉽게 이용할 수 있도록 지원하는 프로그램. 특징 각각의 응용 프로그램은 데이터를 고유의 형식에 맞추어 관리 응용 프로그램마다 독립적인 파일을 관리 단점 데이터가 중복되어 저장된다. 여러 파일에 중복되어 저장된 데이터가 변동될 때, 일치시키기 어렵다. 프로그램에 종속된 데이터를 다른 목적의 프로그램에서 사용하기 어렵다. 데이터 보안을 유지하기 어렵다. 데이터베이스 도입 배경 파일 시스..

반응형