허도경, limewhale

웹 접근성에서 키보드의 포커스 이동은 굉장히 중요한 요소입니다. 그리고 웹 접근성이 아니더라도 마크업이 순차적으로 잘 적용되어 있으면 콘텐츠의 논리적인 흐름에 따라서 focus가 당연히 올바르게 이동하겠지만 프로젝트상의 우리가 제어할 수 없는 환경적 이슈라던지 상황에 따른 여러 이유로 인해 포커스의 흐름이 우리가 원치 않는 방향으로 이동하는 경우가 발생합니다. 그럴 때는 어쩔 수 없이 강제적으로 포커스의 이동을 처리해 줘야 하는데 조금 더 이해하기 쉽게 예를 들어 볼게요. 특정 버튼을 클릭할 때 해당 Event로 레이어 팝업이 화면에 보이게 된다고 가정해 봅시다. 여기서 레이어 팝업에 조건을 둘게요. 이 레이어 팝업이 처음부터 화면에 마크업으로 되어 있지 않고 버튼을 클릭하면 그때 스크립트에서 동적으로 ..

모바일은 이제 단순히 전화만 받는 의미를 가지는 사람은 더 이상 없을 거라 생각합니다. 이전에는 PC화면이 주이고 모바일 화면이 보조의 느낌이었다면 지금은 그 위세가 역전되어 모바일 화면이 더 사용자 유입이 많고 그렇기 때문에 UI 기획을 할 때도 더 신경을 많이 쓰고 디자이너도 조금 더 나은 환경을 위해 GUI를 구현하고 있다는 게 느껴집니다. 모바일은 모든 동작을 손으로 스크롤 하면서 사용하게 됩니다. 그렇기 때문에 PC처럼 클릭을 통한 페이지 이동은 화면의 성격이 달라지는 경우가 아니라면 잘 사용하지 않습니다. 그렇지만 한 번에 너무 많은 데이터를 불러와서 노출하면 사용자는 페이지에 속도 저하 문제가 발생하기 때문에 대부분의 회사들은 이런 문제를 해결하기 위해서 속도에 크게 영향이 없는 일정 양만큼..

스크립트를 구현하다 보면 전체값에 대한 퍼센트 값이 필요할 때가 있습니다. 일반적으로 UI개발을 하시는 분이라면 그래프와 관련된 작업을 진행할 때 퍼센트 계산값이 필요할거라 생각합니다. 그리고 개발을 반드시 하지 않더라도 퍼센트 공식을 알아두면 우리 일상생활속에서도 유용하게 사용될 수 있습니다. 내가 사용한 카드금액 중 음식, 레저등이 각 몇 %인지도 계산으로 가능하고 쇼핑을 가서 할인율이 되는 금액이 얼마인지도 쉽게 계산되죠. 수치값 계산을 어려워 하시는 분들이 있어서 그 부분에 대한 개념을 정리하고자 합니다. 이번에 한번 이해해 두시면 잊어버리지 않으실거에요. 1.퍼센트(%) 계산 이해하기 쉽게 예로 설명을 들을께요. 우리에게 100개가 물건이 있다고 가정합시다. 그 중 내가 10개의 물건을 팔았다면..

정말 프로그래밍에서 자주 사용하는 배열에 대해 알아볼게요. 배열은 우리가 스크립트로 다중 값을 핸들링해야 할 때 반드시 필요한 요소입니다. 아마 배열에 대해 잘 아시는 분도 있고 전혀 모르시는 분도 있을 거라 생각합니다. 배열은 객체(Object)와 마찬가지로 여러 가지 값을 저장할 수 있는 데이터 주머니라고 이해하시면 될 거 같아요. 다만 객체와 다른 점은 배열에 저장된 값에 접근할 때 객체처럼 Key : Velue 형태가 아닌 값이 저장된 인덱스(순서)로 접근을 한다는 것이 차이점일 거 같습니다. 그럼 좀 더 자세히 객체에 대해 알아볼게요. 배열은 하나의 변수에 여러 개의 값을 가져와서 사용해야 할 경우 사용합니다. 배열 Array 함수를 이용하여 사용하게 되며 배열의 첫 번째 값은 0부터 시작됩니다..

객체를 활용하면 우리가 스크립트로 무언가를 구현할 때 굉장히 편리하다는 것을 알 수 있습니다. 이 객체는 사실 우리가 Json이라고 말하는 같다고 생각하시면 됩니다. 중괄호로 값을 포함하고 Key : Velue 형태로 값을 호출하는 방법인데 어디선가 Key : Velue 형태로 값을 호출하는 방법이라는 단어가 이상하게 친숙하지 않나요? (저만 그런 거면 죄송합니다.) 이전에 소개해 드렸던 html5의 data- 속성에 관한 글에서도 Key : Velue에 대한 이야기가 잠깐 나왔습니다. 궁금하신 분들은 위에 링크에 있는 글을 참고해 주세요. 그럼 이제 객체에 대해서 한번 알아볼께요. 모두 설레는 마음으로 같이 알아봐요. 1. 객체는 키와 그에 매칭하는 속성 값으로 선언합니다. 앞에서 말했듯이 객체는 Ke..

특정 데이터를 받아서 그 값을 가공하거나 값을 출력할 때 가장 먼저 해야 하는 것은 무엇일까요? 정답은? (두구두구두구 : 자체 효과음.. 긴장감 전혀 없음 주의) 제목에도 있듯이 해당값에 포함된 공백을 제거해주는 일입니다. 우리가 전문통신이나 이미 노출된 값을 자신이 필요한 위치 값만 잘라서 재 가공하여 화면에 보여주려고 해도 값에 공백이 포함되어 있으면 우리가 전달받게 되는 값에는 우리가 원치 않았던 공백 값이 포함되기 때문에 자신이 원하는 정확한 값을 얻을 수 없습니다. 그래서 반드시 문자열을 자를 때는 공백문자를 제거해 줘야 합니다. 공백 문자를 제거하는 방법에는 2가지 방법이 존재합니다. 1.javaScript 정규식 javaScript는 replace를 이용하여 모든 공백을 제거해 줍니다. c..

jQuery는 이제 프로젝트에서는 빠질 수 없는 기본 요소 중 하나로 자리매김을 했습니다. 아마 그 이유는 쉬운 사용방법과 높은 활용성 때문일거라 생각합니다. 하지만 같은 jQuery 코드도 어떻게 만들어져 있는가에 따라서 속도차이가 나게 되는데요. 우연히 보게 된 jQuery 속도를 줄일 수 있는 6가지라는 글이 있어서 정리해 보았습니다. 1. 구체적인 셀렉터를 사용합니다. jQuery로 특정 요소를 DOM에서 검색할 경우, jQuery는 DOM 전체 구조에서 요소를 찾기 때문에 선택자(Selector)가 구체적일수록 속도에 좋으며 Class보다 ID가 단일 선택자이기에 속도가 더 빠릅니다. - bad - $(".item"); - good - $("#item") // class 보다는 ID를 사용할 것..