반응형

Web 198

[CSS] vendor prefix(밴더 프리픽스)라고 -wbkit-, -moz-, -o-, -ms-

vendor prefix는 회사별(vendor)로 각 브라우저에서 새로운 기능을 추가하고 시범적으로 운영하기 위함입니다. 이 vendor prefix(벤더 프리픽스)는 핵이 아닙니다. 이는 나중에 공식속성이 나오면 지원하지 않을 가능성이 많기 때문에, 밴더 프리픽스를 먼저 선언하고 뒤에 공식 속성을 선언하는 것이 좋습니다. 출처: http://demun.tistory.com/1986

Web/WEB기본 2012.04.03

Kindle Fire 한국에서 사용하기

아마존의 킨들 파이어는 USA만 사용가능하게 차단이 되어 있습니다. 아마존에서 위치 ZONE 체크 방법 아마존 계정의 우편주소 정보 + PC의 IP주소(미국 IP만 패스) Movie & TV 컨텐츠 PC에서 볼때, PC의 IP주소 체크 GAME 구매 PC에서 구매할때, PC의 IP주소 체크 Kindle Fire 에서는 Movie, TV서비스는 미주IP프록시 찾지 못함. ㅠ.ㅠ. Game은 PC에서 구매한 게임을 국내 IP로 다운로드 가능합니다.

Web/eBook 2012.03.09

IE6 투명PNG 이미지 문제 해결하기(javascript)

IE 5.5 & 6에서 투명PNG 이미지 파일을 제대로 지원하지 않는다. 그래서 투명한 부분의 이미지가 회색조의 흐릿한 느낌을 가진게 된다. 이 부분을 보정할 수있는 jquery1.3 + pngFix.js를 이용하면, 투명 이미지의 문제가 어는 정도 보정이 된다. This plugin will fix the missing PNG-Transparency in Windows Internet Explorer 5.5 & 6 pngFix : http://jquery.andreaseberhard.de/pngFix/ 자료출처: http://jquery.andreaseberhard.de/pngFix/ http://cafe.naver.com/webstandardproject.cafe?iframe_url=/ArticleR..

Web/WEB기본 2012.02.22

Kindle용 mobi 파일로 변환하기 (epub -> mobi)

킨들에 이북을 넣기 위해서는 전용 format를 변환을 해줘야 합니다. 현재 Kindle Format 8을 공식으로 발표했으며, 현재(2012/02/15)까지는 Kindle Fire등 디바이스에서 지원되지는 않고 있으나, 곧 지원한다고 나와있다. 킨들 퍼블리싱 프로그램 == "KindleGen" http://www.amazon.com/kindlepublishing (포워딩)-> http://www.amazon.com/gp/feature.html?docId=1000234621 2012.2.15일 확인 결과 Kindle Format 8 안내페이지로 넘어간다. http://www.amazon.com/gp/feature.html?docId=1000729511 Kindle Format 8 Kindle Publis..

Web/eBook 2012.02.15

[CSS] CSS Media Query for Mofile

