전체 글90

• MySQL DB내의 모든 테이블 삭제 DB 내의 table만 삭제하고자 할 때, 아래의 'DB명' 부분을 테이블을 삭제할 db명으로 변경해 주면 테이블이 일괄 삭제된다. SET @tables = NULL; SELECT GROUP_CONCAT(table_schema, '.', table_name) INTO @tables FROM information_schema.tables WHERE table_schema = 'DB명'; -- specify DB name here. SET @tables = CONCAT('DROP TABLE ', @tables); PREPARE stmt FROM @tables; EXECUTE stmt; DEALLOCATE PREPARE stmt; 개발/SQL 2021. 1. 8.

• 

  CSS position 속성 - CSS 위치 지정 CSS의 position 속성으로 문서 상의 요소 배치방법을 지정할 수 있다. 값에 따라 배치 방법이 다른데, 값마다의 방법을 소개한다. static 기본값이다. top, left, right, bottom, z-index 속성이 적용되지 않는다. relative 자기 자신의 위치를 기준으로 top, left, right, bottom 값에 따라 위치가 지정된다. 오프셋은 다른 요소에 영향을 주지 않으며, 페이지 레이아웃에서 요소가 차지하는 공간은 static과 같다. 자신이 있던 위치 기준(빨간 선)으로 50px씩 이동하였다. position: relative; left: 50px; top: 50px; absolute 가장 가까운 부모 요소의 위치를 기준으로 top, left, right, bottom.. 개발/CSS 2021. 1. 4.

• 

  요소의 배치 순서 지정 - z-index 앞에 나와야 할 요소가 가려지는 등 난처할 때들이 있었다. z-index 속성을 사용하면 요소의 배치 순서를 정할 수 있어서 가려지는 현상을 해결할 수 있다. position이 static이 아닌 경우에만 적용이 가능하다. 5개의 겹쳐 있는 div이다. 이제 이 요소에 순서를 지정하여 배치 순서를 변경할 수 있다. 요소별 css에 z-index:값을 입력하면 값에 따라 순서가 바뀐다. z-index값이 클수록 앞으로 나오며, 보통 9999는 항상 상단에 위치해야 할 때, -1은 항상 뒤에 나와야 할 때 스인다. 역순 출력을 위하여 1번~5번 div에 각각 5~1의 z-index값을 부여했다. // HTML 1번 DIV 2번 DIV 3번 DIV 4번 DIV 5번 DIV // CSS div{ width: 1.. 개발/CSS 2021. 1. 4.

• 개발 시 유용한 사이트 모음 - cdnjs 라이브러리 파일 CDN 사이트. 웬만한 라이브러리는 다 있음. cdnjs.com/ cdnjs - The #1 free and open source CDN built to make life easier for developers Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 11% of all websites, powered by Cloudflare. We make it faster and easier to load library files on your websites. cdnjs.com - jsfiddle 소스를 웹상에서 미리 테.. 개발/Web 2021. 1. 4.

• 무료 아이콘/템플릿/웹디자인 관련 사이트 모음 아이콘 - flaticon 다양한 무료 아이콘 제공. 색상 변경도 가능함. 웹 사용도 가능하나 주소가 너..무 길어서 불편함. www.flaticon.com/kr/ Flaticon, 최대 무료 벡터 아이콘 데이터베이스 SVG, PSD, PNG, EPS 형식 또는 웹 폰트 형태로 모든 아이콘 다운로드 www.flaticon.com - Font Awesome css로 편리하게 사용할 수 있는 무료 아이콘 사이트. fontawesome.com/ Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com 템플릿 - BO.. 개발/Web 2021. 1. 3.

• 

  Google Fonts - 구글 무료 폰트 사이트 Google Fonts에서는 약 1,000가지의 무료 폰트를 제공한다. 한글 폰트가 글 쓴 시간 기준 26개밖에 없는 점이 아쉽지만, 영어 폰트가 대부분이므로 웹페이지 제작 및 이미지 작업 시 유용하게 사용할 수 있다. fonts.google.com/ 사이트에 접속하면, 폰트들이 나온다. 글자를 입력하면 입력한 글자대로 미리보기가 된다. 원하는 폰트를 하나 골라보자. 선택 후 + Select this style 버튼을 눌러 준다. 친절한 사용 안내법이 나온다. link의 주소를 사이에 넣은 후, css 안에 font-family 부분을 추가해 주면 사용 준비 끝. import 방식으로 css 안에 넣을 수도 있다. Google Fonts를 적용한 예제이다. 예쁜 폰트 찾아서 유용하게 사용하시길 :) Se.. 개발/CSS 2021. 1. 3.

