웹 스크래핑(Web Scraping)은 웹 페이지로부터 원하는 정보를 추출하는 기법입니다. 어떤 서비스에서 API가 별도로 제공되고 있지 않지만 웹 페이지로는 정보가 제공되고 있을 때, 웹 스크래핑 기법을 이용하면 원하는 정보를 획득할 수 있습니다.
웹 스크래핑은 흔히 웹 크롤링(Web Crawling)이라고도 많이 불립니다. 물론 엄밀하게 두 단어는 서로 다른 의미입니다. 크롤링은 여러 웹 페이지를 기계적으로 탐색하는 일을 말합니다. 한편 웹 스크래핑은 특정한 하나의 웹 페이지를 탐색하고, 또 소스코드 작성자가 원하는 정보를 콕 집어 얻어낸다는 점에서 크롤링과 차이가 있습니다. 그럼에도 크롤링과 스크래핑은 구현방법이 거의 같기 때문에, 실무에서는 구분없이 많이 불립니다.
이번 포스팅에서는 미국 CNBC 방송의 웹사이트에서 S&P 500 지수의 값을 확인하는 과정을 통해서, 웹 스크래핑의 원리를 PHP 예제코드를 통해 설명합니다.
(more…)웹표준 준수와 의미론적 마크업이 새로운 패러다임이 되면서 퍼진 몇 가지 왜곡된 사실이 있습니다. 그 중에서도 가장 잘 알려진 것은 <table> 태그의 사용을 금기로 삼는 것입니다. 언젠가부터 퍼지기 시작한 이러한 오해는 끝내 <table> 태그를 사용한 모든 마크업에 전근대적이라는 오명을 씌우게 되었습니다.
그럼에도 이 주제에 대하여 기술적으로 명확히 규명한 글은 찾아보기 어려운 것 같습니다. 이에 금번 글에서는 <table> 태그를 사용해야 하는 상황이 분명히 있음을 기술문서를 통해 규명하고, 이를 통해 <table> 태그에 덧씌워진 오명을 불식시키고자 합니다.
웹 페이지가 다이나믹해지고 요소들의 배치가 자유로워지면, 때때로 서로의 위치가 겹치는 요소들이 생기기 마련입니다. 이 때 어느 것을 위에 표시할 것인가를 제어하는 CSS 속성이 다름 아닌 z-index입니다. 그만큼 자주 접하게 되는 속성입니다만, 한편으로는 오해하기 쉬운 몇가지 특징을 가진 속성이기도 합니다.
이번 포스팅에서는 z-index에 대한 중요한 포인트를 3가지 퀴즈를 통해 알아봅니다. (이 질문은 제가 신입 개발자들을 교육할 때 실제로 사용하고 있는 질문이기도 합니다.) 이 3가지 질문에 대해 정확하게 답을 하고 원리를 설명하실 수 있다면, 실무에서 만나는 대부분의 상황에서는 z-index 속성을 사용하는 데에는 큰 문제가 없으실 것입니다.
z-index의 정확한 사양에 대해서는 CSS Specification의 9.9.1 Specifying the stack level: the ‘z-index’ property 항목에서 다루고 있습니다. 좀더 자세한 정보가 필요하실 때에 함께 읽어보시기 바랍니다.
이번 포스팅에서는 제가 작성한 jQuery 애니메이션 슬라이더(Slider) 모듈인 “Epiloum Slider”를 소개합니다.
웹 상에서 찾을 수 있는 수많은 자바스크립트 또는 jQuery 슬라이더는 필요 이상의 복잡한 HTML 태그 구조를 요구하거나, 사전에 CSS 작업 상당 부분 필요한 경우가 많습니다. 이처럼 애니메이션이라는 UX적인 부분을 위해 마크업을 희생하는 것은 의미론적 마크업의 철학에 위배되는 것이기도 합니다.
Epiloum Slider는 그와 같은 상황에 대한 안타까움으로부터 만들어졌습니다. 본 모듈의 가장 큰 특징은 1개의 <ul> 또는 <ol> 태그와, 그 아래에 나열된 <li> 태그들 만으로 적용 가능하다는 점입니다. 또한 스크립트를 이용해 CSS를 변경하는 일을 최소화하여, 실무에서 응용할 때 레이아웃에 영향을 줄 가능성을 최소화하였습니다. 간결한 마크업를 추구하는 많은 분들께 도움이 되시기를 바라겠습니다.
파일구성
아래 버튼을 눌러 다운로드 받은 zip 파일의 압축을 해제하면, 2개의 디렉토리를 만날 수 있습니다. 첫 번째 디렉토리인 Module 아래에는 자바스크립트 파일 epiloum_slider.js이 들어있으며, 실제로 본 슬라이더를 사용할 때에 임베디드해야 하는 파일입니다. 두 번째 디렉토리인 Example 아래에는 본 모듈의 사용예제가 들어 있습니다.
의미론적 마크업은 무엇일까
초창기의 HTML은 단순히 웹 상에서 문서 안에 들어있는 정보를 보여주기 위한 수단이란 성격이 강했습니다. 여기서 주목해야 할 단어는 “정보”와 “보여주다”입니다. 그 당시에 HTML을 작성하는 일에는 어떤 정보를 담을 것인가를 결정하는 일은 물론, 그 정보를 사용자들에게 어떻게 예쁘게 보여줄 것인가를 고민하는 일도 포함되어 있었습니다. <font> 태그를 이용해 글자를 꾸미고, <table> 태그를 이용하여 레이아웃을 만들어내는 기술들은 정보를 예쁘게 보여주기 위해 등장한 방법들입니다. 때로는 좀더 예쁘게 보여주기 위해서 태그와 태그 가운데 정보들을 산산히 조각내어 넣기도 하였습니다.