폭에 따른 View가 다르게 보여주는 방식를 쉽게 처리하는 방법은 바로 CSS Media Query를 이용하는 것이다. Max Width값 @media screen and (max-width: 600px) { .class { background: #ccc; } } link 방식 Min Width값 @media screen and (min-width: 900px) { .class { background: #666; } } Multiple Media Queries @media screen and (min-width: 600px) and (max-width: 900px) { .class { background: #333; } } Device Width @media screen and (max-device-wi..

Web/WEB기본 2012.02.14

[웹 폰트] safari, crome, firefox등에서 외부 폰트 구현하기

IE에서는 웹 폰트(EOT)방식으로 화면에 표현되지만, IE외의 웹 브라우저에선 True Type Font로 표현됩니다. IE외의 웹 브라우저 화면에서 폰트를 나타내고 싶으신 분들은 다음의 소스를 참고하시길 바랍니다. 우선, 폰트를 서버에 업로드시키세요. 새로 CSS파일을 만들어 연결시키거나 기존 CSS파일에 아래의 내용을 추가해주세요. /* True Type Font 정의하기 */ @font-face {font-family:우리폰트명; src:url(상대경로 또는 절대경로/우리폰트명.ttf) format('truetype')} ※ format을 truetype으로 설정하는 것이 중요합니다. 출처: http://www.woorigle.com/wooriboard/board.php?id=fnq&article..

Web/eBook 2012.02.03

[CSS3] CSS3 가로쓰기와 세로쓰기 : 일본 e-Book형태

Ebook이나, 일본어 세로 쓰기 표현들의 CSS3방식으로 표현가능합니다. /* CSS을 이용한 세로 쓰기 전체 적용하기 */ html { width: 100%; writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; -moz-writing-mode: vertical-rl; -o-writing-mode: vertical-rl; -ms-writing-mode: vertical-rl; -epub-writing-mode: vertical-rl; } 일본과 같은 국가는 세로쓰기 형식을 CSS3에 "writing-mode" 속성(property)을 이용해서 표현할 수 있습니다. 출처: http://www.w3.org/TR/2003/CR-css3-text-20..

Web/WEB기본 2012.01.10

[html5] html5에서 ruby(주석관련) 태그

W3C권고 'Ruby Annotation' (2001년 5월 공표)에 근거하여 루비 관련 요소가 추가 ruby태그는 XHTML1.1 규약부터 추가된 요소(Element)입니다. HTML5의 ruby Element SPEC문서: http://www.w3.org/TR/html5/text-level-semantics.html#the-ruby-element ruby관련 요소들 요소 요소 요소 ruby 사용예제 漢かん字じ 漢 (かん) 字 (じ) ... 漢 (かん) 字 (じ) .. 참고 사이트: ruby태그: http://siana.tistory.com/169 html5: http://siana.tistory.com/category/%EC%9B%B9%ED%91%9C%EC%A4%80/HTML5%20%ED%9B%91%..

Web/WEB기본 2012.01.10

c:\fakepath\ 파일 업로드시 생기는 문제

fakepath 관련 이슈 참고 출처: [IE8] 파일업로드 콘트롤 사용시 fakepath문제 IE8 사용시 파일콘트롤을 사용하면 실제 선택된 파일경로와 얻어낸 경로가 다를겁니다. fakepath 뭐시깽이 라고...... ie8 보안상 실 경로를 노출하지 않는다고 하네요. 뭐~ 이런 저런 편법이 난무하겠지만.. 개발자 입장에서는 여간 손이 많이 가는게 아니네요. 해결방법은 1.IE 도구 2.인터넷 옵션 -> 보안 -> 사용자 지정 수준 3.파일을 서버에 업로드할 때 로컬 디렉터리 경로 포함 을 [사용]으로 체크하세요. 프로그램적인 방법으로는 아래의 부분을 사용하시면 됩니다. (예시) 업로드 참조: The image uploader shows “fakepath” as path when using $("#f..

Web/Javascript 2011.06.02

jquery 를 이용한, onload 처리효과

일단 jQuery의 기본 셀렉트 개념을 이해하시고 시작하면 아래 예제를 이해하는데 많은 도움이 됩니다. 아래주소는 TAEYO.NET 의 태요님의 기본 셀렉트 강좌입니다. http://www.taeyo.pe.kr/Columns/View.aspx?SEQ=354&PSEQ=29&IDX=1 주소출처 : http://www.taeyo.pe.kr/ 아래는 jQuery를 이용한 onload 효과를 주는 방법입니다. jQuery를 이용해 아래와 같이 onload 효과를 줄수 있습니다. 기본적인 구조는 다음과 같습니다. $(document).ready(function(){ alert('테스트'); }); 위와 같은 코드는 아래와 같이 간소화가 가능합니다. $(function(){ alert(테스트); }); 위의 코드는 ..

Web/Javascript 2010.12.08

input 박스 enter 쳤을때, 처리하기 + 숫자만 입력 받기

에 엔터키를 이벤트 처리를 위해 onkeypress="return enterKey(event);" DHTML 이벤트를 추가한다. 해당 function에서 e.keyCode==13일때 함수 처리 출처: http://mystria.egloos.com/3998558 또다른 간단한 소스 태그에 숫자만 입력하기전화 번화 값 (949) 333-4444을 복붙하면, 9493334444로 입력이 됩니다. 참고: https://stackoverflow.com/questions/9626741/catch-input-earlier-than-onchange-and-preferably-only-numbersYou can limit the input to only numbers using a regular expression://..

Web/Javascript 2010.12.07

[jQuery] iframe 상위의 객체 선택하기(SELECT)

jQuery를 이용해서, 팝업창의 iframe에서, 상위(parent)의 객체값 가져오기 [일반적인 javascript] window.parent.document.getElementById('parentPrice').innerHTML [ jQuery를 사용할때 ] $('#parentPrice', window.parent.document).html(); 객체 id명을 셀렉트해서 해당 html값을 가져오네요. 참고: http://stackoverflow.com/questions/726816/how-to-write-this-in-jquery-window-parent-document-getelementbyidparentprice

Web/Javascript 2010.11.23

웹표준 폰트 관련 px를 em일때.

1.웹표준 폰트단위 pt, px, %, em (웹표준) 브라우저 기본글자 크기 : 16px = 1em 사이트 표준 폰트 크기 : 12px = 0.75em body { font-size:0.75em;} 관련글 웹표준과 폰트크기 : http://cafe.naver.com/ddteams/90 - [웹표준 코딩]CSS 폰트 단위를 알아봅시다 폰트 크기계산 - px 단위를 em 단위로 변환: http://pxtoem.com - em 단위 계산기: http://riddle.pl/emacalc pxtoem.com 사이트 >> http://pxtoem.com 출처: http://dreamworks.tistory.com/18?srchid=BR1http%3A%2F%2Fdreamworks.tistory.com%2F18

Web/WEB기본 2010.07.21

웹표준 테스트

웹표준 테스트의 대표 테스트인 Acid Test에 대하여 정리해본다. Acid Test란? 웹브라우저의 웹표준 지원 측정을 위한 예제 페이지이다. 1. Acid Test http://www.w3.org/Style/CSS/Test/CSS1/current/test5526c.htm CSS1 스팩을 중점적으로 테스트 할 수 있도록 제작. 1988년 초기개발. ( IE 5.5버전 이하 버전을 제외한 나머지 브라우저는에서는 렌더링 문제없음 ) 2. Acid2 Test http://acid2.acidtests.org/ HTML과 CSS2.1 스팩을 중점적으로 테스트 합니다. 스마일 그림과 Hello World! 나타내기.(코 부분을 마우스 커서를 가져가면 파란색으로 바뀌게 됩니다.) IE8이 Acid2 Testing..

Web/WEB기본 2010.07.12

자바스크립트 현재페이지 다시읽기(reload)

출처: http://byseob.textcube.com/207 현재 웹페이지를 다시 읽어오는 것이다. 일반적인 다시 읽기 window.location.reload(); 이렇게 하면 컴퓨터의 캐쉬에서 우선 파일을 찾아봅니다. 없으면 서버에서 받아옵니다. 적극적인 다시 읽기 window.location.reload(true); true 라는 파라미터를 입력하면, 무조건 서버에서 직접 파일을 가져 오게 됩니다. 캐쉬는 완전히 무시됩니다. 소극적인 다시 읽기 history.go(0); 이렇게 하면, 캐쉬에서 현재 페이지의 파일들을 항상 우선적으로 찾습니다. Location reload() Method Reload the current document;location.reload(); Syntaxlocation,..

Web/Javascript 2010.06.14

[펌] [표준코딩] clear:both 스타일 요소 알아보기

출처: http://soulgraphy.com/110 (이해 하기 쉽게 정리가 잘 되있네요.) (clear:both는 하위div에 float속성을 상속되는 현상을 방지) clear:both; 는 float 설정을 초기화 해주는 옵션입니다. 다음과 같이 나란히 두개의 영역이 나오게 태그에 float 속성을 주겠습니다. 1번 2번 1번 2번 float속성에 left를 기입해 연속적으로 나타나게 합니다. 그렇다면 두번째 에 clear:both 속성을 넣으면 어떻게 될까요? 속성을 부여받은 태그는 이전 태그의 float 속성을 말그대로 clear 해 줍니다. 그래서 위 예제에 적용하면 2번이 아래로 떨어지게 됩니다. 1번 2번 1번 2번붉은 색으로 표시된 clear 속성을 삽입결과 2번 div 가 아래로 떨어지..

Web/WEB기본 2009.12.16

YUI compressor (Javascript compressor)

YUI compressor javascript파일에서 사용되는 주석과, 리턴부분의 제거를 해주는 프로그램입니다. 쉽게 설명하자면, 브러우저단에서 필요 없는 주석과 리턴, 스페이스값 등을 제거해 주는 프로그램입니다. 최종 소스만 잘나오네요. 암호화나 그런부분은 아니고요. 단순한 압축이라고 생각하시면 됩니다. java -jar yuicompressor-x.y.z.jar myfile.js -o myfile-min.js --charset utf-8 Site: http://developer.yahoo.com/yui/compressor/ Download: http://yuilibrary.com/downloads/#yuicompressor

Web/WEB기본 2009.11.16

[CSS] IE6에서 레이어 고정시키기 핵. Fixed Layer Hack for IE6

CSS에는 position:fixed 라는 속성이 존재하고 이 속성이 부여된 엘리먼트는 화면에 고정되어 스크롤을 해도 움직이지 않고 항상 같은 자리에 머물게 됩니다. 흔히 "스크롤을 따라다니는 배너" 라고 표현하는 이런 UIO(User Interface Object) 따위를 코딩할 때 이 속성을 사용할 수 있는데 보통의 경우 IE6에서 지원하지 않기 때문에 별도의 자바스크립트를 추가하여 이 기능을 구현해 왔습니다. 하지만 이제는 더이상 그럴 필요가 없을것 같습니다. 자바스크립트는 전혀 사용하지 않고 CSS Hack을 사용하여 IE6 에서 position:fixed 상태의 레이어를 구현할 수 있는 팁을 발견하였습니다. 예제 미리보기 http://naradesign.net/open_content/refere..

Web/WEB기본 2009.06.09
1 ··· 3 4 5 6 7
반응형