소금인형 - SW개발자?

epub 3.0 (EPUB Publication 3.0) 출처 : http://www.idpf.org/epub/30/spec/epub30-publications.html#sec-metadata-elem 6.4.2 Metadate 요소 (The metadata Elelement) epub의 필수 사항은 아래의 것들로 각각 1개 이상이 있어야 합니다. "제목(

ThemeRoller for jQuery Mobilehttp://jquerymobile.com/themeroller/jQuery mobile를 사용하다 보면, 기본 Theme이 A~E까지 만 있다 보니. 부족함을 느낍니다. 해당 부분에 사용자가 Theme를 쉽게 만들 수 있게 하는 사이트 입니다.

출처 : http://greatkim91.tistory.com/109 현재 페이지의 스크립트에서 다른 서버로 Ajax 호출을 시도하는 것은 허용되지 않습니다. 이것을 cross domain JSON을 이용하여 해결할 수 있는데 다음 URL에서 cross domain JSON을 이용한 원격 호출 방법과 간단한 JavaScript 유틸리티를 제시합니다.http://www.xml.com/pub/a/2005/12/21/json-dynamic-script-tag.html 그럼 어떻게 JSON을 이용하여 다른 서버의 서비스를 호출할 수 있는지 살펴보겠습니다. 원리를 알면 쉽게 나에게 적합한 유틸리티를 만들수 있을 겁니다. 스크립트 태그 다음은 스크립트 태그입니다. 보통 아래와 같이 사용합니다. test.jsaler..

라디오 상자를 초기화 하는 것입니다.$("input[type=radio]",frm).removeAttr("checked");$('input[name=foo]').removeAttr('checked') 참고자료: http://www.electrictoolbox.com/check-uncheck-checkbox-jquery/

favicon.ico 파비콘 만들어 주는 사이트http://tools.dynamicdrive.com/favicon/자세한 설명까지 나와있다. Upload the generated file ("favicon.ico") to your site. Verify it's there by typing http://mysite.com/favicon.ico in the browser's location, where "mysite.com" is your site's address.Next, insert the below code in the HEAD section of your pages, at the very least, your site's main index page:That's it! Note that your ..

이미지 tag 처리 하는 javascriptfunction fitImageSize(obj, href, maxWidth, maxHeight) {var image = new Image(); image.onload = function(){ var width = image.width; var height = image.height; var scalex = maxWidth / width; var scaley = maxHeight / height; var scale = (scalex 1) scale = 1; obj.width = scale * width; obj.height = scale * height; obj.style.display = ..

현재 $(this)의 자식 객체 선택하기일 때에, div태그를 클릭 할 때,img 객체를 seletor하고 싶을 때, 방법 1)jQuery("img", this);방법 2)jQuery(this).find("img");방법 3)jQuery(this).children("img"); 가장 좋은 방법으로는 "방법 1)"이 맘에 든다. jQuery(자식객체, 부모객체) 방법 1 예제 > div을 클릭하면, img의 src값이 alert 창으로 뜬다. 참조: http://stackoverflow.com/questions/306583/this-selector-and-children

CSS의 selector는 jQuery에서 사용하면서, 요즘 가장 많이 사용되고 있는 seletor가 되었습니다. CSS의 selector는 여러개의 Element와 attritube와 class등을 이용해서 다양한 방법으로 선택가능합니다. 선택자(Selector) 선택자는 Type(element),Universal(*),class/id,attribute(속성),가상요소/가상클래스,선택자결합(하위,자식,인접) 등으로 구성된다. Pattern Meaning S5 C8 F3.6 O11 I9b I8 I7 I6 #id id로 지정된 요소 선택 O O O O O O O O .class class로 지정된 요소 선택 O O O O O O O O E E 요소를 선택 O O O O O O O O E:link 방문하지 ..

태그를 이용해서 , 좌측정렬 사용하기 로 tab 메뉴나 가로 리스트를 만들 경우 에 float: left; 값을 줍니다. 아래 캡쳐화면 처럼 말이죠. 의 float이 left인데, 에 border-bottom이 지정되어 있다. ㅠ.ㅠ 그런데 만약 background를 줘야하거나 위의 캡쳐처럼 border가 필요한 경우 이 함께 늘어나주지 않습니다. 제가 지금까지 마지막 에 float 속성을 clear 해줘서 둘러싸고 있는 이 마지막 를 감싸게 하는 방법으로 이 문제를 해결했었습니다. 이렇게 처리하면 html에는 쓸데없는 가 하나 추가되어야 하기 때문에 권장할 수 있는 방법은 아닙니다. 저 역시도 html 코드를 줄이기 위해 노력하면서 이런 의미없는 태그가 추가되는 것에 마음이 무척 불편했었답니다. cle..

그레디언트 Linear_gradient내용 출처의 HTML압축파일 출처: https://developer.mozilla.org/ko/docs/CSS/linear-gradient

.... 다음과 같이 spine에 viewport가 없는 toc.xhml문서가 있게 되면, ibooks에서 해당 책이 깨져 보이게 된다. 뷰포트가 없는 해당 페이지를 제거하는 것이 바람직하다.기본적으로 linear="no"를 해주어도 ibooks에서는 fixed layout에서는 해당 페이지가 빠지지 않음(reflow layout에서는 빠짐)

