다시 공부하는 자바스크립트

처음 자바스크립트(JS)를 접했던 것은 2000년도 초반이였다. 지금과는 달리 JS에 대한 인식이 좋지 못했고, 관련 지식을 찾아보기가 어려웠던 시기였다. 타 프로그래밍 언어에 비해 느슨한 문법과 미지원되는 기능들이 비교대상이 되어 저수준의 언어로 치부되었고, 그런 인식에서 출발한 관련 서적들도 형편없었다라고 돌이켜 본다. 무엇보다도 웹표준이라는 개념이 없었던 시기라 브라우저마다 제각기 다른 지원사항들로 골머리를 앓다보면 자연스레 멀어질 수 밖에 없었다. JS에 다시 관심을 가지게 만든 것은 jQuery의 등장으로 DOM 조작의 편의성과 크로스브라우징의 부담감을 덜면서 였다. 게다가 구글의 V8엔진이 탑재된 브라우저들의 등장으로 대폭적으로 개선된 환경을 접하면서 쏟아지는 jQuery 플러그인들과 각종 라..
웹코딩/Javascript 2016.03.01 11:00

CSS 이벤트 제어(pointer-events ) 속성

흔히 이벤트가 부여된 요소를 숨기면 해당 이벤트가 작동하지 않을꺼라 생각합니다. 대부분 의도한 결과를 반영하지만 숨김처리에 사용한 방법이 opacity 속성을 이용한 경우라면 가시성은 없지만 해당 영역의 이벤트에 응답하게 됩니다. 이를 강제로 제어하기 위해서는 pointer-events 속성을 활용해야 하며 관련하여 아래에서 추가적인 정보를 서술하였습니다. 숨김 처리 속성에 따른 특성 요소를 숨길때 사용하는 CSS 속성은 제각기 고유의 특성을 지니고 있다. 아래의 표를 참고하자. 숨김 속성과 값 공간점유 이벤트 탭(Tab) 접근 opacity: 0 점유 활성 가능 visibility: hidden 점유 비활성 불가능 visibility: collapse 테이블안에서만 비점유 비활성 불가능 display:..
웹코딩/CSS 2016.02.01 11:00

Windows 10 가상 데스크톱

윈도우 10의 새 기능중에 하나인 가상 데스크톱은 바탕화면을 동시에 여러개 사용할 수 있게 만든 기능입니다. 작업별로 화면을 전환하며 사용할 수 있어 여러 대의 모니터를 보유한 효과를 얻을 수 있습니다. 가상 데스크톱 생성 작업표시줄에 아래와 같이 새로 생긴 작업보기 아이콘이 가상 데스크톱 화면을 불러온다. 현재 바탕화면에서 실행중인 프로그램들이 표기되며 하단에 데스크톱의 갯수와 새로운 가상 데스크톱을 생성할 수 있는 메뉴를 확인할 수 있다. 가상 데스크톱 이동 가상 데스크톱간의 이동은 가상 데스크톱 화면에서 원하는 데스크톱을 선택해서 이동할 수도 있고, 단축키 Ctrl + Window() + ←, → 를 활용해 이동할 수도 있다. 또한, 각각의 데스크톱에서 사용중인 프로그램을 다른 데스크톱으로 옮길 수..
윈도우즈/Windows 10 2016.01.26 12:00

Windows 10 다이렉트X 12 (DirectX)

윈도우10에는 새로운 다이렉트X(DX) 12가 탑재되었습니다. 지난 11버전 이후로 6년여만의 변화이며, 그동안 GPU(그래픽카드)의 발전을 감안한다면 은근히 기대감을 감출수 없는 부분입니다. 무엇보다도 게임을 좋아하는 분이라면 새로운 DX의 등장으로 개선될 성능의 향상과 낮아질 전력 소비량에 반가울 것입니다. 다이렉트X는 게임 및 멀티미디어를 손실없이 최대한의 성능을 이끌어내기 위해 사용되는 라이브러리(API, 플랫폼)이다. 개발자들이 DX 라이브러리를 사용해 제품을 만들게 되며, 이로 제작된 것은 좋은 성능 평가를 받고있다. 다이렉트X 12 등장 과거 윈도우 7과 함께 DX11이 공개되었으며, 이후로 마이너한 업데이트가 계속적으로 이루어지고 있었다. 이후로 6년만의 새버전으로 DX12가 등장했다. 그..
윈도우즈/Windows 10 2016.01.25 13:48

