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

의미론적 마크업(Semantic Markup)

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

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

Continue reading