Backends Frontends Javascript PHP

자바스크립트 DOM을 이용한 애니메이션 없는 슬라이더

슬라이더(Slider)는 사용자의 조작 또는 타이머에 따라 페이지를 넘기듯 콘텐츠를 보여주는 형태의 UI를 부르는 말입니다. 한정된 웹 브라우저 화면에 여러 콘텐츠를 표시하기 위해서는 슬라이더만한 것이 없습니다.

검색엔진을 이용하면 자바스크립트나 jQuery를 이용해서 Slide 애니메이션이나 Fade 효과가 들어간 슬라이더 모듈을 많이 찾아볼 수 있습니다. 그러나 아이러니하게도 애니메이션 없이 작동하는 슬라이더는 찾아보기 어렵습니다. 그렇다고 소스코드를 열어 커스터마이징을 하자니, 이런 모듈들은 내부구조가 대체로 복잡한 편이라서 흥미도 의욕도 나지 않는 경우가 많습니다.

이번 포스팅에서는 자바스크립트 DOM 객체에 접근해 간단하게 구현한 애니메이션 없는 슬라이더를 소개합니다. 먼저 예제 소스코드부터 공개합니다.

(more…)

Continue reading

Frontends Javascript

SNS 내보내기(공유하기) 기능 구현하기

웹페이지에 있는 글이나 블로그 포스팅, 덧글 등의 콘텐츠를 다양한 소셜 네트워킹 서비스로 내보내는 기능(export)을 구현해야할 때가 있습니다. 최근의 게시판이나 블로그 서비스에서 대부분 기본적으로 제공하고 있는 기능이기도 하지요. 이번 포스팅에서는 각 서비스별로 웹 페이지에 있는 글을 내보낼 수 있는 방법을 정리하고, 이를 자바스크립트 코드로 정리하였습니다.

(more…)

Continue reading

CSS Frontends

CSS display 속성을 이해하기 위한 6가지 포인트

CSS의 display는 많은 다양한 상황에서 익숙하게 사용되는 속성입니다. 그러나 익숙한 데에는 언제나 함정이 있습니다. 실제로 display 속성을 사용하다보면 잘 알려지지 않은 특징들을 만나게 되는데, 이를 미리알고 대처하지 못하여 예상치 못한 곳에서 시간과 노력을 허비하는 상황을 만나게 됩니다.

이번 포스팅에서는 display 속성에 대해 6가지 포인트로 정리하였습니다. 이 포스팅은 display 속성에 대한 중요한 내용을 발췌하여 정리한 것이지만, 모든 것을 망라하고 있지는 않습니다. 부족한 부분에 대해서는 공식표준인 CSS 2.1 Specification 가운데 9.2.4 The ‘display’ property 항목을 참조하여 주시기 바랍니다.

(more…)

Continue reading

Backends Frontends Javascript PHP

코멧(Comet) #1 – 웹 페이지를 실시간으로 업데이트하는 방법

코멧(Comet)이란?

웹 페이지가 다시 로드되지 않고도 실시간으로 변동사항을 반영해 변화하게 하려면 어떻게 해야할까요. 이런 고민들은 의외로 많은 곳에서 만나게 됩니다. 웹에서 실시간 모니터링 도구를 만들어야 한다던가, 스포츠 실황중계처럼 매우 짧은 시간간격으로 변화하는 상황을 사용자에게 보여주어야만 하는 서비스를 만든다던가 할 때, 우리는 이와 같은 고민에 빠지게 됩니다. 함께 접속한 사용자들이 작성한 글을 거의 실시간에 가깝게 다른 사용자들에게 보여주어야만 하는 채팅 서비스에서도 물론 같은 고민에 직면할 것입니다.

만약에 서버가 모니터링하고 있다가 그 상태를 수시로 클라이언트 측에 전달할 수 있다면, 특별히 고민할 이유가 없을 것입니다. 이런 방식을 서버 푸시(Server Push)라고 부릅니다. 그러나 불행히도 웹에서 사용하는 HTTP로는 서버 푸시를 구현할 수 없습니다. HTTP는 기본적으로 클라이언트(웹 브라우저)가 서버에 요청(Request)을 하면, 서버가 그에 대해 응답(Response)을 한 후에 연결을 끊습니다. HTTP에서는 클라이언트가 먼저 요청을 하지 않는 이상, 서버는 결코 먼저 움직일 수 없는 것이지요.

하지만 궁하면 통하는 법! 이 문제를 해결하기 위해서 전세계의 많은 개발자들이 만들어놓은, 약간은 편법처럼 느껴지는 방법들이 있습니다. 이러한 방법을 묶어서 코멧(Comet)이라고 합니다.

(more…)

Continue reading

Frontends HTML HTML5

의미론적 마크업(Semantic Markup)

의미론적 마크업은 무엇일까

초창기의 HTML은 단순히 웹 상에서 문서 안에 들어있는 정보를 보여주기 위한 수단이란 성격이 강했습니다. 여기서 주목해야 할 단어는 “정보”와 “보여주다”입니다. 그 당시에 HTML을 작성하는 일에는 어떤 정보를 담을 것인가를 결정하는 일은 물론, 그 정보를 사용자들에게 어떻게 예쁘게 보여줄 것인가를 고민하는 일도 포함되어 있었습니다. <font> 태그를 이용해 글자를 꾸미고, <table> 태그를 이용하여 레이아웃을 만들어내는 기술들은 정보를 예쁘게 보여주기 위해 등장한 방법들입니다. 때로는 좀더 예쁘게 보여주기 위해서 태그와 태그 가운데 정보들을 산산히 조각내어 넣기도 하였습니다.

(more…)

Continue reading