인터넷 익스플로우 구버전 지원 종료(IE8,IE9,IE10)

MS(마이크로소프트)는 지난 1월 13일부로 IE(인터넷 익스플로우) 구버전에 대한 정기 보안 업데이트를 지원 종료하였습니다. 이후 발생할 수 있는 보안 취약점에 대해 브라우저를 업데이트(IE11, Edge)하거나 크롬이나 파이어폭스같은 다른 브라우저 사용을 권고합니다. IE 지원 종료 브라우저를 사용하고 있다면? 지원 종료된 브라우저는 더 이상 보안 업데이트, 비보안 업데이트, 무료나 유료 지원 옵션 또는 온라인 기술 콘텐츠 업데이트에서 제외된다. 즉, 해당 브라우저들을 지속적으로 이용하다 보안 취약점을 이용한 해킹 및 자료유출등에 문제점이 발견되어도 MS사로 부터 어떠한 지원도 받을 수 없게 된다. 요즘같이 랜섬웨어의 전파가 활발한 시기에 국내처럼 ActiveX로 무엇이 설치되는지도 가늠할 수 없고 ..
웹개발론/웹표준, 접근성 2016.01.14 18:57

Windows 10 탐색기 설정

윈도우10에서도 탐색기를 통한 폴더 및 파일 접근은 여전히 불편합니다. 새로 추가된 부분도 중복되는 요소들이 많아 기본 설정의 탐색기는 복잡해 보이기에 이를 재설정하는 방법을 소개합니다. 탐색기 확장 윈도우 탐색기를 크롬 브라우저와 유사한 북마크, 탭 기능을 추가하는 Clover가 윈도우 10에서도 여전히 작동한다. 이를 통해 파일간 이동 및 복사를 여러개의 탐색기를 실행하고 찾아 해메는 수고를 덜 수 있으며, 자주 여닫는 폴더를 탭 고정할 수도 있다. 탐색기 바로가기 윈도우 탐색기를 실행하면 보여지는 첫 화면이 바로가기 페이지로 설정되어 있다. 또한, 고정된 바로가기 이외에도 최근에 사용된 파일 및 폴더가 표시되어 좌,우측 패널 모두에 표시된다. 이것을 변경하려면 탐색기 상단의 파일 > 폴더 및 검색 ..
윈도우즈/Windows 10 2016.01.13 11:00

Windows 10 바로가기 및 브라우저 설정

윈도우 10 설치 후에 도움이 될만한 기본 설정을 모았습니다. 설정 부분까지 도달하는데는 복잡한 메뉴나열보다는 검색을 이용하도록 합시다. 바탕화면에 아이콘 추가 바탕화면에 기본 아이콘(컴퓨터, 휴지통, 문서, 제어판, IE11)이 없을 경우, 이를 접근하기 쉽게 바탕화면에 아이콘을 추가해보자. 바탕 으로 검색하여 바탕 화면의 일반 아이콘 표시/숨기기 선택 원하는 아이콘을 선택하고 적용 internet 으로 검색, 검색 결과중 Internet Explorer 에 마우스 우클릭한 후 파일위치 열기 선택 이동된 위치에서 Internet Explorer 의 바로가기를 바탕화면에 복사 기타 자주 사용하는 프로그램들을 검색하여 실행파일을 바로가기로 만들어 바탕화면에 복사 윈도우 8이상 부터는 시작메뉴에 우클릭으로 ..
윈도우즈/Windows 10 2016.01.12 11:00

Windows 10 다운그레이드(이전 윈도우로 돌아가기)

