LATEST POSTs 최근 등록된 포스팅 목록 최신순

---

인기순

• js [자바스크립트] 배열을 역순으로 정렬, reverse() 자바스크립트를 사용하여 데이터를 가공, 처리하는 일들이 점점 더 많아지고 있다. 이때 중요한 부분 중 하나로 데이터를 어떻게 정렬(Sorting) 하느냐 역시 고민인 부분이다. 만약 테이블 그리드 형태의 데이터가 존재한다고 했을때 쉽게 정렬할 수 있는 방법이 있을까?데이터를 불러와 처리하는 경우 일반적으로 배열이 데이터 형태로 저장된 경우가 많다. 그 이유는 무엇일까? 배열로 저장된 데이터는 소팅하여 재정렬 후 보여주기에 편

  View : 27380 / 2016-04-19
  
• js 자바스크립트 클로저(closure) 사용한 예제보기 자바스크립트는 매우 뛰어난 함수형 언어이다. 자바스크립트는 클로저를 활용하는 방법이 존재하는데 이를 사용하기 위해서는 심도있는 이해가 필수적이라 할 수 있을 것이다. 본 페이지에서는 자바스크립트의 클로저가 무엇인지 알아보고 클로저(closure)를 활용하여 카운트 다운 코드를 만들어 보고자 한다. 그럼 클로저가 무엇인지 우선 알아보도록 하자.! 클로저(Closure)란?클로저는 함수내에서 선언된 변수는 해당하는 스콥(Scope)내에서 생

  View : 5389 / 2016-04-16
  
• js 자기실행함수에서 느낌표와 괄호의 차이점 알아보기 자바스크립트의 자기실행함수(self-invoking function)은 세가지로 사용할 수 있다는 것을 알고 있다. 그런데 괄호를 사용하는 방법과 느낌표 ! 를 사용하는 방법이 정말 완전히 동일한 것일까? 아니면 어떤 차이점이 있을까?이 의문은 클로저를 만들기 위해 함수를 사용해 다른 함수를 리턴하던 중 다른 결과가 나왔기 때문에 적어본다. 일단 아래의 코드를 보면 두 개의 자기실행 함수를 적어보았다.// 느낌표를 사용한 자기실행함수add = function

  View : 1754 / 2016-04-16
• js 자기 실행 함수를 사용해 무한반복 만들기 자기실행함수(self-invoking function)에 대하여 알아보고 이를 활용해 무한 반복하여 특정 함수를 실행시키려한다. 이 때 무한 반복을 하기 위한 setInterval()을 사용하는 것과의 차이점을 알아보고자 한다.# 자기실행 함수자기 실행함수 또는 자기실행 익명함수는 스스로 실행하는 함수를 의미한다. 아래의 함수를 보면...<div class

  View : 13194 / 2016-04-15
  
• js 자바스크립트 요소에 이벤트 부여하기, addEvenetListener() 자바스크립트 메소드 중 하나인 addEventListener()에 대하여 알아보자. addEventListener()를 사용하면 선택한 요소에 특정한 이벤트를 발생시키고 뒤에 따르는 함수를 실행하게 해주는 매우 유용한 이벤트 메소드이다.eventTarget.addEventListener(event, function, bubbling or Capturing);event // 이벤트 타입을 나타냅니다.function /

  View : 6174 / 2016-04-14
• js [자바스크립트] confirm() 메소드 사용방법 알아보기 confirm() 메소드에 대하여 알아보고자 한다!! confirm() 메소드는 매우 자주 사용되며 이를 수행할 경우 텍스트와 확인 및 취소 버튼을 출력하여 사용자의 선택을 받는 매우 간단한 다이얼로그 박스를 보여준다.이를 통해 사용자가 어떤 행위를 할 것인지 매우 간단한 방법으로 결과를 얻을 수 있는데 그에 따른 결과를 t

  View : 25230 / 2016-03-22
  
