CODING FACTORY

CSS / 애니메이션 / transform / 회전, 확대, 축소, 비틀기 등 형태 변형하는 속성

CSS3의 transform 속성으로 요소를 회전하거나 확대/축소하거나 비트는 등 형태를 변형할 수 있습니다. IE는 버전 10 이상부터 지원한다는 것에 주의합니다. transform / rotate transform의 rotate로 요소를 회전시킬 수 있습니다. 문법 transform: rotate( angle ) transform: rotateX( angle ) transform: rotateY( angle ) angle에는 각의 크기를 입력합니다. 단위는 deg, rad, grad, turn 등을 […]

CSS / Flex / IE에서 flex-basis 오류 해결하는 방법

Flex를 이용하여 다단 배열을 만들려고 합니다. 내용에 상관없이 같은 폭을 가진 다단 배열을 만든다면 flex-basis를 사용하는 게 편합니다. 아래는 Flex를 이용한 간단한 2단 배열입니다. box-sizing의 값을 border-box로 설정하고, flex-basis의 값을 50%로 하면 간단히 만들어집니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> * { box-sizing: border-box; } .container { […]

CSS / 이미지에 마우스 올렸을 때 확대하는 방법

이미지에 마우스를 올렸을 때 이미지가 확대되는 효과를 만들어보겠습니다. 우선 다음과 같이 이미지가 들어간 간단한 HTML 문서를 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; font-family: Consolas, monospace; } h1 { text-align: center; } img { max-width: 100%; } .a { width: 400px; margin: 0px […]

jQuery / Plugin / AOS / 스크롤하면 애니메이션 효과와 함께 나타나는 요소 만드는 라이브러리

AOS 세로로 긴 웹 페이지가 있습니다. 화면을 벗어나는 경우 스크롤하면 밑에 있는 콘텐츠를 볼 수 있습니다. 그 보여지는 콘텐츠에 애니메이션 효과를 주는 라이브러리가 AOS(Animate on scroll library)입니다. 나타나기, 회전하기, 확대하기 등 다양한 효과를 제공합니다. Fade animations fade, fade-up, fade-down, fade-left, fade-right, fade-up-right, fade-up-left, fade-down-right, fade-down-left Flip animations flip-up, flip-down, flip-left, […]

Python / PyCharm 설치하는 방법

PyCharm는 Python 개발 도구 중의 하나입니다. JetBrains에서 만든 것으로, 모든 기능이 있는 프로페셔널 에디션과, 기능의 제한이 있지만 무료로 사용할 수 있는 커뮤니티 에디션이 있습니다. 아래는 OS가 Windows인 컴퓨터에 PyCharm 커뮤니티 에디션을 다운로드하고 설치하는 방법입니다. 참고로, Python이 설치되어 있지 않아도 괜찮습니다. PyCharm에서 프로젝트를 만들 때 자동으로 Python을 다운로드 합니다. PyCharm 페이지에서 […]

MariaDB / Query / UNION, UNION ALL

UNION 또는 UNION ALL을 이용하면 여러 테이블의 데이터를 합하여 출력할 수 있습니다. 예를 들어 다음과 같은 테이블과... SELECT * FROM test_1; +-------+-------+-------+ | col_1 | col_2 | col_3 | +-------+-------+-------+ | 1 | A | 1 | | 2 | B | 1 | | 3 | C | 2 […]

MariaDB / 함수 / IF, IFNULL, NULLIF

IF 문법 IF( expression1, expression2, expression3 ) expression1가 참이면 expression2를, 거짓이면 expression3을 반환합니다. 예제 SELECT IF( 2>3, 'T', 'F' ); +---------------------+ | IF( 2>3, 'T', 'F' ) | +---------------------+ | F | +---------------------+ 2>3이 거짓이므로 F를 반환합니다. SELECT IF( 2<3, 'T', 'F' ); +---------------------+ | IF( 2<3, 'T', 'F' ) […]

MariaDB / Query / 주석

MariaDB의 쿼리문에서 주석을 만드는 방법은 세 가지가 있습니다. 한 줄 주석 한 줄 주석을 만들고 싶다면 # 또는 --를 사용합니다. 기호가 있는 다음부터 줄 끝까지가 주석이 됩니다. # Comment -- Comment 여러 줄 주석 여러 줄의 주석을 만들고 싶다면 /* */를 사용합니다. /* Comment Comment */

Microsoft SQL Server / Query / IN, NOT IN

예제로 사용한 데이터베이스는 AdventureWorks2017입니다. IN 다음은 Person.Person 테이블에서 FirstName, MiddleName, LastName을 10개 추출하는 쿼리입니다. SELECT TOP(10) FirstName, MiddleName, LastName FROM Person.Person 만약 FirstName이 Syed 또는 Sam 또는 John인 사람을 추출하고 싶다면 아래처럼 쿼리합니다. SELECT TOP(10) FirstName, MiddleName, LastName FROM Person.Person WHERE FirstName IN ( 'Syed', 'Sam', 'John' ) 물론 아래와 같이 […]

MariaDB / Query / IN, NOT IN

예제로 사용한 데이터베이스는 employees입니다. IN 예를 들어 first_name이 Georgi 또는 Parto인 직원의 목록을 추출하고 싶다면 다음과 같이 쿼리할 수 있습니다. SELECT first_name, last_name FROM employees WHERE first_name = 'Georgi' OR first_name = 'Parto' LIMIT 10; 하지만, 골라내야 하는 first_name이 더 많아진다면 쿼리가 길어집니다. 그런 경우 IN을 사용하면 쿼리를 단순하게 만들 수 […]

Microsoft SQL Server / SSMS / 다이어그램 만드는 방법

다이어그램 생성 시 아래와 같은 에러가 난다면 여기를 참고하여 해결할 수 있습니다. 보안 주체 "dbo"이(가) 없거나 이 유형의 보안 주체를 가장할 수 없거나 사용 권한이 없기 때문에 데이터베이스 보안 주체로 실행할 수 없습니다. (Microsoft SQL Server, 오류: 15517) 데이터베이스 하위에 있는 [데이터베이스 다이어그램]을 선택합니다. 마우스 우클릭 후 [새 데이터베이스 다이어그램]을 […]

MariaDB / 함수 / FIND_IN_SET / 특정 문자열의 위치를 출력하는 함수

FIND_IN_SET은 특정 문자열의 위치를 출력하는 함수입니다. FIND_IN_SET( pattern, string_list ) A, B, C, D에서 B가 몇 번째 위치하는지를 출력합니다. 두 번째에 있으므로 출력하는 값은 2입니다. SELECT FIND_IN_SET( 'B', 'A,B,C,D' ); +-------------------------------+ | FIND_IN_SET( 'B', 'A,B,C,D' ) | +-------------------------------+ | 2 | +-------------------------------+ 일치하는 문자열이 여러 개 있는 경우 첫 번째 […]

MariaDB / 함수 / ELT / 특정 위치의 문자열 출력하는 함수

ELT는 특정 위치의 문자열을 출력하는 함수입니다. ELT( N, string1, string2, string3, ... ) A, B, C, D에서 2번째의 문자열인 B를 출력합니다. SELECT ELT( 2, 'A', 'B', 'C', 'D' ); +------------------------------+ | ELT( 2, 'A', 'B', 'C', 'D' ) | +------------------------------+ | B | +------------------------------+ 지정한 위치에 값이 없는 경우 NULL을 […]

MariaDB / 함수 / LEFT, RIGHT / 문자열의 왼쪽 또는 오른쪽의 일부를 출력하는 함수

LEFT는 문자열의 왼쪽부터 일정 길이만큼 출력하는 함수입니다. LEFT( string,length ) SELECT LEFT( '12345678', 3 ); +-----------------------+ | LEFT( '12345678', 3 ) | +-----------------------+ | 123 | +-----------------------+ RIGHT는 문자열의 왼쪽부터 일정 길이만큼 출력하는 함수입니다. RIGHT( string, length ) SELECT RIGHT( '12345678', 3 ); +------------------------+ | RIGHT( '12345678', 3 ) | […]

MariaDB / 함수 / QUOTE / 문자열을 작은 따옴표로 감싸는 함수

QUOTE는 문자열을 작은 따옴표로 감싸는 함수입니다. QUOTE( string ) SELECT QUOTE( 'ABC' ); +----------------+ | QUOTE( 'ABC' ) | +----------------+ | 'ABC' | +----------------+ SELECT QUOTE( "ABC" ); +----------------+ | QUOTE( "ABC" ) | +----------------+ | 'ABC' | +----------------+ 문자열 안에 있는 작은 따옴표는 \'로 표시됩니다. SELECT QUOTE( "'ABC'" ); […]

Microsoft SQL Server / 메모 / Query

최근 날짜 가져오기 Name으로 그룹화한 후 최근 날짜를 가져온다. SELECT Name, MAX( Date ) FROM Table1 GROUP BY Name 최근 날짜가 2020년인 것만 가져온다. SELECT Name, MAX( Date ) FROM Table1 GROUP BY Name HAVING MAX( Date ) BETWEEN '2020-01-01' AND '2020-12-31'

MariaDB / 함수 / REPEAT / 문자열 반복하여 출력하는 함수

개요 REPEAT는 문자열을 반복하여 출력하는 함수입니다. REPEAT( string, count ) string : 반복될 문자열 count : 반복 횟수 예제 123을 4번 반복하여 출력합니다. SELECT REPEAT( '123', 4 ); +---------------------+ | REPEAT( '123', 4 ) | +---------------------+ | 123123123123 | +---------------------+ 반복 횟수가 1 미만이면 빈 문자열을 출력합니다. SELECT REPEAT( '123', […]

MariaDB / 함수 / LENGTH, BIT_LENGTH, CHAR_LENGTH / 문자열 길이 출력하는 함수

LENGTH LENGTH는 바이트(byte)로 계산된 문자열의 길이를 출력합니다. 영어. 숫자, 특수문자 등은 1로, 한글은 3으로 계산합니다. SELECT LENGTH( 'A1#가' ); +--------------------+ | LENGTH( 'A1#가' ) | +--------------------+ | 6 | +--------------------+ BIT_LENGTH BIT_LENGTH는 비트(bit)로 계산된 문자열의 길이를 출력합니다. 영어, 숫자, 특수문자 등은 8로, 한글은 24로 계산합니다. SELECT BIT_LENGTH( 'A1#가' ); +------------------------+ […]

MariaDB / 함수 / REPLACE / 문자열 찾아서 바꾸는 함수

REPLACE는 특정 문자열을 찾아 다른 문자열로 바꾸는 함수입니다. REPLACE( string, from_string, to_string ) string : 찾아서 바꾸는 대상이 되는 문자열 from_string : 찾을 문자열 to_string : 교체될 문자열 아래는 ababab에서 b를 찾아 c로 바꾸는 예제입니다. SELECT REPLACE( 'ababab', 'b', 'c' ); +-------------------------------+ | REPLACE( 'ababab', 'b', 'c' ) | +-------------------------------+ […]

MariaDB / 함수 / SUBSTRING, SUBSTRING_INDEX / 문자열 추출하는 함수

SUBSTRING 12345678의 5번째부터 끝까지 문자열을 추출합니다. SELECT SUBSTRING( '12345678', 5 ); +----------------------------+ | SUBSTRING( '12345678', 5 ) | +----------------------------+ | 5678 | +----------------------------+ SELECT SUBSTRING( '12345678' FROM 5 ); +--------------------------------+ | SUBSTRING( '12345678' FROM 5 ) | +--------------------------------+ | 5678 | +--------------------------------+ 12345678의 5번째부터 2개의 문자열을 추출합니다. SELECT SUBSTRING( '12345678', […]

MariaDB / 함수 / LTRIM, RTRIM, TRIM / 양끝 문자열 제거 함수

LTRIM LTRIM은 문자열 왼쪽에 있는 공백을 제거합니다. LTRIM( string ) SELECT QUOTE( LTRIM( ' 12 34 ' ) ); +------------------------------+ | QUOTE(LTRIM( ' 12 34 ' )) | +------------------------------+ | '12 34 ' | +------------------------------+ RTRIM RTRIM은 문자열 오른쪽에 있는 공백을 제거합니다. LTRIM( string ) SELECT QUOTE( RTRIM( ' 12 […]

MariaDB / 함수 / INSERT / 일정 구간 문자열 교체하는 함수

INSERT는 일정 구간의 문자열을 다른 문자열로 교체하는 함수입니다. INSERT( string, position, length, new-string ) string : 원본 문자열입니다. position : 구간이 시작하는 위치입니다. length : 구간의 길이입니다. new-string : 교체될 문자열입니다. 예를 들어 다음과 같은 경우, 1234567에서 4번째 문자부터 2개를 지우고 ABC를 넣습니다. 즉, 45를 지우고 ABC를 넣습니다. MariaDB [(none)]> […]

MariaDB / 함수 / CONCAT, CONCAT_WS / 문자열 합치는 함수

예제로 사용한 데이터베이스는 employees입니다. CONCAT CONCAT은 문자열을 이어주는 함수입니다. 예를 들어 CONCAT( first_name, last_name )는 first_name의 값과 last_name의 값을 이어서 출력합니다. MariaDB [employees]> SELECT first_name, last_name, CONCAT( first_name, last_name ) FROM employees LIMIT 5; +------------+-----------+---------------------------------+ | first_name | last_name | CONCAT( first_name, last_name ) | +------------+-----------+---------------------------------+ | Georgi | Facello | […]

드림위버 / 코드 정렬하는 방법

다음과 같이 정렬이 엉망인 코드가 있습니다. 드림위버에는 이런 코드를 읽기 좋게 정렬해주는 기능이 있습니다. [편집 - 코드 - 소스 포맷 적용]을 클릭하면 됩니다. 물론 딱 원하는 모양은 아닐 수 있지만, 읽는 게 훨씬 편해집니다.

CSS / Grid / order

order 속성으로 그리드 아이템의 순서를 변경할 수 있습니다. 시각적인 순서만 바뀔 뿐 문서 구조가 바뀌는 것은 아닙니다. order 속성의 기본값은 0입니다. 값이 같은 경우 입력된 순서대로 나옵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; font-family: Consolas, monospace; } .jb-container { display: grid; grid-template-columns: 1fr […]