Go3.co.kr MintState BBS > Tech > ETC

[CSS]Rainbow Text - css를 이용한 텍스트에 무지개 효과

MintState — Wed, 20 Mar 2019 11:01:21 +0900

[U][CSS]Rainbow Text - css를 이용한 텍스트에 무지개 효과[/U]

[CODE html]

Rainbow Text[/CODE]

SIMPLE CSS RAINBOW TEXT

MintState — Fri, 28 Dec 2018 11:16:22 +0900

[U]SIMPLE CSS RAINBOW TEXT[/U]

https://codepen.io/cb_rn/pen/OVXXmj

[CODE html]

SIMPLE CSS RAINBOW TEXT

Rainbow Text

[/CODE]

다음팟 인코더(DaumPotEncoder) 최종버전

MintState — Fri, 27 Oct 2017 14:38:25 +0900

[U]다음팟 인코더(DaumPotEncoder) 최종버전[/U]

DaumPotEncoder21453

유튜브(Youtube) 이미지 주소

MintState — Wed, 25 Oct 2017 13:47:14 +0900

모바일웹에서 레이어를 띄우면 본창 스크롤 안되게 하는 방법

MintState — Tue, 15 Nov 2016 17:47:34 +0900

[U]모바일웹에서 레이어를 띄우면 본창 스크롤 안되게 하는 방법[/U]

적용
[CODE html]$("body").css({overflow:'hidden'}).bind('touchmove', function(e){e.preventDefault()});[/CODE]

풀어줄 때
[CODE html]$("body").unbind('touchmove');[/CODE]

SD카드 USB 복구 포멧 프로그램 - SDFormatter

MintState — Mon, 14 Nov 2016 11:56:11 +0900

[U]SD카드 USB 복구 포멧 프로그램 - SDFormatter[/U]

[URL]https://www.sdcard.org/downloads/formatter_4/[/URL]

USB를 사용하다보면 뻑이나 에러로 인해서 문제가 발생하는 경우가 있다.
이때 윈도우의 로우포멧도 안되는 경우가 있다.

이럴때 유용한 포멧 프로그램이다.

SD Card Formatter 4.0 for SD/SDHC/SDXC

This software formats all SD memory cards, SDHC memory cards and SDXC memory cards. SD Card Formatter provides quick and easy access to the full capabilities of your SD, SDHC and SDXC memory cards.

The SD Card Formatter was created specifically for memory cards using the SD/SDHC/SDXC standards. It is strongly recommended to use the SD Card Formatter instead of formatting utilities provided with operating systems that format various types of storage media. Using generic formatting utilities may result in less than optimal performance for your memory cards.

The SD/SDHC/SDXC memory cards have a "Protected Area" on the card for the SD standard's security function. The SD The SD Card Formatter does not format the "Protected Area". Please use appropriate application software or SD-compatible device that provides SD security function to format the "Protected Area" in the memory card.

애드센스 실적 보고서에는 6가지 요소가 있다

MintState — Mon, 02 Jun 2014 18:41:48 +0900

[U]애드센스 실적 보고서에는 6가지 요소가 있다[/U]

구글 애드센스 서비스를 사용하는 블로거들이면 애드센스 홈페이지에서 '실적 보고서'를 자주 확인하실 것입니다. 그런데 거기에 알 수 없는 어려운 말들이 적혀 있죠... 페이지뷰? 클릭수? 이런 건 알겠지만, 페이지 CTR이니 CPC? 그리고 페이지 RPM?? 이것은 무슨 의미일까요??

구글 애드센스에서, 블로거의 실적을 확인하기 위한 '실적 보고서'에는 6가지 요소가 있습니다. 다음과 같습니다.

[MBOX1]1) 페이지뷰
2) 클릭수
3) 페이지 CTR
4) CPC
5) 페이지 RPM
6) 예상 수입[/MBOX1]

이제 각각 요소들이 무엇을 의미하는지 확인해봅시다.

[B]1) 페이지 뷰[/B]
페이지 뷰(Page View)란 블로그 방문자 혹은 사용자가 Google 광고가 게시된 페이지를 조회할 때마다 올라가는 수치입니다. 페이지에 등록되어 있는 구글 광고의 개수와는 상관없이 그 페이지를 한 번 조회할 때마다 하나의 페이지 뷰가 상승하게 됩니다. 한 명의 방문자가 여러 번 페이지를 돌아볼 수 있으므로 페이지 뷰가 방문자의 수를 의미하는 것은 아닙니다.

[B]2) 클릭 수[/B]
광고를 클릭한 횟수입니다. 블로그 방문자가 Google 광고를 클릭할 때마다 하나의 클릭 수가 증가하게 됩니다. 보통, Google 광고를 유심히 보는 경우가 많지 안흐므로, 광고 클릭은 매우 드문 동작입니다. 따라서, 그만큼 광고 클릭은 광고주에게 있어서 유의미한 것일 수 있으며, 광고 클릭을 쉽게 할 수 있는 방향으로 블로그 배치를 시도해야 합니다.

[B]3) 페이지 CTR[/B]
CTR은 Click-Through Rate의 약자입니다. 쉽게 말해서 '광고 클릭률'입니다. 구글 광고를 보는 수많은 사람들 중에서 어느 정도의 사람들이 광고를 클릭하였는지를 알려주는 수치로, 다음과 같은 공식으로 광고 클릭률을 구할 수 있습니다.

CTR = 클릭 수 / 광고 노출 수(페이지 뷰)

