demun(대문블로그)

퍼블리셔2011. 12. 26. 12:29

센차터치는 이제까지의 모바일 프레임워크 중 가장 방대하고 독특한 API 구조를 가지고 있습니다. 센차터치도 모바일 웹 애플리케이션 개발을 위한 자바스크립트 프레임워크입니다. 기존 데스트톱 기반 자바스크립트 프레임워크인 ExtJS 개발사에서 모바일 시대에 부응하고자 새롭게 내놓은 제품입니다. 센차터치는 ExtJS를 기반으로 하고 있어서 ExtJS의 API 구조와 문법 체계를 그대로 계승하며, 여기에 모바일에 최적화된 기능들이 추가되었습니다. ExtJS개발사는 기본의 회사명과 대표 도메인을 Sencha 로 변경하고, jQTouch 와 Raphael프로젝트를 통합해서 개발자르 영입하는 등 모바일 웹, 나아가 차세대 웹 개발 프레임워크 시장을 석권하기 위한 전략적인 움직임을 보이고 있습니다. 이 결과물중 하나가..

퍼블리셔/jQueryMobile2011. 12. 26. 06:00

jQuery Mobile 은 기본적으로 5가지 테마를 제공합니다. 그런데 추가적으로 사용자테마를 만들수 있습니다. 현재 홈페이지에서 제공하고 있는 정식버젼인 1.0 파일에 css 파일에 보면 /* A */, /* B */ 형식으로 5가지의 테마를 제공합니다. 만약 새로운 테마 즉 F 라는 테마를 만들려면 기존의 Swatch 중 하나를 복사해서 CSS 셀렉터 이름을 새로운 Swatch 문자(여기서는 F) 로 수정하고 색상과 효과를 다르게 구현하면 됩니다. 예를들면 다음과 같습니다. .ui-bar-f { /* 셀렉터 이름의 끝을 새로운 Swatch 문자로 수정 */ border:1px solid #555; /* 새로운 색상 #555 를 지정함 */ .... } CSS 파일을 이렇게 수정한후에는 마찬가지로 h..

퍼블리셔/jQueryMobile2011. 12. 25. 06:00

jQuery Mobile 은 CSS3의 최신 기술을 적극 활용해 향상되고 세련된 테마를 구현하고 있으며 이미지 사용을 초치대한 절제해 모바일 네트워크를 위한 경량화에 힘을 기울이고 있습니다. 또한 레이아웃과 UI 컨트롤 하나하나에 서로 다른 색상과 질감을 적용할 수 있어 다양하고 섬세한 테마 구현이 가능합니다. 그리고 테마롤러(ThemeRoller)라는 자동화된 테마 도구를 제공해 사용자 정의 테마를 손쉽게 만들수 있게끔 지원하고 있습니다. jquery mobile 테마 특징. CSS3 확용. 최근 출시되는 대부분의 모바일 UI 라이브러리처럼 jQuery Mobile 역시 CSS3의 향상된 기능을 많이 활용하고 있습니다. CSS3 를 이용하면 좀더 세련된 디자인이 가능하며, 많은 부분에서 이미지를 대체할..

퍼블리셔/jQueryMobile2011. 12. 24. 06:00

jQuery Mobile 은 핵심 라이브러리를 참조하는것만으로도 시작준비가 끝입니다. 즉 해더에 관련 js와 css를 참조하는 것이죠. 아래의 코드를 넣는것만으로 준비는 끝입니다. 예제를 한번 보시죠. 1.0버젼이든 1.0a3버젼이든 상관없습니다. HTML5 의 data-* 속성. jquery Mobile은 페이지의 각 요소가 어떤 역활을 하게 될지 결정하기 위해 data-* 속성을 활용합니다. data-* 속성은 html5에 새로 추가된 것으로 로컬(Local)에 임의의 사용자정의 데이터를 저장하기 위한 표준 스펙(Spec)이며 html 요소에 직접 데이터를 정의할 수 있어 태그와 데이터의 연관성을 주기 편리합니다. 키/값 형태로 데이터를 정의할 수 있으며, 다음과 같이 'data-' 접두어로 시작해서..

퍼블리셔/html2011. 12. 23. 06:00

HTML5에는 header 라는 새로운 요소가 생겼습니다. 사전적인 의미는 컴퓨터에서 출력될 때 각 페이지 맨 윗부분에 자동으로 붙는 부분이라고 나오는군요. 말그대로 상단부분 , 머리말을 말합니다. 사이트 전체의 머리말이 될 수도 있고, 블로그 포스트의 머리말이 될 수도 있습니다. 주로 상단에는 업체의 로고나 상호, 네비게이션,사이트의 기타 하위 부분등이 들어갑니다. header 이라고 해서 꼭 상단에만 있어야 하는것은 아닙니다. header 요소에는 적어도 한개의 제목(h1 ~ h6)이 들어 있어야 하며, section, header, footer 요소는 들어갈수 없습니다. 사이드 전체의 머리말인 경우 태그 안에서 에서 까지의 태그를 사용해 사이트 제목으로 사용할 수도 있고, 태그를 사용해서 사이트 로..

퍼블리셔/jQueryMobile2011. 12. 23. 06:00

jQuery Mobile 은 모바일 웹 애플리케이션 개발을 위한 자바스크립트 프레임워크 입니다. 이름에서도 알듯이 jQuery진영에서 직접 개발한 프레임워크로 네이티브 수준의 모방일 웹 , 즉, 모바일 웹앱을 개발하기 위한 각종 UI 컨트롤과 이벤트 처리, 애니메이션 효과 및 자동 네비게이션, Ajax 통신 등 모바일에 최적화된 기능을 선보이고 있습니다. jQuery Mobile 개발 진영에서 밝힌 전략에서도 기기 지원과 브라우져 화환성을 중요하게 다루고 있습니다. jQuery Mobile 이 추구하는 점진적 향상(Progressive Enhancement), 적절한 퇴보((Graceful Degradation)와 같은 설계원칙 역시 이러한 전략을 잘 설명해 주는 대목입니다. jQuery Mobile 의..

퍼블리셔/css2011. 12. 23. 06:00

여러분은 css4를 들어보셨나요? 아직 css3도 익히지 못했는데 벌써 css4가 초안이 발표되어서 외국에서는 한참 논의중이군요. 자세한 것은 W3C의 초안을 보시면 되는데 역시 영어의 압박이 있습니다. 관련 주제들도 전부 영어라 뭔말인지 모르겠네요.... W3C 의 선택자에 대한 CSS 4 초안 보기 선택자를 보면 자주 보면 $ 도 나옵니다. $E>F 자식요소 F를 기반으로 부모요소 E의 스타일을 허용한다는 뜻이라는데 상속이 아니라 꺼꾸로 올라가는거 같네요....저도 영어라 잘 모르겠습니다. 또 로컬컴에서의 링크와 외부 도메인으로 넘어가는 링크를 구분하는것도 있습니다. Location Pseudo-Classes - :any-link and :local-link 참조연결자인 :matches 도 있는데요...

퍼블리셔/html2011. 12. 22. 06:00

이전에는 새로운 태그와 속성에 대해서 간략하게 알아봤습니다. 이번에는 html5에서 변경된 태그와 이제는 사용하면 안되는 중단된 태그 , 그리고 중단된 속성에 대해서 전체적으로 쭉 둘어봅니다. html5에서 강조하는것은 시맨틱 마크업(Semantic Markup) 입니아 즉 위미있는 마크업구조를 말합니다. 그래서 html4에서도 있었지만 html5에서는 의미가 달라지는 태그들도 있습니다. 정확한 용도대로 사용해야 논리적인 마크업이 되겠지요... 변경된 태그 a : html4에서는 널링크로 사용하려면 href="#" 이런식으로 사용했지만 html5에서는 href 속성없이 사용하면 바로 null link(널링크)가 됩니다. adress : html4에서는 이름,이메일주소,전화번호등으로 사용했었습니다. 하지만..

퍼블리셔/css2011. 12. 22. 06:00

아이콘은 이제 까지 모두 이미지로 배경처리하고 hover 처리하면서 보여주곤 했었습니다. 하지만 이건 이미지가 하나도 없는 단순이 CSS코드만으로 아이콘을 표현합니다. 원문은 Pure CSS social medial icons 라고 합니다. 링크를 클릭하시면 원문을 보실 수 있습니다. 데모페이지는 보기 아래 이미지를 보시면 이해가 가실겁니다. html5이다보니 익스플로러는 지원하지 않습니다. 그래도 IE 8 정도만 되고 거의 정상적으로 보이더군요. HTML 마크업은 비교적 단순하며 아래와 같습니다. Facebook Twitter RSS Flickr Delicious LinkedIn Google Orkut Technorati NetVibes CSS 파일은 내용이 워낙 길어 블로그에서는 생략합니다. 테스트로..

퍼블리셔/jQuery2011. 12. 21. 06:00

티스토리에서 툴팁기능을 사용해보기. 물론 티스토리가 아니더라도 툴팁기능을 이용할 수 있습니다. 또 툴팁을 사용하는 기능은 여러가지가 있습니다. 그중 제가 html5로 마크업하면서 괜찮다고 생각되는 툴팁 플러그인이 있어 소개하고 적용하는 방법을 알려드릴려고 합니다. 이름하여 Poshy Tip jQuery Plugin 입니다. 이는 jQuery 를 사용해야 합니다. 아주 많은 기능이 있습니다. Poshy Tip jQuery Plugin 의 데모페이지를 보시면 다양한 기능을 알수 있습니다. 여기서는 Poshyd의 툴팁기능중 하나만 적용해보면 나머지는 자동으로 알수 있으니 우선 한가지만 적용하는 방법을 알려드립니다. 나머지 기능은 다 같으니 얼마든지 응용가능합니다. 먼저 관련 파일을 다운로드 하세요. 다음 다운..