Recent Posts JavaScript / 다음(카카오) 우편번호 검색 서비스 사용하는 방법 다음(카카오)에서 우편번호 검색 서비스를 무료로 제공한다. 팝업 창에 Powerd by kakao가 표시되고, 기본 모양이 투박하다는 단점이 있지만, 빠르게 주소 검색 서비스를 구현해주는 고마운 서비스임에는 틀림이 없다. 자세한 사용법은 아래 링크에 있다. https://postcode.map.daum.net/guide 너무 상세한 설명이라 이해가 어렵다면, 최소한의 코드로 만들고, 필요한 것을 하나씩 추가하는 게 좋다. 기본 예제와 작동 방식 […] Python / 자료형 / 숫자 숫자 자료 만들기 숫자 자료는 따옴표 없이 숫자만 넣어서 만든다. 소숫점이 없으면 정수형 자료, 소숫점이 있으면 실수형 자료가 만들어진다. 정수형 자료의 타입은 int, >>> a = 100 >>> print( type( a ) ) <class 'int'> 실수형 자료의 타입은 float이다. >>> a = 100.1 >>> print( type( a ) ) <class […] jQuery / Selector / :checked - 체크박스, 라디오 버튼에서 체크한 요소 선택하는 선택자 :checked는 체크박스(checkbox)에서 선택한 요소, 라디오 버튼(radio)에서 선택한 요소, 선택 목록(select)에서 선택한 요소(option)를 선택하는 선택자이다. 예제 1 - 라디오 버튼 색을 선택하면, div 요소의 배경색을 바꾼다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> * { font-family: Consolas, monospace; font-size: 20px; } div { margin: 30px 0px; padding : 30px […] jQuery / Selector / :selected - select에서 선택된 option를 선택하는 선택자 :selected는 select에서 선택된 option를 선택한다. :selected 대신 :checked를 사용해도 된다. 색을 선택하면 그 값을 div 요소의 배경색으로 만든다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> * { font-family: Consolas, monospace; font-size: 20px; } div { margin: 30px 0px; padding : 30px 60px; border: 5px solid #dadada; } </style> […] Python / str() / 자료형을 문자열로 변환하는 함수 str()은 데이터 타입을 문자열로 변환하는 함수이다. >>> a = 1 >>> type( a ) <class 'int'> >>> print( a ) 1 >>> b = str( a ) >>> type( b ) <class 'str'> >>> print( b ) 1 >>> a = 1.23 >>> type( a ) <class 'float'> >>> print( […] Python / float() / 자료형을 실수로 변환하는 함수 float()는 데이터 타입을 실수로 변경하는 함수이다. 정수를 실수로 변환한다. 정수일 때는 소숫점 아래가 없지만, 실수일 때는 있다. >>> a = 1 >>> type( a ) <class 'int'> >>> print( a ) 1 >>> b = float( a ) >>> type( b ) <class 'float'> >>> print( b ) 1.0 숫자로 […] Python / 자료형 / 문자열(string) 문자열 자료 만들기 문자열(string) 자료는 큰 따옴표 또는 작은 따옴표로 감싸서 만든다. >>> str_a = "Hello" >>> print( str_a ) Hello >>> str_a = 'Hello' >>> print( str_a ) Hello 숫자여도 따옴표로 감싸면 문자열이 된다. >>> str_a = "123" >>> type( str_a ) <class 'str'> 문자열에 따옴표 포함하기 문자열에 작은 […] JavaScript / Object / String.toUpperCase(), String.toLowerCase() .toUpperCase() 문법 .toUpperCase()는 대문자로 변환하는 메서드이다. 예를 들어 다음은 ABC를 반환한다. 'abc'.toUpperCase() 예제 1 - 대문자로 변환하여 출력 문자열 Aaa를 대문자로 변환하여 출력한다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> * { font-family: Consolas, monospace; font-size: 20px; } </style> </head> <body> <script> document.write( 'Aaa'.toUpperCase() ); </script> </body> </html> […] Visual Studio Code / 대문자를 소문자로, 소문자를 대문자로 일괄 변경하는 방법 많은 텍스트를 전부 대문자로 바꾸거나 소문자로 바꿔야 할 때가 있다. 비쥬얼 스튜디오 코드에는 그 작업을 위한 기능을 포함하고 있다. 변환하려는 텍스트를 선택한다. Ctrl + Shift + P를 누른다. 원하는 것을 선택하고 엔터 키를 누른다. 명령에 따른 결과는 다음과 같다. Transform to Lowercase : 모두 소문자로 바꾼다. Transform to Uppercase : […] JavaScript / 사업자등록번호, 전화번호 유효성 검사하는 방법 사업자등록번호 유효성 검사 사업자등록번호를 입력하고 전송할 폼을 만들고, 버튼 클릭 시 checkBrn() 함수를 호출한다. <input type="text" name="brn" id="brn"> <input type="button" value="Check" onclick="checkBrn();"> 메시지를 출력할 공간을 만든다. <p id="checkBrnMessage"></p> 입력한 값을 변수 brn에 담는다. var brn = document.getElementById( "brn" ).value; 정규표현식 /^[0-9]{3}-[0-9]{2}-[0-9]{5}$/를 이용하여 유효성 검사를 한다. 000-00-00000 형식이 맞으면 OK, 그렇지 […] CSS / 유튜브 동영상 반응형으로 삽입하는 방법 유튜브 영상을 블로그나 홈페이지에 넣을 때 보통 iframe을 사용한다. 코드는 유튜브 영상 공유에서 [퍼가기]를 클릭하여 구할 수 있다. 아래와 같은 코드인데, 고정폭이다. 즉 웹브라우저의 가로폭이 커지든 작아지든 가로폭이 일정하다. <iframe width="560" height="315" src="https://www.youtube.com/embed/ybhXVSAdIRE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 이를 반응형으로 만들고 싶다면 아래처럼 한다. 16:9 크기의 div로 감싸고, […] CSS / 마우스 오버 시 텍스트 나오게 하는 방법 CSS로 특정 요소에 마우스를 올렸을 때 보이지 않던 특정 요소가 보이게 할 수 있다. 아래는 문단에 마우스를 올렸을 때 div 요소가 나오게 하는 예제이다. div 요소 안에 텍스트가 있지만, 텍스트가 아닌 이미지 등 다른 것도 가능하다. 마우스 올렸을 때 모양 만들기 마우스를 올렸을 때 보이길 원하는 모양을 먼저 만든다. .jb-title에 […] CSS / 구분선 만들기 글의 완급 조절, 내용 전환 등을 위해 구분선을 사용하는 경우가 많다. 선은 여러 가지 방식으로 만들 수 있는데, 보기 좋게 꾸미는 것은 CSS로 한다. 아래는 div 태그에 모양을 입혀서 구분선을 만드는 몇 가지 예제이다. 예제 문서 <div class="jb-division-line"></div>를 꾸며서 구분선을 만들 것이다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> […] JavaScript / Object / Date / 당월 말일 구하는 방법 다음은 2022년 3월 1일이다. Date( 2022, 2, 1 ) 날짜 자리에 0이 들어가면 전달 말일이다. 즉 다음은 2022년 2월 28일이다. Date( 2022, 2, 0 ) 이를 이용하여 현재 달의 말일을 구할 수 있다. 다음은 오늘 날짜를 출력하는 것이고... <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: […] JavaScript / Object / Date 현재 날짜와 시간 가져오기 Date()로 현재 날짜와 시간을 가져온다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; font-size: 20px; } </style> </head> <body> <script> var today = new Date(); document.write( '<p>' + today + '</p>' ); </script> </body> </html> 년, 월, 일, 요일 추출하기 […] PHP / 당월 초일, 당월 말일 구하는 방법 당월 초일과 당월 말일은 date() 함수를 이용하여 구할 수 있다. 초일은 항상 1일이므로, 아래처럼 날짜에 01을 넣어서 구한다. date( 'Y-m-01' ) 말일은 날짜 자리에 t를 넣어서 구한다. date( 'Y-m-t' ) 다음은 당월 초일과 말일을 출력하는 간단한 예이다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> * { font-family: Consolas, […] HTML / input / number / 숫자 입력하는 양식 input type="number" input 태그의 type을 number로 하면 숫자만 입력할 수 있다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> * { font-family: Consolas, monospace; font-size: 24px; } </style> </head> <body> <form method="get" action=""> <p><input type="number" name="number" placeholder="Input number"></p> <p><input type="submit" value="Submit"></p> </form> </body> </html> 외관 상으로는 차이가 없으나... 숫자 […] SQL Server / Query / JOIN JOIN으로 여러 개의 테이블의 데이터를 연결하여 조회할 수 있다. 다음과 같은 두 개의 테이블이 있다고 하자. country에는 나라의 이름이, city에는 도시의 이름이 있다. INNER JOIN country 테이블의 country_no와 city 테이블의 country_no가 같은 것을 연결한다. 두 테이블에 모두 존재하는 데이터를 출력한다. select country.country_name, city.city_name from country inner join city on country.country_no […] SQL Server / Query / ROLLUP 부분합 등을 구하고 싶다면 ROLLUP을 사용한다. 기본 다음과 같은 sales 테이블이 있다고 하자. team은 소속, man은 직원, sales는 판매액이다. select * from sales ; 다음과 같이 하면 직원별 소계, 팀별 소계, 전체 합계가 출력된다. select id, team, man, sum( sales ) as sales from sales group by rollup ( team, […] SQL Server / 포트 변경하는 방법 SQL Server의 기본 포트는 1433이다. 보안을 비롯하여 여러 가지 이유로 포트를 변경해야 할 경우가 있다. SQL Server의 포트를 1433에서 다른 것으로 변경하는 방법은 다음과 같다. [SQL Server 구성 관리자]를 연다. [SQL Server 네트워크 구성]에서 인스턴스를 선택한다. [TCP/IP]를 더블 클릭하거나, 마우스 우클릭 후 [속성]을 클릭한다. [IP 주소] 탭에서 [IPAll]의 TCP 포트를 […] SQL Server / 연산자 / 비교 연산자, 논리 연산자 예제로 사용한 데이터베이스는 AdventureWorks이다. 같다 HumanResources.Employee 테이블에서 BusinessEntityID가 10인 데이터를 출력한다. select * from HumanResources.Employee where BusinessEntityID = 10 ; 같지 않다 HumanResources.Employee 테이블에서 BusinessEntityID가 10보다 작거나 큰, 즉 같지 않은 데이터를 출력한다. select * from HumanResources.Employee where BusinessEntityID <> 10 ; <> 대신 !=를 사용해도 된다. select * from HumanResources.Employee where […] SQL Server / Query / SELECT / 데이터 조회 예제로 사용한 데이터베이스는 AdventureWorks이다. SELECT로 원하는 데이터를 조회한다. SELECT FROM 기본 SELECT 뒤에는 조회할 열 이름을, FROM 뒤에는 조회할 테이블 이름을 입력한다. 모든 열을 조회한다면 *를 사용한다. HumanResources.Employee 테이블의 모든 열을 조회한다. select * from HumanResources.Employee ; HumanResources.Employee 테이블에서 BusinessEntityID, JobTitle, BirthDate, HireDate를 조회한다. select BusinessEntityID, JobTitle, BirthDate, HireDate from HumanResources.Employee […] SQL Server / SSMS / IntelliSense / 자동 완성 기능 사용하는 방법, 설정하는 방법 텍스트 에디터의 경우 코드의 일부분을 입력했을 때 그 문자열을 포함한 코드 리스트를 보여주는 기능이 있다. 이러한 자동 완성 기능을 SSMS에서도 제공하고 있고, IntelliSense라고 한다. 원하는 것을 쉽게 찾고, 오타를 줄일 수 있는 유용한 기능이다. 예를 들어 from 뒤에 문자열을 입력하면 그와 관련된 것이 나오고, 상하 화살표를 이용해 선택한다. 선택한 것을 […] SQL Server / SSMS / 도움말 추가하는 방법 SQL Server에 관한 많은 자료가 온라인에 있지만, 웹에서 검색하는 것이 불편하거나 불가능할 수 있다. 그런 경우 SSM에 도움말을 추가하여 쉽게 정보를 얻을 수 있다. 기본 설치를 했다면 도움말이 전혀 없으므로, 수동으로 추가해야 한다. SSMS를 실행하고 [도움말 - 도움말 콘텐츠 추가 및 제거]를 클릭한다. 추가하려는 도움말을 선택한다. 선택한 도움말을 다운로드할 때 […] SQL Server / SSMS / 메모 1433 이외의 포트로 접속하는 방법 SQL Server 기본 포트는 1433이다. 기본 포트일 때는 IP나 도메인만으로 접속가능한데, 포트를 바꾸었다면 명시해주어야 한다. 예를 들어 IP가 123.123.123.123, 포트가 12345로라면... 123.123.123.123,12345 특이하게 :가 아니라 ,를 쓴다. SSMS에서 대문자를 소문자로, 소문자를 대문자로 만드는 방법 SQL 구문은 대소문자를 구분하지 않지만 보통 대문자로 표현한다. Shift를 누르거나 Caps […]
