소금인형 - SW개발자?

IE11의 호환성 변경: http://msdn.microsoft.com/ko-kr/library/ie/bg182625(v=vs.85).aspx 사용자 에이전트 문자열 변경 많은 레거시 웹 사이트와 관련해서 IE11의 가장 두드러진 업데이트 중 일부는 사용자 에이전트 문자열과 관련된 것입니다. Windows 8.1에서 IE11에 보고되는 문자열은 다음과 같습니다. [Javascript]Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko 사용자 에이전트 문자열의 특정 값은 브라우저를 실행하는 운영 체제, 브라우저를 실행하는 장치, 웹 사이트가 호환성 보기로 표시되는지 여부 등 다양한 요인에 따라 달라집니다. 자세한 내용은 사용자 에이전트 문자열 변경..

EPUB3.0.1 publications: http://www.idpf.org/epub/301/spec/epub-publications.html IDPF 관련 스팩: http://www.idpf.org/epub/301/spec/epub-publications.html#layout-property-flow paginated [출처 사이트]내용 출처: http://green-fld.jp/landinggear/?p=200-> (추천)해당포스트의 원문 출처: http://blog.imagedrive.jp/web/2013-10-01/epub301-spec-pre Reflow 책에서 사용하는 속성입니다.page01.xhtml에서 page02.xhtml로 넘어갈 때, 표현될 예상 이미지 입니다. 【paginated】..

EPUB3.0.1 스팩에서 oeb-page-head, oeb-page-foot속성 값이 폐지 예정(Deprecated) display: oeb-page-head; display: oeb-page-foot; 3.3.13 Display Property Values oeb-page-head and oeb-page-foot [DEPRECATED] EPUB 3.0 기존의 스팩 내용http://www.idpf.org/epub/30/spec/epub30-contentdocs.html#sec-css-oeb-head-foot

인터넷 주소인(URL:Uniform Resource Locator)의 규칙은 다음과 같습니다. W3C 규약 : http://www.w3.org/TR/url/ 기본적으로 URL 규약 he table below demonstrates how the getter condition for search results in different results depending on the exact original syntax of the URL:Input URLsearch valueExplanationhttp://example.com/empty stringNo component in input URL.http://example.com/??There is a component, but it is empty. The q..

캔버스 투명도 주기

http://www.cmsfactory.net/node/10186 나눔글꼴은 예쁘면서도 저작권에서 자유로운 무료 글꼴입니다. 나눔고딕, 나눔명조, 나눔손글씨로 구성되어 있고, 웹사이트용 글꼴로는 나눔고딕이 제일 인기 있습니다.나눔고딕을 웹사이트에 적용하면 상당히 읽기 좋고 보기 좋게 글자를 표현하는데, 본문에 고딕 계열의 글꼴을 사용한다는 게 조금 아쉬울 때가 있습니다. 문서를 작성할 때 본문은 보통 명조 계열의 글꼴을 사용하니까요.그래서 나눔명조를 웹에서 사용할 수 있게 WOFF와 EOT로 변환시켜 보았습니다. 나눔고딕과 마찬가지로 에러 없이 잘 변환됩니다. 변환한 글꼴을 첨부하였으니 필요하시면 다운로드 받으세요.나눔명조를 웹문서에 적용한 결과는 다음과 같습니다. 나눔명조 Regular보다는 나눔명조 ..