EPUB 유효성 체크시 다음과 같은 에러가 발생할때가 있다.ERROR: health22.epub: Length of the first filename in archive must be 8, but was 22 이유는 => mimetype 파일의 압축 순서 오류mimetype파일을 가장 먼저 압축(7zip)구 후에 나머지 파일들 압축하면 다음 에러는 사라지게 된다.

webkit 에서 animation 효과를 사용하면, "-webkit-animation:1s'는 속성이 들어간다. 해당 속성을 지워주지 않으면 다른 애니메이션 효과가 적용이 안될 수가 있다. 그래서 해당 Attribute값을 지워줘야 한다. $(객체).css('-webkit-animation','');//jquery을 사용한 CSS attribute 삭제 예제 $(here).css('animation-iteration-count','infinite'); $(here).css('animation-duration',speed+'s'); /* 애니메이션 반복 횟수 지정. */ $(here).css('-webkit-animation-iteration-count','infinite'); /* 애니메이션이 실행되는..

width:100% - 100px; 처리 방법은? margin-left: 50px; margin-right: 50% width: 100%; 참고: http://stackoverflow.com/questions/899107/how-can-i-do-width-100-100px-in-css 추가로 높이 레이아웃 처리 출처: http://sweetgirl-textcube.blogspot.kr/2010/01/height-100-%EB%86%92%EC%9D%B4%EC%9D%98-%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83%EC%9E%A1%EA%B8%B0.html height 100% 높이의 레이아웃잡기 오랜만에 Markup을 할 일이 있어 HTML과 CSS를 다루는데 Javascript로 구현..

HTML5 Cross Browser Plolyfills CSS3 Media Queries https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills css3-mediaqueries-js Respond by Scott Jehl A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more) mediatizr by Aurélien Delogu Responsive-oriented CSS3 media queries polyfill matchMedia by Scott Jehl, Paul Irish, Nicholas Zakas A standardi..

글자가 영역을 지나가면, (..)효과를 줄때 사용한다. Definition and Usage The text-overflow property specifies what should happen when text overflows the containing element. Default value: clip Inherited: no Version: CSS3 JavaScript syntax: object.style.textOverflow="ellipsis" Syntax text-overflow: clip|ellipsis|string; Value Description clip Clips the text ellipsis Render an ellipsis ("...") to represent clipped tex..

안녕하세요? 스포카에서 디자인 총괄을 맡고있는 최재형입니다. 오늘은 픽셀pixel과 포인트point에 대해 알아보겠습니다.Pixel픽셀은 디스플레이에서 가장 기본이 되는 단위입니다. 디스플레이는 수많은 픽셀들이 모여 구성됩니다. 하나의 픽셀은 일반적으로 R빨강, G초록, B파랑 세 가지의 서브 픽셀subpixel을 가지고 있습니다. 우리가 px이라고 부르는 단위는 디스플레이에서 서브픽셀이 모여 색상을 표현하는 최소 단위라 보시면 됩니다. 픽셀에 대한 자세한 이야기는 제 이전 글을 참고해 보시길 바랍니다.Point포인트point는 타이포그래피에서 사용하는 가장 작은 인쇄 단위로, 파이카pica를 잘게 나눈 것입니다. 즉, 포인트와 파이카 모두 글자의 크기를 측정하기 위한 단위입니다. 참고로 파이카는 18세..

