new1cm

 웹킷 기반 브라우저에서 스크롤바 스타일을 지정할 때 ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb 같은 가상 요소를 지정해도 스타일이 적용되지 않는 경우가 있습니다.  이때 우선적으로 봐야 할 부분은 ::-webkit-scrollbar로 width 값을 설정했는지 확인하는 것입니다. ::-webkit-scrollbar로 width 값을 설정하지 않았다면, 기본 스크롤바가 표시됩니다.  참고로 width 값을 설정하지 않은 것과 0인 경우는 다릅니다. width: 0으로 설정한 경우에는 어떤 스크롤바도 표시되지 않습니다. display: none의 경우에도 마찬가지입니다.  결론적으로 웹킷 기반 브라우저에서 스크롤바 스타일을 지정할 때는 스크롤바의 폭을 명시적으로 선언해야 합니다.  참고로 스크롤 트랙에 패딩을 주고 싶은 경우에는 padding 설정이 되지 않으니, 스크롤 버튼에 같은 색으로 테두리를 주면 됩니다. ::-webkit-scrollbar { width: 15px; } ::-webkit-scrollbar-track { background: blue; } ::-webkit-scrollbar-thumb { background: red; border: 3px solid blue; }

언제부터인가 '비주얼 스튜디오 코드'에서 HTML 소스를 수정할 때 태그의 열림이나 닫힘 부분에 커서가 있으면 양쪽에 커서가 생기는 기능이 적용되어 있었습니다. 커서가 태그 이름에 있을 때만 적용됩니다. 아마도 태그를 수정할 때 유용하라고 만든 기능 같습니다. 하지만 저는 어색하고 불편해서 이 기능을 끄려고 합니다. 구글에 검색해도 해당 옵션에 대해 나오는 게 없었는데, 그냥 에디터 설정에 들어가서 '커서' 라고 검색하니 해당 옵션이 나왔습니다. '일치하는 HTML 태그에서 미러링 커서를 활성화/비활성화합니다.' (Mirror Cursor On Matching Tag) 위 옵션을 체크해제하면 해당 기능을 막을 수 있습니다.

iframe이 삽입된 모달이 있습니다. iframe에 불려오는 페이지는 백그라운드 작업을 하고 있습니다. 그래서 모달이 숨겨질 때 초기화  할 생각을 했습니다. 처음에는 'src'속성값에 비어있는 값('')을 넣으려고 했습니다. 문득, 더 그럴싸한 게 없을까 하는 생각에 좀 더 찾아보니 'about:blank'을 넣어주면 된다는 것을 알았습니다. <iframe src="about:blank" frameborder="0"></iframe> 딱히 대단한 건 아닐 수 도 있지만 미처 생각하지 못하던 것이라 이렇게 적어봅니다.

laravel에 CSRF 보호기능 이 있기 때문에 파일 업로드 요청과 같은 POST요청은 해더 값에 별도의 토큰이 있어야 합니다. 자바스크립트 파일 업로드 라이브러리  fine uploader 5 를 사용하려면 해더값에 토큰을 넣어야 합니다. 해더에는 `X-CSRF-TOKEN`이라는 이름으로 토큰이 들어가 있어야 합니다. fine uploader 5에 이 해더를 적용하기 위해서는 아래 코드와 같이 'request.customHeaders' 항목에 추가하면 됩니다. var uploader = new qq.FineUploader({ element: document.getElementById('uploader'), request: { endpoint: 'url', customHeaders: { 'X-CSRF-TOKEN': 'TOKEN' } } }); 토큰 사용할 때는 laravel의 view소스 meta 태그에 지정해 두고, 자바스크립트를 이용하여 읽어 옵니다. 아래 jQuery에서 사용하기 위한 설명이 있습니다. 여기서 CSRF 토큰을 가지고 오는 부분을 참고하면 됩니다. CSRF-TOKEN 설정

자바스크립트로 직접 만든 QR 스캐너. [ QR 스캐너 ] 사용하기 위해서는 브라우저에서 카메라 접근을 허용해야 합니다. 데이터 값 앞에 `http://` 혹은 `https://` 가 붙은 URL 주소인 경우, 해당 페이지로 바로 이동합니다. 해당 페이지는 깃허브에서 제공하는 pages 서비스를 이용하고 있습니다. 소스는  깃허브 페이지 에서 보실 수 있습니다. QR 코드를 분석하는 라이브러리는 jsQR 을 사용합니다.

블로그에 별도로 기능을 추가하고 싶을 때가 있다. 외부에 있는 소스의 링크를 가지고 오고 싶을 수 도 있고, 자신이 간단하게 만들어 집어넣고 싶을 수 도 있다. 사용자가 코드를 추가할 수 있는 간단한 방법은 다음과 같다. 1. 관리자 페이지에서 레이아웃에 들어간다. 2. 레이아웃에서 필요한 부분에 가젯 추가를 누른다. 3. 기본 항목에 있는 HTML/JavaScript 를 추가한다. 3. 이름을 넣고, HTML 소스를 작성한다. 직접 작성한 소스가 복잡하다면 다른 에디터에서 작성하고 복사해 넣는 것을 추천한다. 저장 버튼을 누르면 Blogger에 적용된다.

텍스트 박스에 값을 입력할 때, 입력되는 순간마다 값을 가지고 와야하는 경우가 있다. `keydown` 이라던가 `input` 같은 이벤트를 사용한다. 이벤트 핸들러 내에서 바로 값을 가지고 오면, 지금 입력하고 있는 글자는 가지고 올 수 없다. 지금 입력되는 글자를 포함하여 가지고 오는 방법은 무엇이 있을까? 구글에서 "how to get incomplete text from input text"로 검색을 하니, 스택오버플로우에서 이에 대한 질문과 답변 을 찾았다. `mousedown`, `input` 이벤트는 변경사항이 적용되기 전에 값을 가지고 온다. 이는 필드에 도달하기 전에 이벤트를 차단할 수 있는 기능을 제공하기 때문이다. 값을 가지고 오기 전에 필드의 내용이 바뀔 수 있는 시간을 줌으로써 이 제한을 피할 수 있다. 간단한 방법으로는 `setTimeout()`를 사용하는 것이다. 이벤트 핸들러 내부에 `setTimeout(function () {} , 1)`을 사용하여 1ms의 간격만 두어도 필드의 내용이 최신 값으로 적용되어 현재 입력된 값을 같이 가지고 올 수 있다. el.addEventListener('input', function (evn) { // setTimeout 내에서는 this의 대상이 달라진다. var target = evn.target; setTimeout(function () { console.log(target.value); }, 1); });

결론부터 말 하자면 오류는 아니고, 개발자의 무지에 의한 착각이다. img 태그가 이미지를 표시하면 부피가 있어서 {display: "block"}이라고 착각할 수 있는데, 대부분의 브라우저에서는 {display: "inline-block"}을 기본값 으로 가진다. 그래서 margin-top 값에 마이너스 값을 아무리 많이 주어도 라인 하나 정도의 간격을 넘어가지 못하는 것이다. 해결 방법은 {display: "block"}으로 스타일 값을 재정의 해주면 된다. 이제 원하는 만큼 margin-top 값에 마이너스 값을 사용하여 위로 이미지를 올릴 수 있다. **원인을 찾다가 이에 대한 스택오버플로우  질문을 발견하여 이 글을 작성한다.**