퀴즈로 풀어보는 CSS z-index 속성의 3가지 포인트

웹 페이지가 다이나믹해지고 요소들의 배치가 자유로워지면, 때때로 서로의 위치가 겹치는 요소들이 생기기 마련입니다. 이 때 어느 것을 위에 표시할 것인가를 제어하는 CSS 속성이 다름 아닌 z-index입니다. 그만큼 자주 접하게 되는 속성입니다만, 한편으로는 오해하기 쉬운 몇가지 특징을 가진 속성이기도 합니다.

이번 포스팅에서는 z-index에 대한 중요한 포인트를 3가지 퀴즈를 통해 알아봅니다. (이 질문은 제가 신입 개발자들을 교육할 때 실제로 사용하고 있는 질문이기도 합니다.) 이 3가지 질문에 대해 정확하게 답을 하고 원리를 설명하실 수 있다면, 실무에서 만나는 대부분의 상황에서는 z-index 속성을 사용하는 데에는 큰 문제가 없으실 것입니다.

z-index의 정확한 사양에 대해서는 CSS Specification의 9.9.1 Specifying the stack level: the ‘z-index’ property 항목에서 다루고 있습니다. 좀더 자세한 정보가 필요하실 때에 함께 읽어보시기 바랍니다.

Continue reading

코멧(Comet) #3 – Ajax 롱폴링(Ajax Long polling) 채팅방 예제로 배우기

코멧을 구현하는 두 번째 방법은 롱폴링(Long Polling)이라고 하는 기법으로, 그 중에서도 금번 포스팅에서는 Ajax를 기초로 한 롱폴링 기법을 소개합니다. 이것은 지난 포스팅에서 소개한 Ajax 폴링 기법에서 일부분을 변형하여서, HTTP 통신이 일어나는 빈도를 줄인 것입니다. Ajax 폴링과 이 기법 사이의 결정적인 차이점은 서버측에서 특정한 상태값이 변하기 전까지는 응답을 미루는 것이라고 할 수 있습니다.

금번 포스팅에서는 지난 포스팅에서 Ajax 폴링으로 구현한 채팅방 예제를 롱폴링으로 수정하여, Ajax 폴링과 대조되는 롱폴링의 작동원리를 살펴볼 것입니다. 따라서 지난 포스팅을 읽어보지 않은 분께서는 금번 포스팅을 읽기에 앞서 일독을 권합니다.

Continue reading

10분 만에 살펴보는 R 기초문법

R은 통계적인 계산과 데이터 분석에 특화되어 있는 프로그래밍 언어입니다. 빅데이터의 대두와 함께 주목받아 그 이름이 널리 알려지게 되었지요. 새로운 언어를 공부하는 가장 좋은 방법은 책 한 권을 정독하거나, 혹은 그 언어의 공식 매뉴얼을 앞에서부터 따라가며 익히는 것입니다. 다만 이처럼 정석대로 단계 단계를 짚어가며 익힐 수 있는 여유를 가지지 못한 분들도 계실 것입니다.

이번 포스팅은 기존에 1가지 이상 익숙한 프로그래밍 언어를 가진 분들이 R의 가장 기초적인 부분을 10분 전후의 짧은 시간에 익숙해질 수 있도록 튜토리얼 형태로 쓰여졌습니다. 짧은 시간에 빠르게 R에 익숙해지기를 원하시는 분들께는 이번 포스팅이 큰 도움이 될 것입니다. 충분한 시간을 가지고 있으신 분은 이 포스팅을 살펴본 후에 R의 공식문서인 An Introduction to R을 읽어보시기를 권해드립니다.

Continue reading

Epiloum Slider – 간결한 HTML 마크업을 기반으로 하는 jQuery 애니메이션 슬라이더

이번 포스팅에서는 제가 작성한 jQuery 애니메이션 슬라이더(Slider) 모듈인 “Epiloum Slider”를 소개합니다.

웹 상에서 찾을 수 있는 수많은 자바스크립트 또는 jQuery 슬라이더는 필요 이상의 복잡한 HTML 태그 구조를 요구하거나, 사전에 CSS 작업 상당 부분 필요한 경우가 많습니다. 이처럼 애니메이션이라는 UX적인 부분을 위해 마크업을 희생하는 것은 의미론적 마크업의 철학에 위배되는 것이기도 합니다.

Epiloum Slider는 그와 같은 상황에 대한 안타까움으로부터 만들어졌습니다. 본 모듈의 가장 큰 특징은 1개의 <ul> 또는 <ol> 태그와, 그 아래에 나열된 <li> 태그들 만으로 적용 가능하다는 점입니다. 또한 스크립트를 이용해 CSS를 변경하는 일을 최소화하여, 실무에서 응용할 때 레이아웃에 영향을 줄 가능성을 최소화하였습니다. 간결한 마크업를 추구하는 많은 분들께 도움이 되시기를 바라겠습니다.

 

파일구성

아래 버튼을 눌러 다운로드 받은 zip 파일의 압축을 해제하면, 2개의 디렉토리를 만날 수 있습니다. 첫 번째 디렉토리인 Module 아래에는 자바스크립트 파일 epiloum_slider.js이 들어있으며, 실제로 본 슬라이더를 사용할 때에 임베디드해야 하는 파일입니다. 두 번째 디렉토리인 Example 아래에는 본 모듈의 사용예제가 들어 있습니다.

Download Button

Continue reading

Linux에 Django 설치하기

DjangoPython을 언어로 사용하는 웹개발 프레임워크입니다. 금번 포스팅에서는 제가 Linux에서 Django를 설치하고, 첫 프로젝트를 생성했던 과정을 소개하고자 합니다.

금번 설치과정을 거친 서버는 운영체제로 CentOS 6.5를 사용하고 있으며, LAMP 환경의 웹서버가 이미 작동하고 있는 서버였음을 먼저 밝힙니다. 아울러 이 글에서 소개하는 Linux 명령어는 모두 root 계정에서 실행되었음을 첨언하여 두고자 합니다.

Continue reading