예를 들어, 100번의 광고 노출 중 단 한번의 광고 클릭이 있었다면, 페이지 CTR은 1%가 됩니다. 페이지 CTR이 높을 수록 블로그의 광고 효율 경쟁력은 더욱 세지는 것이므로, 페이지 뷰만큼 클릭을 유도하는 것이 중요한 관건이라고 생각할 수 있습니다.

[B]4) CPC[/B]
CPC는 Cost Per Click의 약자입니다. 쉽게 말해서 '클릭당 광고 단가'입니다. CPC는 CTR보다도 더 큰 경쟁력의 요소가 될 수 있습니다. 일반적으로 CTR이 높을 수록 블로그 배치가 잘 되 있으며, 광고 효과가 뛰어나다고 말할 수는 있지만, CPC가 큰 경우에는 직접적으로 돈을 버는 수익 자체가 높다고 말할 수 있기 때문입니다.

예를 들어, CPC가 300원이고(즉, 한번 클릭당 광고주는 광고업체에게 300원을 광고비용으로 지불해야 합니다.) 100번의 클릭이 있는 경우, 30000원의 광고비용이 지불되는 것입니다.

CPC는 광고의 중단 및 광고 비용에 대한 처리가 깔끔하다는 점이 장점이며, 다른 말로 PPC(Pay Per Click)이라고 불리기도 합니다.

[B]5) 페이지 RPM[/B]
RPM은 Revenue Per Mile의 약자입니다. 쉽게 말해서 '페이지 노출당 수익'입니다. 페이지 RPM은 일반적으로 1,000회의 페이지 노출 시 발생하는 수익을 일컫습니다. 페이지 RPM을 계산하는 공식은 다음과 같습니다.

페이지 RPM = (예상 수입/페이지 뷰) x 1,000 (정의식)
= (페이지 CTR x CPC) x 1000

RPM은 결국 결과를 기준으로 하거나, 이미 구해진 CTR과 CPC를 통해 계산하는 것이므로 이 값 자체가 새로운 의미를 가지지는 않습니다. 다만, 어려운 계산을 모두 생략하고도 거의 최종적인 예상수입을 유추해내는 데 큰 도움이 되는 지표입니다. (이미 RPM을 알고 있다고 생각하면 클릭수라던지 CPC, CTR등의 개념을 전혀 모르더라도, 오로지 페이지 뷰만 알고 있다면 바로 예상 수입을 계산해낼 수 있습니다.)

식이 두 개라서 당황하시고 왜 두값이 동일한지? 를 의문을 가지시는 분들이 많을 거 같은데요. 간단하게 생각해서, RPM 값 자체를 계산하려면 두 번째 식을 사용하여야 하고, RPM을 이용해서 예상 수입을 추측해낼 때 첫 번째 식을 사용하는 것입니다.

[B]6) 예상 수입[/B]
페이지 RPM에서 이미 예상수입을 계산하는 방법에 대해서 알려드렸습니다. 예상 수입을 구하는 방법은 다음과 같습니다.

예상 수입 = (페이지 RTM x 페이지 뷰) / 1,000
= (페이지 뷰 x 페이지 CTR x CPC)

예를 들어, 1000번의 페이지 뷰가 있었고, CPC는 30원, CTR은 1퍼센트였다고 하면, 1000 x 30 x 1/100 = 300 원의 수익을 얻는 것입니다.

[B]* 결론[/B]
솔직히 말해서, 모든 수치가 높으면 높을 수록 좋습니다, 다만, CPC의 경우 여러분이 직접 계산할 수 없으며, 매 시간 변경될 것입니다. (애드센스에서 판단하는 블로그 및 광고 업체 사이트의 가치가 매번 변동하기 떄문이죠...) CPC가 낮은 상황일 떄는 최대한 CTR을 끌어 올리는 것이 중요합니다. CTR을 끌어올리는 것은 자연스러운 관점에서 보면 페이지 뷰를 늘려야만 하는 것이죠. 그리고 페이지 뷰를 늘리려면 꾸준한 블로그 관리와 태그 사용이 필수라는 것을 명심하시길 바랍니다.

출처 : http://thinkpro.tistory.com/82

MP3 태그가 깨질 경우 UTF 로 변환하기

MintState — Tue, 22 Apr 2014 09:44:59 +0900

[U]MP3 태그가 깨질 경우 UTF 로 변환하기[/U]

사용하는 플레이어에 따라 MP3 태그가 깨져 있는 경우가 있다.
이때 [B]Mp3tag[/B]를 사용하면 쉽게 UTF 캐릭터셋으로 수정이 가능하다.

일반적으로 요즘에는 UTF-16을 많이 지원하므로 UTF-16으로 만들어 사용하면 되다.

이 프로그램은 무료이며 [URL]http://www.mp3tag.de/en/[/URL] 에서 다운로드가 가능하다.

설정에서 태크 -> Mpeg -> 쓰기 ID3v2.3 UTF-16으로 지정하면 된다.

sens_mail 리턴메일 대처법

MintState — Wed, 05 Mar 2014 15:31:57 +0900

[U]sens_mail 리턴메일 대처법[/U]

연결 및 DNS관련 에러 인 경우

연결관련 리턴 메시지
451 4.4.2 Bad connection
441 4.4.1 No answer from host
512 5.1.2 Bad destination system address
Connect error : (도메인) Connection refused:connect

