소금인형 - SW개발자?

글자의 정렬에 사용되는 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..

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

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 ..

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

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..

한글의 양쪽 정렬에 유용.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; }

밴더별 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- ..

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 내용..

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

Link 요소link (inter-document relationship metadata) link요소는 다른 자원과 연결하기 위해 사용. http://www.w3.org/TR/html5/the-link-element.html#the-link-element ==> A link element must have rel attribute. 마크업 규칙- 메타데이터에 속함- head요소의 자식 요소, noscript요소 안에 쓸 수 없음. 스타일 시트 선언 예제 속성

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

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..

폭에 따른 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..

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..

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%..

출처: http://5dol.tistory.com/170 리눅스에서 eclipse처럼 파일 안에 있는 내용을 검색할라면 다음과 같이 해야한다. 예제) "5dolstory" 라는 글자가 포함된 파일을 /home/ 아래 하위 디렉토리 전체 검색해서 찾고 싶은 경우 grep -e 5dolstory /home/ -R 그냥 /home/에서만 찾고 싶은 경우 -R을 뺀다.

[출처] img map|작성자 양군

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

웹표준 테스트의 대표 테스트인 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..

출처: 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 가 아래로 떨어지..

JavaScript: Use a Web Proxy for Cross-Domain XMLHttpRequest Calls [ XMLHttpRequest Access ] [ ERROR: Other Doamin Direct XMLHttpRequset Access ] [ Used Proxy: Cross Domain Accesss ]

웹브라우저가 웹표준을 어느정도 준수했는지 테스트 하는 페이지입니다. firefox 3.5.5 점수 : 93 / 100 ie 8 점수 : 20 /100 테스트 페이지: http://acid3.acidtests.org/ 위키: http://ko.wikipedia.org/wiki/Acid3

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