• js 인라인, 임베디드, 내부 및 외부 자바스크립트 코드 용어 이해하기 우리는 자바스크립트 코드를 완성하면서 인라인(Inline), 임베디드(Embeded), 내부(Internal) 및 외부(External)이란 말을 자주 듣고 사용한다. 이들의 차이점은 무엇이고 무엇이 정말 다른 것인지 알아보고자 한다... 먼저 가장 흔히 쓰이고 있는 인라인 형식의 자바스크립트는 무엇인지 알아보자.! 인라인 자바스크립트 코드; 여기서 인라인(Inline) 자바스크립트 코드는 임베디드(Embeded)의 또 다른 의미임을 알

  View : 4893 / 2016-03-22
• js html 팝업창 띄우는 방법 및 고려할 사항들 안녕하세요! 팝업창을 띄우고 사용하는 방법과 기타 정보들을 모아 모아서 적어보도록 하겠습니다. 가장 먼저 팝업창은 무엇이고 언제사용하는지 간단히 적어보겠습니다. # 팝업창(Pop_up window)이란?<

  View : 81539 / 2016-01-19
  
• js 서버측 쿠키와 클라이언트측 쿠키의 차이점은? 우리는 쿠키에 대하여 잘 알고있다. 일반적으로 쿠키(cookie)라 함은 저장소의 한 형태로 필요한 몇가지 정보들을 정해진 유효기간까지 사용할 수 있도록 해주는 아주 편리한 기능이다. 이 쿠키에 대하여 혼동되는 부분이 하나 있는데 바로 서버측이나 아니면 클라이언트측이냐 하는 것이다...이런 문제는 서버측 언어와 클라이언트 언어 둘 다 <span data-custom-style=

  View : 5227 / 2015-12-28
• js localStorage vs cookie 장단점 로컬 저장소를 웹에서 사용할 경우 가장 많이 사용되는 방법은 쿠기 그리고 로컬스토리지입니다. 이때 쿠키(Cookie)와 로컬스토리지(Local Storage)은 둘 다 다른 목적을 가지고 있기 때문에 무엇이 옮다고 하기는 애매한 부분이 있습니다. 각각의 쓰임새에 따라 적합한 방법을 선택해야 합니다. 하지만 그렇게 하

  View : 11311 / 2015-12-28
• js [자바스크립트] 정규표현식을 사용하여 태그만 제거하기 아래는 정규표현식을 사용한 태그의 제거 방법입니다. 태그를 제거하기 위해서 내장함수에서 태그를 지원하는 함수가 있다면 편리하겠지만 순수 자바스크립트에서는 없는 부분이기에 다른 방법이 필요합니다. 가장 간편한 방법이 바로 정규표현식을 활용하는 방법입니다.정규표현식의 <span style="co

  View : 48713 / 2015-12-22
  
• js [jQuery] addBack() 이전 요소 선택하기 제이쿼리 1.8부터 사용이 가능한 메소드 addBack()에 대하여 알아보겠습니다. 아래는 기본적인 사용방법입니다.<span style="text-align: center; width: 90%; margin: 0 auto;display: block; font-size: 0.96em; background-color: #CDF5F9; padding: 2px 8px; box-sizing: border-box; border-radius: 4px; color:

  View : 2389 / 2015-12-08
• js 제이쿼리 자바스크립트 소문자 대문자 변환방법 특정한 텍스트를 대문자 또는 소문자로 자동으로 변경하려면 어떻게 해야 할까요? 변환을 위한 방법은 다양합니다. 서버쪽 언어나 CSS에서도 변환 방법이 있습니다. 하지만 가장 많이 쓰이는 방법이 바로 자바스크립트를 사용하는 방법입니다.자바스크립트는 대소문자 변환을 위한해서 아래와 같은 함수를 제공합니다. 이 함수의 간단한 사용방법입니다.<span data-custo

  View : 14981 / 2015-11-30
• js 제이쿼리 css() 에서 background-image 안되는 경우 제이쿼리에서 이미지값을 가지고 있는 요소의 속성값을 읽어온 뒤 이를 배경이미지로 넣어서 보여주기 위한 코드를 작성하였습니다. 하지만 실행해보니 정상 동작을 하지 않는 경우 확인할 부분이 어디에 있는지 알아보겠습니다.# css('background-image') 예제소스 코드아래코드는 li 태그에 있는 속성값 d

  View : 3188 / 2015-11-26
