기술 스택/HTML5

iOS에서 input에 적용된 shadow 효과 제거하는 방법 (Remove iOS input shadow)

iOS에서 input 태그에 위와 같이 shadow 효과가 적용되는 점을 확인하게 되었습니다. iOS에서 input 태그에 기본적으로 적용된 shadow 효과를 제거하기 위해서는 CSS 속성 중에 appearance 속성을 제거함으로써 input 태그에 적용된 shadow 효과를 제거할 수 있습니다. appearance 속성 적용 예시는 아래와 같습니다. 예시코드 input[type=text] { /* Remove First */ -webkit-appearance: none; -moz-appearance: none; appearance: none; } appearance 속성이 무엇인지 알고 싶다면 아래를 참고하세요. appearance (-moz-appearance, -webkit-appearance)..

기술 스택/HTML5

HTML 모바일에서 전화걸기 예제(초간단) (How to Create a Click to Call Link Using HTML)

핸드폰에서 웹사이트를 이용할 때 아래와 같이 전화번호를 누르면 바로 핸드폰 기본 전화걸기 창이 뜨는 것을 본적이 있을 것입니다. 이번 포스팅에서는 HTML a 태그를 활용해서 전화걸기 기능을 간단히 구현하는 방법에 대해서 소개하도록 하겠습니다. HTML a태그를 활용해서 전화거는 방법 HTML a태그를 활용해서 전화거는 기능을 구현하는 방법은 굉장히 간단합니다. 코드는 아래와 같습니다. href 속성값에 url을 넣는 대신 tel:전화번호 형식으로 넣으면 끝! // 예제 전화번호: 123-1234-1234 // 실제 사용 예시 전화번호: 123-1234-1234 전화번호: 123-1234-1234 동작 예시 위에서 예시로 기입한 코드의 동작 원리는 아래와 같습니다. PC에서 href에 tel:전화번호 값..

기술 스택/HTML5

input 커서(caret) 색상 바꾸는 방법 (How to change input box cursor color)

웹사이트에서 사용자의 입력 값을 받기 위해 input 태그를 사용하곤 하는데요. 사이트의 특색에 맞게 input 커서의 색상을 커스터마이징을 해야할 경우가 생기게 됩니다. 이때 색상을 바꾸는 간단한 방법에 대해서 알아보도록 하겠습니다. 커서 색상을 변경하는 방법 텍스트 색상을 상속받는 경우 기본적으로 input 커서의 색상은 텍스트의 색상을 상속받습니다. input 텍스트 색상을 변경하면 자동으로 커서의 색상 또한 변경되게 됩니다. input 텍스트 색상을 변경해 보도록 하겠습니다. input { color: blue; } 커서 색상만 변경하고 싶은 경우 글자색과는 다른 색상으로 커서 색상을 바꾸고 싶다면 CSS caret-color 속성을 사용하면 손쉽게 처리할 수 있습니다. 아래와 같이 스타일을 적용..

기술 스택/HTML5

Input 태그 테두리 하이라이트 제거하는 방법 (How to remove the border highlight on an input)

HTML 태그 중 input 태그를 사용하다 보면 현재 사용자가 어떤 input 태그를 사용하고 있는지 활성화시켜주기 위해 강조해주는 하이라이팅 효과가 생기게 됩니다. 보통 하늘색 네모난 박스의 하이라이팅이 표시되죠. 하지만 해당하는 효과를 커스터마이징하기 위해 하이라이팅 효과를 제거해야될 경우가 생기게 됩니다. 해결방법 input태그의 outline 스타일 속성을 none 으로 설정하면 간단하게 해결할 수 있습니다. input:focus { outline: none; } 포커스(focus)된 태그(input:focus)의 아웃라인(outline)을 none으로 설정하는 코드입니다. 해당 코드는 모든 input 태그의 하이라이트 효과가 제거됩니다.

기술 스택/HTML5

