728x90
반응형
jQuery contains() 메서드를 활용한 검색기능 구현 포스팅 썸네일 이미지

개발/jQuery

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

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

2017.01.29 게시됨

[UI 개발] responsive image gallery(반응형 이미지갤러리) 포스팅 썸네일 이미지

개발/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..

2016.12.10 게시됨

[CSS3] css3 가운데(중앙) 정렬 포스팅 썸네일 이미지

개발/CSS3

[CSS3] css3 가운데(중앙) 정렬

css를 활용해 가로 및 세로로 중앙정렬하는 방법에는 정말 많은 방식들이 있습니다. 각 중앙정렬 방법은 모두 주의할 점이 있지만 그러한 방법들을 조합하면 IE8 및 이후 버전에서도 일관되게 크로스 브라우징을 지원하는 중앙정렬 기법을 만들어낼 수 있습니다. 블록 만들기 반응형 웹사이트를 제작하고 있다면 대부분 요소의 크기를 퍼센트로 지정할 것이며, 여기서는 임의의 .container 요소를 만듭니다. 컨테이너 요소가 적절히 늘려질 수 있도록 html, body { width: 100%; height: 100%; }로 지정합니다. 테이블로 바꾸기 이제 .container 안에서 자주 사용되는 테이블 패턴을 이용해 수직 중앙정렬을 하도록 하겠습니다. 이렇게 하려면 일반 블록 레벨 요소가 필요하고, 이 요소들이..

2016.11.09 게시됨

[자바스크립트로 구현한 알고리즘] List Filtering 포스팅 썸네일 이미지

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..

2016.10.19 게시됨

개발/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..

2016.10.19 게시됨

[UI 개발] css3 - tab menu 제작(간단한 탭메뉴 제작) 포스팅 썸네일 이미지

개발/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 ..

2016.10.18 게시됨

개발/UI개발

[UI 개발] css3 - overlay side navigation 제작(오버레이 사이드 네비게이션)

Side Navigation(overlay) 이번에 준비한 사이드 네비게이션은 컨텐츠를 밀어내고, 컨텐츠 부분의 배경을 오버레이하는 사이드 네비게이션입니다. 예시 HTML 시멘틱마크업 우선 사이드 네비게이션을 제작하기 위한 기본적인 HTML 마크업을 위 코드와 같이 진행했습니다. CSS3 사이드 네비게이션 부분에 관련된 CSS 코드입니다. Javascript jQuery를 활용해서 개발했다면, 훨씬 깔끔하고, 유지보수하기 쉬운 코드가 되었겠지만, 자바스크립트를 공부하기 위해서 자바스크립트를 통해서 UI 개발을 진행했습니다. 전체 코드 완성된 코드입니다. 복사해서 사용하셔도 되지만, 최대한 동작 원리를 이해하시고 사용하시면 실력 키우는데에도 많은 도움이 있을 것 같습니다.

2016.10.18 게시됨

개발/UI개발

[UI 개발] css3 - push-content side navigation 제작(사이드 네비게이션)

Side Navigation(push content) 이번에 준비한 사이드 네비게이션은 컨텐츠를 밀어내는 사이드 네비게이션입니다. 예시 HTML 시멘틱마크업 우선 사이드 네비게이션을 제작하기 위한 기본적인 HTML 마크업을 위 코드와 같이 진행했습니다. CSS3 사이드 네비게이션 부분에 관련된 CSS 코드입니다. Javascript jQuery를 활용해서 개발했다면, 훨씬 깔끔하고, 유지보수하기 쉬운 코드가 되었겠지만, 자바스크립트를 공부하기 위해서 자바스크립트를 통해서 UI 개발을 진행했습니다. 전체 코드 완성된 코드입니다. 복사해서 사용하셔도 되지만, 최대한 동작 원리를 이해하시고 사용하시면 실력 키우는데에도 많은 도움이 있을 것 같습니다.