윈도우 10을 사용하다가 하드웨어 및 프로그램의 호환성 문제, 혹은 특정한 부분이 마음에 들지 않아 다시 이전의 윈도우로 돌아가고 싶을 경우가 있습니다. 이와 관련된 내용을 서술합니다. 다운그레이드 조건 윈도우를 업그레이드 한 사용자는 28일이내에는 다운그레이드가 가능하다. 즉, 클린 설치를 통해 윈도우를 사용하는 사용자의 경우와 업그레이드 후 28일이 지난 사용자는 다운그레이드 할 수 없다. c:\ 에 Windows.old 및 Windows.~BT 폴더의 모든 항목을 유지해야 한다. 이를 제거하였거나 디스크정리를 통해서 기존 Windows 정보가 제거된 경우에는 다운그레이드 할 수 없다. 업그레이드 후 추가한 모든 사용자 계정을 제거해야 한다. 윈도우 7 또는 윈도우 8.1에 로그인하는데 사용한 암호를..
윈도우즈/Windows 10 2016.01.11 11:00

Windows 10 업그레이드 및 설치 오류 해결방안

윈도우 10의 업그레이드가 모종의 이유로 실패한다면 눈 앞이 캄캄해집니다. 이전 자료에 대한 걱정부터 이전 윈도우를 그냥 쓸껄하는 자책까지... 마이크로소프트에 대한 원망은 뒤로하고도 말이죠. 관련해서 오류해결책에 대한 정보를 모아보았습니다. 오류코드 확인하기 윈도우는 오류 발생시 오류코드를 알려준다. 아래는 필자가 윈도우 10 업그레이드 실패를 경험하면서 발생한 오류 코드에 대한 예시이다. 업그레이드중 아래와 같이 이전 윈도우로 복구가 되어버렸다. 오류코드 800706FB를 알리나 이에 대한 검색결과는 존재하지 않았다. 필자는 HDD 공간을 약 30Gb이상으로 여유공간을 만들고 다시 업그레이드를 진행하였더니 오류없이 윈도우 10 업그레이드에 성공하였다. 윈도우 10에서 요구하는 공간은 3Gb 정도의 여..
윈도우즈/Windows 10 2016.01.10 11:00

Windows 10 업그레이드 및 설치

'새해에는 새 윈도우에~!' 라는 다짐아래 그 동안의 시스템을 정리하고 윈도우 10으로 업그레이드를 진행하였고 무사안착 하였습니다. 관련하여 설치순서를 정리해봅니다. 일반 사용자를 위한 윈도우즈 10 무료 업그레이드 혜택은 2016년 7월 29일로 종료되었습니다. 하지만 마이크로소프트는 여전히 무료 업그레이드 혜택을 받을 수 있는 통로를 열어두었습니다. 보조 기술을 사용하는 고객을 위한 Windows 10 무료 업그레이드 Windows 10 업그레이드 알림 기존의 시스템에 업그레이드가 준비되면 아래와 같은 알림이 등장한다. 또한, 윈도우가 설치된 드라이브에는 $Windows.~BT라는 숨긴 폴더가 존재하며, 이는 윈도우 10 설치파일을 미리 다운로드받아둔 폴더로 약 3~6Gb의 용량을 차지한다. 윈도우 ..
윈도우즈/Windows 10 2016.01.09 11:00

Windows 10 업그레이드 및 설치전 준비사항

기존의 윈도우 시스템을 윈도우 10으로 업그레이드하거나 클린설치를 염두에 두고 있을때 유의해야 할 사항들을 짚어봅니다. 하드웨어 호환성 확인 윈도우 10을 설치하고 막상 기존의 시스템을 구성하고 있던 하드웨어들이 이를 지원하지 않는다면 그보다 난감할 수 없다. 사전에 각각의 하드웨어 제조사의 홈페이지에 들려 윈도우 10의 지원사항을 파악하자. 일반적인 시스템은 메인보드에 대부분의 시스템 구성요소가 포함되므로 이의 호환성을 우선적으로 확인해야 한다. 메인보드의 경우 드라이버뿐만 아니라 BIOS/UEFI의 업데이트 또한 지원하지는 꼼꼼히 살펴보도록 하자. 또한 프린터, 스캐너같은 의외의 주변기기에서 난관에 봉착할 수 있기 때문에 사용하는 주변기기들에 대한 호환성도 염두에 두어야한다. 제조사의 홈페이지에서 드..
윈도우즈/Windows 10 2016.01.08 11:00