HTML에서 가운뎃점 · | middle dot 쉽게 찍는 법

HTML에서 가운뎃점(· | middle dot)을 찍을 때 쉬운 방법이 있어서 공유합니다. 이 때는 HTML 유니코드를 활용하면 간단하게 해결할 수 있습니다. UNICODE U+000B7; HEX CODE· HTML CODE· HTML ENTITY· CSS CODE \00B7; // html example · // css example span { content: "\00B7"; } 예시 아래와 같이 HTML 문자 사이에 유니코드 문자를 넣어주면 아주 쉽게 가운데 점을 삽입할 수 있습니다.

기술 스택/HTML5

html img 태그에 디폴트 이미지 적용하는 방법 (show default image if image not found in HTML 5)

html img 태그 src 속성에 깨진 이미지 경로를 넣으면 아래와 같이 아무 이미지도 안나오게 됩니다. 하지만 이때 깨진 이미지 경로일 경우 디폴트 이미지로 설정하는 방법이 있습니다. onerror 이벤트를 활용하면 됩니다. img 태그 디폴트 이미지 설정 예시는 아래와 같습니다. // onerror 사용 예시 // or // 이벤트 핸들러 vue에서는 @error를 사용해서 처리하면 됩니다. // vue에서 사용하는 방법

기술 스택/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 - 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() 메소드의 예시입니다..

기술 스택/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() 메소드는 동작속도와 동작 ..

기술 스택/유틸리티

텍스트 에디터 Atom(아톰) 패키지 추천(color-picker)

color picker 구글 확장프로그램이나 기타 응용프로그램에서 자주 사용되는 color picker입니다. 꽤나 유용한 소프트웨어죠 !원하는 색상이 있으면, 찍어서 색상코드를 볼 수 있는 소프트웨어입니다. 그 기능을 Atom에서도 사용하게 도와주는 패키지가 있는데요. 바로 아래처럼 색상을 바로 뽑아볼 수 있습니다. Preview 매우 편리한 기능이죠? 설치법 아래는 color picker 명세입니다. A Color Picker for AtomRight click and select Color Picker, or hit CMD-SHIFT-C/CTRL-ALT-C to open it. Currently reads HEX, HEXa, RGB, RGBa, HSL, HSLa, HSV, HSVa, VEC3 and..

기술 스택/유틸리티

텍스트 에디터 Atom(아톰) 패키지 추천(file-icons)

시각적으로 파일관리를 편리하게 도와주는 file-icons file-icons는 좌측이나 상단에 문서의 유형을 아이콘을 통해 시각적으로 구별하기 쉽게 만들어주는 패키지입니다. 이렇게 상단이나 왼쪽에 있는 네비게이션 부분의 문서들의 아이콘을 만들어줌으로써 시각적으로 어떤 파일인지 구별이 쉽게 만들어줍니다. 전에 소개드린 pigments와 함께 꼭 같이 사용하셨으면 할 패키지입니다. 설치법 아래는 file-icons의 명세입니다. file-icons If you've just updated and your icons are all messed up, please restart Atom before filing an issue.Some of the underlying icon fonts have updated..

기술 스택/유틸리티

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

이번에 다룰 패키지는 pigments입니다.프론트엔드 개발을 하면서 가장 소름돋고 필요하다고 생각했던 기능을 atom에서 제공을 해줍니다. 바로 css 파일에서 backgorund나 color에 색상을 적용할 때 코드 안에 컬러가 들어가는 것을 알 수 있습니다. 정말 효율적인 패키지이므로, atom을 사용하시는 분은 꼭 이 패키지를 받아서 사용하시길 바랍니다. 설치법 pigments 명세 A package to display colors in project and files:Pigments will scan source files in your project directories looking for colors and will build a palette with all of them. Then for..

기술 스택/CSS3

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

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

기술 스택/Bootstrap

[Bootstrap] 부트스트랩의 그리드 시스템을 쉽게 사용하는 방법 (bootstrap - grid system)

