전체보기
HTML
CSS
JAVASCRIPT
PYTHON
REACT
VueJS
JQUERY
LINUX
PHP
DATABASE
LODASH
WEBDEVETC
ETC
Search
JSON Pretty
Close
CATEGORIES
JSON Pretty
HTML
CSS
React
VueJS
Javascript
jQuery
Lodash
Python
Database
Linux
WEBDEVETC
ETC
Search
Contact Us
LATEST POSTs
최근 등록된 포스팅 목록
최신순
인기순
webdevetc
브라우저 한글 깨짐 현상과 인코딩 방안
신규 프로젝트를 진행하면서 브라우져 한글깨짐 이슈에 대하여 몇 가지 적어봅니다.# 특정환경에서의 한글깨짐 발생한글깨짐 현상은 예전부터 항상 존재했죠. 하지만 한글을 사용하는 방문자에게는 한글이 깨지는 현상이 없도록 최선을 다해야겠습니다. 하지만 현실은 그리 녹록하지 않은 것 같은데요... 어떤 문제가 있을까요?HTML에 설정된 한줄의 메타태그가 모든 한글깨짐을 해결해준다면 얼마나 좋을까요? 하지만 잘생긴 HTML5 UTF-
View :
4387
/
2018-07-12
webdevetc
[HTML5] canvas 요소에 이미지 추가하기
HTML5의 캔버스(canvas) 요소에 이미지를 추가하는 방법에 대하여 알아봅니다. 어떻게하면 이미지를 추가할 수 있을까요? 이미지를 추가하는 것은 가능할까요?# canvas에 이미지 추가하는 방법canvas에는 도형을 그리기도 하지만 원하는 이미지를
View :
16219
/
2018-07-02
webdevetc
커스텀 툴팁(tooltip) 만드는 방법
제한된 영역에 더 많은 정보 또는 추가적인 정보를 제공할 수 있는 툴팁창을 만들어보려합니다. 이때 title 속성을 이용하는 시스템 툴팁이 아닌 커스텀으로 툴팁을 만드려면 어떻게할까요?! 툴팁이 필요한 이유Admin 관리자 웹사이트를 만드는 경우 테이블 공간에 많은 데이터가 추가될 수 있습니다. 하나의 cell
View :
10667
/
2018-06-25
webdevetc
파이어폭스(Firefox) 문자 깨짐현상 발생시 해결방법
웹페이지를 작성 후 동작시 파이어폭스에서만 한글 문자 깨짐 현상이 나타나는 경우가 있더군요. 왜 이런 문제가 나타났으며 어떻게 해결하였는지 아래에서 알아봅니다.# 파이어폭스에서 한글 문자 깨지는 현상한글 문자 깨짐은 매우 자주 일어납니다. 대부분 인코딩 설정이 잘못되어 나타나기 때문에
View :
9589
/
2018-06-25
webdevetc
캔버스에 곡선 커브를 그리는 방법 및 예제보기
얼마 전 캔버스(canvas)를 사용하여 원을 그리는 방법을 알아보았습니다. 이번에는 원이 아닌 캔버스에 곡선을 그리는 방법에 대하여도 알아보려고 합니다. 어떻게 하면 부드러운 곡선을 그릴 수 있을까요?# 캔버스(canvas)에 원을 그리는 방법canvas 요소에 원을 그리는 방법은 크게 세 가지를 사용할 수 있습니다. 구분해보면...<ul c
View :
6220
/
2018-06-17
webdevetc
canvas 기존 스타일 저장 및 불러오기, save() restore()
canvas에 그리는 경우 context 영역에 설정된 기존의 스타일을 저장하고 다시 불러올 수 있는 save(), restore() 함수에 대하여 알아봅니다.# 캔버스 적용중인 스타일 저장 또는 불러오기하나의 context 영역에는
View :
5655
/
2018-06-14
webdevetc
IE 팝업창에서 스크롤바 안나타나는 경우 해결방법
자바스크립트를 사용하여 팝업창을 띄우는 경우 IE 익스플로러에서 스크롤바가 없는 경우 어떻게해야하는지 알아봅니다.# IE 팝업창에 스크롤바가 없는 경우 해결하기자바스크립트를 사용하여 팝업창을 띄우는 경우 아래와 같이 open()을 사용합니다.window.open();</s
View :
22620
/
2018-06-08
webdevetc
[HTML5] 캔버스(Canvas)에 원 그리기
HTML5에서는 canvas태그에 다양한 도형을 간단하고 쉽게 그릴 수 있습니다. 도형 중에서 많이 사용되는 원을 그리는 방법을 알아봅니다. 어떻게하면 원을 그릴 수 있을까요?# canvas 태그를 사용하여 원 그리는 방법캔버스에 원을 그리는 방법으로 두 가지 방법이 존재하며 컨텍스트에 다음 함수를
View :
15468
/
2018-06-07
webdevetc
CANVAS 태그에 오브젝트, 도형 이동하는 방법
HTML5의 새로운 API, CANVAS는 웹 어플리케이션에 새로운 가능성을 열어주었습니다. 데스크탑, 모바일 앱에 버금가는 게임 등을 만들 수 있게해주었지요.아래는 이런 기능을 구현하기위해 필요한 canvas에 그려진 shape, 도형을 이동시키는 방법에 대하여 알아보겠습니다.# canvas 태그에 도형 그리고 이동시키기얼마 전 올린 포스팅에서 canvas의 클릭 이벤트를 사용해 도형 등의 오브젝트 이동 방법을 알아보았습
View :
6487
/
2018-06-06
webdevetc
[HTML5] Canvas 요소의 도형에 클릭 이벤트 사용하는 방법
HTML5의 가장 큰 특징 중 하나인 Canvas(캔버스)! Canvas에 그려진 도형(Shape)에 클릭 이벤트를 추가하려고 합니다. 어떻게하면 가능할까요? 아래에서 알아보세요.! 캔버스 내부 도형에 클릭 이벤트를 추가하는 것은 불가능먼저 캔버스 내부 도형에 직접 이벤트를 추가하는 것은 어렵습니다... 즉 캔버스 내부에 원을 그렸다면 그 원에 이
View :
11057
/
2018-05-31
webdevetc
jQuery UI datepicker 시작 요일순서 바꾸는 방법
웹페이지에서 날짜를 선택하는 UI 컴포넌트 중 간단하면서 쉽게 적용하는 jQuery Datepicker가 많이 사용됩니다. 이때 보여주게되는 요일 시작의 기본값이 아래 순서와 같습니다.[ 일 월 화 수 목 금 토 ]이때 만약 다른 요일부터 시작하게하려면? 어떻게할까요? 가능할까요??<span data-cu
View :
5400
/
2018-05-30
webdevetc
ASP.NET 한글 깨짐 현상 인코딩 해결방법
서버측 언어가 ASP.NET을 사용하는 경우 만약 한글 깨짐 현상이 발생한다면? 아마도 인코딩(encoding) 설정이 잘못 된 경우일 수 있습니다. 이 경우 어떻게하면 한글 깨짐을 해결할 수 있는지 몇 가지 해경방법을 알아보도록 하겠습니다.먼저 인코딩 설정은 하나의 페이지에 적용하는 페이지 단위 적용방법과 전체 페이지 적용 방법으로 구분할 수 있습니다. 우선 페이지 단위로 설정하는 싱글 페이지 방법입니다.<b
View :
15224
/
2018-05-25
webdevetc
Naver Cloud, ncp를 사용한 서버 구동하기
작년인가요? 네이버에서 클라우드 서비스를 발표했을때 꼭 써봐야겠다라고 생각했는데 이제 사용하게 되었습니다. 얼마 전 기존의 AWS 이마존 웹서비스에서 네이버 클라우드 플랫폼 서비스인 NCP로 서버를 이전하였기 때문이죠.(스크린샷) Naver Cloud Platform 메인 페이지 모습<span data-custom-style="ct09
View :
2935
/
2018-05-02
webdevetc
nginx uwsgi를 사용한 소켓 연결시 Permission 에러 발생
Python을 사용하여 웹서버를 구축하는 경우 nginx와 uwsgi를 사용한 웹서버 구성이 많이 사용됩니다. 저 역시 오랜 기간 이와 같이 사용해왔죠.uwsgi를 nginx서버와 연동하는 방법으로 웹소켓(socket)을 사용하는 방법이 있습니다. 얼마 전 잘 사용하던 AWS에서 Naver Cloud 서비스로 서버를 이전하면서 이 둘 사이의 연결이 잘 되지 않아 큰 위기를 겪게 되었죠.문제가 된 상황은 소켓 파일에 Permissio
View :
3877
/
2018-04-30
webdevetc
리눅스(Linux) 사용자 패스워드 변경 방법
이번에는 리눅스(Linux)에서 사용자의 패스워드를 변경하는 방법을 알아봅니다.이번에 클라우드 플랫폼을 사용하여 새롭게 서버를 구축하니 접근 가능한 임시 비밀번호를 받을 수 있었습니다. 임시 비밀번호로 접근 후 앞으로 사용할 패스워드로 변경해야하겠죠. 운영체제는 리눅스계열의 우분투
View :
76096
/
2018-04-19
webdevetc
드래그앤드랍(Drag and Drop)구현시 IE에서 동작 안하는 문제
HTML5를 사용하여 드래그앤 드랍을 사용한 UI를 구현할 경우 모든 브라우저(크롬, 파이어폭스 등등)에서는 잘 동작하지만 IE에서 동작안하는 경우가 있어 알아보았습니다. 이때 IE(Internet Explorer)에서 나타날 수 있는 문제와 해결방법을 알아봅니다.# IE에서 나타날 수 있는 문제먼저 event객체의dataTransfer를 사용하는 경우 setData(
View :
4497
/
2018-04-06
webdevetc
www에서 non-www 도메인으로 설정방법, nginx
도메인을 구매하여 사용하는 경우 다음처럼 두 가지 방식의 도메인 주소를 생각할 수 있습니다. 하나는 도메인 앞에 www가 있는 경우이고 하나는 www가 없는 경우입니다.1. www.webisfree.com2. webisfree.com물론 둘 다 사용할 수 있습니다. 다만 <span data-c
View :
5471
/
2018-03-30
webdevetc
도메인에 메일서버 MX값 설정하는 방법
도메인을 보유하는 경우 해당 도메인으로 메일을 주고 받을 수 있습니다. 그렇게 하려면 도메인 네임서버에 메일서버인 MX에 필요한 값을 설정해야합니다. 아래는 MX값을 설정하는 방법에 대하여 알아봅니다. 먼저 메일서버는 무엇일까요?# MX 메일서버란?메일서버는 특정 도메인으로 메일을 주고 받을 수 있는 서버를 의미합니다. 일반적으로 <span data-cust
View :
7363
/
2018-03-30
webdevetc
nginx 413 Request Entity Too Large 에러 해결하기, 파일 업로드 사이즈
클라이언트의 브라우저에서 파일 업로드를 수행할 경우 파일 용량 제한에 에러가 발생할 수 있습니다. nginx를 사용중이라면 아래와 같은 에러가 발생합니다.스크린샷) nginx 서버에 파일 업로드 크기에
View :
38112
/
2018-03-29
webdevetc
이메일 해킹, 악성코드의 위험성을 알아보자
하루를 시작하는 아침~ 이메일을 확인하는데 눈에 띄는 메일이 있어서 제목을 보았습니다.메일제목: Cargo B/L- 174072640제목과 함께 첨부파일이 하나 있더군요. 막상 제목을 봤을때 생각했죠. 포워딩이나 선사 메일 B/L 같은데 나한테 잘못보낸건가? 그래도 약간의 의심은 있었기에 첨부된 파일을 열지는 일단 다운을 받았습니다. 그리고 소스를 확인해보니 아니나 다를까 ... 역시 <s
View :
3107
/
2018-03-21
webdevetc
nginx 서버 SSL 인증서 멀티 도메인에 사용하는 방법
하나의 서버에 여러개의 도메인에서 SSL 인증서를 사용하는 방법에 대하여 알아봅니다. 어떻게 하면 가능할까요?# 하나의 서버에 여러 SSL 적용방법, nginx우선 하나의 서버에서 멀티 도메인을 사용하는 경우 여러개의 SSL 인증서를 적용할 수 없습니다. 만약 여러개의 인증서를 사용하려면 SNI(Server Name Indication)을 사용하는 방법이 있습니다
View :
5919
/
2018-02-17
webdevetc
uwsgi 설정 후 service 에러가 발생하는 경우
Python을 사용하면서 uwsgi와 nginx를 사용하여 웹서버를 구축하려는 경우 uwsgi 서비스에서 다음과 같은 에러가 발생하였습니다.'StartJob filed to start'이와같은 에러 발생시 어떻게 해결할 수 있는지 알아보고자 합니다.<span data-cust
View :
2291
/
2018-02-05
webdevetc
도메인 TypeA로 연결방법 및 nginx 설정하기
새롭게 도메인을 구입한 경우를 이를 서버에 연결하기 위한 방법으로 네임서버(Name Server)를 변경합니다. 하지만 도메인 설정시 Type NS, 네임서버 외에도 사용목적에 따라 설정을 달리 할 수 있을 것입니다. 아래는 자주 사용되는 설정 타입인 TypeA, ip를 사용한 연결방법에 대하여 알아보며 이를 nginx에 설정하는 방법까지 알아봅니다.#
View :
3427
/
2018-02-03
webdevetc
네이버 번역 파파고 API Python 사용방법 및 사용기
네이버 번역을 쉽고 빠르게 적용하기 위한 방법으로 Naver의 PAPAGO(이하 파파고)를 사용할 수 있습니다. 파파고는 네이버 번역 어플리케이션으로 간단한 API 역시 제공됩니다. 이때 NMT / SMT 번역이 제공되며 원하는 번역 기능을 선택하여 사용하면 됩니다.# 네이버 번역 NMT? SMT? 무엇인가이 둘의 차이점은 네이버
View :
9550
/
2018-02-01
webdevetc
nginx를 사용하여 멀티 도메인 연결하는 방법
만약 여러개의 도메인을 하나의 서버(머신)에서 가동하는 경우가 많습니다. 이런 경우 서버환경(nginx, apache) 또는 서버측 언어(PHP, Python 등등)에서 설정하여 사용하게됩니다. 이때 nginx에서는 어떻게 설정해야할까요?# 멀티 도메인을 사용하기 위한 nginx 설정방법 알아보기만약 아래의 도메인을 사용하는 경우 예를들어보겠습니다. 하나의 도메인만 설정된 경우라면 아래와 같이 설정이 되어 있겠죠. 참
View :
29807
/
2018-01-06
webdevetc
PuTTY 복사하고 붙여넣는 방법 알아보기
웹페이지 서버에 접근하는 방법으로 여러가지 방법이 존재합니다. 예를들어 리눅스의 터미널을 사용할 수도 있을 것입니다. 아래는 자주 사용되는 어플리케이션 PuTTY의 기능 중 복사하여 붙여넣는 방법을 알아봅니다.# PuTTY 복사하기 붙여넣기텍스트를 복사하여 붙여넣을 경우 어떻게해야할까요? 이 경우 붙여넣기 방법으로 마우스 오른쪽 버큰을 사용합니다.<span dat
View :
11258
/
2017-12-28
webdevetc
자바스크립트 이미지핑 기술 알아보기
자바스크립트를 사용하여 서버와 통신하는 다양한 방법이 존재합니다. 오늘은 이미지핑(image ping) 기술에 대하여 알아보고 어떻게 사용하는 예제를 통해 배워보려합니다.# 이미지핑이란?서버와의 통신을 확인할때 한번쯤 ping이란 명령어를 사용해보신 적
View :
3758
/
2017-12-20
webdevetc
nginx에 SSL 사용하는 방법. comodo SSL 인증서 설치하기
예전에 보안 프로토콜 SSL을 사용하기 위해 가격을 알아보았는데(벌써 3-4년 전이군요...) 그때는 SSL이 매우 비쌌던 걸로 기억합니다. 물론 제가 최저가를 못찾았는지 모르겠지만요;; 그때는 비용 때문에 사용을 주저하다 말았지요.최근 SSL이 이제는 반드시 필요한 것 같아서 가격을 알아보기 시작하였습니다. 그런데 최근에는 저렴한 SSL... 심지어 무료 제공도 있더군요;
View :
9046
/
2017-12-16
webdevetc
git이 왜 필요하나. 반드시 써야하는가?
얼마전 신규 서비스를 구축하려는 지인분에게 Git의 사용을 추천드렸습니다. 그러자 돌아온 한 마디... Git 그거 꼭 써야하는거야?그래서!! Git이 왜 필요한지 간단하게 정리 요약해보고자합니다. 개발자가 아니라면 또는 git을 써보지 않으면 왜 git이 필요한지.. 그리고 무엇이
View :
9179
/
2017-12-13
webdevetc
Facebook Comment 사용방법 및 알림 설정하기
페이스북의 댓글 기능을 추가하고 사용하는 방법에 대하여 알아보려합니다. 먼저 제가 페이스북 댓글을 사용하는 이유는?# 페이스북 댓글을 사용하는 이유사실 초기에는 webisfree.com에서 직접 소셜 기능의 댓글 서비스를 지원했습니다. 이 경우 다양한 SNS의 api를
View :
2325
/
2017-12-07
First
Prev
1
2
3
4
5
6
7
...
Next
Last