2016.10.18 게시됨

개발/UI개발

[UI 개발] css3 - full-width side navigation 제작(풀 사이드 네비게이션)

Side Navigation(full-width) 이번에 준비한 사이드 네비게이션은 페이지 전체를 덮는 사이드 네비게이션입니다. 예시 HTML 시멘틱마크업 우선 사이드 네비게이션을 제작하기 위한 기본적인 HTML 마크업을 위 코드와 같이 진행했습니다. CSS3 사이드 네비게이션 부분에 관련된 CSS 코드입니다. Javascript jQuery를 활용해서 개발했다면, 훨씬 깔끔하고, 유지보수하기 쉬운 코드가 되었겠지만, 자바스크립트를 공부하기 위해서 자바스크립트를 통해서 UI 개발을 진행했습니다. 전체 코드 완성된 코드입니다. 복사해서 사용하셔도 되지만, 최대한 동작 원리를 이해하시고 사용하시면 실력 키우는데에도 많은 도움이 있을 것 같습니다.

2016.10.18 게시됨

[UI 개발] css3 - side navigation 제작(사이드 네비게이션) 포스팅 썸네일 이미지

개발/UI개발

[UI 개발] css3 - side navigation 제작(사이드 네비게이션)

Side Navigation 안녕하세요. 오늘부터 UI 개발한 코드를 블로그에 공개하려고 이렇게 글을 쓰게 되었습니다. 꾸준히 개발하면서 나온 결과물을 포스팅하겠습니다. ㅎ 혹시 필요한 기능이 있으시다면, 자유롭게 사용하시고, 개선사항이 있으면 알려주시면 고맙겠습니다. 예시 HTML 시멘틱마크업 우선 사이드 네비게이션을 제작하기 위한 기본적인 HTML 마크업을 위 코드와 같이 진행했습니다. CSS3 사이드 네비게이션 부분에 관련된 CSS 코드입니다. Javascript jQuery를 활용해서 개발했다면, 훨씬 깔끔하고, 유지보수하기 쉬운 코드가 되었겠지만, 자바스크립트를 공부하기 위해서 자바스크립트를 통해서 UI 개발을 진행했습니다. 전체 코드 완성된 코드입니다. 복사해서 사용하셔도 되지만, 최대한 동작..

2016.10.18 게시됨

[jQuery] 예제와 함께하는 제이쿼리 강의 (jQuery - animate()) 포스팅 썸네일 이미지

개발/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을 가지고 있습니다. 이 부분은 예제를 가지..

2016.10.18 게시됨

[jQuery] 예제와 함께하는 제이쿼리 강의 (jQuery - slideDown() / slideUp() / slideToggle()) 포스팅 썸네일 이미지

개발/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() 메소드의 예시입니다..

2016.10.18 게시됨

텍스트 에디터 Atom(아톰) 패키지 추천(Atom HTML Preview) 포스팅 썸네일 이미지

개발/유틸리티

텍스트 에디터 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

2016.10.18 게시됨

[jQuery] 예제와 함께하는 제이쿼리 강의 (jQuery - fadeIn() / fadeOut() / fadeToggle() / fadeTo()) 포스팅 썸네일 이미지

개발/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 () 메소드와 같은 인자를 가지고 있습니다. 속도나 콜백함수에 대해서 잘 모르시다면, 전 강의..

2016.10.18 게시됨