부트스트랩5 알파가 런칭되었습니다! 아래에서 확인해봐요! 부트스트랩 5(Bootstrap 5) 알파버전 출시! 남들보다 빠르게 공부해보자! 🎉 Bootstrap 5 Alpa 드디어 부트스트랩 5 알파버전이 나왔습니다. 제가 학부시절에 부트스트랩 관련 글을 썼던게 엊그제 같은데 벌써 부트스트랩 5 알파가 나오다니.. 정말 세월이 빠른 것 같습니다 webruden.tistory.com 부트스트랩 (Bootstrap) 부트스트랩은 트위터의 웹 디자이너와 개발자가 만든 오픈형 UI 플러그인이라고 할 수 있습니다. 전 세계의 웹제작자들에게 편리성을 주고자 만들어졌으며 보다 편리하고 빠르게 레이아웃을 구성하고 다양한 인터페이스를 사용할 수 있습니다. 부트스트랩은 미리 정의된 스타일시트와 자바스크립트로 구동하는 플러..

기술 스택/CSS3

[CSS3] Position : Float의 부모 height가 적용이 안되는 현상 해결법

css3에서 자식요소에 float를 적용하면 부모의 height가 0으로 되어버리는 경우가 있습니다. 오늘은 이 현상을 해결하는 법을 알아보도록 하겠습니다. 위 코드를 보시면 nav의 부모태그인 header의 height가 0가 되는 현상을 확인할 수 있습니다. 이유는 float 속성은 쉽게 말해 오른쪽이나 왼쪽으로 붕~띄운다는 뜻입니다. 한마디로 부모를 float로 설정하지 않는 이상, 거기에 적용받지 않고 독립적으로 위로 떠있는 상태죠. 이 상태를 부모요소까지 적용을 시키려면 다른 방법이 필요합니다. 방법 1 (가상 선택자 :after로 clear 하는 방법) 가장 탁월하다고 생각하는 방법이라 첫번째로 소개합니다. 우선 "가상 선택자"라는 개념을 이해하셔야 하기 때문에 약간 이해가 필요한데요. 가상선..

기술 스택/Javascript

[자바스크립트] 이벤트 리스너와 콜백함수(javascript callback)

오늘은 자바스크립트 이벤트 리스너와 콜백함수를 다뤄보도록 하겠습니다. 이벤트 리스너 ? 이벤트 리스너는 쉽게 말해 어떠한 이벤트에 대해 대기중인 상태를 말합니다. 항상 리스닝(들으며) 대기중인거죠. 해당 이벤트가 발생했을 때 등록해놨던 이벤트 리스너가 실행됩니다. 위의 코드를 아마 한버 보신 적이 있을겁니다. 이 코드가 대표적인 이벤트 리스너인데요. window가 load될 때 function 부분이 실행이 되는겁니다. 그럼 load 되었다는 것을 누가 알려줄까요? 바로 브라우저가 알려줍니다.비슷한 코드로, 그리고 자주 사용하는 코드로 onclick이 있습니다. 이벤트 리스너는 항상 on + "이벤트 명"으로 명명됩니다.onclick, onkeypress, onmousemove 등 처럼요. window ..

Computer science/알고리즘

[자바스크립트로 구현한 알고리즘] Sum of odd numbers

Given the triangle of consecutive odd numbers: 1 3 5 7 9 11 13 15 17 19 21 23 25 27 29 ... Calculate the row sums of this triangle from the row index (starting at index 1) e.g.: rowSumOddNumbers(1); // 1 rowSumOddNumbers(2); // 3 + 5 = 8 너무 어렵게 생각했다..조금만 더 쉽게 생각했으면 훨씬 쉬운 방법을 생각해낼 수 있었는데..간단하게 바로 생각할 수 있는 문제해결능력을 키우도록 노력해야겠다. 왜 이방법을 생각을 못했을꼬...