가카리의 공부방

2. 선택자와 선언어떤 태그를 디자인하기 위해서는 디자인하려는 태그를 1. 선택하고 (선택자) 2. 선택한 대상에게 효과를 줘야 합니다. (선언) 이번 시간에는 CSS에서 가장 기본적인 문법이라고 할 수 있는 이 선택자(selector)와 선언(declaration)에 대해서 알아봅니다. 가장 중요한 내용이라고 할 수 있습니다. 다음은 li 태그에 컬러와 text-decoration을 지정하는 방법이다. selector_declaration_1.html HTMLCSSJavaScript 실행 화면 출처 : https://opentutorials.org/course/2418/13346

1. inline과 style 태그를 이용한 css 적용하기 다음과 같이 inline 방식과 style 태그를 이용한 방식으로 css를 적용할 수 있다. html_css1.html Hello World Hello world 실행 화면 다음과 같이 css가 적용됨을 알 수 있다. 출처 : https://opentutorials.org/course/2418/13342

1. $.mobile.changePage() 메소드 2. $.mobile.loadPage() 메소드 3. $.mobile.loading() 메소드 19-01.html DOCTYPE html> 19-01 $(document).on('mobileinit', function() { $.mobile.loader.prototype.options.theme = "a"; $.mobile.loader.prototype.options.text = "loading"; $.mobile.loader.prototype.options.textonly = false; $.mobile.loader.prototype.options.textVisible = false; }); $(document).on('pagecreate', func..

1. mobileinit 이벤트 위와 같이 중간에 넣어야 한다. 2. 기본 환경 설정 3. 페이지 초기화 이벤트 (pagebeforecreate, pagecreate, pageinit) 4. 페이지 변경 이벤트 (pagebeforechange, page change, pagechangefailed) 5. 페이지 전환 이벤트 (pagebeforeshow, pagebeforehide, pageshow, pagehide) 6. 페이지 로드 이벤트(pagebeforeload, pageload, pageloadfailed) 7. tap, taphold 이벤트 8. swipe, swipeleft, swiperight 이벤트 9. orientationchange 이벤트 18-01.html DOCTYPE html> 1..

1. 레이아웃 그리드 ui-block-a 클래스가 가장 맨 앞임 2. 콜렙서블 컨텐트 블록 3. 콜렙서블 셋(아코디언) 4. 테마롤러 디자인하기 테마롤러 사용법 http://themoeroller.jquerymobile.com으로 접속한뒤 사용하는 jquery 버젼을 설정해준다. 테마롤러를 이용하면 사용자 정의 css파일을 얻을 수 있다. 위의 팔레트에서 드래그앤 드롭으로 아래와같이 커스터마이징 테마를 쉽게 만들 수 있다. 다운로드 버튼을 누르면 다음과 같이 나와서 테마 이름을 쓰고 를 추가해서 써야된다고 써있다. 다운받은 파일을 풀어보면 다음과 같이 나온다. themes폴더를 카피해서 앱타나 스튜디오 프로젝트에 넣는다. 여기서 프로젝트.html파일에 첫번째는 자기가 만든 테마.css파일을 넣고 두번째는..

1. 필드 컨테이너 텍스트 입력 필드 그에 맞는 소프트 키보드가 나오게 설계되어있음 2. 슬라이더 3. 플립 토글 스위치 4. 라디오 버튼 5. 체크박스 버튼 6. 셀렉트 메뉴 1. 네이티브 옵션 메뉴 2. data-native-menu 옵션이 false 3. 여러개 선택하면 선택된 갯수가 나옴 16-01.html DOCTYPE html> 16-01 폼 요소 텍스트 입력 필드 슬라이더 플립 토글 스위치 라디오 버튼 체크박스 버튼 셀렉트 메뉴 © 2014 T academy 출력 화면 16-02.html DOCTYPE html> 16-02 텍스트 입력 필드 Home 이름 패스워드 이메일 전화 나이 URL 검색 내용 © 2014 T academy 출력 화면 16-03.html DOCTYPE html> 16-0..

1. 리스트뷰 li 는 리스트 ul unordered 리스트 ol은 ordered 리스트 2. 스플릿 버튼 리스트 3. 리스트 디바이더 4. 카운트 버블 5. 썸네일 리스트 6. 아이콘 리스트 7. 컨텐트 형식 적용하기 8. 인셋 스타일 9. 검색 필터 적용 리스트 15-01.html DOCTYPE html> 15-01 리스트 뷰 연결된 리스트 일련번호를 가진 리스트 중첩 리스트 스플릿 버튼 리스트 리스트 디바이더 카운트 버블 썸네일 리스트 아이콘 리스트 리스트 형식 적용 인셋 스타일 검색 필터 적용 © 2014 T academy 출력 화면 15-02.html DOCTYPE html> 15-02 연결된 리스트 Home item #1 item #2 item #3 item #4 item #5 © 2014 T..

1. 단일 페이지와 다중 페이지에서 페이지 전환 14-01.html DOCTYPE html> 14-01 첫 번째 페이지 헤더 첫 번째 페이지 내용 두 번째 (내부)페이지 전환 세 번째 (외부)페이지 전환 첫 번째 페이지 풋터 두 번째 페이지 헤더 두 번째 (내부)페이지 내용 두 번째 페이지 풋터 14-02.html DOCTYPE html> 14-02 이 내용은 jQuery Mobile에 의해 DOM에 추가되지 않습니다. 세 번째 (외부)페이지 헤더 세 번째 (외부)페이지 내용 세번째 (외부)페이지 풋터 출력 화면 2. 페이지 전환 애니메이션 14-03.html DOCTYPE html> 14-03 첫 번째 페이지 헤더 첫 번째 페이지 내용 두 번째 페이지 전환 첫 번째 페이지 풋터 두 번째 페이지 헤더 두..

1. 기본 효과 13-01.html DOCTYPE html> 13-01 div.card { background:#ece023; width:30px; height:40px; margin:2px; float:left; line-height: 2; text-align: center; font-weight: bold; display: none; } $(document).ready(function() { $("#show").click(function () { $("div.card").first().show("fast", function showCard() { $(this).next("div.card").show("fast", showCard);//재귀호출함 //this는 first요소임 처음에 }); }); $(..

* 각 스타일에 대한 예제이다. border-style:dotted border-style:solid border-style:double border-style:groove border-style:ridge border-style:inset border-style:outset * 보더의 넓이에 대한 예제이다. border-style과 같이 쓰지 않으면 아무런 효과가 없다. border-style:solid;border-width:5px border-style:solid;border-width:thin border-style:solid;border-width:memium border-style:solid;border-width:thick * 보더의 색에 대한 예제이다. border-style과 같이 쓰지 ..