제가 쓴 책/HTML5, CSS3 and JavaScript171 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. 이전 1 2 3 4 5 ··· 43 다음