DNS관련 메시지
550 Sender domain must resolve
501 5.1.8 Sender domain must exist.(URL)
501 Denied domain name
451 4.4.0 DNS resolving name
441 4.4.1 No answer from host

해결방법
1. 송수신측 메일서버에 연결이 가능한지 확인합니다.
2. 송수신측 도메인이 존재하는지 확인합니다.
3. 도메인이 만료되었는지 확인합니다.
4. 송신측에서 수신측, 수신측에서 송신측으로 도메인을 찾을 수 있는지 확인합니다.

스팸 관련 에러 인 경우

스팸관련 메시지
550 Access from ip address(수신측ip) blocked. Visit(URL)
553 Blocked for spam
550.7.1 Access denied(수신자아이피)
451 4.3.0 Message held for human verification before permitting delivery.
554 5.1.0 Sender Denied
Your IP(아이피) is filtered and this connection will be closed.
554 delivery error: dd This user doesn’t have a yahoo.co.kr account (아이디@yahoo.co.kr)

해결방법
1, 송신측의 아이피가 Black list(수신거부목록)에 등록되어 있는 경우입니다. 수신측에게 White list(수신허용목록)로의 변경을 요청해야 합니다.
2. 수신측에 발신자메일 인증후 메일이 수신가능한 기능이 있는지 확인합니다.
3. 발신 메일의 제목, 내용이 수신측의 스팸규칙을 위반하는지 확인합니다.
사용자계정 및 메일박스 관련 에러 인 경우

사용자계정 관련 메시지
550 5.1.1 User unknown
550 Invalid recipient(메일주소)
550 5.1.1 Suspended user
550 5.1.1 RUSR(아이피):no such user(메일주소):rcpt

메일박스관련 메시지
452 4.4.5 Insufficient disk space
550 Requested action not taken
50 RCPT ERROR. Mailbox doesn’t exit.
552 5.2.2 RFULL(아이피) Mailbox is full(아이피):rcpt
550 5.3.2 Rejected by mailbox host.

해결방법
1. 수신자의 사용자 계정이 존재하는지 확인합니다.
2. 메일발송시 수신자 메일주소에 오타가 있는지 확인합니다.
3. 수신측 메일사용용량이 초과하지 않았는지 확인합니다.
4. 수신측 메일 박스가 존재하는지 경로를 확인합니다.

기타 에러

사용자계정 관련 메시지
553 5.0.0 Your message may contain the (바이러스명)
550 5.7.1 Unable yo relay for (수신자메일주소)
451 Relay Server Not Ready.
550 5.7.1 Relaying denied. IP name lookup failed (IP)

해결방법
1. 송신측 메시지 또는 PC에 바이러스가 감염되었는지 확인합니다.
2. 송신측 메일서버가 릴레이 기능이 사용가능한지 확인합니다.
3. 수신측 메일서버에서 릴레이된 메시지를 허용하는지 확인합니다.

CSS Text Button Design

MintState — Tue, 15 Oct 2013 11:48:20 +0900

[U]CSS Text Button Design[/U]

서핑하던중 이쁜 버튼을 발견 했습니다.
나라디지인에서 공개 중인데 멋지네요

[URL]http://naradesign.net/wp/2010/01/15/1141/[/URL]
[ATTACH]797[/ATTACH]

[URL]http://naradesign.net/wp/2008/10/31/203/[/URL]
[ATTACH]799[/ATTACH]

