프로그래밍/Web (13) 썸네일형 리스트형 jQuery custom content scroller 웹 페이지의 일부 영역에 스크롤바를 붙이고 싶은가? 그렇다면, 여기에 jQuery 라이브러리를 활용해서 손쉽게 처리하는 방법이 있다. 현재 이 블로그에 적용된 라이브러리이기도 하다. 상세한 사용방법은 다음 사이트에서 확인할 수 있다. http://manos.malihu.gr/jquery-custom-content-scroller/ 라이브러리는 다음 주소에서 다운로드 받을 수 있다. https://github.com/malihu/malihu-custom-scrollbar-plugin 적용방법을 간략히 기술하자면, 우선, HTML의 HEAD 영역에 다음과 같이 CSS와 자바스크립트를 연결시켜준다. 그리고, 스크롤바를 적용하고자 하는 영역(주로 DIV)에 mCustomScrollbar() 메서드를 실행시켜주면.. 나만의 SNS 공유 버튼을 만들다 웹 사이트에 SNS 공유 버튼을 만드는 방법이다. 웹 디자인과 어울리는 커스텀 이미지를 사용해서 버튼을 만들 수 있다. 누른 사람 숫자가 나오는 '좋아요' 버튼과는 다르다.우선 버튼으로 사용할 이미지를 준비해야 한다. 그리고, HTML로 링크를 만든다. 아마존 EC2 우분투 웹서버 설정 EC2를 통해서 우분투 인스턴스를 생성하고, SSH로 접속해서 ubuntu 계정으로 로그인한 후,저장소 업데이트sudo apt-get update 아파치 웹서버 설치sudo apt-get install apache2기본 HTML 디렉토리는 /var/www/html/ PHP 설치sudo apt-get install php5 MySQL 설치sudo apt-get install mysql-server mysql-client php5-mysql MySQL 설정 파일 수정sudo vi /etc/mysql/my.cnf다음 내용을 추가한다.character-set-server = utf8 collation-server = utf8_general_ci PhpMyAdmin 설치sudo apt-get install php.. 크롬 모바일 버젼을 사용한 모바일 웹 페이지 디버깅 크롬 모바일 버젼을 사용해서 모바일 웹 페이지 디버깅하는 방법.폰에서 웹페이지를 띄우고 컴퓨터의 크롬에서 개발자 도구로 디버깅 정보를 확인한다.데스크탑에는 안드로이드 SDK와 크롬이 설치되어 있어야 한다. 폰에서 크롬을 실행한 후 메뉴 버튼을 눌러서 설정 화면으로 간다.개발자 도구를 선택하고, USB 웹 디버깅 도구 사용을 활성화 시킨다.컴퓨터와 폰을 USB 케이블로 연결한다. 컴퓨터에서 명령 프롬프트를 열고 adb devices를 실행해 본다. 연결된 장치 목록이 나면 정상이다.잘 안되면 환경변수의 PATH등을 건드려 보거나 폰의 설정을 건드려 본다. 자세한 설명은 생략한다. 이제 명령 프롬프트에서adb forward tcp:9222 localabstract:chrome_devtools_remote를 .. 로컬 네트워크에서 WAMP 접속 WAMP 환경의 웹서버를 네트워크로 연결된 다른 컴퓨터에서 접속하도록 설정하는 방법.E:\wamp\bin\apache\apache2.4.2\conf\httpd.conf 파일을 텍스트 에디터로 연다. 이 때, 경로는 자신의 시스템에 설치된 구성에 맞게 변경할 것.이 파일에서 다음과 유사한 부분을 찾아서 아래에 색칠된 부분을 한 줄 추가하고 저장한다. 서버를 재시작한 다음, 다른 컴퓨터에서 IP주소를 통해 접속해본다.그래도 잘 안되면 구글에서 열심히 검색해 본다.DocumentRoot "E:/wamp/www/" # # Possible values for the Options directive are "None", "All", # or any combination of: # Indexes Includes Fo.. WAMP 환경에서 mod_rewrite를 사용 WAMP는 기본적으로 리라이트 모듈이 사용 가능하지 않도록 설정되어 있다. 그러므로 다음과 같이 설정 파일을 변경해야 한다. 1. 'httpd.conf' 파일을 찾아서 텍스트 편집기로 연다. 설치 폴더 아래를 뒤져보면 이 파일은 bin/apache/apache2.x.x/conf 에 있다. 2. 'LoadModule rewrite_module modules/mod_rewrite.so'를 찾아서 맨 앞의 주석 표시(#)를 제거한다. 3. 'DocumentRoot "C:/wamp/www/"'를 찾는다. 그 아래에 다음과 같이 입력한다. Options All AllowOverride All 4. 서버를 재시작한다. 2012/08/10 - [IT/Software] - Wamp Server [참조] http://p.. jQuery Mobile jQuery Mobilehttp://jquery.elex.pe.kr/jquery-mobile 1. 페이지 1.1. 기본 틀 만들기 1.2. 이제, 페이지를 만들어 보자. 1.3. 하나의 문서에 여러 개의 페이지를 ... 1.4. 타이틀을 지정하자. 1.5. 이제, 각각의 페이지를 연결하자. 1.5.1. 링크 / 버튼과 관련된 속성들 1.6. 페이지 전환 효과 1.7. 대화상자를 만들자. 1.7.1. 페이지 / 대화상자의 속성들 1.8. 빠른 속도를 원한다면 페이지를 미리 불러 올 수도 있다. 1.9. 테마를 적용해 보자. 1.9.1. 컨텐트 영역과 관련된 속성 2. 툴바 2.1. 헤더 바 2.1.1. 헤더의 속성 2.2. 푸터 바 2.2.1. 푸터의 속성 2.3. 탐색 바 2.4. 표시 위치를 지정하자... jQuery Mobile 사용법 jQuery Mobile을 사용하면 빠르고 쉽게 모바일 웹페이지를 만들 수 있습니다. 관련 자료를 다음과 같이 정리 합니다. http://javascript.elex.pe.kr/jquery-mobile 01. 페이지 01. 기본 틀 만들기 02. 이제, 페이지를 만들어 보자 03. 하나의 문서에 여러 개의 페이지를... 04. 타이틀을 지정하자 05. 이제 각각의 페이지를 연결하자 06. 페이지 전환 효과를 바꿔볼까 07. 대화상자를 만들자 08. 빠른 속도를 원한다면 페이지를 미리 불러오자 09. 테마를 적용해보자 02. 툴바 03. 버튼 04. 레이아웃 05. 입력폼 06. 리스트뷰 coming soon~~ 이전 1 2 다음
