CATEGORIES
자바스크립트 함수중에서 자주 사용되는 타이머 함수가 있습니다. 바로 setTimeout()이죠! 아래는 어떻게 동작하고 사용하는지 자세히 알아보고자 합니다.# setTimeout()이란?일정 시간 후에 특정 코드, 함수를 의도적으로 지연한 뒤 실행하고 싶을 때 사용하는 함수로 setTimeout()을 사용합니다. 앞에서도 말했지만 자바스크립트 함수 중에서도 특히 자주 사용되는 함수 중 하나입니다. 먼저 간단한 문법, 사용방법은 아래와 같습니다.setTimeout(function() { // Code here }, delay); 위 함수는 보통 두 개의 인자를 설정하여 사용합니다.i. 호출될 콜백함수 ii. 지연시간(delay time)setTimeout() 함수의 내부에 위치한 코드 function() {
Last Modified : 2019-08-05 18:00:24
자바스크립트에서 원하는 문자열을 찾거나 배열의 값을 찾는 강단한 방법으로 indexOf() 함수가 사용됩니다. 아래에서 더 자세하게 알아봅니다.# 자바스크립트 indexOf() 알아보기내장함수 indexOf() 함수는 문자열에서 원하는 문자열을 검색하여 찾거나 아니면 배열에서 원하는 특정 배열값의 존재여부 등을 확인할 수 있습니다. 배열의 경우 위치값을 index로 반환하는 함수입니다.그럼 indexOf()는 어떻게 사용할까요? 사용 방법은 매우 간단하며 아래와 같이 함수의 매개변수로 원하는 값, 찾을 문자열을 넘겨줍니다. 아래의 방법을 보세요."문자열".indexOf("찾을 문자")특징이라면 문자타입(String) 뿐만 아니라 배열(Array)에서도 사용가능하다는 점입니다. 매우 유용하죠. 또한 만약 그
Last Modified : 2017-12-11 07:31:50
자바스크립트를 사용하면서 많이 사용되는 함수 중 하나로 setInterval()이 있다. 많이 사용된다는 것은 그만큼 중요하기 때문일 것이다. 아래는 setInterval()을 무엇인지 알아보고 어떻게 구현하는지 예제를 통해 알아보려한다.# setInterval 사용방법아래는 setInterval()을 사용하는 방법과 이를 효과적으로 사용하기 위한 팁과 다양한 정보를 알아보고자 한다. 먼저 setInterval()을 사용하는 기본적인 방법은 아래와 같다. setInterval(function() { ... }, 지연시간);문법은 그리 어렵지 않다. 그럼 타이머 함수는 언제 자주 사용할까? 아래에서 알아보자.! setInterval()을 사용하는 경우 이 함수를 사용해야 하는 경우는 매우 많이 있다. 그
Last Modified : 2019-08-05 22:55:08
오늘 알아볼 내용은 입력폼 중 하나인 input 태그가 체크박스 또는 라디오 타입으로 어떤 값을 가지고 있을때 이를 체크하였는지 확인할 수 있는 다양한 방법에 대하여 알아보고자 한다. 방문자가 이를 클릭했을경우 이를 불러오기 위한 방법은 어떤 것이 있을까?우선 순수 자바스크립트의 방법을 알아보고 제이쿼리를 활용했을때의 방법도 알아볼 것이다. 먼저 자바스크립트를 사용한 방법을 예제와 함께 자세하게 알아보자.빨간 라인이 방문자가 클릭가능한 라디오 버튼이다.아래 방법은 순수 자바스크립트 방법을 사용한 방법이다. 사실 최근에는 제이쿼리나 기타 라이브러리를 활용하기 때문에 이 코드는 많이 사용되지 않을 수 있다. 하지만 가장 기본이 되는 방법으로 알아야 할 필요가 있을 것이다.그럼 아래 예제를 통해 자세히 알아보자.
Last Modified : 2018-07-25 10:57:59
Python에서 타입을 변경하는 방법에 대하여 알아봅니다. 아래에서는 문자를 순자로 바꾸는 방법과 반대로 숫자를 문자로 바꾸기는 방법 두 가지입니다. 어떻게 하면 타입 변경이 가능할까요? # Python 숫자를 문자로 바꾸기숫자를 문자로 바꾸는 방법에 대하여 먼저 알아봅니다. 아래는 변수 test에 숫자타입의 값이 담겨있습니다. 문자로 바꾸기 위해 str() 함수 또는 repr()을 사용하여 변경해보겠습니다. 아래 예제를 봐주세요.! str() 함수 사용하기str() 함수는 가장 많이 쓰이는 간단한 문자변환 함수입니다. 아래 예제는 숫자 123.00000000001을 문자로 변화해보려합니다.> test = 123.0000000001> str(test)위 코드를 수행하면 아래와 같이 결과가 반환되며 타입이 문
Last Modified : 2019-01-22 00:32:17
안녕하세요! 팝업창을 띄우고 사용하는 방법과 기타 정보들을 모아 모아서 적어보도록 하겠습니다. 가장 먼저 팝업창은 무엇이고 언제사용하는지 간단히 적어보겠습니다. # 팝업창(Pop_up window)이란?팝업창이란 현재의 브라우저에서 추가적으로 웹페이지를 브라우저로 여는 것을 말합니다. 즉, 처음 열린 웹페이지 이외의 다른 내용을 가진 페이지를 열 수 있게합니다.팝업창을 열기위해서는 자바스크립트를 사용하며 사용자가 팝업창을 여는 액션이 사용자의 요청으로 여는 것이 아닌 사이트 운영자가 의도를 통해 열기 때문에 브라우저에는 팝업창을 강제로 열지 못하도록 막는 선택옵션 사항을 가지고 있습니다. # 팝업창은 언제 사용하나요?팝업창을 여는 가장 큰 이유는 특정 콘텐츠가 일정기간에만 해당하는 사항이거나 전략적으로 강조
Last Modified : 2018-07-25 10:58:08
이번에는 리눅스(Linux)에서 사용자의 패스워드를 변경하는 방법을 알아봅니다.이번에 클라우드 플랫폼을 사용하여 새롭게 서버를 구축하니 접근 가능한 임시 비밀번호를 받을 수 있었습니다. 임시 비밀번호로 접근 후 앞으로 사용할 패스워드로 변경해야하겠죠. 운영체제는 리눅스계열의 우분투(Ubuntu)였는데 이때 사용자의 패스워드 변경 방법으로 아래 명령어가 사용됩니다.passwd이 명령어 passwd는 현재의 사용자 또는 다른 사용자의 패스워드를 변경할 수 있게합니다.# 리눅스 사용자 패스워드 변경방법, passwdpasswd는 어떻게 사용할까요? 아래의 방법으로 사용이 가능합니다. 먼저 현재 사용자의 패스워드를 바꾸는 방법입니다.! 현재 사용자 패스워드 변경하기현재 로그인된 사용자의 패스워드를 바꾸는 경우 pa
Last Modified : 2019-10-11 15:35:11
사용자가 입력한 값을 서버에 전달하기 위한 입력 양식으로 텍스트 타입이 아닌 숫자타입인 경우가 있습니다. 예를들어 가입월 또는 일등을 나타낼때 숫자로 입력받게 합니다. 이런 경우 input 태그의 type 속성을 사용하는데 text가 아닌 number를 지정하여 값을 얻는 방법에 대하여 알아보려 합니다. 간단한 코드 모습은 아래와 같습니다.<input type="number" value="" />! type을 넘버로 지정할 경우 장점타입 설정을 text가 아닌 number로 입력할 경우 어떤 장점이 있을 수 있는지 알아보겠습니다.1. 숫자만 입력받는데 용이이는 number 지정시 숫자만 입력이 가능하기 때문입니다. 다시말해 숫자가 아닌 다른 타입은 자동으로 표시되지 않습니다. 만약 다른 타입을 설정할 경우
Last Modified : 2019-08-05 23:01:48
홈페이지를 구축시 입력폼에 자주 사용되는 라디오 버튼에 대하여 알아보고 만드는 방법을 함께 알아봅니다. 먼저 라디오 버튼은 어떻게 생겼을까요? 아래에서 자세히 알아보세요.# 웹사이트 구축시 입력폼 라디오 버튼이란, Radio button라디오 버튼은 동그란원 모양이마 선택 가능한 인터페이스를 가지고 있습니다. 방문자에게 입력값을 받기 위해서 웹사이트에 많이 사용됩니다. 쉽게는 연락하기 페이지나 관리자 페이지 등에서 쉽게 볼 수 있습니다. 어떻게 생겼는지는 아래의 이미지를 참고하세요. 이처럼 선택하는 버튼을 보신적 있으실겁니다.스크린샷) 사과와 바나나를 선택 가능하도록 라디오 버튼 사용바로 위의 이미지 처럼 몇 가지 값들 중 하나를 선택할 경우에 자주 사용되는 입력 양식 중 하나가 바로 라디오 버튼입니다. 라
Last Modified : 2018-01-26 08:02:48입력폼 ~ 서버에 값을 전달하거나 호출하는 경우 input 태그에서 엔터를 누를 경우 의도하지 않은 submit이 일어나는 경우 이를 막기위한(prevent) 방법을 알아봅니다. 어떻게 하면 가능할까요?# input 태그 엔터 submit 방지하는 방법input 태그에 엔터를 입력하면 값이 전송되는 기능은 어떻게 보면 매우 편리합니다. 하지만 입력 값을 검증하거나 이전에 다른 함수, 기능이 실행되야하는 경우 이를 방지해야하는데요 ~~ 이 때 몇 가지 방법이 존재합니다. 하나씩 알아보겠습니다.i. form 태그를 제거하기먼저 input 태그의 wrapper 태그로 form의 여부를 확인합니다. form 태그가 없는 경우에는 엔터키가 동작하지 않으므로 이를 빼는 것이 가장 빠른 방법입니다. 예를들어 ajax 비
Last Modified : 2019-08-01 08:16:07
글을 작성하는 경우 텍스트의 일부가 영역을 넘어가게되면 이를 해결하기 위해 줄바꿈, 랩핑(wrapping)이 필요합니다. 이와 관련된 다양한 방법들이 존재하며 css에도 랩핑과 관련된 다양한 속성이 존재합니다. 아래는 이와 관련된 속성을 알아보고 예제를 통해 배워보도록 하겠습니다.! 알아둘 점시작에 앞서 우리는 줄바꿈에 쓰이는 세 가지 속성을 가장 많이 볼 수 있습니다.word-wrapword-breakoverflow-wrap여기서 가장 많이 쓰이던 줄바꿈, 랩핑 속성이 예전에는 단연 word-wrap이었다면 이제는 word-break가 사용됩니다. 그 이유는...word-wrap의 경우 CSS version 1이지만 최근의 브라우저는 CSS3인 word-break를 사용해도 대부분 완벽히 호환되기 때문입니
Last Modified : 2020-12-29 19:04:44
텍스트에 CSS를 사용하여 다양한 스타일을 적용할 수 있습니다. 굵기, 색상등을 변경하는 방법도 많이 쓰이지만 이외에 밑줄선, 취소선등의 스타일 부여도 가능합니다. CSS를 사용한 text 스타일 추가방법에 대하여 자세히 알아보겠습니다.# text-decoration 속성으로 텍스트 스타일 변경 아래는 CSS를 사용해 텍스트에 밑줄, 윗줄 또는 취소선(가운데선)등을 사용하는 CSS 방법입니다. text-decoration 속성을 사용할 경우 이와 같은 스타일 구현이 가능합니다. 이 속성은 다음과 같은 값을 지정할 수 있습니다. 아래는 선택가능한 옵션입니다.i. underline(언어라인)ii. overline(윗줄라인)i. line-through(가운데라인)iv. none(스타일해제)그렇다면 이 속성을 사
Last Modified : 2019-01-14 00:54:10
입력폼을 구성하는 다양한 요소들 중 input 태그의 체크박스나 라디오 버튼 등이 많이 사용되죠. 이런 요소들은 다양한 선택 요소들 중 방문자로부터 선택 값을 얻을 수 있는 편리한 인터페이스를 제공하고 있습니다. 이런 입력폼을 label 태그와 함께 사용하면 원하는 input 태그 등의 입력폼을 체크하거나 언체크 등의 행동이 가능합니다.label 태그는 다양한 형태로 활용될 수 있으며 아래는 퍼블리싱 단계에서 다양한 방법으로 활용이 가능한 label 태그의 쓰임에 대하여 정리한 내용입니다. 다양한 상황에서 활용되는 label 태그의 쓰임을 알아보세요.# label 태그의 역할label태그가 하는 일은 input 태그를 제어하여 상태값을 변경하도록 돕습니다. 이는 input 태그만으로 선택하기 어렵거나 더 좋
Last Modified : 2019-08-03 17:53:30
서버에 파일을 업로드, 올리기 위한 방법을 알아보려합니다. 만약 올릴 파일의 개수가 한개가 아닌 다수의 파일인 경우 어떻게해야 복수 파일 업로드가 가능한지 함께 알아보도록 하겠습니다.이와 함께 복수 파일의 경우 드래그앤드랍 방식의 인터페이스를 구현한다면 사용자가 더욱 편하게 업로드를 수행할 수 있을 것입니다. 만약 드래그를 구현하기 위해서 생각할 부분도 함께 알아보겠습니다. 우선 파일을 서버에 올리기위해서 화면 앞단에서느 무엇을 해야할까요?# 다수의 파일 한번에 업로드하기 위한 방법 아래에서는 파일을 웹페이지에 선택하는 것부터 서버와 통신하는 것까지 자세하게 알아보겠습니다. ! 파일 첨부가 가능한 태그와 업로드에 필요한 속성은?우리는 파일 첨부를 하기 위하여 input 태그를 사용할 것입니다. 일반적인 t
Last Modified : 2020-09-10 17:36:55자바스크립트를 사용하여 만약 특정한 영역 및 엘리먼트의 위치로 스크롤을 위치하려면 어떻게 해야할까요? 예를들어 회원가입을 원할 경우 입력폼이 보이는 곳으로 스크롤을 위치하는 방법이 필요합니다. 이때 가능한 방법은 아래처럼 세 가지를 생각해볼 수 있습니다.i. #id를 a 태그 링크로 사용(Anchor 사용방법)ii. focus() 이벤트를 사용하는 방법은iii. scrollIntoView() 메소드를 사용하는 방법은# 자바스크립트 원하는 위치로 스크롤 이동하는 방법만약 아래와 같은 input 태그가 존재하는 경우를 예로 들어보겠습니다.<input type="text" id="nickname" />i. 하이퍼링크에 #id를 사용하기만약 입력폼이 아래와 같이 nickname 이라는 id 속성을 갖는다면 다음과
Last Modified : 2019-08-12 22:18:45제이쿼리를 사용하여 특정 태그요소가 현재 몇번째 해당하는 요소인지 알아내는 방법으로 index() 메소드를 사용할 수 있습니다. index()를 사용하면 처음을 기준으로 몇번째 해당하는지 알려주게 됩니다. 간단한 문법은 아래와 같습니다.$('선택요소').index();# 몇번째 요소인지 왜 필요할까요? 언제 사용할 수 있을까요?가장 많이 사용하는 이유 중 하나로 해당요소를 제어하기 위해서입니다. 보통 클래스명 또는 아이디 값을 사용하여 제어하지만 제어할 요소가 많거나 위치가 변하는 경우 위치를 알아내어 제이쿼리 요소로 제어하는 방법이 많이 사용됩니다. 이때 선택자 메소드인 eq()를 함께 사용할 수 있습니다.간단한 예제로 좌측 컬럼에 100개의 스위치는 우측 컬럼 100개의 글을 순시는 기능을 제공한다고합시
Last Modified : 2018-07-25 19:48:22
웹페이지를 보면 자바스크립트의 코드인 javascript:void(0)를 인라인 형태로 사용된 것을 자주 볼 수 있다. 이 코드의 역할은 무엇이고 어떤 경우에 사용되는지 알아보도록 하겠다. 먼저 이 코드는 어디서 볼 수 있을까? 바로 내부링크가 위치한 a 태그의 속성으로 사용된 것을 흔히 보게된다. 예를 들어 아래와 같은 경우이다.<p> <a href="javascript:void(0);"></a></p>우선 이 코드를 실행하면 어떻게 나타나는지 콘솔창에 입력해보겠다. 그 결과 아래와 같이 나타난다.void(0); // 입력결과는 아래처럼 undefined가 출력됨undefined보는 것처럼 undefined를 반환해주는 함수라는 것을 알게되었다. 그렇다면 왜 이 코드를 사용하는 것일까? # void(0
Last Modified : 2017-12-22 03:06:36
동일 출처 정책에 따라 외부 URL 및 도메인을 통한 DOM객체의 접근에 제한을 가지게 됩니다. 하지만 서브도메인을 사용해 중요한 소스를 서로 공유 할 필요가 있다면 아래 방법을 사용하여 이 문제를 해결할 수 있습니다.# 서브 도메인간의 통신 해결방법, 크로스 도메인 이 방법은 서브 도메인(sub domain)인 두 사이트가 정보를 교환, 통신하기 위한 경우에 이를 해결하기 위한 방법입니다. 만약 도메인이 모두 다른 경우라면 jsonp(제이슨 패딩)등의 다른 방법을 사용해야 할 것입니다... 아래는 서브 도메인간의 크로스도메인을 하기 위한 간략한 사용방법입니다. document.domain = 'webisfree.com'; 이 방법은 서브 도메인을 사용중이나 하나의 호스트를 사용하고 있음을 설정하는 방법으로
Last Modified : 2017-12-11 07:55:44한글이 깨져서 나타나는 문제를 알아보려고 합니다. 만약 html을 작성하는 에디터에는 아무 이상없이 한글이 잘 보이나 웹브라우저에는 한글이 깨져보이는 경우 어떻게 해결이 가능할까요?# 한글 깨짐현상이 브라우저에 나타나는 경우이 경우 가장 먼저 의심할 부분이 바로 html의 meta 영역에 선언된 한글 인코딩입니다. 만약 한글을 출력하는데 필요한 인코딩 설정이 잘못되었거나 되어 있지 않는 경우 한글 깨짐이 나타날 수 있습니다. 물론 서버나 데이터베이스에서도 문제가 있을 수 있죠. 이 글 맨 하단에도 언급되어 있습니다.만약 한글이 출력되도록 UTF-8로 인코딩 설정이 필요한 경우라면 html 코드에 아래에 나오게 될 설정이 필요합니다.! HTML 문서에 UTF-8 인코딩 설정하기한글을 비롯한 언어가 정상적으로
Last Modified : 2018-07-06 11:18:27
php를 사용하는 경우 서버에 위치한 디렉토리 및 파일을 삭제하는 방법에 대하여 알아보려고합니다. 파일을 추가하는 방법은 다소 복잡할 수 있지만 파일을 삭제하는 방법은 매우 간단하죠. 그럼 아래에서 알아보세요!# php 파일 삭제하는 방법 PHP는 파일 삭제를 위한 방법으로 unlink()를 그리고 디렉토리를 제거하는 방법으로 rmdir() 함수를 제공합니다. 먼저 파일을 삭제할 수 있는 unlink() 함수를 알아보면 간단한 사용방법은 아래와 같습니다.unlink('파일명')! unlink() 파일삭제 예제보기매우 간단하게 위의 함수를 사용하면 파일 삭제가 가능하다. linux를 사용해본 적이 있다면 동일한 이름의 함수와 비슷합니다. 만약 서버에 위치한 이미지 파일 중에서 파일명이 webisfree.jpg
Last Modified : 2017-12-25 07:53:55회사 등의 공간에서는 많은 사람들이 한 대가 아닌 여러 대의 프린터를 함께 사용하는 경우가 있죠. 이 경우 내 옆에 위치한 프린터를 연결하고 싶다면? 이때 해당 프린터의 ip 주소를 알아야 연결할 수 있죠. !! 어떤 프린터가 내 자리 옆에 프린터일까... ?프린터를 연결하기 위해서 윈도우의 장치관리자를 열었습니다. 하지만? 많은 프린터 목록이 나타나므로 어떤 프린터가 내 근처에 있는 프린터인지 알 수가 없습니다... 물론 프린터에 이름을 설정해두었다면 매우 쉽게 알 수 있지만 문제는 대부분 프린터명을 바꾸지 않고 기본으로 사용하는 경우가 대다수이죠... 이 경우 확인 방법은 무엇일까요? 프린터의 ip 주소로 확인해야합니다. # 프린터가 설정된 ip 주소 확인하는 방법이런 상황에서 내 PC 근처의 프린터를
Last Modified : 2020-07-11 16:43:19
자바스크립트를 사용하여 웹사이트 구축시 무한스크롤(infinite scroll)이란 용어를 들을 수 있습니다. 아래에서는 무한스크롤이란 무엇이고 자바스크립트 라이브러리 제이쿼리(jQuery)를 사용하여 무한스크롤을 구현하는 방법에 대해 알아보겠습니다. 먼저 무한스크롤이란 무엇일가요?! 자바스크립트의 무한스크롤(Infinite Scroll)이란?무한 스크롤이란 사용자 인터렉션(Interaction)의 하나로 방문자의 스크롤을 브라우저의 끝으로 내릴 경우 새로운 콘텐츠가 계속해서 생겨나 끊임없이 스크롤을 해야하는 이벤트의 반복을 의미합니다. 즉 이를 구현하면 방문자는 스크롤을 계속 내리면서 새로운 콘텐츠를 페이지 전환없이 계속해서 볼 수 있게 됩니다.무한스크롤은 계속해서 새로운 콘텐츠를 제공함@ 무한 스크롤의
Last Modified : 2020-07-07 23:42:15PHP언어에서 한글 사용시 EUC-KR로 설정된 경우가 많습니다. 이런 경우 UTF-8 또는 다른 인코딩의 차이로 어려움을 겪을 수 있죠. 아래는 인코딩을 변환하는 방법에 대하여 알아봅니다.# PHP에서 인코딩 변환하기, iconv()문자 인코딩이 필요한 경우는 주로 UTF-8로 변경해야하는 경우가 다수입니다. 문자를 검색하는 경우에도 한글은 캐릭터당 2byte이기 때문에 찾거나 변경시 iconv()를 사용해 인코딩 변경한 후 실행하면 발생가능한 인코딩 에러에서 벗어날 수 있습니다. 그럼 아래 예제를 보세요. ! UTF-8에서 EUC-KR로 변경하는 방법아래는 utf-8을 euc-kr로 변경하는 방법입니다.<?php $test2 = iconv("UTF-8", "EUC-KR", $test);?>! EUC-K
Last Modified : 2017-11-15 12:19:54
텍스트가 반짝이는 효과를 가지려면 어떻게 해야할까요? css 또는 자바스크립트를 사용하여 가능합니다. 아래에서는 텍스트에 반짝이는 효과를 만드는 방법을 자세히 알아보려고 합니다. # 텍스트 반짝이는 효과 만들기, blink우선 태그 및 css를 사용하는 방법을 알아보겠습니다. 그 전에 아래의 내용을 알아둘 필요가 있습니다. ! 간편했던 태그 및 스타일 지정의 축소문자를 깜박이게 하는 방법으로 blink 태그를 사용하는 방법과 CSS를 적용하는 방법이 있습니다. 하지만 이 방법들은 현재 구현이 되지 않으며 웹표준 역시 아니므로 Deprecated되었습니다. 더 이상 사용해서는 안되겠지요. 아래를 참고하세요. 1. Blink 태그는 w3c에서 지정한 표준태그가 아니라 더 이상 사용하지 말아야하며 기능 구현이 축
Last Modified : 2018-07-25 19:47:02
넓리 사용되는 입력폼 중 하나인 input 태그는 다양한 속성을 가지고 있습니다. 그 중에서도 사용자가 아무것도 입력하지 않았을때 팁으로 텍스트를 보여주는 속성이 바로 placeholder 속성입니다.# input 태그 placeholder 색 바꾸기이 속성은 아래와 같이 사용됩니다. 아래를 보시면 여기에 입력하세요란 텍스트가 있죠.질문: 당신의 이름은 무엇입니까?이처럼 input 태그 안에는 브라우저 디폴트값으로 색깔이 보일 수 있습니다. 즉, 브라우저의 디펜던시로 기본 컬러값이 설정되어 있는거죠. 만약 이 색상을 바꾸기 위해서는 어떻게 해야할까요? 먼저 이를 바꾸기 위해서는 pseudo 선택자를 사용해 가능합니다. 예를들면...input::-webkit-input-placeholder { color: #
Last Modified : 2020-01-20 14:58:51자바스크립트의 객체 타입을 문자열 형태로 변환, 바꾸는 방법을 알아봅니다. 어떻게하면 객체를 string으로 변환할 수 있을까요?# 자바스크립트 객체를 문자 타입으로 바꾸는 방법만약 obj라는 객체가 다음과 같이 있다고 생각해봅니다.obj = { id: 0, name: 1}이때 위 값을 보이는 그대로 문자 타입으로만 바꾼다면 가장 쉽게 JSON.stringify()를 사용할 수 있습니다. 이 함수는 객체를 JSON 타입으로 변환해주는데 있는 그대로 문자 타입으로 바꿔주기 때문에 객체 그래로를 문자열로 바꾸어주는 것과 거의 동일합니다. 그럼 아래 결과를 봐주세요. obj 객체를 문자로 변경해보겠습니다.JSON.stringify(obj)// 출력결과"{"id": 0,"name": 1}"실행결과 이처럼 문자열
Last Modified : 2019-08-01 08:07:43
자바스크립트를 사용하여 데이터 타입을 숫자로 변경하는 방법에 대하여 알아볼까 합니다. 우선 자바스크립트에서 사용되는 데이터 타입에는 문자, 숫자, 불리언, Null 등 여러가지가 있습니다. 이런 형태 중 숫자타입으로 변경할 때 사용하는 함수는 아래와 같습니다.# 자바스크립트 숫자 타입으로 변경하기, parseInt()숫자타입으로 변경하는 방법으로 자바스크립트의 내장함수인 parseInt()를 사용할 수 있습니다. 이 함수는 해당하는 값을 숫자 타입으로 바꾸어 변경해줍니다. 문법은 아래와 같죠.parseInt(숫자타입으로 변경할 문자열, 진법) 여기서 첫번째 문자열은 필수이고 진법은 없으면 10진법으로 사용됩니다. 만약 16진법인 경우라면 parseInt('123', 16)처럼 사용할 수 있죠.그렇다면 위 함
Last Modified : 2020-03-29 16:47:08만약 사이트를 방문하여 로그인이나 어떤 정보를 입력하려고 하는데 이미 자동으로 글이 저장되었다면? 그리고 그 내용이 보안이나 개인적인 정보라면 이 기능을 원하지 않을텐데도... 아래는 자동 완성 기능 사용하지 않는 방법입니다.[ 1 ] 자동 완성 기능은 언제 그리고 왜 사용되나...; 브라우저는 우리가 입력하는 입력폼, input이나 textarea에 입력할 글을 자동으로 저장하게 해주는 자동 완성 기능을 기본으로 가지고 있습니다. 그렇기 때문에 기존에 입력된 글을 앞에 몇글자만 입력해도 모두 입력할 수 있도록 도와줍니다. 매우 편리한 기능이지요. 하지만 이 기능이 항상 필요한 것은 아닙니다. 보안이나, 개인적인 정보일 경우 자동완성 기능은 꼭 꺼두어야 할 필요가 있습니다.[ 2 ] 자동 완성 기능 사용하지
Last Modified : 2015-12-04 14:37:42
윈도우즈10을 사용하다가 갑자기 화면이 흑백으로 나오더군요.... 처음에는 모니터에 연결된 케이블 문제인가라고 생각했는데 알고보니 그 문제가 아니라 윈도우즈의 흑백 기능이더군요.! 윈도우즈 흑백화면컴퓨터에 이상이 아니라 바로 윈도우즈의 기능입니다. 윈도우즈에서 흑백화면으로 설정이 있는지 몰랐습니다;; 흑백화면이 어떤 장점이 있을지 딱히 떠오르지는 않지만 그래도 명암대비를 확인해야하거나 아무래도 흑백이면 피로도가 덜하지 않을까하는 생각이 드는군요. 업무적으로는 많이 필요할 것 같습니다. 디자이너들에게 특히 좋겠네요.# 윈도우즈 흑백화면 설정 및 해제방법그럼 어떻게하면 윈도우즈의 흑백설정을 하거나 해제하는지 알아봅니다. 먼저 윈도우즈의 설정을 변경해야합니다. 아래의 단계를 따라하시기 바랍니다.'Windows 설
Last Modified : 2018-04-05 04:21:59
select 태그에서 선택된 값이 있는 경우 몇번째 해당하는지 값을 알려면 어떻게 알 수 있을까요? 아래 방법은 선택된 값을 얻는 자바스크립트 방법입니다.# selectedIndex를 사용한 select 태그의 선택값 알아내기select 태그에서 선택된 값의 위치 또는 순서 index를 알려면 selectedIndex 속성을 사용합니다. 이 속성은 선택된 태그의 index 넘버를 반환해줍니다. 간단한 사용 방법은 아래와 같이 사용합니다!selectElement.selectedIndex; 참고로 선택된 <option> 태그에 적용된 값을 알려면 element.value 프로퍼티를 사용하여 그 값을 알 수 있죠. 하지만 index 값인 순서를 알아야한다면 selectedIndex를 사용합니다. 간단하게 선택된
Last Modified : 2018-01-22 23:45:10
웹페이지 CSS를 사용하여 스크롤을 이동하지 않도록 막는 다양한 방법에 대하여 알아보려고 합니다. 특히 모바일 환경에서의 이슈도 함께 알아봅니다.# 웹사이트 스크롤을 이동하지 않도록 고정하기콘텐츠의 길이가 길면 상하 스크롤이 나타나겠죠. 만약 이런 스크롤이 안보이도록... 이동하지 않도록 하려면 어떻게 할 수 있을까요? 그 전에 스크롤 이동을 언제 왜 막아야할까요? 가장 많이 사용되는 이유입니다.1. 모달, 팝업 등 을 보여주는 경우 뒤 화면이 이동하지 않도록 하기2. 로딩등의 이유로 딤드(dimmed) 처리된 경우방법은 아래와 같이 세 가지가 존재합니다. 하나씩 알아봅니다. ! overflow: hidden을 사용하는 방법이 방법도 css만 사용하므로 매우 간편하고 효과적인 방법입니다. 동일하게 스크롤 영
Last Modified : 2020-04-04 17:34:41
프로그래밍에서 항상 중요한 부분을 차지하는 데이터 타입이 바로 배열입니다. 아래에서는 php에서의 배열(Array)에 대하여 간단히 알아봅니다.PHP에서도 데이터 타입 중 하나인 배열(Array)이 존재하며 많이 사용됩니다. 아래는 배열과 관련된 기본적인 내용 및 함수들을 모아서 정리한 내용입니다. ! Array 배열값 출력하기시작에 앞서 배열이 무엇이고 배열값 출력 방법을 살펴보겠습니다. 배열은 연결된 데이터 값을 가지는 하나의 묶음으로 생각하시면 좋습니다. 이때 구분자를 콤마(,)를 사용하여 [] 연결되게됩니다.$test = [1, 2, 3]이처럼 배열 안에선 각각의 값들을 가질 수 있습니다. 만약 배열 안에서 하나의 값만 가져올 경우 그 순서값을 사용하는데 처음 위치는 0이됩니다. 즉 위에서 2를 가져
Last Modified : 2019-08-06 20:15:21만약 여러개의 도메인을 하나의 서버(머신)에서 가동하는 경우가 많습니다. 이런 경우 서버환경(nginx, apache) 또는 서버측 언어(PHP, Python 등등)에서 설정하여 사용하게됩니다. 이때 nginx에서는 어떻게 설정해야할까요?# 멀티 도메인을 사용하기 위한 nginx 설정방법 알아보기만약 아래의 도메인을 사용하는 경우 예를들어보겠습니다. 하나의 도메인만 설정된 경우라면 아래와 같이 설정이 되어 있겠죠. 참고로 nginx 설정파일은 각각 다를 수 있습니다. 경로는 /etc/nginx/에 위치하면 nginx.conf 파일이거나 /site-available/등에 있을 수 있습니다.@ nginx.confserver { listen 80; server_name 127.0.0.1; root /var/
Last Modified : 2020-09-19 15:29:57
아이폰에서 input 태그를 보면 디바이스에 따른 스타일 속성이 기본으로 적용되는데 그 중 하나가 바로 테두리이고 내부의 그림자이다.만약 사용자가 둥근 테두리를 제거하거나 그림자를 삭제하길 원하는 경우 어떻게 해야할까? 아래와 같이 다음 스타일 속성을 적용하면 된다.<style>input { -webkit-appearance: none; -webkit-border-radius: 0;}</style>appearance css속성은 적용된 그림자 또는 기타 디폴트(default) 스타일 속성을 임의로 제거 또는 설정 가능하도록 해준다. 그리고 border-radius의 경우 테두리를 제거할 수 있다.
Last Modified : 2016-03-22 20:11:09
Windows 10에서 Linux Bash Shell을 사용할 수 있다는 사실!! 알고계신가요? 아래는 윈도우즈10에서 Bash shell을 사용하여 리눅스를 사용하는 방법에 대하여 매우 상세하게 ~ 알아보고자 합니다!!# 윈도우즈 10에서 Linux bash shell 사용방법 알아보기먼저 윈도우즈 10에서는 우분투(Ubuntu bash shell) 리눅스 쉘이 사용 가능합니다. 윈도우에서 리눅스를 사용할 수 있다니 얼마나 행복한 일인가요~ 현재 베타 버전으로 윈도우 10에서 사용이 가능합니다. 사용방법은 비교적 간단합니다. 아래의 단계를 순서대로 수행하세요.! 윈도우즈 설정으로 이동먼저 설정을 누르고 아래의 스크린샷 메뉴 중에서 업데이트 및 복구 버튼을 클릭합니다~! 윈도우즈 업데이트 및 복구 화면에서
Last Modified : 2020-06-30 13:55:25Redis 서버의 구축 및 운영 등 여러가지 방안에 대하여 생각한 바를 정리한 내용이다. 먼저 Redis 서버가 필요한 이유는 무엇일까...# Why Redis?Redis를 왜 구축하는가를 아려면 Redis가 무엇인지부터 알아야한다. ! Redis란?Redis는 데이터베이스의 여러 솔루션 중 하나로 메모리를 사용하는 키, 밸류 형식의 데이터베이스이다. Redis의 최고 장점은 메모리를 사용하기 때문에 매우 빠른 속도를 자랑한다. 일반적인 하드 디스크에 비하여 상대적으로 엄청나게 빠를수도 있다. 다만 메모리라는 제약으로 공간이 크지 않고 키, 밸류(Key, Value) 형식의 입출력 방식이기에 복잡한 데이터베이스에 적합하지 않다.위 내용만으로도 장점과 단점이 너무 극명하다. 빠르나 효과적인 주 데이터베이스로
Last Modified : 2017-10-27 06:31:50PHP 언어에서도 인코딩에 대한 선언이 필요합니다. 아래는 php 서버에서 인코딩을 설정하여 사용하는 방법을 알아봅니다. 먼저 인코딩 설정은 왜 필요할까요?# 인코딩 설정이 필요한 이유인코딩 설정은 각각의 환경에서 사용되는 문자들이 어떤 인코딩의 포맷을 가졌는지 결정합니다. 인코딩 선언은 매우 중요한데 클라이언트, 서버, 데이터베이스가 서로 다른 문자 인코딩을 사용하는 경우 문자깨짐 및 오류 등이 발생할 수 있을 것입니다. 이런 문제를 방지하기 위해서 하나의 어플리케이션에 필요한 인코딩을 동일하게 유지시키게됩니다.# php 인코딩 설정하기php의 경우 euc-kr 또는 utf-8이 많이 사용됩니다. 이를 설정하는 방법은 아래와 같습니다.<?php header('Content-Type: text/html;
Last Modified : 2017-12-31 08:25:43웹페이지에서 url/uri를 통해서 전달된 쿼리스트링 정보를 자바스크립트에서 읽어오는 방법에 대하여 알아봅니다.# 쿼리스트링 정보 자바스크립트 읽어오는 방법웹페이지로 정보를 전달하고 이를 읽어오는 방법으로 쿼리스트링(query string)을 통해 전달할 수 있습니다. 이렇게 전달된 경우 아래와 같은 형태의 url 주소를 가지고 있겠죠.https://webisfree.com/?name=webisfree&no=123&order=5만약 자바스크립트를 사용하여 전달 된 파라미터 값을 읽으려면 어떻게 할까요? 방법을 생각해보면 아래와 같이 떠오를 수 있습니다.@ location.search 값에 split() 사용 또는 정규표현식 사용하기split()은 특정 문자를 기준으로 문자열을 자르기 때문에 & 기호를 기준으
Last Modified : 2022-03-23 14:29:03
리눅스 환경에서 nginx를 사용하여 웹서버를 구축하는 방법에 대하여 알아봅니다. nginx는 잘 알려진 apache와 같이 서버를 구동하는데 많이 사용되는 웹엔진입니다. 일단 자신의 개발 환경에 nginx를 설치합니다. 그리고 맨 아래에는 미들웨어로 사용된 uwsgi에 대하여도 설정 및 기타 사항을 함께 알아봅니다.# 리눅스(Linux) 환경에 nginx를 설치하는 방법 알아보기아래는 ubuntu 환경에서 nginx를 설치하는 명령어입니다.sudo apt-get install nginx-full설치가 완료되었다면 이제 설치된 폴더로 이동합니다.! nginx 설정파일 수정하기먼저 /etc/nginx/nginx.conf 파일이 있다는 가정 아래에 파일을 수정합니다.(설정 파일의 위치는 다를 수 있습니다.) 특
Last Modified : 2018-02-02 06:41:06익스플로러(IE)에서 input 태그의 text 속성을 가지는 입력폼을 사용하는 경우 구현된 UI의 추우측에서는 자동으로 X버튼이 생성됩니다. 이 X버튼은 텍스트를 모두 삭제하는 버튼으로 이버튼을 제거하거나 스타일을 변경하는 방법을 알아보고자 합니다. 어떻게해야할까요?# IE에서 input 태그 스타일 변경하기 이를 컨트롤 하기 위해서는 의사선택자(pseudo selector)를 사용해야 합니다. 이때 아래와 같이 해당 엘리먼트를 선택하여 사용할 수 있습니다.input::-ms-clear { } 그렇다면 만약 입력폼에서 실제로 어떻게 사용되는지 간단한 예제를 사용해보겠습니다.! IE에 적용하는 input 태그 스타일 예제보기만약 아래와 같이 검색어를 입력받는 폼이 있는 경우 아래와 같이 사용합니다.<span
Last Modified : 2017-12-25 04:12:13웹페이지의 폰트를 부드럽게 사용하기 위해서 css의 font-smoothing 속성을 사용할 수 있습니다. 아래는 이를 적용하는 방법과 효과에 대하여 알아봅니다.# CSS의 -webkit-font-smoothing 속성 알아보기CSS의 스타일 속성 중 하나로 -webkit-font-smoothing 속성이 있습니다. 이 속성을 적용하면 브라우저에 표현되는 텍스트가 렌더링될 때 부드럽게 표현되는 장점이 있습니다.즉 폰트를 더 부드럽게 사용하기 위해서 사용하는 스타일 속성입니다. 이런 이유로 많은 웹페이지에서 사용되는 텍스트 스타일 속성입니다. 아래와 같이 사용합니다.-webkit-font-smoothing: antialiased; 다만 이 속성은 표준 속성이 아니라 모든 브라우저 및 환경에서 구현되지 않습니다
Last Modified : 2020-07-17 20:20:27try catch 구문은 오류를 발견하고 핸들링하기 위하여 사용됩니다. 이 안에 사용된 함수는 이미 개발자에 의해서 수정이 되었다고 보고 자체 에러를 발생시키지 않기 때문에 오류가 발생하여도 무시할 필요가 있는 경우만 사용되죠. 그렇다면 언제 try catch 구문을 사용할까요?# try catch 구문은 언제 필요한가아래의 경우에 try catch 구문을 사용합니다.써드파티 모듈 등 자체 개발한 앱이 아닌 경우 에러를 회피하기 위함빠르게 발생한 에러 위치를 제공하기 위함좀 더 자세한 에러 정보를 제공하기 위함완성된 어플리케이션인 경우 에러를 출력하지 않기 위함이 외에도 많으나 기본적으로 위와 같은 경우에 주로 사용됩니다. 그럼 아래는 간단한 사용방법입니다.# try catch 구문 예제보기기본적으로 아래와
Last Modified : 2017-04-26 11:21:08Python에서 Jinja2 템플릿을 사용하여 표현식으로 html에 출력할 경우 if문을 사용하는 방법을 알아봅니다. 참고로 Python의 Flask 프레임워크는 Jinja2를 사용합다.# Python에서 표현식으로 html에 if 문 사용하기먼저 Jinja2에서 if 문을 사용하기 위해서는 아래와 같이 블록 {% %} 내부에 if를 선언하여 사용합니다. 아래는 if문법을 사용한 4가지 키워드입니다.{% if 조건식 %}// 조건식에 해당하는 경우 endif를 만나기 전까지의 구문을 수행함{% elif 조건식 %}// 위 조건이 아닌 경우 또 다른 조건을 수행함{% else %}// 위 조건이 아닌 경우 무조건 수행함{% endif %}// if 조건식을 코드실행을 끝냄위 4가지의 문법을 사용하여 if문을
Last Modified : 2018-02-08 21:43:48Notepad++는 무료이면서도 다양한 기능을 제공한다. 오늘 알아볼 내용은 자동으로 줄바꿈 되는 기능을 어떻게 해야하는지 알아보고자 한다. 줄여서 자동줄바꿈, Auto wrapping 기능이다.이 기능은 모두 알겠지만 혹시 모르는 분들을 위해 설명하자면...라인에 글자 수가 많아지면 코드상에서는 변동이 없느나 보여지는 화면단에서 일정 텍스트까지만 보여주고 이 이하 부터는 스크롤 없이 편집이 가능하도록 아래에 보여주는 기능이다.이 기능이 있고 없고의 차이는 코딩 시간에 지대한 영향을 미칠 수 있기 때문에 반드시 알아두면 좋은 팁이라고 할 수 있으니 꼭 참고하자!!# 자동 줄바꿈 하는 방법은?먼저 자동줄바꿈은 상위 메뉴의 보기에 있다. 보기 메뉴를 클릭하면 아래와 같이 하단 메뉴를 볼 수 있다.위에서 8번째
Last Modified : 2016-03-13 12:15:22자바스크립트에서 엘리먼트 및 노드에 텍스트를 추가하거나 값을 가져올 수 있는 방법 중 하나인 textContent에 대하여 알아봅니다. 여기서 방법 중 하나라고 얘기한 이유는 잘 알려진 innerText가 존재하기 때문이죠.# 자바스크립트 textContent 프로퍼티 알아보기자바스크립트 프로퍼티인 textContent는 텍스트를 추가할 수 있는 매우 간단한 프로퍼티입니다. 사용방법은 아래와 같습니다.element.textContent = '내용'일반적으로 텍스트를 엘리먼트에 추가할 경우 innerText가 많이 쓰입니다. 가장 많이 알려져 있기도 하고 innerHTML과 비슷하기 때문에 외우기도 더 쉽죠. 이런 이유로 textContent가 덜 사용되긴 하지만 이 둘의 차이점이 존재합니다. 그럼 공통점과
Last Modified : 2020-03-10 22:19:33페이지를 새로 만들경우 공통적으로 사용되는 데이터를 또 다시 선언하는 것은 자원의 낭비이죠. 때문에 다른 페이지가 가진 데이터를 가져와 공통적으로 사용할 필요가 있습니다.이때 아래의 방법으로 다른 페이지의 자원을 불러올 수 있습니다. 이는 소스의 재활용성을 높여주기 때문에 매우 유용하다고 할 수 있으며 php를 비롯한 대부분의 서버단 언어들이 가지고 있는 함수입니다.include()include_once()그리고require()require_once()위 네가지 함수 거의 동일한 역할을 합니다. 외부의 파일을 현재의 파일로 불러오는 것이죠. 그렇다면 위 네가지 함수의 차이점은 무엇일까요?! include()와 require()의 차이점; 이 두가지 함수의 차이점부터 알아보겠습니다. include()는 해당하
Last Modified : 2015-11-03 19:16:56
리눅스에서 변경된 파일이나 디렉토리를 찾을 때 날짜나 시간을 기준으로 이 후에 변경된 것들을 찾는 방법에 대하여 알아봅니다. 어떻게 하면 원하는 날짜 이후의 파일이나 디렉토리를 찾을 수 있을까요?! 날짜 기준 파일 찾기는 언제 왜 필요한가?가장 먼저 서버에 문제가 생겼을 경우 어떤 파일을 수정해서 문제가 생겼는지도 확인해야 할 수 있겠습니다. 설정 파일을 수정하거나 아니면 서버의 특정 파일을 수정해서 에러가 발생했을 수도 있기 때문에 문제가 발생한 시점 이 후의 변경사항을 체크해야 하죠.# 리눅스 특정일 기준 변경 및 추가된 파일, 디렉토리 찾는 방법만약 2019-03-14일 이 후에 변경된... 즉 새로 생성되거나 업데이트 된 파일 디렉토리를 찾는다면? 이 경우에 아래와 같이 입력하면 설정된 날짜 이 후에
Last Modified : 2019-08-06 21:59:45제이쿼리를 사용하여 input 태그 그리고 textarea 태그를 활성화 또는 비활성화로 변경하는 방법을 알아봅니다. 입력폼인 위 태그를 활성화 또는 비활성화 할 경우 글 입력(작성)이 가능 또는 불가능하게 변경할 수 있습니다. 그렇다면 아래는 이를 바꾸는 방법입니다. $(ele).attr('disabled', 'disabled');# 제이쿼리 attr()함수를 사용한 비활성 방법이 방법은 jQuery를 사용하여 해당태그에 속성값 disabled를을 추가하는 방법입니다. attr() 메소드를 사용하면 속성과 속성값을 추가할 수 있습니다. attr() 메소드를 사용하는 간단한 예제는 아래에서 알아봅니다.# 글입력폼 비활성화 예제보기, attr('disabled')아래 예제를 봐주세요. 버튼을 클릭할 경우 활성
Last Modified : 2017-12-31 15:07:47안녕하세요 ~ 예전에는 단문의(매우 매우 짧은...) 글을 자주 올렸는데 컨텐츠도 부족한데 글까지 부족하면 왠지 안될 것 같아서... 아무래도 인사부터 시작하면 좀 더 심의를 기울여 작성하지 않을까요?ㅎ 오늘은 비밀번호 입력을 위한 input 태그에 대해 알아보겠습니다.! 다른 input 태그와의 차이점; type 속성에 일반적으로 text를 넣지만 비밀번호는 password를 넣어줍니다. 그렇게 되면 아래처럼 패스워드가 ******표시로 보이게 되죠....<input type="text" value="test"> // input창에 test가 출력<input type="password" value="test"> // input창에 ***가 출력... 헐 끝까지 다 적었는데 다 날라갔네요... 오토 마우스
Last Modified : 2015-10-30 08:15:59웹페이지에서 테이블 또는 리스트 형태의 그리드를 UI로 구현하는 경우가 많습니다. 예를들어 어떤 어드민 사이트에서 회원 리스트를 보여주는 경우 이름, 나이 등의 정보를 리스트해 보여줄 수 있죠.# 만약 해당 row가 몇 번째 해당하는지 알려면?리스트에서 홍길동이란 이름을 가진 사람을 찾아야합니다. 해당하는 엘리먼트가 몇 번째인지 알려면 어떻게할까요? 엘리먼트가 부모로부터 몇번째 요소인지 확잊해야겠지만 table 태그를 사용하는 경우라면 rowIndex를 사용할 수 있습니다.! rowIndex 사용하여 해당 row index값 얻기table 요소의 tr 태그... 즉 row에 해당하는 엘리먼트에 적용할 수 있으며 rowIndex는 해당하는 Index값을 반환하게됩니다. 이때 위에서부터 0부터 1, 2, 3 .
Last Modified : 2018-06-26 08:49:07