[jQuery] 예제와 함께하는 제이쿼리 강의 (jQuery - show() and 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() 메소드는 동작속도와 동작 ..

2016.10.18 게시됨

[CSS3] Height :100% 가 적용되지 않을때 해결하는 방법 포스팅 썸네일 이미지

개발/CSS3

[CSS3] Height :100% 가 적용되지 않을때 해결하는 방법

웹표준으로 코딩을 하다보면 Height 단위인 %가 적용이 되지 않는 경우가 있습니다. px단위로는 height 값이 적용되는데 %는 적용이 되지 않는 경우의 대처법하는 방법에 대해서 알아보겠습니다. 아래 box 클래스에 height 100%를 먹여보았으나 정상적으로 작동하지 않는 것을 확인할 수 있습니다.하지만, 필요할 경우를 대비해서 한번 알아보도록하죠. HEIGHT:100%가 적용되게 하는 방법 생각보다 정말 간단하게 해결할 수 있는데요.html과 body 태그에 height 100%를 넣어주는 방법입니다. 위 코드를 적용시켜주면 정상적으로 box 클래스에 height 100%가 적용됨을 확인하실 수 있습니다. 원인 : %는 상대적인 값인데 div의 height값에 %를 적용하면 기준으로 삼을 상위..

2016.10.12 게시됨

[자바스크립트] 프로토타입 (Javascript - prototype) 포스팅 썸네일 이미지

개발/Javascript

[자바스크립트] 프로토타입 (Javascript - prototype)

자바스크립트 – 프로토타입이란? 자바스크립트를 처음 접할 때 제일 이해하기 어려웠던 개념 중 하나가 바로 프로토타입이었습니다. 하지만 자바스크립트를 학습하는데 있어서 꼭! 정복해야할 산이기도 한 프로토타입을 오늘 정리해보도록 하겠습니다.이번 기회를 통해 제대로 프로토타입을 이해하고 넘어가길 바랍니다.(사실 저도 머릿속에 제대로 넣기 위해 포스팅합니다...) 자바스크립트는 클래스라는 개념이 없습니다.그래서 기존의 객체를 복사하여 새로운 객체를 생성하는 프로토타입 기반의 언어입니다. 프로토타입 기반 언어는 객체 원형인 프로토타입을 이용해서 새로운 객체를 만들어냅니다.이렇게 생선된 객체 역시 또 다른 객체의 원형이 될 수 있습니다. 프로토타입은 객체를 확장하고 객체 지향적인 프로그래밍을 할 수 있게 도와주는 ..

2016.10.10 게시됨

[웹폰트] 티스토리 블로그 나눔바른고딕 폰트 적용 포스팅 썸네일 이미지

블로그/티스토리 팁

[웹폰트] 티스토리 블로그 나눔바른고딕 폰트 적용

하루에 적지않은 양의 글들(주로 웹페이지)을 읽게 되는데 이따금씩 글꼴의 중요성을 실감하게 됩니다. 저는 글꼴 중에도 "나눔바른고딕"을 선호하는데요. 티스토리 블로그를 시작하면서 블로그 디폴트 폰트로 나눔바른고딕으로 설정했습니다. 웹폰트로 폰트를 적용시켰고, 적용시키는 법에 대해서 이설명하도록 하겠습니다 ! HTML / CSS를 모르는 초심자를 대상으로 쉽게 설명할 예정이니 이 글을 쭉 따라서 적용하시면 쉽게 적용하실 수 있을 겁니다. 왼쪽 중간쯤에 있는 HTML / CSS 편집을 들어가면 이렇게 HTML/ CSS을 편집할 수 있는 에디터를 보실 수 있습니다.이제 여기서 몇 가지 코드를 적용을 시켜야 되는데요. 오른쪽 HTML 문서 파일에 부분이 있을겁니다. 그 바로 위에 아래에 코드를 집어 넣도록 하겠..

2016.09.22 게시됨

[자바스크립트로 구현한 알고리즘] IQ Test 포스팅 썸네일 이미지

Computer science/알고리즘

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

Bob is preparing to pass IQ test. The most frequent task in this test is to find out which one of the given numbers differs from the others. Bob observed that one number usually differs from the others in evenness. Help Bob — to check his answers, he needs a program that among the given numbers finds one that is different in evenness, and return a position of this number. ! Keep in mind that you..

2016.09.21 게시됨

728x90
반응형