한글의 양쪽 정렬에 유용.article{ margin:15px 0; font:/*@post-body-font-size=*/13px/*@*/ /*@post-body-font-family=*/NanumGothic, 나눔고딕,/*@*/; line-height:180%; color:/*@post-body-color=*/#444/*@*/; text-align:justify; text-justify:inter-cluster; }

http://www.bisg.org/what-we-do-12-152-epub-30-support-grid.phpepub3 reader 기능 비교표

밴더별 CSS 확장 접두사 브라우저 회사별 특성에 맞는 CSS 접두사가 존재한다. W3C : http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords Vendor-specific Properties: http://reference.sitepoint.com/css/vendorspecific Table 1. Vendor Extension Prefixes Prefix Organisation -ms- Microsoft mso- Microsoft Office -moz- Mozilla Foundation (Gecko-based browsers) -o- Opera Software -atsc- Advanced Television Standards Committee -wap- ..

방법 1 > display: table; 이나 display: table-call 입니다. (* 해당 div을 table안에 넣을 때, 이상하게 동작할 수 있음) 출처: http://crlog.com/213 display: table-call; 란? The element is displayed as a table cell 관련 속성 정보: http://www.w3schools.com/cssref/pr_class_display.asp 방법 2 > 그냥 table안에 td로 넣기 Vertical align inside div, vertical-align: middle not working 현재 사용하고 있는 div에 중앙 정렬을 넣고 싶지만, 해당 css가 div안에서 적용이 되지 않습니다. 기본적으로 pa..

ePub3에서 새롭게 설정되는 오른쪽에서 왼쪽으로 넘기는 옵션이 있다.기본적값이 rtl(right to left)입니다.page-progression-direction (페이지 진행 방향)http://idpf.org/epub/30/spec/epub30-publications.html#sec-spine-elem spine Element page-progression-direction [optional]The global direction in which the Publication content flows. Allowed values are ltr (left-to-right), rtl (right-to-left) and default. When the default value is specified, th..

img 태그와 글자의 위치를 맞추려면, 예전에는 img의 align속성의 값을 이용해서 align="absmiddle" 정렬을 했다. 요즘은 img태그에 align이 비표준이기에, 해당 처리를 CSS의 vertical-align속성을 이용해서 이미지 정렬를 주고 있다. 홈페이지 나모 웹에디터 Image Margin bottom. Test 2: div태그안에 Img중간 정렬 http://www.web-sheeps.com/rec/69-Image-vertical-align-with-CSS,-avoid-abs

윈도우 Vista부터 기본으로 들어가 있는 '맑은 고딕'을 CSS에서 적용하려면, 다음과 같이 사용하시면 됩니다. '맑은 고딕' 또는 영문으로 'Malgun Gothic' 이렇게 표시 인라인 스타일 방법 요소를 이용한 방법 body { font-family: "Malgun Gothic", "굴림", "Gulim", "Arial"; } 다음은 제가 사용하고 있는 블로그에서 사용하는 Font CSS 내용입니다. (여기서는 'Malgun Gothic', '맑은 고딕' 처럼 한글/영어로 2번 사용) font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, '돋움', sans-serif; -webkit-font-smoothing: antial..

실질적으로 이미지에 대한 원형을 만들려면, 해당 이미지의 사이즈를 알아야만 가능하다. 해당 방식에 포인트는 다음과 같다. [ CSS 내용 ] .circular { width: 300px; height: 300px; border-radius: 150px; -webkit-border-radius: 150px; -moz-border-radius: 150px; background: url(http://link-to-your/image.jpg) no-repeat; box-shadow: 0 0 8px rgba(0, 0, 0, .8); -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8); -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8); } [ HTML 내용..

로렘 입숨(lorem ipsum; 줄여서 립숨, lipsum)은 출판이나 그래픽 디자인 분야에서 폰트, 타이포그래피, 레이아웃 같은 그래픽 요소나 시각적 연출을 보여줄 때 사용하는 표준 채우기 텍스트이다. 최종 결과물에 들어가는 실제적인 문장 내용이 채워지기 전에 시각 디자인 프로젝트 모형의 채움 글로도 이용된다. 이런 용도로 사용할 때 로렘 입숨을 그리킹(greeking)이라고도 부른다.가장 일반적인 로렘 입숨 텍스트는 다음과 같다.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, qui..

아이북스 만들기-Fixed layout epub(1): Overview 1.ePub기초2.필요한 툴3.샘플파일 다운받기4.컨텐츠 작성5.ePub압축6.유효성 검사 그림책 만들기의 필수- Fixed layout epub에 대해서 소개하려고 합니다. 그동안 경험과 자료를 공유해 주신 많은 분들의 도움을 받았기에 제 경험도 도움이 되었으면 하는 마음입니다. 이제는 애플에서 퍼블리셔들에게 샘플파일도 제공하고 있고 인터넷 상에 꽤 많은 정보들이 올라와 있기는 하지만, 제가 처음 시작할 때에는 자세한 정보가 많지 않았습니다. 게다가 Mac으로 만들려다 보니 Fixed layout epub에 대한 한글 자료가 많지 않았습니다. 따라서 이 포스트는 Mac을 중심으로한 Fixed layout epub 의 기초적이고 전반..

onchange 이벤트에서 파일의 실제 경로값을 file_path로 전달 하시면 됩니다. 출처: http://blog.naver.com/PostView.nhn?blogId=ssuyastory&logNo=100151545145[출처] input type="file" 에서 fakepath 대신 실제 경로 알아내기|작성자 Gabriel

TUESDAY, MAY 29, 2012Learning About EPUB: Structure and ContentSure, you’ve been reading a lot about e-books in the news lately. But let’s take a moment to step back from the controversy and take a look at the technology behind these digital publications. There are various formats used to create e-books, but one of the most popular is the standards-based EPUB format. EPUB® (electronic publicatio..

자바스크립트에서는 저것을 하기 위해서 일반적으로 개발하면서는 alert() 을 많이 사용한다. 근데 콘솔창을 통해서 로그를 찍는 메소드가 있다는걸 알고 있는가? console 이라는 객체인데 익스플로어, 파이어폭스, 사파리, 크롬, 오페라에서 사용가능한 기능이다. [사용방법] console.log("로그 내용"); 이렇게 작성하면 console 창에 메시지가 찍힌다. ※ 각 브라우저별 콘솔창 활성화 방법 : http://blog.naver.com/loudon23/30088663513 주의! 한가지 알아 둘 점은 IE의 경우 개발자툴(콘솔창)이 활성화 안되어 있으면 아래와 같이 스크립트 오류가 뜬다. console.log() 에 들어가는 인자는 다음과 같은 형식도 된다 console.log("변수 a=",..