jQuery에서 .hide(), .show()은 display:noe으로 셋팅한다. 해당 셋팅을 visibility:hidden와 같은 설정하기 You could make your own plugins.jQuery.fn.visible = function() { return this.css('visibility', 'visible'); }; jQuery.fn.invisible = function() { return this.css('visibility', 'hidden'); }; jQuery.fn.visibilityToggle = function() { return this.css('visibility', function(i, visibility) { return (visibility == 'visible..

크롬에 회전을 했을 때, 나타나지 않는 경우가 있습니다. CSS3를 이용해서 적용해 보면 다음과 같이 처리하면, 보이게 됩니다. 본문예제친구의 이야기를 다 들었을 때 나에게는, 친구의 의도와 상관 없이, 거대한 암흑의 이미지가 떠올라 있었다. 다른 친구들은 그 친구의 이야기를 거의 듣지 않은 듯싶었다. 왜냐하면 토요일 오후였기 때문이다. 그러나 나에게는 친구의 이야기가 화창한 토요일 오후와 대비되어 더욱 강렬하게 다가왔었다. 무엇보다도 친구의 들뜨고 밝은 표정이 깊은 인상을 남겼다. CSS3 SCROLLhttp://techstream.org/Web-Design/CSS3-Scroll-Bar Demohttp://demo.techstream.org/CSS3-Scroll-Bar/index3.html jQuery..

[펌출처] http://asrada2001.tistory.com/173 Javascript의 객체, 속성 이름 (객체 전체 확인하기) javascript의 객체의 속성은 객체.속성이름 으로 접근이 가능하다. 그리고 또 하나 다른 표현이 있는데 바로 객체['속성이름'] 이 그것이다. var obj = new Object(); obj.id = 'first'; obj.name = 'wave'; obj.age = '20'; obj.sex = 'male'; alert(obj.id); alert(obj['id']); 이제 객체 안을 통째로 들여다 보는 방법을 알아보자 위에서 언급한 객체['속성이름']의 표현식을 이용하면 된다. var msg = ''; for(var temp in obj){ msg += temp +..

구글 검색어: free horizontal accordion menu 검색 사이트: jQuery Accordion Plugins and Tutorials 설명: http://www.designchemical.com/blog/index.php/jquery/jquery-simple-horizontal-accordion/DEMO : http://www.designchemical.com/lab/jquery/demo/jquery_simple_horizontal_accordion.htm 1. HTML Section 1 Header Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu acc..

http://www.idpf.org/epub/30/spec/epub30-publications.html#remote-resources http://www.idpf.org/epub/30/spec/epub30-changes.html#sec-new-changed-remot 3.10.1 Remote ResourcesThere are new restrictions on references [Publications30] to remote resources (i.e., Publication Resources not located in the OCF Container). The implications of this change are more fully described in Removal of Filesystem C..

글자 색상을 표시하는 -webkit-text-fill-color (Band Prefixed 문구가 포함된 CSS태그) initial:초기값 -webkit-text-fill-color: initial; Sytax : -webkit-text-fill-color: ; http://css-infos.net/property/-webkit-text-fill-color

글에 포인트를 줄때 사용하는 CSS로 border-left-width와 border-color와 background를 이용한 글씨 테코레이션입니다. HTML내용 Note that the initial containing block's size is affected by the presence of scrollbars on the viewport.

2014년 전자책 & 디지털 출판 사업 전망 10가지 행복한 크리스마스 보내셨나요? 연말이 되니 내년을 전망하는 기사들이 본격적으로 쏟아져 나오네요. 오늘은 그 가운데 디지털 북 월드에서 발표한 2014년 전자책 & 디지털 출판 전망을 소개할까 합니다. 1> 반스앤드노블이 문을 닫거나, 누크 사업부를 매각하고 비공개 회사가 될 것이다. 2> 아마존이 반스앤드노블의 전철을 밟고, 오프라인 매장을 열 것이다. 아마존 오프라인 매장은 킨들 등 아마존 제품의 쇼룸 역할을 하고, 온라인으로 주문한 상품을 수령하는 장소가 될 것이다. 3> 출판사들이 사업을 “버티컬라이즈(verticalize)” 하려는 노력을 할 것이다. 4> 삽화가 들어간 도서 시장이 심각한 도전에 직면할 것이다. 텍스트를 기반으로 한 책과 달리..

글 꼴의 종류와 크기를 결정했다면, 볼드/이텔릭과 같은 글꼴의 장식 및 자간, 줄간 들여쓰기와 같은 문단 편집기능에 대하여 살펴봅니다. 몇몇 기능은 브라우저에 따라, 적용/미적용 여부가 다르며, 적용되더라도 화면의 보여지는 모습이 다릅니다. 충분한 테스트 후 활용하도록 합니다. [ 글꼴의 굵기 지정 ]font-weight: normal (default value);글꼴 그룹의 어떤 굵기의 글꼴을 사용할 것인지를 설정합니다. 초기값은 normal(400)이며, 굵은 글꼴은 bold(700) 키워드를 사용합니다. 설정값은 하위 요소로 상속됩니다. 다음은 Verdana 글꼴의 굵기 속성입니다.* normal, bold, 100~900font-weight: normalfont-weight: boldfont-we..

배경 이미지 고정되게 처리하기body { background-image: url(bg.gif); background-attachment: fixed;background-repeat: no-repeat} 배경의 그림을 스크롤링의 설정 background-attachement 속성의 fixed 값을 통해서 처리한다. CSS background-attachment Propertyhttp://www.w3schools.com/cssref/pr_background-attachment.asp Definition and UsageThe background-attachment property sets whether a background image is fixed or scrolls with the rest of the..

jQuery cookiehttps://github.com/carhartl/jquery-cookie jQuery Cookie Plugin v1.4.0 Installation UsageCreate session cookie:$.cookie('the_cookie', 'the_value'); Create expiring cookie, 7 days from then:$.cookie('the_cookie', 'the_value', { expires: 7 }); Create expiring cookie, valid across entire site:$.cookie('the_cookie', 'the_value', { expires: 7, path: '/' }); Read cookie:$.cookie('the_cooki..

현재 정수형과 자연수 형의 값을 뽑아내는 정규식 숫자만 추출하는 정규식 (소수점 포함) 문자와 숫자가 포함된 형식에서 숫자만 추출하는 정규식 예제 입니다. > console.log( '-10.2em'.replace(/[^-\.0-9]/g,'') ); -10.2 자연수형의 정규식 (소수점 제거) 문자와 숫자가 포함된 형식에서 자연수(소수점 제거)만 추출하는 정규식 예제 입니다. > console.log( parseInt('-10.2em',10) ); -10 참고: 자바스크립트 정규식을 이용한 숫자, 한글 체크 : http://ji80903.tistory.com/306 자바스크립트 Number()와 parserInt(,) : http://hym77.kr/blog/?p=100 [추가: 소수점 자르기] 숫자의 ..

CSS Values and Units Module Level 3http://www.w3.org/TR/2013/CR-css3-values-20130730/#viewport-relative-lengths 2.5. Property value examplesBelow are some examples of properties with their corresponding value definition fieldsPropertyValue definition fieldExample value‘orphans’‘3’‘text-align’left | right | center | justify‘center’‘padding-top’ | ‘5%’‘outline-color’ | invert‘#fefefe’‘text-decorat..

기본 형식의 clss내용 바꾸기는 className으로 처리한다. javascript를 통해서, css의 class의 내용을 변경하는 방법입니다.document.getElementById('tab1').className = "ewu tabBtn tabOn"; javascript를 통해서, style.disply처리document.getElementById('table1').style.display = "block";document.getElementById('table2').style.display = "none"; CSS 클래스 addClass 처리하기출처: [자바스크립트] jquery 없이 DOM의 CSS 클래스 addClass, toggleClass, removeClass 구현하기 addClass ..

inherit 속성값 inherit은 영어단어 그대로 상속받는겁니다. 상위 객체의 값을 그대로 물려받아 적용하는 겁니다. 가령 HTML:홈으로 메뉴를 클릭하세요. 게시판으로 가기 CSS:a { color: blue; } div { color: orange; } div a { color: inherit; } 이렇게 한다면 [홈으로]링크는 당연히 파랑색으로 나올겁니다. 그리고 [메뉴를 클릭하세요.]라는 p태그는 주황색으로 나오겠죠. [게시판으로 가기]링크는 상위 객체인 div의 color을 물려받아서(inherit) 주황색으로 나오게됩니다. inherit은 그렇게 유용하게 느껴지진 않습니다-_- 다만, div의 색상을 따라가게되니까 코드중 한부분만 수정하면 inherit에 의해 값을 물려받게 됩니다. 물론,..

브라우저에서 자바스크립트를활성하는 방법이라는 사이트가 있습니다.각 브라우저별로 자바스크립트를 활성화 하는 설정이 나와 있는데, 괜찮네요. http://www.enable-javascript.com/ko/

이미지 높이 중앙 정렬align="absmiddle"를 CSS로 변경 방법 style="vertical-align:middle" 핵심 내용img { vertical-align: middle } Ever got stuck with the annoying problem of aligning an image next to some text? We all did. There were times when align="absmiddle" would solve this immediately, but how would you accomplish this with CSS? Ever got stuck with the annoying problem of aligning an image next to some text? We..

CSS3에서 사용되는 애니메이션 CSS 애니메이션을 만드려면 animation 속성과 이 속성의 하위 속성을 지정합니다. 애니메이션의 총 시간과 반복 여부등을 지정할 수 있습니다. 이 속성은 애니메이션의 중간상태를 기술하지 않는다는걸 명심하세요. 애니메이션의 중간 상태는 아래에서 다룰 @keyframes 규칙을 이용하여 기술합니다. animation 속성의 하위 속성은 다음과 같습니다. animation-delay 엘리먼트가 로드되고 나서 언제 애니메이션이 시작될지 지정합니다. animation-direction 애니메이션이 종료되고 다시 처음부터 시작할지 역방향으로 진행할지 지정합니다. animation-duration 한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정합니다. animation-ite..

글자의 정렬에 사용되는 CSS속성인 text-align text-align에 대한 속성 값들을 확인해 보자. text-aling: -webkit-auto; /* Android 모바일 브라우저의 기본값 */ text-aling: -webkit-center; text-aling: -webkit-left; text-aling: -webkit-right; text-aling: center; text-aling: end; text-aling: inherit; text-aling: initial; text-aling: justify; text-aling: left; text-aling: right; text-aling: start; /* PC 웹킷의 기본값 */ 간혹 글자가 깨지는 현상을 발견할 때가 있다. jus..

each() 집합 elements를 수정each(iterator)$('img').each(function(n){this.alt='ID가 '+this.id+'인 image['+n+']이다';});또 다른 예제var allAlts = new Array();$('img').each(function(){allAlts.push(this.alt);}); 단일 properties값 받기var altValue = s('#myImage')[0]; Attribute값 get, set attr(name) : name attribute의 value 가져오기attr(name, value) : name attribute에 value값 set하기attr(attributes)매개변수: attributes (Object) 확장 집합의..

현재 $(window).innerHeight()를 사용하면, 사이즈가 틀리게 나온다. 그건 bookmark등의 높이가 height값에 제외해서 그렇다고 한다. $(window).height(); // returns height of browser viewport $(document).height(); // returns height of HTML document 다음과 같이 height값은 document를 사용하면 된다. 참고: http://stackoverflow.com/questions/3791049/javascript-jquery-how-do-i-get-the-inner-window-height

canvas 태그를 재 초기화, for redrawing~!! 초기화 하는 방법 2가지 1. clearRect 함수 이용context.clearRect( x , y , w , h); 2. width값 재 입력canvas.width = canvas.width; 출처: How to clear the canvas for redrawing

javascript에서 사용되는 all, event.srcElement, sourceIndex 등은 오직 IE에서 지원되는 속성이다. MSDN all property 내용 [ document.all() 대처법 ] document.all(변수) 변수로 "id", "name", "객체 순서 번호"가 올 수 있다. 현재 "id"와 같은 경우는 다음과 같이 수정은 할 수 있다."name"과 "객체 순서 번호"는 찾을 수 가 없었다. Mozilla 한국 커뮤니티 • 글 보기 - document.all 문제 해결법document.all[objectID] -> document.getElementById("objectID")function getObject(objectId) { // checkW3C DOM, then ..

epub의 opf에 내용중에 는 필수 요소입니다. ( EPUB Publication 3.0참조) 해당 요소에 들어갈수 있는 언어 코드 값은 "ISO 639-2"를 사용해야 합니다.* 첨부로 Sigle에서 사용되는 언어 코드 값을 파일(C++)들 첨부 EPUB Publication 3.0 한글 내용 참고: EPUB언어 코드에 대한 스팩 http://www.idpf.org/epub/20/spec/OPF_2.0.1_draft.htm#Section2.2.12