CODING FACTORY

CSS / Grid / grid-auto-rows

그리드에서 열 개수는 grid-template-columns로 정합니다. 그 개수를 넘어가면 행이 바뀌죠. 그리고 높이는 행마다 다르게 정해집니다. 예를 들어 다음과 같은 HTML 문서가 있을 때, 첫번째 행의 높이와 다른 행의 높이는 다릅니다. <!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: […]

CSS / Grid / IE에 적용시키는 방법 / Autoprefixer CSS online

CSS의 Grid는 인터넷 익스플로러에서 작동하지 않습니다. 최신 버전인 IE 11에서도 마찬가지입니다. 예를 들어 아래의 HTML 문서는 크롬이나 엣지 등 웹브라우저에서 의도한 대로 잘 나옵니다. <!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 1fr; grid-template-rows: 1fr […]

CSS / Grid / 실전 예제

높이가 같은 박스 만들기 <!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 1fr; grid-template-rows: 1fr 1fr; grid-gap: 10px; } .jb-item { padding: 20px; border: 1px solid #444444; } </style> </head> <body> <div class="jb-container"> <div class="jb-item">Item […]

CSS / Flex / align-self / 아이템의 교차축 정렬 정하는 속성

align-items로 교차축(cross axis) 아이템 정렬을 정합니다. 이렇게 정한 정렬은 콘테이너 안의 모든 아이템에 적용됩니다. <!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; } .jb-item { padding: 20px; } .jb-item:nth-child(1) { background-color: […]

CSS / Flex / order / 아이템의 순서 정하는 속성

Flex로 아이템을 배치할 때, 입력한 순서대로 출력됩니다. <!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; } .jb-item { padding: 20px; } .jb-item:nth-child(1) { background-color: #e3f2fd; } .jb-item:nth-child(2) { background-color: #bbdefb; font-size: […]

MariaDB / Query / DISTINCT / 중복 데이터 제거

DISTINCT를 이용하면 중복 값을 제거할 수 있습니다. 예를 들어 다음과 같은 test 테이블이 있다고 할 때... MariaDB [jb-test]> SELECT * FROM test; +---------+---------+---------+ | Column1 | Column2 | Column3 | +---------+---------+---------+ | 1 | A | 1 | | 2 | B | 1 | | 3 | C | […]

CSS / Flex / align-content

flex-wrap 속성의 값이 wrap인 경우, 아이템들의 가로폭의 합이 콘테이너의 가로폭을 넘어가면 아이템이 다음 줄로 내려갑니다. 이때 여러 줄이 되어버린 아이템들의 정렬을 어떻게 할지 정하는 속성이 align-content입니다. 기본값은 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; } […]

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

드림위버로 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의 값이 없으므로 […]