CODING FACTORY

SVG 이미지 파일 만드는 방법

SVG는 Scalable Vector Graphics의 약자로, XML 기반의 벡터 이미지입니다. 벡터 방식이므로 이미지를 축소하거나 확대를 해도 깨지지 않는다는 장점이 있습니다. SVG 이미지 파일을 만드는 방법 중 하나는, 벡터 그래픽 제작 프로그램으로 이미지를 만든 후 SVG 형식으로 저장하는 것입니다. 대표적인 벡터 그래픽 제작 프로그램에는 Adobe Illustrator와 Inkscape가 있습니다. Illustrator는 워낙 유명한 제품이라 […]

jQuery / Plugin / jquery.toc / H 태그로 목차 만드는 플러그인 - 클릭 시 부드럽게 이동

jquery.toc jquery.toc는 HTML 문서에 있는 h1, h2 등 h 태그를 이용하여 자동으로 목차를 만들어주는 플러그인입니다. 목차 클릭 시 해당 위치로 부드럽게 이동(smooth scroll)하는 기능을 포함합니다. GitHub : https://github.com/jakobbossek/jquery.toc Download : https://github.com/jakobbossek/jquery.toc/archive/master.zip 기본 사용법 h 태그가 많은 HTML 문서를 만듭니다. 다음 코드를 추가하여 jQuery와 jquery.toc.js를 연결합니다. 보통 </head> 위나 </body> 위에 […]

jQuery / Plugin / jQuery Smooth Scroll

jQuery Smooth Scroll jQuery Smooth Scroll은 HTML 내에서 링크를 클릭하여 이동할 때, 부드럽게 이동하도록 만들어주는 플러그인입니다. GitHub : https://github.com/kswedberg/jquery-smooth-scroll Download : https://github.com/kswedberg/jquery-smooth-scroll/archive/master.zip 기본 사용법 다음처럼 문서 내에서 이동하는 링크를 가진 HTML 문서를 만듭니다. <!doctype html> <html lang=”ko”> <head> <meta charset=”utf-8″> <title>jQuery</title> <style> body { font-family: Consolas, sans-serif; } a { […]

Brackets / 실시간 미리보기 사용하는 방법

브라켓에는 실시간 미리보기 기능이 있습니다. 에디터에서 코드를 변경하면 바로 웹브라우저에 반영되는 것이죠. 어떻게 실시간 미리보기를 사용하는지 알아보겠습니다. 실시간 미리보기를 할 HTML 문서를 열고, 오른쪽에 있는 번개 모양 아이콘을 클릭합니다. 실시간 미리보기를 처음 사용한다면, 구글 크롬이 필요하고 HTML과 CSS만 가능하다는 메시지가 나옵니다. [확인]을 클릭하면… 크롬에서 HTML 문서를 보여줍니다. 코드에 커서를 위치시키면, […]

Brackets / 다운로드하고 설치하는 방법

Brackets 브라켓은 웹 코딩에 최적화된 텍스트 에디터입니다. Adobe가 후원하는 오픈소스로, 누구나 자유롭게 사용할 수 있습니다. With focused visual tools and preprocessor support, Brackets is a modern text editor that makes it easy to design in the browser. It’s crafted from the ground up for web designers and front-end developers. 다운로드 […]

jQuery / Plugin / jquery.toc / H 태그로 목차 만드는 플러그인

jquery.toc jquery.toc는 HTML 문서에 있는 h1, h2 등 h 태그를 이용하여 자동으로 목차를 만들어주는 플러그인입니다. GitHub : https://github.com/ndabas/toc Download : http://ndabas.github.com/toc/assets/jquery.toc.zip 목차 클릭 시 부드럽게 이동하는 효과를 주고 싶다면 다른 플러그인을 사용하세요. 기본 사용법 h 태그가 많은 다음과 같은 HTML 문서를 만듭니다. <!doctype html> <html lang=”ko”> <head> <meta charset=”utf-8″> <title>jQuery</title> […]

