개발/jQuery

[jQuery All in One] 기존 컨텐츠를 둘러싼 새로운 컨텐츠를 삽입하는 방법 (unwrap, wrap, wrapAll, wrapInner)

.unwrap() - 지정한 요소의 부모요소를 제거 .wrap() - 지정한 요소를 wrap의 매개변수로 전달한 태그로 감싼다 .wrapAll() - 지정한 클래스들을 wrapAll 매개변수로 전달한 태그로 모두 감싼다 .wrapInner() - 지정한 요소에 자식 컨텐츠를 wrapInner 매개변수로 전달한 태그로 감싼다. .unwrap() // 지정한 요소의 부모요소를 제거한다. $('p').unwrap(); .wrap() // 지정한 요소를 wrap의 매개변수로 전달한 태그로 감싼다. $('p').wrap(''); .wrapAll() // 지정한 클래스들을 wrapAll 매개변수로 전달한 태그로 모두 감싼다 $('.inner').wrapAll(''); .wrapInner() // 지정한 요소에 자식..

개발/jQuery

[jQuery All in One] 특정 요소의 앞쪽에 원하는 컨텐츠를 삽입하는 방법 - . prependTo()

jQuery prependTo 메서드는 지정한 요소의 자식 요소들의 가장 앞쪽에 원하는 컨텐츠를 삽입합니다. Javascript 배열에서 unshift 메서드를 생각하시면 이해가 편할 것 같습니다. .append() - 특정 요소의 뒤쪽에 컨텐츠를 삽입 .appendTo() - 특정 요소의 뒤쪽에 컨텐츠를 삽입 .prepend() - 특정 요소의 앞쪽에 컨텐츠를 삽입 .prependTo() - 특정 요소의 앞쪽에 컨텐츠를 삽입 .html() - 특정 요소에 html을 삽입 jQuery version: 3.4.1 .prependTo(target) 설명 : 일치하는 요소를 대상의 끝에 삽입합니다. .prependTo(target) target Type: Selector or htmlString or Elem..

개발/jQuery

[jQuery All in One] 특정 요소에 원하는 요소를 삽입하는 방법 - .html()

jQuery html 메서드는 지정한 요소의 자식 요소에 원하는 컨텐츠를 삽입합니다. Javascript 메서드 중에 innerHTML을 떠올리시면 됩니다. .append() - 특정 요소의 뒤쪽에 컨텐츠를 삽입 .appendTo() - 특정 요소의 뒤쪽에 컨텐츠를 삽입 .prepend() - 특정 요소의 앞쪽에 컨텐츠를 삽입 .prependTo() - 특정 요소의 앞쪽에 컨텐츠를 삽입 .html() - 특정 요소에 html을 삽입 jQuery version: 3.4.1 .html() 설명 : 일치하는 요소 집합에서 첫 번째 요소의 HTML 내용을 가져옵니다. .html() 이 메소드는 매개변수를 받지 않습니다. 이 방법은 XML 문서에서 사용할 수 없습니다. HTML 문서에서 .html ()을 사용하여..

개발/jQuery

[jQuery All in One] 특정 요소의 뒤쪽에 원하는 컨텐츠를 삽입하는 방법 - .appendTo()

jQuery appendTo 메서드는 지정한 요소의 자식 요소들의 가장 뒤쪽에 원하는 컨텐츠를 삽입합니다. Javascript 배열에서 push 메서드를 생각하시면 이해가 편할 것 같습니다. .append() - 특정 요소의 뒤쪽에 컨텐츠를 삽입 .appendTo() - 특정 요소의 뒤쪽에 컨텐츠를 삽입 .prepend() - 특정 요소의 앞쪽에 컨텐츠를 삽입 .prependTo() - 특정 요소의 앞쪽에 컨텐츠를 삽입 .html() - 특정 요소에 html을 삽입 jQuery version: 3.4.1 .appendTo(target) 설명 : 일치하는 요소를 대상의 끝에 삽입합니다. .appendTo(target) target Type: Selector or htmlString or Element or..

개발/jQuery

[jQuery All in One] 특정 요소의 뒤쪽에 원하는 컨텐츠를 삽입하는 방법 - .append()

