본문 바로가기

전체 글603

칼라 이미지를 Grayscale 이미지로 나타내기 칼라 이미지를 Grayscale 이미지로 나타내기 Grayscale이란 검은색(black)과 흰색(White)의 중간색인 회색(Gray)의 색상으로 이미지를 표현하는 것으로 빛의 강도(Intensity)를 기준으로 하며 0부터 255까지 즉, 256 단계로 검정색(0)과 흰색(255)을 표현하고 중간 단계인 128은 회색으로 표현합니다. 그래서 RGB 칼라 이미지를 Grayscale 형태의 이미지로 나타내기 위해서는 jQuery 같은 편리한 JavaScript 라이브러리를 이용하면 grayscale() 함수를 이용하여 처리하면 되겠지만 여기서는 순수 javascript를 이용하여 그 기능을 구현하는 방법에 대해서 소개합니다. RGB 색상값을 Gray 색상으로 바꾸는 방법은 다양한 형태가 존재하는데 가장 .. 2013. 8. 8.
Box Model을 이용한 게시판 형태 만들기 Box Model을 이용한 게시판 형태 만들기 CSS에서 대부분의 HTML 요소(Element)들은 직사각형의 Box 형태로 나타낼 수 있으며 이에 대해서는 이미 여러분들이 여기까지 따라 하셨다면 쉽게 이해할 수 있는 부분일 것입니다. 이번에는 이러한 Box Model을 이용하여 다음과 같이 ol(ordered list) 요소 내에 li 요소를 여러 개 포함하는 형태의 게시판과 유사한 형태를 만들어 보고자 합니다. 기본적으로 ol 요소는 정렬된 리스트를 나타내는데 사용하는 요소이므로 특별한 설정을 하지 않아도 기본적으로 1, 2, 3 형태로 ol 요소에 포함된 li 요소를 나타내게 됩니다. 따라서 기본적인 ol 요소에 숫자가 아닌 다른 형태를 설정하거나 아니면 아예 나타내지 않기 위해서는 CSS3에서는 .. 2013. 8. 8.
2.sessionStorage 2.sessionStorage 여러분들이 웹 브라우저를 이용하여 웹 서버에 연결하면 하나의 세션(session)이 시작됩니다. 다시 말해서 여러분이 네이버나 다음 웹사이트를 웹 브라우저를 이용하여 접속하면 하나의 논리적인 연결이 된다는 말입니다. 그래서 여러분들이 웹사이트에 접속한 후 해당 세션(session)에 데이터를 저장할 수 있는데 특정 시간 동안 아무런 작업을 하지 않거나 웹브라우저를 닫으면 자동적으로 세션이 종료되어 세션에 저장되어 있던 데이터들은 삭제되게 됩니다. HTML5에서는 이러한 작업들을 sessionStorage를 이용하게 되는데 방금 전 설명한 localStorage와 비슷하게 데이터 추가 및 수정, 읽기 등의 작업을 수행할 수 있습니다. 차이점이라면 데이터가 지속적이냐 일시적이냐.. 2013. 8. 8.
7장 Web Storage 7장 Web Storage 여러분들은 다양한 쇼핑몰에서 여러분의 필요에 따라서 온라인 구매를 하거나 혹은 당장 구매하지는 않더라도 추후에 구매할 생각으로 보관함에 보관해두곤 합니다. 이러한 과정에서 발생하는 데이터들은 기본적으로 여러분들이 파이어폭스나 익스플로러 같은 브라우저를 통해 접속한 쇼핑몰을 관리하는 웹서버에 저장되게 됩니다. 그리고 여러분의 컴퓨터에는 이와 관련한 간단한 정보들이 쿠키(Cookie)의 형태로 저장되는 형태로 사용해왔습니다. 하지만 쿠키(Cookie)는 오늘날 같은 웹 환경에서 발생하는 많은 데이터들을 처리하기에는 기본적으로 저장 가능한 데이터 공간이 4KB로 처리하는데는 무리가 있는 것이 사실입니다. 따라서 W3C에서 이에 대한 대안으로 작년(2011년)까지만 해도 Web SQL.. 2013. 8. 8.
6장 Drag and Drop 6장 Drag and Drop HTML5는 마우스나 기타 포인팅 장치를 이용하여 웹 브라우저 내의 문자열이나 이미지를 움직일 수 있는 끌기와 놓기(drag-and-drop) 동작을 지원합니다. 이 그 기능은 쇼핑몰과 같은 웹 페이지에서 유저로 하여금 쇼핑 카트에 구매할 상품을 끌어다 놓거나 홈페이지 내에서 특정 요소를 재배치하거나 파일 업로드 같은 기능을 구현할 때도 추가적으로 이용할 수 있는 기능입니다. 현재까지 끌기(Drag)와 놓기(Drop) 기능은 자주 업데이트 중이며 관련 명세들에 포함된 기능들을 브라우저 별로 구현이 되는 부분도 있고 구현되지 않는 부분이 있는 상태임을 알립니다. 관련 문서는 “http://dev.w3.org/html5/spec/dnd.html“에서 확인할 수 있습니다. 끌기(.. 2013. 8. 8.
2. Video 2. Video 지금까지는 웹사이트에서 동영상 파일을 재생하기 위해서 어도비(Adobe)사의 Flash Video가 대세였지만 HTML5가 등장하면서 어도비(Adobe)사의 Flash가 조금은 시장에서 밀리는 듯한 인상을 받게 되는 건 저만의 생각이 아닌 듯합니다. 그 원인은 애플사에서 기존의 Flash Video를 지원하지 않고 HTML5에 기본적으로 내장되어 있는 태그를 이용한 동영상 재생을 지원한다고 발표했기 때문입니다. 그리고 그 뒤를 이어 마이크로소프트도 메트로 UI(User Interface) 환경의 Windows 8에 기본적으로 내장되는 IE10에는 Flash를 지원하지 않는다고 발표한 상황입니다. 그렇다고 당장 HTML5의 video 태그가 현재의 Flash 시장을 대체할 것이라고 생각되지.. 2013. 8. 7.

티스토리툴바