CSS / tab-size / 탭 크기 설정하는 속성

HTML은 탭을 연속하여 여러 개 넣어도 하나의 공백으로 인식합니다. 하지만 pre 태그를 이용하면 입력된 그대로 출력할 수 있습니다. 기본적으로 하나의 탭을 8개의 공백으로 인식합니다. 예를 들어 아래처럼 코드를 만들면…(각 줄 앞에 있는 빈 칸은 모두 탭입니다.) <html lang=”ko”> <head> <meta charset=”utf-8″> <title>HTML</title> <style> pre { font-family: Consolas, monospace; font-size: 24px; […]

MariaDB / DATA / 데이터 추가(INSERT), 수정(UPDATE), 삭제(DELETE)

데이터베이스와 테이블 만들기 test 데이터베이스를 만듭니다. MariaDB [(none)]> create database test; Query OK, 1 row affected (0.00 sec) test 데이터베이스를 사용합니다. MariaDB [(none)]> use test; Database changed table_1 테이블을 만듭니다. MariaDB [test]> CREATE TABLE table_1 ( -> column_1 varchar(100), -> column_2 varchar(100), -> column_3 varchar(100) -> ); Query OK, 0 […]

SQL Server / Query / 쿼리 만들고 실행하는 방법

쿼리(Query)를 이용하여 필요한 데이터를 추출하거나 여러 가지 작업을 할 수 있습니다. SSMS에서 쿼리를 만들고 실행하는 과정은 다음과 같습니다. 데이터베이스 서버에 접속하고 [새 쿼리]를 클릭합니다. 드롭다운 목록에서 쿼리를 할 데이터베이스를 선택합니다. 쿼리를 입력하고 [실행]을 클릭합니다. 단축키는 F5입니다. 하단에 쿼리 결과가 나옵니다. 여러 개의 쿼리를 입력했다면 각각 결과가 나옵니다. 쿼리에 블록을 씌우고 […]

SQL Server / 오류 22022 / SQLServerAgent가 현재 실행되고 있지 않으므로 이 동작을 알릴 수 없습니다.

SQL Server에 스케줄에 따라 자동 백업하는 작업을 추가할 때 다음과 같은 메시지가 나왔습니다. SQL Server Agent가 실행되고 있지 않아 작업을 추가할 수 없는 것입니다. SQL Server Agent가 실행 중이 아니어서 발생한 문제이므로, 실행시키면 해결되겠죠? SQL Server가 설치된 컴퓨터의 서비스를 엽니다. Windows Server라면 서버 관리자에서 [도구 – 서비스]를 클릭하면 됩니다. 아니면, […]

SQL Server / 보안 / 사용자 계정 만들고 권한 추가하는 방법

SQL Server의 사용자 계정은 Windows 인증을 이용한 사용자 계정, SQL Server 자체의 사용자 계정이 있습니다. 그 중 SQL Server 자체의 사용자 계정을 만들고, 권한을 부여하는 방법을 알아보겠습니다. SSMS로 SQL Server에 접속합니다. [보안]을 확장하고 [로그인]을 선택합니다.(확장하면 전체 사용자 목록을 볼 수 있습니다.) 마우스 우클릭하고 [새 로그인]을 클릭합니다. 사용자를 추가하는 창이 뜹니다. […]

SQL Server / 관리 / 스케줄에 따라 자동 백업하는 방법

데이터베이스는 주기적으로 백업을 해야 합니다. SQL Server의 유지 관리 계획을 이용하면, 백업 되풀이 작업을 만들어 일정 주기마다 자동으로 백업하게 할 수 있습니다. SSMS로 자동 백업을 만드는 방법을 알아보겠습니다. [관리]를 확장하여 [유지 관리 계획]을 선택합니다. 마우스 우클릭하고 [유지 관리 계획 마법사]를 클릭합니다. [다음]을 클릭합니다. 이름을 적절히 정하고 [다음]을 클릭합니다. [데이터베이스 백업(전체)]와 […]

SQL Server / Agent XPs 구성 요소는 이 서버의 보안 구성에 따라 해제되었습니다.

SSMS로 작업하다보면 다음과 같은 메시지를 만날 때가 있습니다. 이를 해결하는 방법은… SQL Server가 설치된 컴퓨터에서 SSMS를 실행한 후, [SQL Server 에이전트(에이전트 XPs 사용 안 함)]을 선택하고… 마우스 우클릭 한 후 [시작]을 클릭합니다. [예]를 클릭하고… 잠시 기다리면… 다음과 같이 메뉴가 바뀌면서 해결됩니다.

SQL Server / SQL Server 2019 설치하는 방법

SQL Server 상용 버전인 SQL Server Standard 또는 SQL Server Enterprise를 설치하는 과정을 정리합니다.(무료 버전인 SQL Server Express를 설치하는 과정은 여기에 있습니다.) SQL Server 설치 DVD 또는 ISO 파일 안에 있는 setup 파일을 더블 클릭하여 실행합니다. 왼쪽에서 [설치]를 선택한 후 [새 SQL Server 독립 실행형 설치 또는 기존 설치에 기능 […]

JavaScript / Library / Lozad.js / 이미지 Lazy Loading 구현해주는 라이브러리

Lazy Loading 웹 페이지의 로딩 속도에 큰 영향을 미치는 것 중의 하나는 이미지입니다. 이를 해결해주는 방법 중의 하나가 Lazy Loading입니다. 웹브라우저에 보이는 영역 안에 있는 이미지는 로드하고, 보이지 않는 부분은 로드하지 않습니다. 밑으로 스크롤하여 이미지가 있는 영역에 도달하면 그 때 이미지를 로드합니다. 이렇게 하면 불필요한 이미지 로딩으로 인한 속도 저하를 […]

Lighthouse로 사이트 속도 측정과 개선 사항 확인하는 방법

사이트 속도와 관련된 문제를 파악할 때 PageSpeed Insights를 많이 이용합니다. 약간 귀찮은 점은 속도 측정을 위해서 PageSpeed Insights에 접속하고 URL을 붙여 넣여야 한다는 것입니다. 만약 많이 불편하다면 Lighthouse를 사용해보세요. 크롬 확장 기능으로 추가하여 원하는 페이지를 바로바로 검사할 수 있습니다. Lighthouse는 웹 앱의 품질을 개선하는 오픈 소스 자동화 도구입니다. Lighthouse는 Chrome […]

JavaScript / Object / Math.max(), Math.min()

Math.max(), Math.min() Math.max()는 주어진 값 중에서 최댓값을, Math.min()은 최솟값을 반환합니다. 문법 Math.max( number1, number2, number3, … ) Math.min( number1, number2, number3, … ) 예제 1 10, 20, 30 중에서 최댓값과 최솟값을 구합니다. <!doctype html> <html lang=”ko”> <head> <meta charset=”utf-8″> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> </head> <body> […]

JavaScript / Object / Math.log(), Math.log10(), Math.Log2()

Math.log(), Math.log10(), Math.Log2() Math.log() : 자연로그의 값을 반환합니다. Math.log10() : 상용로그의 값을 반환합니다. Math.Log2() : 밑이 2인 로그의 값을 반환합니다. 문법 Math.log( number) Math.log10( number ) Math.Log2( number) number에는 숫자가 들어갑니다. 0인 경우 -Infinity, 음수인 경우 NaN을 반환합니다. 예제 <!doctype html> <html lang=”ko”> <head> <meta charset=”utf-8″> <title>JavaScript</title> <style> body { […]

JavaScript / Object / Math.floor(), Math.ceil(), Math.round()

Math.floor() Math.floor()는 어떤 수보다 크지 않은 최대의 정수를 반환합니다. 문법 Math.floor( Number ) Number에는 숫자가 들어갑니다. 예제 <!doctype html> <html lang=”ko”> <head> <meta charset=”utf-8″> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> </head> <body> <script> document.write( ‘<p>Math.floor( 1.6 ) : ‘ + Math.floor( 1.6 ) + ‘</p>’ ); document.write( […]

JavaScript / Object / Math.random() / 난수(랜덤 숫자) 만드는 속성

Math.random() Math.random()는 난수(랜덤 숫자)를 만듭니다. 문법 Math.random() 0.673172894273546와 같은 0 이상 1 미만의 난수를 만듭니다. 예제 1 <!doctype html> <html lang=”ko”> <head> <meta charset=”utf-8″> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> </head> <body> <script> var jbRandom = Math.random(); document.write( ‘<p>’ + jbRandom + ‘</p>’ ); </script> </body> </html> […]

jQuery / Method / .slideToggle() - 보이는 요소는 보이지 않게, 보이지 않는 요소는 보이게 하는 메서드

.slideToggle() .slideToggle()은 보이지 않는 요소는 아래쪽으로 서서히 나타나게 하고, 보이는 요소는 위쪽으로 서서히 사라지게 합니다. 문법 .slideToggle( [duration ] [, easing ] [, complete ] ) duration 요소가 나타나거나 사라질 때까지 걸리는 시간입니다. 단위는 1/1000초, 기본값은 400입니다. fast나 slow로 정할 수 있습니다. fast는 200, slow는 600에 해당합니다. easing 요소가 나타나거나 […]

jQuery / Method / .slideDown() - 요소를 아래쪽으로 나타나게 하는 메서드

.slideDown() .slideDown()은 선택한 요소를 아래쪽으로 서서히 나타나게 합니다. 문법 .slideDown( [duration ] [, easing ] [, complete ] ) duration 요소가 나타날 때까지 걸리는 시간입니다. 단위는 1/1000초, 기본값은 400입니다. fast나 slow로 정할 수 있습니다. fast는 200, slow는 600에 해당합니다. easing 요소가 나타나는 방식을 정합니다. swing과 linear가 가능하며, 기본값은 swing입니다. complete […]

jQuery / Method / .animate() - 애니메이션 효과 만드는 메서드

.animate .animate()는 애니메이션 효과를 만듭니다. 문법 .animate( properties [, duration ] [, easing ] [, complete ] ) properties 애니메이션 효과를 줄 속성을 정합니다. 가능한 속성은 다음과 같습니다. backgroundPositionX backgroundPositionY borderBottomWidth borderLeftWidth borderRightWidth borderSpacing borderTopWidth borderWidth bottom fontSize height left letterSpacing lineHeight margin marginBottom marginLeft marginRight marginTop maxHeight maxWidth minHeight […]

jQuery / Method / .slideUp() - 요소를 위쪽으로 사라지게 하는 메서드

.slideUp() .slideUp()는 선택한 요소를 위쪽으로 서서히 사라지게 합니다. 문법 .slideUp( [duration ] [, easing ] [, complete ] ) duration 요소가 사라질 때까지 걸리는 시간입니다. 단위는 1/1000초, 기본값은 400입니다. fast나 slow로 정할 수 있습니다. fast는 200, slow는 600에 해당합니다. easing 요소가 사라지는 방식을 정합니다. swing과 linear가 가능하며, 기본값은 swing입니다. complete […]

jQuery / Plugin / jquery.mb.YTPlayer / 유튜브 영상을 배경으로 사용하게 해주는 플러그인

컴퓨터 사양이 좋아지고 네트워크 속도가 빨라지면서, 홈페이지의 배경으로 동영상을 사용하는 곳이 많아지고 있습니다. 동영상을 배경으로 사용하는 방법은, 서버에 동영상을 올려놓고 video 태그로 넣는 방법과 유튜브에 업로드하고 불러오는 방법이 있습니다. 유튜브를 이용하면 트래픽 비용을 줄일 수 있다는 장점이 있는데, 영상 제목이나 콘트롤 바, 공유 등 불필요한 내용까지 보여준다는 단점도 있습니다. 그 […]