• js 제이쿼리 hover() 이벤트 배우기 제이쿼리 이벤트 메소드 중 하나인 hover()에 대하여 알아봅니다.제이쿼리는 다양한 이벤트 관련 메소드를 제공하는데요 만약 마우스를 특정 엘리먼트 위에 올리면 발생하게되는 이벤트 역시 제이쿼리를 사용하여 제어할 수 있습니다. 이때 사용하는 메소드가 바로 hover()입니다

  View : 47811 / 2015-11-25
  
• js 현재 브라우저에 설정된 언어값 확인 방법 웹사이트가 로컬라이제이션(Localization) 다국어 서비스를 지원하는 경우라면? 다양한 언어를 지원하기 위해서 고려할 부분이 많습니다. 특히 방문자가 웹브라우저를 통해 접속한 경우 클라이언트에서 사용된 언어가 무엇인지 알아야 할 필요가 있죠. 그럼 자바스크립트에서 이를 확인하는 방법이 문엇이 있을까요?아래는 <span style="color

  View : 13501 / 2015-11-10
  
• js 제이쿼리 change() 이벤트 알아보기 자바스크립트를 사용해 이벤트를 동작하기 위해서는 addEventListner() 라는 함수가 존재한다. 이벤트를 구현할 경우 제이쿼리를 사용하면 간단한 방법으로 이벤트를 제어할 수 있는데 대표적인, bind(), on(), 메소드 외에 change() 메소드에 대하여 알아보자.해당요소.change(실행할 코드);change() 메소드는 해당하는 요소의 value에 변화가

  View : 18560 / 2015-11-05
• js 자바스크립트 인라인 방식 사용에 대한 장점과 단점 자바스크립트는 웹을 개발하는 대부분의 사람들이 사랑하고 사용하고 있는 훌륭한 언어이다. 이런 언어는 각각의 개발자 마다 사용하는 방법도 차이가 있을 수 있는데 오늘은 그 중에서도 인라인 방식(inline script)의 스크립트에 대하여 알아보고자 한다.스크립트의 사용 방식을 구분한다면 아래와 같이 할 수 있을 것 같다.1. 인라인 또는 임베디드 방식2. 외부 스크립트 방식둘 다 사용되는 방식이다. 어느 사이트에서든

  View : 1986 / 2015-11-05
• js 배열 불러와 변경하여 호출, map(array, callback) 아래 예제는 jQuery의 map() 메소드 방법입니다. 자바스크립트 Array.map()과는 다르니 참고하세요!배열에 저장된 값을 불러와 함수를 이용해 값을 반환하는 제이쿼리 메소드 map()에 대하여 알아보고 each() 메소드와의 차이점은 무엇인지 알아보겠습니다.먼저 아래는 map() 메소드의 간단한 사용 문법입니다.$.m

  View : 2313 / 2015-11-05
• js 비동기식으로 파일전송이 가능한가 자바스크립트를 사용하여 비동기 방식으로 파일 업로드하는 것이 가능합니다.비동기 ajax로 파일 업로드가 가능이 전에는 파일을 비동기식으로 데이터에 전달하기 어려웠으나 자바스크립트 API인 FormData를 사용하면 쉽게 파일을 서버에 ajax로 전달할 수 있죠.자세한 내용은 아래 포스팅에서 설명하였으니 링크를 참고

  View : 2346 / 2015-11-05
• js 제이쿼리를 사용해 scrollHeight를 가져오는 방법 제이쿼리를 사용하여 현재 페이지의 스크롤 전체에 해당하는 높이 값을 알려면 어떻게 알 알 수 있을까요? 아래에서 자세히 알아봅니다.# 제이쿼리를 사용한 스크롤에 해당하는 높이 값순수 자바스크립트에서 사용되는 scrollHeight 프로퍼티는 특정요소에 사용시 <span data-custom-st

  View : 23574 / 2015-11-03
• js textarea 태그 높이 자동으로 조절하는 방법 textarea의 경우 height: auto; 속성값을 사용하여 자동으로 높이 조절이 되지 않습니다. 그래서 만약 글이 길어질 경우 스크롤을 내려야만 하는 불편함이 생기게됩니다. 그렇다면 글이 길면 자동으로 길어지는 textarea 태그를 구현하면 사용자 입장에서 매우 편리할 것입니다. 아래는 이를 구현하기 위한 방법입니다.<span

  View : 30140 / 2015-11-03
  
