Recent Posts 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 […] SQL Server / 스키마 / 만들기, 조회하기, 수정하기, 삭제하기 스키마(Schema)를 이용하여 테이블을 분류하고 권한 관리를 할 수 있다. 스키마 만들기 a라는 이름의 스키마를 만든다. create schema a; 스키마 조회하기 스키마 정보를 출력한다. select * from sys.schemas; 테이블 만들기 스키마 지정 없이 테이블을 만들면 dbo 스키마가 붙는다. create table client ( id int ); 스키마를 지정하고 만들면, 그 스키마에 테이블이 […] SQL Server / 열 / 만들기, 삭제하기, 수정하기, 조회하기 열 정보 조회하기 방법 1 client 테이블의 열의 모든 정보를 조회한다. select * from information_schema.columns where table_name = 'client'; client 테이블의 열의 특정 정보만 조회한다. select column_name, ordinal_position, data_type from information_schema.columns where table_name = 'client'; 방법 2 execute sp_columns @table_name = 'city'; 열 추가하기 client 테이블에 client_name 열을 추가한다. 테이터 […] SQL Server / SSMS / 테이블을 다시 만들어야 하는 변경 내용 저장 사용 안 함 설정 변경하는 방법 SSMS로 테이블 작업을 할 때 다음과 같은 메시지와 함께 저장이 되지 않는 경우가 있다. 변경 내용을 저장할 수 없습니다. 변경 내용을 적용하려면 다음 테이블을 삭제하고 다시 만들어야 합니다. 다시 만들 수 없는 테이블을 변경했거나 [테이블을 다시 만들어야 하는 변경 내용 저장 사용 안 함] 옵션을 설정했습니다. 테이블 열의 순서를 변경하는 […] SQL Server / 외부 접속 허용하는 방법 SQL Server는 보통 Windows Server에 설치하게 되는데, 외부에서 접속하기 위해서는 SQL Server가 사용하는 1433 포트를 열어줘야 한다. 설정은 [고급 보안이 포함된 Windows Defender 방화벽]에서 한다. SQL Server의 기본 포트는 1433이다. 가능하다면 보안을 위해 다른 포트로 변경하는 것이 좋다. 별도의 방화벽에서 포트 포워딩을 할 수도 있고, 기본 포트를 변경할 수도 있다. […] SQL Server / 샘플 데이터베이스 AdventureWorks 설치하는 방법 만약 공부에 필요한 샘플 데이터베이스가 필요하다면 Micrososft에서 제공하는 AdventureWorks를 사용하자. AdventureWorks 샘플 데이터베이스 페이지에 접속하여 백업 파일을 다운로드한다. SSMS에서 [데이터베이스]를 선택하고... 마우스 우클릭 후 [데이터베이스 복원]을 클릭한다. [디바이스]를 선택하고, 찾아보기 아이콘을 클릭한 후... [추가]를 클릭하고... 다운로드한 파일을 선택하고 [확인]을 클릭한다. [확인]을 클릭하면... 가져오기가 완료된다. 가져온 데이터베이스는 [데이터베이스]를 확장하여 볼 수 […] MariaDB / Procedure 예제로 사용한 데이터베이스는 employees이다. Procedure Procedure를 이용하면 여러 쿼리를 한 번에 실행할 수 있다. 기본 예제 Procedure 만들기 delimiter를 다른 것으로 변경한다. MariaDB [employees]> delimiter ## create procedure로 procedure를 만든다. procedure 이름 뒤에 괄호에는 매개변수가 들어간다. p_departments라는 이름의 매개변수가 없는 Procedure이다. departments 테이블의 모든 데이터를 출력한다. MariaDB [employees]> create procedure p_departments() […] PHP / addslashes(), stripslashes() addslashes() 작은 따옴표, 큰 따옴표, 백슬래시 앞에 백슬래시를 추가한다. 즉, PHP 'PHP' "PHP"를 PHP \'PHP\' \"PHP\"로 변경한다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>PHP</title> <style> * { font-family: "Consolas", monospace; font-size: 36px; } </style> </head> <body> <form action="" method="post"> <input type="text" name="memo"> <input type="submit" value="Submit"> </form> <p><?php echo $_POST[ […] CKEditor 5 / 설정하고 사용하는 방법 CKEditor는 JavaScript 기반의 WYSIWYG 에디터이다. 어떻게 설정하고 사용하는지 간략하게 알아본다. Modern JavaScript rich text editor with a modular architecture. Its clean UI and features provide the perfect WYSIWYG UX for creating semantic content. CKEditor에는 Classic editor, Inline editor, Balloon editor, Balloon block editor, Document editor 다섯 가지의 타입이 있는데, 아래의 […] MariaDB / Query / EVENT / 만들기, 수정하기, 삭제하기 EVENT를 사용하기 위한 설정 방법 1 50-server.cnf에 다음 코드를 추가하고 MariaDB를 다시 시작한다. 영구적으로 적용된다. event_scheduler = ON 방법 2 다음과 같이 설정한다. 단, MariaDB를 다시 시작하면 OFF로 변경된다. SET GLOBAL event_scheduler = ON; 설정 상태 확인 SHOW variables LIKE 'event%'; +-----------------+-------+ | Variable_name | Value | +-----------------+-------+ | event_scheduler […] MariaDB / Query / WHERE 예제로 사용한 데이터베이스는 employees이다. WHERE를 이용하면 조건에 맞는 데이터만 추출할 수 있다. 예를 들어 다음과 같이 쿼리하면 gener가 M인 경우 1을 반환하는데... SELECT first_name, gender, gender = 'M' FROM employees LIMIT 10 ; +------------+--------+--------------+ | first_name | gender | gender = 'M' | +------------+--------+--------------+ | Georgi | M | 1 | […]
