CODING FACTORY

Recent Posts

드림위버 / 실행 시 이전 작업 파일 열지 않게 하는 방법

드림위버로 A라는 파일을 작업하다가 드림위버를 종료합니다. 그리고 다시 드림위버를 실행하면 A 파일이 자동으로 열립니다. 즉, 파일들을 닫지 않은 채 드림위버를 종료하면, 다시 실행 시 그 파일들이 열리는데요... 이 기능이 좋은 점도 있지만, 경우에 따라서는 불편할 수도 있습니다. 만약 드림위버를 실행할 때 아무 파일도 자동으로 열리지 않게 하고 싶다면... 상단 메뉴에서 […]

다음 웹마스터 도구 베타에 사이트 등록하는 방법

카카오에서 다음 웹마스터 도구 베타 서비스를 시작하였습니다. 구글 서치 콘솔, 네이버 웹마스터 도구, 빙 웹마스터 도구와 비슷한 서비스를 제공하는 것이라 추측합니다. 사이트 등록하고, 색인이 잘 되는지 확인하고, 문제점을 파악하고... 그래서 사이트를 등록을 해보았는데... 좀 특이한 것이 있습니다. 우선 robots.txt로 사이트 인증을 합니다. 다른 웹마스터 도구는 HTML 태그를 사용할 수 있는데, […]

CSS / Flex / 정가운데 배치하기

