본문 바로가기

반응형

Web

(6)
[jQuery Mobile] 주제를 알자! - 3 - 주제를 알자! 1, 2편에서 사용자의 입맛에 맞는 테마와 아이콘 등을 제작하는 방법에 대해 포스팅하였다. 이번에는 내 입맛에 맞게 다른 사람이 제작해 둔 테마를 가져다 사용하는 방법에 대하여 설명하겠다. 주제를 알자! - 1 - 주제를 알자! - 2 - 샘플은 편의상 2편에서 사용했던 example2 를 재활용하겠다. 2편에서 사용자가 제작한 iPhone 스타일의 테마를 보았다. http://taitems.github.com/iOS-Inspired-jQuery-Mobile-Theme/ iPhone 스타일의 테마가 마음에 든다. 미적 감각도 없는 내가 새로 만든다고 삽질을 하느니 이걸 그냥 가져다 쓰고 싶다. 아마 나와 같은 공돌이들은 대부분 같지 않을까? 그렇다면 다음 과정을 따라해보자. 1. 다음의 U..
[jQuery Mobile] 주제를 알자! - 2 - 지난 번에 Theme 를 변경하는 방법에 대해 포스팅하였다. 같은 맥락에서 진행되는 내용이니 못봤다면 아래 링크를 참고하여 살펴보기 바란다. 아래 example2.zip 파일을 다운로드 받아보자. http://s2junn.tistory.com/64 다운로드 받은 샘플의 압축을 풀고 example.html 을 브라우저에서 열어 살펴보자. Third Page 에서 Button 왼쪽에 있는 별 모양의 아이콘은 어떻게 변경할 수 있는가? 이번 포스팅의 주제는 바로 저 아이콘을 변경하는 것이다. jQuery Mobile 에서 아이콘을 변경하기 위해서는 data-icon 속성을 이용하면 된다. data-icon 속성에 "arrow-l", "arrow-r", "arrow-u", "arrow-d", "delete", ..
[jQuery Mobile] 주제를 알자! - 1 - 주제를 알고 싶어 네이버 지식백과에 물어보았다. 영어로는 ㅆㄸㅁ[Θi:m] 이라고 읽던데, 테마라는 말은 독어였군.. 미리 말하자면, 오늘의 주제는 jQuery Mobile 에서 사용되는 Theme 이다. 어플리케이션이나 웹페이지, 또는 프리젠테이션 자료를 만드는 등의 경우에 우리는 특정 색상에 어떠한 상징을 부여하고 그 상징색에 몇가지 조합을 통해 작성하게 된다. 그리고 이러한 상징과 일관성있는 색상을 사용함으로써 기업은 브랜드 인식을 높일 수 있다. 예를 들면, 빨강은 정열, 열정을 상징하니 이번 사내 컨테스트 홍보 페이지는 빨강계열을 이용하여 작성한다던가 노랑은 명랑, 유쾌함을 상징하니 카카오톡은 노랑색계열로 만든다던가(읭?;) 하는 등의 경우이다. 통일된 색상을 사용한 Application 설계의..
Flexible Box Layout module CSS3 가 발표되면서 기존의 CSS2 에는 없던 새로운 기능들이 포함되었다. CSS2와 CSS3의 가장 큰 차이점은 CSS3 가 모듈 기반으로 개발되고 있다는 점인데 이것은 각종 브라우저나 디바이스가 필요에 따라 원하는 CSS 모듈만을 탑재하거나 또는 필요한 모듈만을 빠르게 자주 업데이트 할 수 있게 한다. CSS3 는 Text, Fonts, Color, Backgrounds & Borders, Transforms, Transitions, Animations 와 같은 종류의 모듈들을 추가로 개발하고 있다. CSS3는 기존의 CSS2가 갖지 못했던 화려하고 역동적인 면모를 추가하여 포토샵과 자바스크립트 및 서버측 기술에만 완전히 의존하던 영역들을 개척했다. 상자의 크기에 따른 말줄임 표시, 투명한 배경,..
CSS 가상요소(Pseudo Elements) 1. HTML과 CSS HTML(Hyper Text Markup Language) 웹 페이지의 구조를 만드는 언어로 표현하려는 콘텐츠의 제목, 문단, 목록 등을 HTML 태그로 작성하면 웹 브라우저가 이 태그를 해석해서 웹 페이지로 출력한다. HTML 문서를 표준 문법에 따라 의미 있게 작성하면 검색 엔진이 웹 문서를 수집하기 좋고 다양한 접근 환경에서 사용할 수 있다. CSS(Cascading Style Sheet) HTML이 웹 페이지의 구조를 담당하는 언어라면 CSS는 표현을 담당하는 언어이다. 웹 브라우저에는 HTML 요소에 대한 기본적인 표현 양식이 있는데, CSS를 사용하여 이 표현 양식을 더 보기 좋게 바꿀 수 있다. 특정 HTML 요소를 선택하고 해당 요소에 CSS 속성을 부여하여 화면에서..
웹 페이지 저작의 기초 1. HTML과 CSS HTML(Hyper Text Markup Language) 웹 페이지의 구조를 만드는 언어로 표현하려는 콘텐츠의 제목, 문단, 목록 등을 HTML 태그로 작성하면 웹 브라우저가 이 태그를 해석해서 웹 페이지로 출력합니다. HTML 문서를 표준 문법에 따라 의미있게 작성하면 검색 엔진이 웹 문서를 수집하기 좋고 다양한 접근 환경에서 사용할 수 있습니다. CSS(Cascading Style Sheet) HTML이 웹 페이지의 구조를 담당하는 언어라면 CSS는 표현을 담당하는 언어입니다. 웹 브라우저에는 HTML 요소에 대한 기본적인 표현 양식이 있는데, CSS를 사용하여 이 표현 양식을 더 보기 좋게 바꿀 수 있습니다. 특정 HTML 요소를 선택하고 해당 요소에 CSS 속성을 부여하여..

반응형