• hr 태그 - 수평선 / 문단 나누는 선 넣기 hr 태그는 문단을 나눌 때 사용하는 수평선 태그입니다. 사용 방법은 간단하며 다양한 속성으로 스타일을 줄 수 있습니다. 태그를 넣으면 기본 수평선이 추가됩니다. 아래와 같은 3가지 방법으로 스타일 추가가 가능합니다. // 사용법 1 // 사용법 2 css 추가 .클래스명{ 스타일 } // 사용법 3 css 설정 hr{ 스타일 } 스타일 속성 width 가로 값. width: 가로크기 로 사용 height 세로 값. height: 세로크기 로 사용 border 선 속성. border: 선종류 선크기 선색깔 로 사용 text-align 정렬 설정. ie만 지원하며 text-align: 정렬위치 로 사용 margin-left 왼쪽 정렬. 크롬/파이어폭스용 margin-right 오른쪽 정렬. 크롬/파이어폭스.. 개발/CSS 2021. 1. 3.

• 

  ul, li 블릿,기호,점 스타일 변경 및 없애기 ul, li 스타일은 8가지가 있다. 또한 블릿이 필요없을 경우에는 블릿을 없앨 수 있다. 기본 스타일이라 별도의 스타일 지정 필요 없음 테두리만 있는 원형 ul{ list-style-type : circle; } 네모 모양 ul{ list-style-type : square; } 숫자 형식(1. 2. 3. ~) ul{ list-style-type : decimal; } 소문자 형식(a. b. c. ~) ul{ list-style-type : lower-alpha; } 대문자 형식(A. B. C. ~) ul{ list-style-type : upper-alpha; } 소문자 로마자 형식(i. ii. iii. ~) ul{ list-style-type : lower-roman; } 대문자 로마자 형식(I. .. 개발/CSS 2021. 1. 3.

• 

  Font Awesome 사용하기 - css 아이콘 사용 Font Awesome은 다양한 아이콘을 간편하게 사용할 수 있는 라이브러리입니다. 약 1,600개의 무료 아이콘을 제공합니다.(유료는 약 8.000개) 사용법을 소개해 드립니다. 아래의 CSS 링크를 복사하여 사이에 삽입합니다. Font Awesome 사이트에 접속하여, 사용하고 싶은 아이콘을 검색합니다. fontawesome.com/icons 흐리게 표시되는 것은, 유료 전용 아이콘입니다. 사용할 아이콘을 선택합니다. 라고 쓰여 있는 1번을 누르면 소스코드 복사, 다운로드 아이콘이 그려진 2번을 누르면 SVG 파일로 다운받을 수 있습니다. 소스코드를 복사하여 원하는 곳에 붙여넣으면, 아이콘을 사용할 수 있습니다. Font Awesome Docs를 참고하면 다양한 사용법을 확인할 수 있습니다. 예제 몇.. 개발/CSS 2021. 1. 3.

• 

  Nodejs 이메일 전송 구현(Nodemailer) Nodemailer 모듈을 사용하면 Nodejs에서 이메일 전송 기능을 구현할 수 있다. 우선 Nodemailer를 설치하자. npm i nodemailer Gmail을 사용하면 하루 500통의 메일까지 전송이 가능하다고 한다. 사용을 위해서는 설정이 필요하다. www.google.com/settings/security/lesssecureapps 위 주소로 접속하여, 보안 수준이 낮은 앱의 액세스를 허용해 준다. Node에서 메일 전송 기능을 구현한다. router/mail.js const express = require('express'); const router = express.Router(); const nodemailer = require('nodemailer'); router.post('/se.. 개발/Node.Js 2021. 1. 1.

• 

  Node 자동재시작 Supervisor 설치 Node는 프로그램 수정 후 수동으로 재시작을 해야 반영이 된다. 이 점이 굉장히 귀찮은데 Supervisor를 설치하면 소스 수정 후 자동 재시작이 되어 매우 편리하다. Supervisor 설치 npm i supervisor -g package.json 파일을 열고, "start": "node ./bin/www" 을 다음과 같이 수정 "start": "supervisor ./bin/www" 수정 후 npm start로 node 실행 다음과 같이 나오면 성공적으로 적용된 것임. 개발/Node.Js 2020. 12. 31.

• 

  node express bootstrap 프로젝트 만들기 express 설치 npm i express-generator -g express 프로젝트 생성 -e 옵션은 ejs를 사용하겠다는 뜻 express -e 프로젝트명 프로젝트로 이동 후 npm(Node Package Manager) & boorstrap 설치 npm i && npm i bootstrap --save app.js 파일을 연 후, bootstrap 경로 추가 app.use('/bootstrap', express.static(path.join(__dirname,"node_modules/bootstrap/dist"))); views/index.ejs 파일을 다음 내용으로 변경 Cover Home Features Contact Cover your page. Cover is a one-page tem.. 개발/Node.Js 2020. 12. 31.