justify-content, align-items 속성을 이용하여 안쪽 요소를 바깥쪽 요소의 정가운데에 배치할 수 있습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; margin: 0px; font-family: Consolas, monospace; } .jb-container { height: 100vh; background-color: #01579b; display: flex; justify-content: center; align-items: center; } .jb-item { padding: 20px; background-color: #ffffff; […]

CSS / Flex / align-items

align-items로 교차축(cross axis) 아이템 정렬을 정합니다. 예를 들어 flex-direction의 값이 row인 경우 수직 정렬을 정합니다. 아래는 flex-direction: row일 때의 예제입니다. 기본값은 stretch로, 콘테이너의 높이에 맞게 늘립니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; margin: 0px; font-family: Consolas, monospace; } .jb-container { height: 100vh; background-color: […]

CSS / Flex / flex-wrap

flex-wrap은 아이템들의 가로 크기 합이 콘테이너의 가로 크기를 넘어갈 때 어떻게 처리할지를 정합니다. 기본값은 nowrap로... <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> * { box-sizing: border-box; } .jb-container { height: 400px; background-color: #01579b; display: flex; flex-wrap: nowrap; } .jb-item:nth-child(1) { background-color: #ffebee; } .jb-item:nth-child(2) { background-color: #ffcdd2; } […]

CSS / Flex / justify-content

justify-content로 flex-direction으로 정한 방향으로의 정렬을 정합니다. 예를 들어 flex-direction의 값이 row라면 가로 방향의 정렬을 정합니다. 기본값은 flex-start로 시작점부터 아이템을 배치합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> * { box-sizing: border-box; } .jb-container { height: 400px; background-color: #01579b; display: flex; justify-content: flex-start; } .jb-item:nth-child(1) { background-color: #ffebee; } […]

CSS / Flex / display

display: flex Flex로 요소를 배열하고 싶을 때 Container에 display: flex;를 추가합니다. 아래와 같은 문서에... <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> .jb-container { padding: 10px; background-color: #01579b; } .jb-item { margin: 10px; padding: 20px; background-color: #29b6f6; } </style> </head> <body> <div class="jb-container"> <div class="jb-item">Item 1</div> <div class="jb-item">Item 2</div> […]

CSS / Flex / flex-direction

flex-direction으로 Item의 배열 방향을 정합니다. 기본값은 row로, 왼쪽에서 오른쪽으로 배열합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> .jb-container { height: 400px; padding: 10px; background-color: #01579b; display: flex; flex-direction: row; } .jb-item { margin: 10px; padding: 20px; background-color: #29b6f6; } </style> </head> <body> <div class="jb-container"> <div class="jb-item">Item 1</div> <div […]

MariaDB / DBeaver / 외래 키(Foreign Key) 만들기, 삭제하기

외래 키(Foreign Key) 만들기 기본 키가 있는 테이블(testTable1)을 만듭니다. 외래 키를 만들 테이블(testTable2)을 만듭니다. [Foreign Keys]를 클릭합니다. 마우스 우클릭한 후 [Create New Foreign Key]를 클릭합니다. Column에서 외래 키를 선택하고, Ref Column에서 기본 키를 선택한 후 [OK]를 클릭합니다. [Save]를 클릭합니다. [Persist]를 클릭하면... 외래 키가 만들어집니다. 외래 키(Foreign Key) 삭제하기 외래 키를 […]

MariaDB / DBeaver / 테이블 만들기, 삭제하기

테이블 만들기 데이터베이스를 선택하고 마우스 우클릭합니다. [Create - Table]을 클릭하면... 다음과 같은 화면이 나옵니다. 테이블 이름을 정하고... 마우스 우클릭 후 [Create New Column]을 클릭하거나, 아래에 있는 아이콘을 클릭하여... 열을 만듭니다. [Save]를 클릭하고... [Persist]를 클릭하면... 테이블이 만들어집니다. 테이블 삭제하기 테이블을 선택하고 마우스 우클릭 후 [Delete]를 클릭합니다. [Yes]를 클릭하면 테이블이 삭제됩니다.

MariaDB / DBeaver / 기본 키(PRIMARY KEY) 만들기, 삭제하기

기본 키 만들기 기본 키를 만들 테이블을 더블 클릭합니다. Properties 탭에서 [Constraints]를 클릭합니다. 마우스 우클릭하여 [Create New Constraints]를 클릭하거나, 아래쪽에 있는 아이콘을 클릭합니다. 기본 키로 만들 열을 선택하고 [OK]를 클릭합니다. [Save]를 클릭하고... [Persist]를 클릭하면... 기본 키 설정이 완료됩니다. 기본 키 삭제하기 기본 키를 선택하고 마우스 우클릭한 후 [Delete]를 클릭하거나, 아래쪽에 […]

MariaDB / DBeaver / 데이터베이스 만들기, 삭제하기

데이터베이스 만들기 Databases를 선택하고 마우스 우클릭합니다. 팝업 메뉴에서 [Create Database]를 클릭합니다. 데이터베이스 이름을 입력하고, Charset과 Collation을 선택한 후 [OK]를 클릭하면... 데이터베이스가 생성됩니다. 데이터베이스 수정하기 왼쪽에서 데이터베이스를 두 번 클릭하면 데이터베이스 정보가 나옵니다. 필요한 수정을 하고 [Save]를 클릭한 다음... 팝업 창의 내용을 확인하고 [Persist]를 클릭하면... 데이터베이스가 수정됩니다. 데이터베이스 삭제하기 데이터베이스를 선택하고 […]

MariaDB / DBeaver / MariaDB에 연결하는 방법

MariaDB를 명령어로만 관리하는 것은 힘듭니다. 적절한 툴을 이용하면 작업 속도를 높일 수 있습니다. MariaDB를 관리하는 툴을 여러 가지가 있는데, 그 중 하나가 DBeaver입니다. Free multi-platform database tool for developers, database administrators, analysts and all people who need to work with databases. Supports all popular databases: MySQL, PostgreSQL, SQLite, Oracle, DB2, […]

MariaDB / DATA / CSV 파일 데이터 가져오는 방법

LOAD DATA INFILE MariaDB의 LOAD DATA INFILE로 텍스트 파일의 데이터를 가져올 수 있습니다. 문법은 다음과 같습니다. LOAD DATA [LOW_PRIORITY | CONCURRENT] [LOCAL] INFILE 'file_name' [REPLACE | IGNORE] INTO TABLE tbl_name [CHARACTER SET charset_name] [{FIELDS | COLUMNS} [TERMINATED BY 'string'] [[OPTIONALLY] ENCLOSED BY 'char'] [ESCAPED BY 'char'] ] [LINES [STARTING BY […]

PHP / 에러 출력하는 방법, 에러 출력하지 않는 방법

PHP 코딩을 하고 웹 브라우저에서 실행을 시킵니다. 그런데 원하는 결과가 나오지 않거나 '페이지를 표시할 수 없습니다' 같은 메시지가 나오는 경우가 있습니다. 반대로 결과를 도출하는 데는 문제가 없으나 에러 메시지가 나오는 경우가 있습니다. 보통 개발 과정에서는 어떤 에러든 표시하는 게 좋고, 서비스 중이라면 왠만한 에러는 보이지 않는게 좋습니다. 어떻게 에러 표시 […]

PHP / 회원 관리 / 비밀번호 변경 페이지

change-password.php $_SESSION[ 'username' ]의 값으로 로그인 여부를 판단합니다. 로그인 상태가 아니라면 로그인 페이지로 이동합니다. 로그인 상태라면 $current_password의 값으로 새 비밀번호를 입력했는지 확인합니다. 새 비밀번호를 입력했다면 현재 비밀번호가 맞는지 확인합니다. 맞지 않다면 '현재 비밀번호가 틀렸습니다.'를 출력합니다. 현재 비밀번호가 맞다면 새로 입력한 비밀번호 두 개가 일치하는지 확인합니다.일치하지 않는다면 '새 비밀번호가 일치하지 않습니다.'를 […]

PHP / 회원 관리 / 세션(SESSION) 추가하기, 로그아웃 페이지

login.php 로그인 한 상태인지 로그인 하지 않은 상태인지 파악하기 위해 login-ok.php로 넘어가기 전에 세션을 시작합니다. 그리고 username을 $_SESSION[ 'username' ]에 담습니다. <?php $username = $_POST[ 'username' ]; $password = $_POST[ 'password' ]; if ( !is_null( $username ) ) { $jb_conn = mysqli_connect( 'localhost', 'codingfactory', '1234qwer', 'codingfactory.net_example' ); $jb_sql = "SELECT […]

PHP / 회원 관리 / 로그인 페이지, 로그인 완료 페이지

로그인 페이지 - login.php 페이지를 열면 POST 방식으로 넘어온 username과 password를 저장합니다. $username에 값이 없다면 이후의 PHP 코드는 실행되지 않습니다. 양식에 값을 입력하고 로그인 버튼을 클릭하면 $username에 값이 있으므로 이후의 PHP 코드가 실행됩니다. $username에 값이 있다면 DB에서 username에 해당하는 password를 가져와서 $encrypted_password에 저장합니다. 일치하는 username이 존재하지 않는다면 $encrypted_password의 값이 없으므로 […]

PHP / 회원 관리 / 회원 가입 페이지, 회원 가입 완료 페이지

환경 로컬 서버에 설치된 MariaDB를 사용합니다.(특별한 케이스가 아니라면 MySQL에서도 잘 작동합니다.) 데이터베이스 이름은 codingfactory.net_example, 사용자 이름은 codingfactory, 비밀번호는 1234qwer입니다. 테이블 만들기 id, username, password 세 개의 열을 가진 member 테이블을 만듭니다. id는 자동 증가하는 고유값을 가지는 키입니다. MariaDB [codingfactory.net_example]> create table member ( -> id INT AUTO_INCREMENT PRIMARY KEY, -> […]

PHP / 함수 / md5() / 문자열에서 md5 해시값 생성하는 함수

개요 md5()는 문자열에서 md5 해시값을 생성하는 함수입니다. 해시값에서 원래의 문자열을 만들지는 못합니다. 문자열이 같다면 같은 해시값을 만드므로, 비밀번호를 암호화하여 저장하는 용도로는 맞지 않습니다. It is not recommended to use this function to secure passwords, due to the fast nature of this hashing algorithm. 문법 md5( string $str [, bool $raw_output […]

JavaScript / Event / onsubmit / 폼 전송하기 전에 작업 수행하게 하는 이벤트

JavaScript의 onsubmit 이벤트를 이용하면 폼의 값을 전송하기 전에 어떤 작업을 하게 할 수 있습니다. 간단한 예제로 어떻게 작동하는지 알아보겠습니다. 예제 1 간단한 회원 가입 페이지를 만듭니다. 전송 버튼은 input 태그로 만듭니다. Register를 클릭하면 ok.html로 이동합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> input, button { font-family: inherit; font-size: […]

MariaDB / TABLE / AUTO_INCREMENT / 자동으로 증가하는 값 만들기

테이블에는 데이터를 특정할 수 있는 고유값이 있는 게 좋습니다. 고유값을 수동으로 넣을 수는 없으므로, 값을 자동으로 증가시키는 AUTO_INCREMENT를 사용합니다. AUTO_INCREMENT로 고유값이 어떻게 만들어지는지 알아보겠습니다. 사용하는 테이블 이름은 test입니다. 자동으로 증가하는 열 만들기 열 이름은 id, 데이터 타입은 정수(INT)로 만듭니다. 데이터 타입 뒤에 AUTO_INCREMENT PRIMARY KEY를 붙입니다. MariaDB [codingfactory.net_example]> CREATE TABLE […]

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 { […]