jQuery append 메서드는 지정한 요소의 자식 요소들의 가장 뒤쪽에 원하는 컨텐츠를 삽입합니다. Javascript 배열에서 push 메서드를 생각하시면 이해가 편할 것 같습니다. .append() - 특정 요소의 뒤쪽에 컨텐츠를 삽입 .appendTo() - 특정 요소의 뒤쪽에 컨텐츠를 삽입 .prepend() - 특정 요소의 앞쪽에 컨텐츠를 삽입 .prependTo() - 특정 요소의 앞쪽에 컨텐츠를 삽입 .html() - 특정 요소에 html을 삽입 jQuery version: 3.4.1 .append( content [, content ] ) 설명 : 매개변수로 지정된 컨텐츠를 일치하는 요소의 끝에 삽입합니다. .append( content [, content ] ) content Type..

개발/jQuery

[jQuery All in One] 일치하는 요소 복사하는 방법 (clone)

jQuery version: 3.4.1 .clone([withDataAndEvents]) 설명 : 일치하는 요소를 깊은 복사(deep copy) 합니다. .clone([withDataAndEvents]) withDataAndEvents (default: false) Type: Boolean 이벤트 핸들러와 데이터를 요소와 함께 복사해야하는지 여부를 나타내는 Boolean 값입니다. .clone([withDataAndEvents][, deepWithDataAndEvents]) withDataAndEvents (default: false) Type: Boolean 이벤트 핸들러와 데이터를 요소와 함께 복사해야하는지 여부를 나타내는 Boolean 값입니다. deepWithDataAndEvents (defaul..

개발/jQuery

[jQuery All in One] 클래스 선택자 다루기 (addClass, removeClass, hasClass, toggleClass)

jQuery version: 3.4.1 .addClass( className ) 설명 : 지정된 클래스를 일치하는 요소 집합의 각 요소에 추가합니다. .addClass( className ) className Type: String .addClass( function ) function Type: Function( Integer index, String currentClassName ) => String 사용예시 요소의 집합에서 선택된 요소의 클래스를 추가하는 예시입니다. .removeClass( className ) 설명 : 지정된 클래스를 일치하는 요소 집합의 각 요소에서 제거합니다. .removeClass( className ) className Type: String .removeClass( fu..

개발/jQuery

jQuery contains() 메서드를 활용한 검색기능 구현

서론 안녕하세요. 정말 오랜만에 포스팅을 남기네요 ㅎㅎ 겨울방학이 시작하고 1월중말까지 정말 많은 일들이 있었네요.ㅎㅎ 사실 이 일들때문에 글을 작성하지 못했다는 것은 핑계인 것 같고, 앞으로 꾸준히 기술 포스팅을 하도록 하겠습니다. 그래도 좋은 소식이 있다면, 2월 1일부터 프론트엔드 개발자로서 첫 출근을 시작한다는 점입니다. 그래도 학부시절에 나름대로 이쪽 분야로 가고싶어서 독학을 하며 실력을 키워나갔는데, 첫 직장을 제가 가고싶은 분야로 나아갈 수 있게 되어서 정말 만족스럽습니다.ㅎㅎ 이제 앞으로 역량을 많이 쌓아나가면서 정말 전문가다운 포스팅을 많이 남기도록 하겠습니다! ㅎㅎ 오늘 제가 포스팅할 주제는 jQuery의 contains() 메서드를 활용한 간단한 검색기능 구현입니다. contains(..

개발/UI개발

[UI 개발] responsive image gallery(반응형 이미지갤러리)

오늘 예제는 반응형 이미지갤러리입니다.자바스크립트나 jQuery를 활용하지 않고, 순수 HTML, CSS 코딩을 통해 반응형 이미지갤러리를 구현하는 것이 포스팅의 목표입니다. 바로 예제를 보면서 시작해보겠습니다. HTML 시맨틱마크업 CSS3 이미지는 각자 파일의 경로에 맞춰서 작성해주시기 바랍니다. 위의 코드는 브라우저나 디바이스의 크기에 따라 유동적으로 변하게 만들어 줍니다. 맨 위의 @media all and (min-width: 960px)는 960px 이상 사이즈부터는 #gallery_layout을 가로, 세로 가운데 정렬을 시켜주기 위해 사용했습니다. 테스트는 하단의 URL에서 확인하실 수 있습니다. http://mismaven.kr/test/responsive_gallery/index.htm..

Computer science/알고리즘

[자바스크립트로 구현한 알고리즘] List Filtering

In this kata you will create a function that takes a list of non-negative integers and strings and returns a new list with the strings filtered out. Example filter_list([1,2,'a','b']) == [1,2] filter_list([1,'a','b',0,15]) == [1,0,15] filter_list([1,2,'aasf','1','123',123]) == [1,2,123] 필자답안 map을 사용하긴 했지만, 뭔가 2%부족한 답안입니다. 제가 원했던건 map을 사용해서 type이 number라면 그 값만 나오게 하는 것이었는데 number가 아닌 값들은 모두 undef..

개발/jQuery

[jQuery] 예제와 함께하는 제이쿼리 강의 (jQuery - addClass() / hasClass() / removeClass() / toggleClass())

예제와 함께하는 제이쿼리 강의 이번에 다룰 기능은 addClass() / hasClass() / removeClass() / toggleClass() 메소드입니다. jQuery addClass() .addClass() 메소드는 특정한 클래스를 요소에 추가할 수 있습니다. 문법.addClass( className )className ( 지정한 클래스 이름을 추가) 데이터타입 : 문자열(String) 1개 또는 2개 이상의 클래스들을 속성에 추가합니다. .addClass( function )function Type: Function( Integer index, String currentClassName ) => String 함수에서 반환된 클래스를 속성에 추가합니다.여기서 함수는 인자(매개변수) 값으로 in..

Computer science/알고리즘

[자바스크립트로 구현한 알고리즘] Sum of the first nth term of Series

Description: Task: Your task is to write a function which returns the sum of following series upto nth term(parameter). Series: 1 + 1/4 + 1/7 + 1/10 + 1/13 + 1/16 +... Rules:· You need to round the answer upto 2 decimal places and return it as String.· If the given value is 0 then it should return 0.00· You will only be given Natural Numbers as arguments. Examples: SeriesSum(1) => 1 = "1" Series..

개발/UI개발

[UI 개발] css3 - tab menu 제작(간단한 탭메뉴 제작)

🖐 들어가기 전에 이번에는 간단한 탭메뉴를 자바스크립트를 통해 구현한 코드를 공유하도록 하겠습니다. 아래에 예시처럼 동작하는 UI를 개발하는 것이 이번 포스팅의 목표입니다. 💻 HTML 시멘틱마크업 How to develop a tab menu with jQuery 제작자 : 박경두 고려대학교 경영정보학과 멋쟁이 사자처럼 4기 About Portfolio Contact Travel About Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer ..

개발/jQuery

[jQuery] 예제와 함께하는 제이쿼리 강의 (jQuery - animate())

예제와 함께하는 제이쿼리 강의 이번에 다룰 기능은 animate() 메소드입니다. jQuery addClass() .addClass() 메소드는 특정한 클래스를 요소에 추가할 수 있습니다. 문법.addClass( className )className ( 지정한 클래스 이름을 추가) 데이터타입 : 문자열(String) 1개 또는 2개 이상의 클래스들을 속성에 추가합니다. .addClass( function )function Type: Function( Integer index, String currentClassName ) => String 함수에서 반환된 클래스를 속성에 추가합니다.여기서 함수는 인자(매개변수) 값으로 index 와 currentClassName을 가지고 있습니다. 이 부분은 예제를 가지..

개발/jQuery

[jQuery] 예제와 함께하는 제이쿼리 강의 (jQuery - slideDown() / slideUp() / slideToggle())

이번에 다뤄볼 기능은 jquery - slide() 메소드입니다. jQuery Effects - Sliding slide 메소드는 요소를 위 그리고 아래로 움직이게 도와주는 기능을 가지고 있습니다. slide 메소드는 아래와 같이 3가지 기능을 가지고 있습니다. slideDown()slideUp()slideToggle() jQuery slideDown() Method slideDown() 메소드는 요소를 아래로 내려주는 역할을 합니다. 문법 $(selector).slideDown(speed,callback); 인자는 지금까지 소개했던 메소드와 같이 속도를 제어할 수 있는 인자와 추가적인 기능을 적용시킬 수 있는 callback 함수 인자를 가지고 있습니다. 아래는 slideDown() 메소드의 예시입니다..

개발/유틸리티

텍스트 에디터 Atom(아톰) 패키지 추천(Atom HTML Preview)

아톰에서 코딩을 하면서 실시간으로 HTML 파일의 상태를 확인하게 해주는 패키지입니다.프론트엔드 작업을 할 때 꽤나 유용하게 쓰이는 패키지죠.프론트엔드 개발자라면 꼭 이 패키지를 설치해서 사용해보도록 하세요. 설치법 사용예시 Atom-HTML-Preview 명세 A live preview tool for Atom Editor.Install:apm install atom-html-previewToggle HTML Preview:Press CTRL-SHIFT-H in the editor to open the preview pane.An example with Twitter Bootstrap 3 Package

개발/jQuery

[jQuery] 예제와 함께하는 제이쿼리 강의 (jQuery - fadeIn() / fadeOut() / fadeToggle() / fadeTo())

jQuery Effects - Fading jQuery는 희미하게 나타나게하고 없애는 fade() 메소드를 가지고 있습니다. jQuery에서는 아래 4가지 fade() 메소드를 가지고 있습니다. fadeIn() fadeOut() fadeToggle() fadeTo() 우선 fadeIn() 메소드에 대해서 알아보도록 하겠습니다. jQuery fadeIn() Method 메소드 이름과 같게 희미하게 보여지게 해주는 메소드입니다. show() 메소드에 자동으로 speed가 적용된 느낌의 메소드입니다. 문법 $(selector).fadeIn(speed,callback); 전 강의에서 다뤘던 show() 그리고 hide () 메소드와 같은 인자를 가지고 있습니다. 속도나 콜백함수에 대해서 잘 모르시다면, 전 강의..

개발/jQuery

[jQuery] 예제와 함께하는 제이쿼리 강의 (jQuery - show() and hide())

jQuery - hide() and show() 제이쿼리에는 hide() 와 show() 메소드를 통해 HTML 요소를 숨기고, 보이게 해줄 수 있는 기능을 가지고 있습니다. 예시 결과값을 보면, 박스가 사라지고 나타나는 것을 볼 수 있습니다. 문법 $(selector).hide(speed,callback); $(selector).show(speed,callback); 각 메소드에 속도를 제어할 수 있게 도와주는 인자값을 넣을 수 있는데요. 값은 milliseconds 단위로 입력하면 됩니다. 콜백함수를 인자 값으로 넣을 수도 있는데요 이 함수를 통해서 hide() 나 show() 메소드가 완료된 다음에 어떠한 처리를 가능하게 해줍니다. 쉽게 말해서, hide()와 show() 메소드는 동작속도와 동작 ..

개발/CSS3

[CSS3] emmet을 통해 효율적으로 CSS를 작성해보자

Emmet? Emmet이란 editor plugin으로써 단축키를 이용해 HTML, XML, XSL 코딩 속도를 비약적으로 향상시켜주는 툴입니다. 가령 긴 테이블을 코딩할 때, 손으로 입력하는 건 누가봐도 바보같은 짓이고 줄줄이 복사해 붙이는 것도 별반 나을 게 없어 보입니다. 물론 테이블 만드는 툴을 쓰는 게 가장 일반적인 방법이긴 합니다. 근데 언뜻 봐도 같은 태그의 반복임을 알 수 있는데요. 아래와 같이 자동완성을 해보면 어떨까요? table>tr*5>td*5 table 태그로 열고 그 아래 tr 태그 5개 열고 그 아래 td 태그 5개 열라는 뜻입니다. Emmet은 대부분 코딩을 하는 사람이라면 다른 툴과 달리 기본은 금세 배울 수 있습니다. 기본적으로 Emmet의 약어는 단어의 첫 글자를 따서 ..

개발/Javascript

[자바스크립트] javascript - this

자바스크립트에서 함수를 호출할 때 기존 매개변수로 전달되는 인자 값에 더해, arguments 객체 및 this 인자가 함수 내부로 암묵적으로 전달되어집니다. this 인자는 이해하기 조금 까다롭습니다. this가 이해하기 어려운 이유는 자바스클비트의 여러가지 함수가 호출 패턴에 따라 this가 다른 객체를 참조(this 바인딩)하기 때문입니다. 아래와 같이 this 바인딩에는 3가지 패턴이 있습니다. 객체의 메소드를 호출 -> 해당 메소드를 호출한 객체로 바인딩함수를 호출 -> 전역 객체에 바인딩샘성자 함수를 호출 -> 새로 생성되는 객체에 바인딩 오늘 차근차근 이 this 바인딩에 대해서 정복해 나가도록 하겠습니다. 1. 객체를 호출할 때 this 바인딩 객체의 메소드를 호출할 경우, 메소드 내부 코..