Web
- [Font] cufon 웹폰트 적용하기 2013.04.03
- [CSS] Cufon 캔버스에 그려내는 웹 글꼴 2013.03.28
- [CSS] Checkbox, Radio Buttons (체크박스, 라디오 버튼) CSS 스타일 2013.03.27
- [CSS] naver nstore 앱 목록 (App List) 스타일 2013.03.21
- [Mobile] Facebook API 2012.03.31
- [Mobile] Viewport 이해하기 2012.01.19
- [Web] 사파리 User-Agent 변경하기 2012.01.18
- [Web] 파이어폭스 User-Agent 변경하기 2012.01.18
- [Web] 오페라 User-Agent 변경하기 2012.01.18
- [Web] IE8, IE9 User-Agent 변경하기 2012.01.18
[Font] cufon 웹폰트 적용하기
[CSS] Cufon 캔버스에 그려내는 웹 글꼴
[CSS] Checkbox, Radio Buttons (체크박스, 라디오 버튼) CSS 스타일
참고 : http://ichbintaeeun.tistory.com/16
CSS를 이용해서 checkbox 크기 조정하고 이미지처럼 꾸미기
Posted 2014.09.25 11:00모바일, 태블릿 프로젝트를 하다보니, 변수가 이만저만이 아니다.
안드로이드, IOS 디바이스마다 맞춰주는 것이 여간 피곤한게 아니다.
이럴때보면 오히려 크로스브라우징이 그나마 나은 거구나 하는 생각이 들 정도다.
모바일에서는 체크박스나 라디오버튼의 디폴트 사이즈가 작아 터치하는데 애로사항이 있다.
그냥 width="15px";height="15px" 이렇게 css에 박아주면? 일단 갤럭시 S3에선 통과!
그런데 문제는 먹는 디바이스가 있고, 안먹는 디바이스가 있는 것이다. 한마디로 일관되게 적용되지 않는 다는 것!
그래서 보통 선택 전 이미지와 선택 후 이미지로 대체해서 퍼블리싱을 하는 경우가 많다.
대표적인 예로 다음 모바일의 로그인 페이지이다.
Daum 이용약관 동의, 개인정보 수집 및 이용 동의 체크 부분을 background 속성을 이용해서 작성되어있다.
하지만 굳이 이미지로 박지않아도, CSS를 이용해서 체크박스의 스타일을 변경할 수 있다.
HTML
<input type="checkbox" id="divECI_ISDVSAVE" class="checkbox-style" /><label for="divECI_ISDVSAVE">담당자 정보를 계속 저장</label>
// 반드시 input의 id와 label의 for값을 맞춰 작성해야한다.
CSS
input[type=checkbox] { display: none; } input[type=checkbox] + label{ display: inline-block; cursor: pointer; position: relative; padding-left: 25px; margin-right: 15px; font-size: 13px; } input[type=checkbox]+ label:before { content: ""; display: inline-block; width: 20px; height: 20px; margin-right: 10px; position: absolute; left: 0; bottom: 1px; background-color: #ccc; border-radius: 2px; box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8); } input[type=checkbox]:checked + label:before { content: "\2713"; /* 체크모양 */ text-shadow: 1px 1px 1px rgba(0, 0, 0, .2); font-size: 18px; font-weight:800; color: #fff; background:#2f87c1; text-align: center; line-height: 18px; }
// css를 설명하자면, label 옆의 checkbox를 보이지않게 한 후, 가상요소 :before를 이용하여 체크박스자리에 원하는 모양으로 체크박스를 만들어주는 것이다.
그리고 역시 :checked를 이용하여, 체크됐을 때의 모양도 꾸며주면 끝!
참고사이트 http://www.hongkiat.com/blog/css3-checkbox-radio/
========================================================================================================
자바스크립트를 사용하지 않고 CSS로만 적용한 Checkbox, Radio Buttons
IE는 기존 체크박스, 라디오 버튼처럼 보이고 FF, Chrome 등에서 사용가능
출처 : http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-easy-css3-checkboxes-and-radio-buttons/
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="style.css" media="screen" /> </head> <body> <div id="show"> <h1>Easy CSS3 Checkboxes and Radio Buttons</h1> <input type="checkbox" id="c1" name="cc" /> <label for="c1"><span></span>Check Box 1</label> <p> <input type="checkbox" id="c2" name="cc" /> <label for="c2"><span></span>Check Box 2</label> <p><br/> <input type="radio" id="r1" name="rr" /> <label for="r1"><span></span>Radio Button 1</label> <p> <input type="radio" id="r2" name="rr" /> <label for="r2"><span></span>Radio Button 2</label> </div> </body> </html> |
[CSS] naver nstore 앱 목록 (App List) 스타일
<!DOCTYPE html> <style> .lst_thum_wrap {} </head> <div class="lst_thum_wrap"> </body>
|
[Mobile] Facebook API
출처 : http://www.uengine.org:8088/wiki/index.php/Facebook_Open_API_%ED%99%9C%EC%9A%A9(Javascript_SDK)
Facebook Open API 활용(Javascript SDK)
Uwiki
App ID를 발급받기 위한 application 등록
먼저 페이스북 OPEN API를 사용하기 위해서는 Facebook Platfrom API key(App ID)를 발급받아야 한다. Key를 만들는 과정은 다음의 과정을 따른다.
1. http://www.facebook.com/developers/createapp.php 로 가서 new application을 생성한다. 페이스북 id및 인증을 위한 모바일 폰 번호를 필요함. 2. 어플리케이션 이름을 입력한다. 3. Basic탭에서 모두 기본값을 사용하고 callback URL(자신의 도메인)은 반드시 넣도록 한다. 4. 생성된 API key를 적당히 메모해 둔다.
자신의 application 정보는 http://www.facebook.com/developers/apps.php 에서 확인할 수 있다.
API 활용
다음은 자신의 페이지에서 Facebook OPEN API를 사용하기 위해 SDK를 로딩하는 과정으로 반드시 페이지 내에 추가해 주어야 한다.
<script src="http://connect.facebook.net/en_US/all.js"></script> <script> FB.init({ appId : 'APP ID', status : true, // check login status cookie : true, // enable cookies to allow the server to access the session xfbml : true // parse XFBML }); </script>
또는, 페이지 로딩 속도를 확보하기 위해 다음과 같은 코드를 사용할 수도 있다.
<script> window.fbAsyncInit = function() { FB.init({appId: 'your app id', status: true, cookie: true, xfbml: true}); }; (function() { var e = document.createElement('script'); e.async = true; e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; document.getElementById('fb-root').appendChild(e); }()); </script>
FB.getLoginStatus()를 이용해서 유저의 로그인 상태 체크.
FB.getLoginStatus(function(response) { if (response.session) { // logged in and connected user, someone you know } else { // no user session available, someone you dont know } });
FB.login()를 이용해서 페이스북로그인 창을 띄우기.
FB.login(function(response) { if (response.session) { // user successfully logged in } else { // user cancelled login } });
FB.login()과 FB.getLoginStatus()를 이용해 이용해 다음과 같이 유저가 로그인 하도록 유도.
FB.getLoginStatus(handleSessionResponse); function handleSessionResponse(response) { if (!response.session) { // Open login dialog box FB.login(handleSessionResponse); return; } else{ // already logged in } }
로그인 유저 정보 가져오기
function getUser(){ FB.getLoginStatus(handleSessionResponse); function handleSessionResponse(response) { if (!response.session) { // } else{ FB.api( { method: 'fql.query', query: 'select uid,name,email,pic_square from user where uid = "' + FB.getSession().uid + '"' }, function(response) { for(var i=0; i < response.length; i++){ response[i].uid; //유저아이디 response[i].pic_square; // 사진 response[i].name; // 이름 response[i].email; // 이메일주소 } } ); } } }
내친구 리스트 가져오기
function getFriends(){ FB.getLoginStatus(handleSessionResponse); function handleSessionResponse(response) { if (!response.session) { // } else{ FB.api( { method: 'fql.query', query: 'SELECT uid, name, email, birthday, pic_square, online_presence FROM user WHERE uid IN (SELECT uid2 FROM friend WHERE uid1 = me())' }, function(response) { for(var i=0; i < response.length; i++){ response[i].uid; response[i].pic_square; response[i].name; response[i].birthday; response[i].email; response[i].online_presence; } } ); } } }
내 담벼락의 글 가져오기
function getPersonalFeed(fbId){ FB.getLoginStatus(handleSessionResponse); function handleSessionResponse(response) { if (!response.session) { alert("no login"); } else{ var path = '/me/feed'; var num = 10; FB.api(path, { limit: num }, function(response) { for (var i=0, l= response.data.length; i< l; i++) { var info = response.data[i]; if (info.message) { info.id; // 글아이디 info.updated_time; // 갱신일 info.message; //글내용 info.from.name; //글쓴이 } } }); } } } }
내 담벼락에 새글 쓰고 id가져오기
function postPersonalFeed(fbId){ FB.getLoginStatus(handleSessionResponse); function handleSessionResponse(response) { if (!response.session) { alert("No login"); } else{ var path = '/me/feed'; var body = document.getElementById("info1").value; FB.api(path, 'post', { message: body }, function(response) { if (!response || response.error) { alert("error"); } else { alert("successful with id [" + response.id + "]"); } }); } } }
내 담벼락의 특정 글에 코멘트 달고 글 id가져오기
function postPersonalComment(postId){ FB.getLoginStatus(handleSessionResponse); function handleSessionResponse(response) { if (!response.session) { alert("No login"); } else{ var path = '/'+postId + '/comments'; FB.api(path, 'post', { message: body }, function(response) { if (!response || response.error) { alert("error"); } else { alert("successful with id [" + response.id + "]"); } }); } } }
내 담벼락의 특정 글의 코멘트 가져오기
function getPersonalComments(postId){ FB.getLoginStatus(handleSessionResponse); function handleSessionResponse(response) { if (!response.session) { alert("No login"); } else{ var path = '/'+postId+'/comments'; var num = 10; FB.api(path, { limit: num }, function(response) { for (var i=0, l= response.data.length; i< l; i++) { var info = response.data[i]; info.id; info.message"; } }); } } }
그룹 리스트 가져오기
function getGroupList(){ FB.getLoginStatus(handleSessionResponse); function handleSessionResponse(response) { if (!response.session) { alert("No login"); } else{ FB.api( { method: 'fql.query', query: 'SELECT gid, name, description, creator, icon FROM group WHERE gid IN (SELECT gid FROM group_member WHERE uid = me())' }, function(response) { for(var i=0; i < response.length; i++){ response[i].gid; response[i].icon; response[i].name; response[i].description; } }); } } }
그룹 담벼락의 글 가져오기
function getGroupFeed(groupId){ FB.getLoginStatus(handleSessionResponse); function handleSessionResponse(response) { if (!response.session) { alert("no login"); } else{ var path = '/' + groupId + '/feed'; var num = 5; FB.api(path, { limit: num }, function(response) { for (var i=0, l= response.data.length; i< l; i++) { var info = response.data[i]; if (info.message) { info.id; info.updated_time; info.message; info.from.name+; } } }); } } }
그룹 담벼락의 특정 글에 코멘트를 쓰고 id가져오기
function postGroupComment(postId){ FB.getLoginStatus(handleSessionResponse); function handleSessionResponse(response) { if (!response.session) { alert("No login"); } else{ var path = '/'+postId + '/comments'; FB.api(path, 'post', { message: body }, function(response) { if (!response || response.error) { alert("error"); } else { alert("successful with id [" + response.id + "]"); } }); } } }
그룹 담벼락의 특정 글의 코멘트 가져오기
function getGroupComments(postId){ FB.getLoginStatus(handleSessionResponse); function handleSessionResponse(response) { if (!response.session) { alert("No login"); } else{ var path = '/'+postId+'/comments'; var num = 10; FB.api(path, { limit: num }, function(response) { for (var i=0, l= response.data.length; i< l; i++) { var info = response.data[i]; info.id; info.message; } }); } } }
그룹 담벼락에 새글 쓰고 id가져오기
function postGroupFeed(groupid){ FB.getLoginStatus(handleSessionResponse); function handleSessionResponse(response) { if (!response.session) { alert("No login"); } else{ var path = '/'+groupid+'/feed'; FB.api(path, 'post', { message: body }, function(response) { if (!response || response.error) { alert("failed"); } else { alert("successful with id [" + response.id + "]"); } }); } } }
참고 사이트
개발자 사이트 : http://developers.facebook.com Graph API : http://developers.facebook.com/docs/api 개발자 시작 가이드 : http://developers.facebook.com/docs/guides/web
[Mobile] Viewport 이해하기
출처 : http://chaospace.tistory.com/152
http://www.ugoon.net/study/mobile/mobile_viewport.php
속성 | 내용 | 단위 | 기본값 | 허용범위 | 특이사항 |
width | viewport의 넓이 | px | 980px | 200 ~ 10,000 | 뷰 포트의 픽셀 가로 길이를 지정. 가로 길이를 지정하지 않으면 데스크탑 사이즈로 지정. (모바일 사파리의 경우는 980픽셀로 지정됨.)device-width로 지정가능 |
height | viewport의 높이 | px | 가로화면비율에서 계산된 값 |
200 ~ 10,000 | 뷰 포트의 픽셀 세로 길이를 지정. 일반적으로, 이 속성에 대한 지정은 하지 않아도 무관 함. device-height로 지정가능 |
initial-scale | 초기 배율값 | 승수지정 120% = 1.2 |
viewport에서 계산된 값 |
0 ~ 10 | 처음 모바일 페이지가 보여질 때 페이지 배율을 지정. (0~10.0) (1.0으로 설정하는 것이 안정적임.) 값이 크면 확대, 값이 작으면 축소 |
minimum-scale | 승수 지정 | 승수 | .25 | 0 ~ 10 | 사용자가 축소할 수 있는 최소 배율을 지정. (0~10.0) 모바일 사파리는 기본으로 0.25로 설정. |
maximum-scale | 승수 지정 | 승수 | 1.6 | 0 ~ 10 | 사용자가 확대할 수 있는 최대 배율을 지정. (0~10.0) 모바일 사파리는 기본으로 1.6으로 설정. |
user-scalable | 확대,축소 지원여부 | yes, no | yes | 사용자가 배율을 확대 또는 축소 허용 여부를 설정. 모바일 사파리는 기본으로 '사용 함'으로 설정. |
viewport의 넓이를 400px하고 시작 비율을 2로 적용한 코드;
Viewport가 지원하지 않을때 meta tag 사용
<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="320" />
Safari HTML Reference: Supported Meta Tags
Mobile META Tags
[Web] 사파리 User-Agent 변경하기
1. 설정메뉴(옵션) > 기본설정 > 고급(탭) > 메뉴 막대에서 개발자용 메뉴 보기 체크
2. 메뉴 > 개발자용 > 사용자 에이전트 > 해당 User-Agent
※ 주요모바일 기기 User-agent
※ IE8, IE9 User-Agent 변경하기
※ Opera User-Agent 변경하기
※ FireFox User-Agent 변경하기
※ Safari User-Agent 변경하기
※ Chrome User-Agent 변경하기
[Web] 파이어폭스 User-Agent 변경하기
출처 : http://stove99.tistory.com/41
Firefox 는 부가기능을 설치하면 된다.
설치할 부가기능 : https://addons.mozilla.org/ko/firefox/addon/user-agent-switcher/
부가기능을 설치하고 나면 메뉴 > 도구 > Default User Agent 메뉴가 생긴다.
거기에서 디폴트로 등록되 있는 User-agent 들을 선택하거나 아니면 Edit User Agent 로 원하는 User-agent 를 추가하면 된다.
※ 주요모바일 기기 User-agent
※ IE8, IE9 User-Agent 변경하기
※ Opera User-Agent 변경하기
※ FireFox User-Agent 변경하기
※ Safari User-Agent 변경하기
※ Chrome User-Agent 변경하기
[Web] 오페라 User-Agent 변경하기
출처 : http://stove99.tistory.com/40
1. 주소창에 opera:config 를 입력하고 이동
2. 목록중에 ISP 라는게 있는데 고부분을 클릭해서 ID 에 원하는 User-agent 스트링을 입력후 저장하고 브라우져를 껏다가 켜면 적용된다.
[Web] IE8, IE9 User-Agent 변경하기
출처 : http://stove99.tistory.com/38
http://stove99.tistory.com/39
1. IE8 User-Agent 변경하기
IE8 은 별도 Add-on 기능을 설치해야 가능하다.
http://ieaddons.com/en/addons/detail.aspx?id=2040
입력하는 란에다 직접 원하는 User-agent 스트링을 입력한 다음 적용하면 된다.~
2. IE9 User-Agent 변경하기
1. F12 를 클릭해 개발자모드로 들어간다.
2. 개발자 모드 메뉴중에 도구 > 사용자 에이젼트 문자열 변경 > 사용자 지정 으로 가서 원하는 User-agent 를 추가한다.
3. 도구 > 사용자 에이젼트 문자열 변경 > 추가시킨 User-agent 를 선택하면 적용된다.
※ 탭별로 적용되는 거라서 새로운 탭을 열면 원래 기본 User-agent 로 다시 변경된다.
※ IE8, IE9 User-Agent 변경하기
※ Opera User-Agent 변경하기
※ FireFox User-Agent 변경하기
※ Safari User-Agent 변경하기
※ Chrome User-Agent 변경하기