• js AJAX 통신에서 YQL을 사용한 크로스도메인 방법 SOP(Same Origin Policy) 때문에 자신의 도메인이 아닌 다른 웹사이트에 있는 코드를 가져오는 방법이 간단하지 않습니다. 브라우저 정책에 어긋나기 때문에 오류를 발생하기 때문이죠. 하지만 이를 우회할 수 있는 방법이 있으니 가장 큰 방법으로 아래의 세가지입니다.1. JSON Padding2. YQL3. 서버단 페이지에서 코드를 불러와 파싱 후 ajax로 불러오는 방법<

  View : 3572 / 2015-11-03
• js 자바스크립트 소수점 버림, 올림, 반올림, 절사 방법 자바스크립트를 활용하여 숫자타입의 값을 버리거나 올리기(버림 또는 올림) 등등 다양한 방법으로 처리하는 방법에 대하여 알아보려합니다. 어떻게하면 숫자 타입 데이터를 간단하게 처리할 수 있을까요?# 자바스크립트 숫자 타입의 값 버림, 올림 등 다양한 방법다른 언어들 처럼 숫자를 쉽게 변환할 수 있는 편리한 함수가 자바스크립트에서 존재하

  View : 186752 / 2015-10-29
  
• js 스와이프 갤러리 정보 및 플러그인, swipe gallery # 스와이프 갤러리란 무엇인가?스와이프 갤러리는 흔히 사용되는 일반적인 갤러리에 추가적인 기능을 가진 갤러리를 의미합니다. 기본적으로 터치를 기반으로 한 페이지 이동이 가능한 경우

  View : 5146 / 2015-10-26
  
• js [제이쿼리] 요소 복사하기, clone() 똑같은 요소가 필요한 경우... 그래서 특정 요소를 복사해야한다면 제이쿼리에서 지원하는 clone() 메소드를 사용하여 간단하게 만들 수 있다. 간단하게 사용하는 방법은 아래와 같다.$(선택요소).clone();clone() 메소드는 단순하게 요소를 복사하는

  View : 25022 / 2015-10-23
• js DOM요소 변경하기, replaceWith() 특정 DOM 요소를 다른 DOM 요소로 제이쿼리를 사용하여 변환하는 방법에 대하여 알아보겠습니다. 이때 사용하는 제이쿼리 메소드는 바로 replaceWith()입니다. 먼저 이 메소드의 간단한 사용방법은 아래와 같습니다.<span style="text-align: center; width: 90%; margin: 0 a

  View : 6008 / 2015-10-22
  
• js [제이쿼리] DOM 요소의 중복선택 방법 선택자를 사용해 여러개의 요소들을 한꺼번에 선택하여 변수에 저장할 경우 콤마를 구분자로 사용하면 간단하게 요소들을 합칠 수가 있다. 그럼 아래의 예제를 보자.! 태그 선택시 복수 선택하는 방법 예제보기# span태그와 p태그 합쳐서 선택하기var test = $('span, p');// test 변수에 span과 p태그가 모두 배열값으로 저장됨# div태그와 section태그 합쳐서 선택하

  View : 2244 / 2015-10-22
• js [제이쿼리] contains() 메소드 알아보기 자바스크립트 라이브러리 제이쿼리의 메소드 중 하나인 contains() 메소드에 대하여 알아보자. 우선 contains() 메소드는 무엇인가? contains() 메소드는 선택한 요소가 특정한 부모요소에 속해 있는지를 확인할 때 사용한다. 즉 특정 요소를 선택하여 부모 요소로 가지는지의 여부를 boolean으로 확인할 수 있는 메소드이다. 이때 반환되는 값은 <span style="color:

  View : 4583 / 2015-10-22
  
• js [제이쿼리] 배열로 저장하기, toArray() 특정값을 배열로 저장하기 위해서 toArray() 메소드를 사용할 수 있다. toArray()는 불러온 값을 배열로 저장한다. 아래는 간단한 사용방법이다.<div tabindex="-1" contenteditable="false" data-cke-widget-wrapper="1" data-cke-filter="off" class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_focused cke_widget_selected" data-ck

  View : 9919 / 2015-10-22