이 밖에 더 많은 예제들이 [URL=http://naradesign.net/ouif/]OUIF[/URL] | [URL=http://naradesign.net/xeui/]XEUI[/URL] 페이지에 링크되어 있습니다. 라고 되어 있네요

CSS3 Image Styles

MintState — Mon, 06 May 2013 10:52:02 +0900

[U]CSS3 Image Styles[/U]

css3를 이용한 이미지 스타일
http://webdesignerwall.com/

[URL]http://webdesignerwall.com/demo/css3-image-styles/[/URL]
[URL]http://webdesignerwall.com/demo/css3-image-styles-part-2/[/URL]

[ATTACH]783[/ATTACH]

SQLite 를 관리 할 수 있는 툴

MintState — Wed, 13 Feb 2013 14:20:27 +0900

[U]SQL LITE 를 관리 할 수 있는 툴[/U]

안드로드에서는 기본적으로 SQLite DB를 쓰고 있습니다.

윈도우나 리눅스에서 SQLite DB를 관리 할 수 있는 툴을 소개 합니다.

* SQLiteStudio - [URL]http://sqlitestudio.pl/[/URL]
* SQLite Database Browser - [URL]http://sourceforge.net/projects/sqlitebrowser/[/URL]

특수문자표

MintState — Wed, 21 Dec 2011 15:08:17 +0900

[U]특수문자표[/U]

"[B]ㄱ[/B]" 누르고 한자키
　！＇，．／：；？＾＿｀｜￣、。·‥…¨〃―∥＼∼´～ˇ˘˝˚˙¸˛¡¿ː

"[B]ㄴ[/B]"누르고 한자키
＂（）［］｛｝‘’“”〔〕〈〉《》「」『』【】

"[B]ㄷ[/B]"누르고 한자키
＋－＜＝＞±×÷≠≤≥∞∴♂♀∠⊥⌒∂∇≡≒≪≫√∽∝

"[B]ㄹ[/B]"누르고 한자키
＄％￦Ｆ′″℃Å￠￡￥¤℉‰€㎕㎖㎗ℓ㎘㏄㎣㎤㎥㎦㎛㎟㎠㎡㎢㏊㎍㏈㎧㎨㎰㎶Ω㎮㎯㏆

"[B]ㅁ[/B]"누르고 한자키
＃＆＊＠§※☆★○●◎◇◆□■△▲▽▼→←↑↓↔〓◁◀▷＃▷▶♤♠♡♥♧♣⊙◈▣◐◑▒▤▥▨▧▦▩♨☏☎☜☞¶†‡↕↗↙↖↘♭♩♪♬㉿㈜№㏇™㏂㏘℡®ªº

"[B]ㅂ[/B]"누르고 한자키─│┌┐┘└├┬┤┴┼━┃┏┓┛┗┣┳┫┻╋┠┯┨┷┿┝┰┥┸╂┒┑┚┙┖┕┎┍┞┟┡┢┦┧┩┪┭┮┱┲┵┶┹┺┽┾╀╁╃╄╅╆╇╈╉╊╊

"[B]ㅅ[/B]"누르고 한자키
㉠㉡㉢㉣㉤㉥㉦㉧㉨㉩㉪㉫㉬㉭㉮㉯㉰㉱㉲㉳㉴㉵㉶㉷㉸㉹㉺㉻

"[B]ㅇ[/B]"누르고 한자키
ⓐⓑⓒⓓⓔⓕⓖⓗⓘⓙⓚⓛⓜⓝⓞⓟⓠⓡⓢⓣⓤⓥⓦⓧⓨⓩ①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮

"[B]ㅈ[/B]"누르고 한자키
ⅰⅱⅲⅳⅴⅵⅶⅷⅸⅹⅠⅡⅢⅣⅤⅥⅦⅧⅨⅩ

"[B]ㅊ[/B]"누르고 한자키

½⅓⅔¼¾⅛⅜⅝⅞¹²³⁴ⁿ₁₂₃

"[B]ㅋ[/B]"누르고 한자키
ㄱㄲㄳㄴㄵㄶㄷㄸㄹㄺㄻㄼㄽㄾㄿㅀㅁㅂㅃㅄㅅㅆㅇㅈㅉㅊㅋㅌㅍㅎㅏㅐㅑㅒㅓㅔㅕㅖㅗㅘㅙㅚㅛㅜㅝㅞㅟㅠㅡㅢㅣ

"[B]ㅌ[/B]"누르고 한자키
ㅥㅦㅧㅨㅩㅪㅫㅬㅭㅮㅯㅰㅱㅲㅳㅴㅵㅶㅷㅸㅹㅺㅻㅼㅽㅾㅿㆀㆁㆂㆃㆄㆅㆆㆇㆈㆉㆊㆋㆌㆍㆎ

"[B]ㅍ[/B]"누르고 한자키
ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺａｂｃｄｅｆｇｈｉｊｋｌｍｎｏｐｑｒｓｔｕｖｗｘｙｚ

"[B]ㅎ[/B]"누르고 한자키
ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβγδεζηθικλμνξοπρστυφχψω

"[B]ㄲ[/B]"누르고 한자키
ÆÐĦĲĿŁØŒÞŦŊæđðħıĳĸŀłøœßþŧŋŉ

"[B]ㄸ[/B]"누르고 한자키
ぁあぃいぅうぇえぉおかがきぎくぐけげこごさざしじすずせぜそぞただちぢっつづてでとどなにぬねのはばぱひびぴふぶぷへべぺほぼぽまみむめもゃやゅゆょよらりるれろゎわゐゑをん

"[B]ㅃ[/B]"누르고 한자키
ァアィイゥウェエォオカガキギクグケゲコゴサザシジスズセゼソゾタダチヂッツヅテデトドナニヌネノハバパヒビピフブプヘベペホボポマミムメモャヤュユョヨラリルレロヮワヰヱヲンヴヵヶ

"[B]ㅆ[/B]"누르고 한자키
АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдеёжзийклмнопрстуфхцчшщъыьэюя

* "ㄱ"에서 첫번쨰 특수문자는 아무것도 보이지 않는 "　" 빈공간 입니다.
* 실행에 charmap를 입력하면 문자표가 뜹니다.

Mime Types

MintState — Mon, 19 Sep 2011 12:29:20 +0900

[U]Mime Types[/U]

ai : application/postscript
aif : audio/x-aiff
aifc : audio/x-aiff
aiff : audio/x-aiff
asc : text/plain
atom : application/atom+xml
au : audio/basic
avi : video/x-msvideo
bcpio : application/x-bcpio
bin : application/octet-stream
bmp : image/bmp
cdf : application/x-netcdf
cgm : image/cgm
class : application/octet-stream
cpio : application/x-cpio
cpt : application/mac-compactpro
csh : application/x-csh
css : text/css
dcr : application/x-director
dif : video/x-dv
dir : application/x-director
djv : image/vnd.djvu
djvu : image/vnd.djvu
dll : application/octet-stream
dmg : application/octet-stream
dms : application/octet-stream
doc : application/msword
dtd : application/xml-dtd
dv : video/x-dv
dvi : application/x-dvi
dxr : application/x-director
eps : application/postscript
etx : text/x-setext
exe : application/octet-stream
ez : application/andrew-inset
gif : image/gif
gram : application/srgs
grxml : application/srgs+xml
gtar : application/x-gtar
hdf : application/x-hdf
hqx : application/mac-binhex40
htm : text/html
html : text/html
ice : x-conference/x-cooltalk
ico : image/x-icon
ics : text/calendar
ief : image/ief
ifb : text/calendar
iges : model/iges
igs : model/iges
jnlp : application/x-java-jnlp-file
jp2 : image/jp2
jpe : image/jpeg
jpeg : image/jpeg
jpg : image/jpeg
js : application/x-javascript
kar : audio/midi
latex : application/x-latex
lha : application/octet-stream
lzh : application/octet-stream
m3u : audio/x-mpegurl
m4a : audio/mp4a-latm
m4b : audio/mp4a-latm
m4p : audio/mp4a-latm
m4u : video/vnd.mpegurl
m4v : video/x-m4v
mac : image/x-macpaint
man : application/x-troff-man
mathml : application/mathml+xml
me : application/x-troff-me
mesh : model/mesh
mid : audio/midi
midi : audio/midi
mif : application/vnd.mif
mov : video/quicktime
movie : video/x-sgi-movie
mp2 : audio/mpeg
mp3 : audio/mpeg
mp4 : video/mp4
mpe : video/mpeg
mpeg : video/mpeg
mpg : video/mpeg
mpga : audio/mpeg
ms : application/x-troff-ms
msh : model/mesh
mxu : video/vnd.mpegurl
nc : application/x-netcdf
oda : application/oda
ogg : application/ogg
pbm : image/x-portable-bitmap
pct : image/pict
pdb : chemical/x-pdb
pdf : application/pdf
pgm : image/x-portable-graymap
pgn : application/x-chess-pgn
pic : image/pict
pict : image/pict
png : image/png
pnm : image/x-portable-anymap
pnt : image/x-macpaint
pntg : image/x-macpaint
ppm : image/x-portable-pixmap
ppt : application/vnd.ms-powerpoint
ps : application/postscript
qt : video/quicktime
qti : image/x-quicktime
qtif : image/x-quicktime
ra : audio/x-pn-realaudio
ram : audio/x-pn-realaudio
ras : image/x-cmu-raster
rdf : application/rdf+xml
rgb : image/x-rgb
rm : application/vnd.rn-realmedia
roff : application/x-troff
rtf : text/rtf
rtx : text/richtext
sgm : text/sgml
sgml : text/sgml
sh : application/x-sh
shar : application/x-shar
silo : model/mesh
sit : application/x-stuffit
skd : application/x-koan
skm : application/x-koan
skp : application/x-koan
skt : application/x-koan
smi : application/smil
smil : application/smil
snd : audio/basic
so : application/octet-stream
spl : application/x-futuresplash
src : application/x-wais-source
sv4cpio : application/x-sv4cpio
sv4crc : application/x-sv4crc
svg : image/svg+xml
swf : application/x-shockwave-flash
t : application/x-troff
tar : application/x-tar
tcl : application/x-tcl
tex : application/x-tex
texi : application/x-texinfo
texinfo : application/x-texinfo
tif : image/tiff
tiff : image/tiff
tr : application/x-troff
tsv : text/tab-separated-values
txt : text/plain
ustar : application/x-ustar
vcd : application/x-cdlink
vrml : model/vrml
vxml : application/voicexml+xml
wav : audio/x-wav
wbmp : image/vnd.wap.wbmp
wbmxl : application/vnd.wap.wbxml
wml : text/vnd.wap.wml
wmlc : application/vnd.wap.wmlc
wmls : text/vnd.wap.wmlscript
wmlsc : application/vnd.wap.wmlscriptc
wrl : model/vrml
xbm : image/x-xbitmap
xht : application/xhtml+xml
xhtml : application/xhtml+xml
xls : application/vnd.ms-excel
xml : application/xml
xpm : image/x-xpixmap
xsl : application/xml
xslt : application/xslt+xml
xul : application/vnd.mozilla.xul+xml
xwd : image/x-xwindowdump
xyz : chemical/x-xyz
zip : application/zip

footer가 항상 브라우저 하단에 위치하는 높이 100% 레이아웃

MintState — Tue, 30 Aug 2011 17:38:56 +0900

[U]footer가 항상 브라우저 하단에 위치하는 높이 100% 레이아웃[/U]

웹사이트 및 사이트를 만든 회사의 정보를 제공하는 footer의 위치는 대부분 맨 아래쪽에 위치합니다.
사이트별 차이라면, 컨텐츠가 끝나는 부분에 위치하느냐 아니면 브라우저의 길이에 상관없이 항상 브라우저 하단에 위치하느냐 일 것입니다.

한게임재팬에서 제작하고 있는 A프로젝트의 경우, div 레이아웃이면서 footer는 항상 브라우저 하단에 위치하도록 결정되었습니다.
또한 header와 footer는 width 100% 이면서 백그라운드 색상이 있고, 컨텐츠 영역은 width 값이 고정되어 있습니다.

지금부터 브라우저 길이에 상관없이 footer를 항상 브라우저 하단에 위치시키는 방법에 대해 알아보도록 하겠습니다.
[ATTACH]730[/ATTACH]

높이를 100%로 한다는 것의 % 의 기준은 상위 엘리먼트의 높이 값입니다.
그러므로 레이아웃 div 박스의 높이가 100%가 되려면, 상위 엘리먼트인 body 태그와 body의 상위 엘리먼트인 html 태그 역시 높이가 100%로 지정되어야 합니다.

[CODE html]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

contents

[/CODE]

위 소스를 도식적으로 나타내면 다음과 같습니다.(그림 상의 색상은 표현을 위한 것으로 CSS 소스와는 관련없음)
[ATTACH]731[/ATTACH]

content-box에는 컨텐츠 길이에 따라 height 값이 조절되도록 [min-height:100%] 속성을 부여합니다. 단, IE에서는 min-height 속성이 구현되지 않으나 height가 min-height 역할을 하므로 IE용 핵을 사용하여 height:100% 속성을 부여합니다.

header와 footer 은 width가 100% 이어야 하므로 content-box 안에 포함되지 않아야 하나 content-box에 height를 100%로 적용하였으므로, 브라우저의 높이는

[COLOR=blue]content-box 높이 100% + header 높이 100px + footer 높이 50px[/COLOR]

를 더한 값이 되므로 브라우저 높이 100%에 150px 이 더해져 원치 않는 스크롤이 생기게 됩니다.
따라서, content-box 에는 [margin:-100px 0 -50px 0] 를, content 에는 [padding:100px 0 50px 0] 를, header에는 [position: relative; z-index: 1;] 값을 부여하여, header 는 content 위에 나타나고, 실제 컨텐츠는 header 아래쪽에서 시작되도록 합니다.
그리고, content 박스는 아래쪽에 50px 의 패딩값을 가지므로, 길이가 길어져 스크롤이 생기더라도 footer가 컨텐츠 내용을 덮는 경우는 없을 것입니다.
위 소스는 IE5.0 이상 7.0 이하 및 Firefox, opera 최신 버전에서 잘 동작합니다.

참고사이트 : [URL=http://www.mozilla.or.kr/ko/docs/web-developer/standard/]실전 웹 표준 가이드 (2005)[/URL]

출처 : http://html.nhndesign.com/?mid=blog&category=91&document_srl=634

9가지 QR Code Data Type

MintState — Tue, 12 Apr 2011 12:20:58 +0900

[U]9가지 QR Code Data Type[/U]

Bar Code 보다 진화된 QR Code의 9가지 데이타 패턴을 소개 합니다.
머 인식 프로그램에 따라 틀리겠지만 대표적인 몇가지는 이제 표준으로 자리 잡있으니....

[B]1. Contact information[/B]
QR codes can contain contact information so someone can easily scan a QR code, view your contact details, and add you on their phone. You can input your name, phone number, e-mail, address, website, memo, and more. I've commonly seen these used on business cards, for instance. You give someone a business card, they see a QR code on the back, scan it with their phone, and easily add your contact info to their phone

[B]2. Calendar event[/B]
If you have an event you want to promote, you can create a QR code containing info for that event. QR codes containing event info can contain event title, start and end date/time, time zone, location, and description. This could work well on an event flyer or possibly even on a website promoting.

[B]3. E-mail address[/B]
Nice and simply, eh? A QR code can contain your e-mail address so someone can scan the code, see your e-mail, and then open an e-mail on their phones. If your call to action is mostly to have someone e-mail you, this would be great.

[B]4. Phone number[/B]
Maybe e-mail isn't immediate enough and you want someone to call. Link them up to a phone number.

[B]5. Geo location[/B]
If you have an event you want to promote, you might want to stick a QR code linking someone to a Google Maps location. This will allow someone to scan your QR code and get directions so they don't have to manually type in an address. Although some may prefer to type it in, it doesn't hurt to give them another option.

[B]6. SMS[/B]
QR codes can populate a text message with a number and message. You can have your QR code send you a text saying, "Tell me more about XYZ," for instance. This is great when paired with text message marketing. Using [URL=http://www.duffled.com/]Duffled[/URL] (not an affiliate), for $35/month, you can have a do-it-yourself text messaging platform to try out text message marketing

[B]7. Text[/B]
You can also just have a sentence or a paragraph of text. This could be fun for having some type of QR code based game where you can leave hints in QR codes.

[B]8. Wifi network[/B]
Do you hate telling someone a long WEP wireless key that's a pain to type out on a mobile phone? Set it up so someone can scan a QR code and automatically configure wifi on their phones.

[B]9. URL[/B]
Don't think little of this 3-letter data type. This is where the possibilities become endless. You can use a link that takes someone to your Facebook fan page or Twitter profile. You can also link someone to a YouTube video. Or maybe you want someone to pay for something via PayPal

Did I mention all of these services have mobile-friendly versions of their website? That is, if you link someone to your Twitter page they'll be redirected to a version that's built specifically for their smartphone? Don't forget to make sure the link goes to a website that's optimized for mobile devices.

If you want to learn about different ways to use QR codes, check out one of our most popular blog posts: [URL=http://notixtech.com/blog/blog/27-ways-use-qr-codes]27 Ways to Use QR Codes[/URL]. Also make sure you're following our recommended [URL=http://notixtech.com/blog/7-qr-code-best-practices]best practices[/URL].

You can use our [URL=http://qrcode.notixtech.com/]QR code generator[/URL] to generate QR codes for any of the above data types.

출처 : http://notixtech.com/blog/9-qr-code-data-types

PS. 간단한 연락처 예제입니다.
[COLOR=blue]* VCARD FORMAT[/COLOR]
[CODE]BEGIN:VCARD
VERSION:3.0
N:Lname;Fname
FN:Fname Lname
ORG:Company Name
TITLE:Position
TEL;WORK:1234567890
TEL;CELL:1234567890
EMAIL:email@example.com
URL:http://example.com
END:VCARD[/CODE]

[COLOR=blue]* MECARD FORMAT[/COLOR]
[CODE]MECARD:
N:Fname Lname;
TEL:1234567890;
EMAIL:email@example.com;
URL:http://example.com;
NOTE:This is a test note;[/CODE]

웹표준 CSS margin/padding 비교

MintState — Tue, 05 Apr 2011 16:21:02 +0900

[U]웹표준 CSS margin/padding 비교[/U]

[ATTACH]629[/ATTACH]

이미지를 참조하세요

출처 : http://blog.naver.com/tjs025/90106463408

Mbps,Kbps,KB/s,cps 속도 단위 차이점 비교

MintState — Tue, 18 May 2010 15:53:53 +0900

[U]Mbps,Kbps,KB/s,cps 속도 단위 차이점 비교[/U]

출처 : http://philsama.com/312

먼저, 알아두세요.
중요한 것은 바이트와 비트의 차이~~~
1 Byte(바이트) = 8 bit(비트) 이다.
1 Mb = 1024 Kb
1 Charactor = 1 Byte
1 Kb = 1024 Byte

아래는 속도를 나타내는 단위의 설명입니다.
1. Mbps = Mega Bit Per Second (초당 1메가 비트를 전송)
2. Kbps = Kilo Bit Per Second (초당 1킬로 비트를 전송)
3. MB/s = Mega Byte Per Second (초당 1메가 바이트를 전송)
4. KB/s = Kilo Byte Per Second (초당 1킬로 바이트를 전송)
5. bps = Bit Per Second (초당 1비트를 전송)
6. cps = Charactor Per Second (초당 1캐릭터(1바이트)를 전송)

처음보는 사람은 어려울 수 있다.
간단한 예를 들어 쉽게 설명해 보겠다. 이래도 모르면 할수 없다. ㅡ.ㅡㆀ

우리집의 인터넷 속도가 10메가 라고 한다.
그렇다면 속도가 어느정도 나와야 정상인가 ???

보통 인터넷서비스 업체들이 말하는 10메가 라는 의미는...
10Mbps (초당 1메가 비트를 전송) 를 말한다. (위의 속도단위설명의 1번)
하지만 우리가 흔히 컴퓨터에서 쓰는 용량의 단위는 비트가 아니라 바이트이다.

그러므로, 현재 10메가 속도의 인터넷을 사용한다고 가정하면,
[COLOR=blue]10 Mega Bit (나누기) 8 = 1.25 Mega Byte[/COLOR] 가 된다는 말이다.
즉, 이론적으로 1초에 1.25 Mega Byte 를 다운로드 받을수 있다는 의미이다.

Flash 업로더 제작

MintState — Tue, 16 Feb 2010 10:57:41 +0900

[U]Flash 업로더 제작[/U]

출처 : http://www.lovelgw.com/Blog/119

HTML만을 이용해서 멀티 업로드를 이용하기에는 문제가 있고 Ajax를 이용해서 업로드를 구현한다는것은 보안상 차단된 방법이기때문에 Flash 를 이용해서 만드는 방법이다.
우선 플래시에서 버튼을 하나 만든다.

[ATTACH]539[/ATTACH]

버튼의 인스턴스 명은 btn 으로 설정하고 저장한다.
btn인스턴스로 클래스 안에서 버튼을 컨트롤 할 수 있다.

[CODE as3]package {
import flash.display.MovieClip; // 무비클립에 포함된 클래스이기때문에
import flash.events.*; // 이벤트 제어
import flash.net.*; // 네트웍관련 (URLRequest, URLVariables)
import flash.external.ExternalInterface; // 외부 호출을 위해

// 클래스 명은 파일이름과 동일 해야 하며
// 문서 클래스에 클래시 이름을 넣으면 불러들여진다.
public class Uploader extends MovieClip { // 무비클립을 상속받는다.
// 여러 파일 선택을 위한 FileReferenceList 맴버 변수
private var m_FileReferenceList:FileReferenceList;

// 생성자
public function Uploader():void { // 생성자
this.m_FileReferenceList = new FileReferenceList(); // 파일 레퍼런스 맴버 변수에 FileReferenceList 객체 생성
this.m_FileReferenceList.addEventListener(Event.SELECT, selectHandler); // 이벤트 핸들러 (선택되었을때 - selectHandler 함수 호출)
this.m_FileReferenceList.addEventListener(Event.CANCEL, cancelHandler); // 이벤트 핸들러 (취소되었을때 - cancelHandler 함수 호출)
btn.addEventListener(MouseEvent.CLICK, onClick); // 프래임 안에 버튼이 눌러졌을때 onClick 함수 실행
// btn은 프레임에서 넣었던 버튼의 인스턴스임
}

// 버튼눌렸을때의 함수 수행
// AS3 Flash Player 9이상부터 플래시의 호출 없이 외부에서 FileReferenceList 의 Browser 함수를 호출 할수 없다.
public function onClick(e:MouseEvent) {
Browser();
}
// 취소 되었을때의 이벤트 핸들러
// 이벤트를 잡아서 외부 Javascript 인 BrowserCancle 를 호출함
public function cancelHandler(event:Event) {
trace('취소됨');
ExternalInterface.call('BrowserCancle', null);
}

// 파일 선택창 열기
public function Browser() {
// FileFilter 객체를 생성하여 FileReferenceList의 browser함수에 전달을 한다.
// 선택할 파일들을 제공하여 파일 브라우저에서 원하는 확장자만 선택 할 수 있도록 한다.

var imagesFilter:FileFilter = new FileFilter("Images (jpg, jpeg, gif, png)", "*.jpg;*.jpeg;*.gif;*.png");
this.m_FileReferenceList.browse([imagesFilter]);
}
// 선택이 완료 되었을때의 함수
// 실제적인 업로드가 수행되는 함수
private function selectHandler(event:Event) {

var nLength = this.m_FileReferenceList.fileList.length; // 파일 길이를 가져온다.
var strUrl = 'http://testserver/testupload.php'; 업로드 를 받아줄 수 있는 URL
var req:URLRequest; // URL Request객체 변수
var variable:URLVariables; // URL Variable 객체 변수
var fr:FileReference; // 파일 제어를 위한 File Reference함수 (FileReference의 upload함수 이용하기위해)
trace('전체 보낼 파일 수 : ' + nLength);
var i:uint;
var strFileName:String = '';

// 선택된 파일을 외부 Javascript를 호출하여 외부에 알려준다.
// 웹 브라우저 상에 선택된 파일을 보여주기 위해서
for (i = 0; i < nLength; i++) {
// 파일이름을 가져온다.
// 이때는 FileReference 객체에 선택된 파일을 인자로 넣어주고 name 속성을 참조하면 된다.
strFileName = FileReference(this.m_FileReferenceList.fileList[i]).name;
ExternalInterface.call('FileSelect', strFileName); // 외부 Javascript 호출 인자로 파일이름을 넘겨준다.
}

// 실제적인 파일 업로드
for (i = 0; i < nLength; i++) {
fr = new FileReference(m_FileReferenceList.fileList[i]); // FileReference 객체에 선택된 파일을 인자로 넘겨준다.
req = new URLRequest(strUrl); // URL 호출을 위해 URL을 넣어준다.
variable = new URLVariables(); // POST, multipart-form-data 형식으로 데이터를 전송하기 위해새 객체 생성
variable.FileIdx = i; // 파일 순서를 FileIdx 변수로 셋팅
req.data = variable; // URL Request 객체의 data 변수에 URLVariable 객체인스턴스를 대입시켜준다.
req.method = URLRequestMethod.POST; // 메소드를 설정해준다.

// 업로드 파일의 제어는 PHP에서 $_FILES[file]를 이용하면된다.
fr.upload(req, 'file', false); // 실제 업로드를 진행시킨다. upload(URLRequest, '변수명', 테스트업로드)
fr.addEventListener(Event.COMPLETE, uploadHandler); // 이벤트 핸들러를 설정한다. (완료시 uploadHandler 호출)
fr.addEventListener(IOErrorEvent.IO_ERROR, uploadError); // 이벤트 핸들러 설정한다. (I/O 오류시 uploadError 호출)
fr.addEventListener(ProgressEvent.PROGRESS, progressHandler); // 이벤트 핸들러를 설정한다. (진행상황마다 progressHandler 호출)
}
}
// 진행상황을 표시하기 위한 함수
public function progressHandler(event:ProgressEvent):void {
var file:FileReference = FileReference(event.target); // 파일 객체를를 받아 들이기 위해 FileReference에 event.target을 인자로 넣는다.)
trace(' 진행 : ' +file.name + ' 읽어들임 : ' + event.bytesLoaded + ' 전체 : ' + event.bytesTotal);
// 파일이름은 file.name
// 진행Byte는 event.bytesLoaded
// 전체 Byte는 event.byteTotal
// 외부에 진행상황을 표시하기 위해 Javascript 의 FileUpload 를 호출 하고 인자로 이름,진행양,전체량을 넣어준다.
ExternalInterface.call('FileUpload', file.name, event.bytesLoaded, event.bytesTotal);
}
// 업로드 오류시
public function uploadError(event:Event):void {
var file:FileReference = FileReference(event.target);
trace('업로드 에라 : ' + file.name);
// FileUploadError 를 호출하고 인자로 파일이름을 넘겨준다.
ExternalInterface.call('FileUploadError',file.name);
}
// 업로드 완료시
public function uploadHandler(event:Event):void {
var file:FileReference = FileReference(event.target);
trace('업로드 오케이 : ' + file.name);
// FileUploadOk 를 호출하고 인자로 파일이름을 넘겨준다.
ExternalInterface.call('FileUploadOk', file.name);
}
}
}[/CODE]

플래시를 파일을 제작한 후에 업로드를 수행하면 업로드를 실제로 수행할 PHP파일에 POST (multipart/form-data) 형식으로 파일을 전송한다.
그에 따른 PHP파일은 직접 제작을 하여야 하며 업로드 후 성공 실패 에 대한 처리 Javascript 호출에 따른 사용자 UI등은 직접 제작해야 한다.
여기서 보여주는 내용은 플래시로 업로드 하기 위한 부분을 보여주는 부분이다.~

백그라운드이미지를 부드럽게 바꿔주는 방법

MintState — Mon, 28 Dec 2009 23:32:50 +0900

[U]백그라운드이미지를 부드럽게 바꿔주는 방법[/U]

백그라운드이미지를 부드럽게 바꿔주는 방법입니다.
http://www.thinkgeek.com 에 적용되어 있는 것입니다.
css를 사용하여 png의 이미지를 중첩하여 보여 줍니다.

모질라에서도 작동을 하나 부드럽게 바꿔지지는 않습니다.
익스플로러는 잘되네요.
첨부파일을 확인하세요.

[ATTACH]527[/ATTACH]
[ATTACH]528[/ATTACH]
[ATTACH]529[/ATTACH]