티스토리 댓글 및 방명록 디자인 유의사항

티스토리의 댓글 및 방명록을 디자인할때 겪을 수 있는 유의사항을 살펴봅니다. 댓글 및 방명록 스크립트 티스토리에서 댓글과 방명록 폼에 입력된 내용을 처리하는 스크립트는 아래와 같다. function addComment(caller, entryId) { var oForm = findFormObject(caller); if (!oForm) return false; var request = new HTTPRequest("POST", oForm.action); request.onSuccess = function () { if(entryId == 0) window.location = blogURL + "/guestbook"; else { document.getElementById("entry" + entryId ..
티스토리/스킨가이드 2016.01.05 11:00

티스토리 카테고리 클래스 추가

티스토리 스킨의 카테고리 목록형 구조에 클래스명이 새로이 추가되었습니다. 카테고리 디자인을 위해 복잡한 CSS 선택자를 이용하거나 스크립트로 클래스를 추가해 사용해왔는데 조금은 수월해질 듯 싶습니다. 카테고리 목록의 구조 아래는 [샆샾_category_list_샾샾] 치환자를 이용할 경우 생성되는 구조이다. 샾샾 부분은 ##으로 교체 분류 전체보기 (글갯수) 카테고리명 (글갯수) 서브 카테고리명 (글갯수) 카테고리 목록의 시작엔 .tt_category 가 추가되었다 - 1행. 카테고리 목록의 최상위 목록엔 .link_tit 가 추가되었다 - 3행 카테고리 목록의 1차 카테고리의 시작엔 .category_list 가 추가되었다. - 4행 카테고리 목록의 1차 카테고리의 링크엔 .link_item 이 추가되..
티스토리/스킨가이드 2016.01.04 11:00

CCZ-CROSS 패치노트

테스트가 부족했던 관계로 미흡한 부분이 발견되고 있으며, 이를 보완하고 패치내역을 공개하고 있습니다. 불편하시더라도 패치내역을 둘러 보시길 권합니다. 모든 패치내용을 반드시 수정할 필요는 없습니다. 패치내역을 살펴보시고 적용하길 원한다면 새 파일을 다운로드 하거나 직접 수정할 수 있도록 설명을 보태고 있습니다(오래된 패치내용 부터 최신순으로 수정하세요). [2016.01.24]] 패치 내용의 전달을 수월하게 진행하기 위해 GitHub의 변경이력을 살펴볼 수 있도록 변경되었습니다. 다음TV 팟이 카카오TV 서비스로 이전하면서 주소체계가 변경되면서 발생한 문제를 대처 크롬 브라우저 55 버전 스크롤 이벤트 버그 수정 신고기능 업데이트로 인한 날짜표기 오류수정 IE10 flexbox 스타일 제거 오탈자 수정 ..
티스토리/스킨배포 2015.12.29 05:18

CCZ-CROSS 스킨 배포

티스토리의 관리자 페이지 업데이트 이후로 로그인/로그아웃이 정상작동하지 않는 경우에는 환경설정(블로그관리) > 꾸미기 - 설정에서 블로그 메뉴바를 표시합니다.로 설정을 변경해 주시길 바랍니다. CCZ-CROSS 스킨 소개 기존에 사용하고 있던 스킨에 대한 공유 요청이 있어 배포 가능한 형태로 재작업하여 배포하게 되었습니다. 개인적으로 구형 브라우저 및 기기들을 지원하는 마지막 작업 결과물인 동시에, 여러가지 쓸만한 아이디어를 조합한 시험작입니다. DEMO CCZ-CROSS 데모보기 REPO CCZ-CROSS GitHub PATCH CCZ-CROSS 패치노트 특징 클래식한 테마 다양한 기기 및 브라우저를 지원하는 반응형 디자인 옵션 값의 변경으로 일부 기능 ON/OFF 가능 글 작성시 도움이 될만한 서식 ..
티스토리/스킨배포 2015.12.26 10:33