웹사이트 파비콘(favicon) 제작

본문 바로가기

웹 디자인

웹사이트 파비콘(favicon) 제작

0 2014-02-15

본문

파비콘은 즐겨찾기(favorites)와 아이콘(icon)의 합성어로, 주소창 도메인 앞에 표시되는 아이콘이다.

이 파비콘은 사이트를 대표하는 아이콘으로 사이트에 대한 이미지와 신뢰를 줄 수 있다.

1. 포토샵으로 파비콘 사이즈 16x16 이미지 제작

파비콘 제작시에는 배경이 투명한 png파일로 제작하는것이 좋다.

2. 파비콘 변환

CONVERTICO 에서 손쉽게 무료 변환이 가능하다.

http://convertico.com

3. 사이트 상단 <head></head> 사이에 소스 삽입

※ 캐쉬로 인해 파비콘 적용이 늦어 질 수 있으니 적용이 잘 안된다면 브라우저 캐쉬를 지워보는것이 좋다.

댓글목록

등록된 댓글이 없습니다.

HTML <pre> 태그 - 입력 그대로 화면에 표시

HTML문서에서는 아무리 많은 공백(space)를 넣더라도 출력창에선 하나의 공백만 표시됩니다. 하지만 <pre>태그를 사용할 경우 공백(space), 탭(tab), 엔터(enter) 등을 입력하면 입력한 내용 그대로 표시할 수 있습니다. 보통 특이한 형식의 텍스트나 컴퓨터 코드등을 곧바로 표현할때 사용 합니다. <pre>태그를 사용하면 스크린리더 사용시 해당 내용을 건너 뛰어버려 사용자에게 불편을 줄 수 있으니 웹접근성을 고려하여 사용하도록 해야 합니다. HTML <pre>html 코드를 입력해보아요.태그는 공백과 줄바꿈에 관한 태그를 사용하지 않아도 즉시 표현해 줍니다.스 페 이 스</pre> 출력 html 코드를 입력해보아요. 태그는 공백과 줄바꿈에 관한 태그를 사용하지 않아도 즉시 표현해 줍니다. 스 페 이 스

HTML <blockquote> 태그 - 인용문정의

<blockquote> 태그는 다른 웹문서를 인용할 경우 사용하는 태그 입니다.<blockquote>로 작성한 텍스트는 다른 텍스트보다 안으로 들여써지게되며 cite 속성을 이용해 인용 사이트의 주소를 표시할 수 있습니다. HTML<p>p태그로 작성한 문구 입니다.</p><blockquote cite="https://www.dailyest.co.kr/">blockquote로 작성한 텍스트 입니다.</blockquote> 출력 p태그로 작성한 문구 입니다. blockquote로 작성한 텍스트 입니다.

HTML <hr> 태그 - 수평줄 삽입

<hr>태그는 문서내에 단락을 끊어주는 역할 혹은 가로선을 표현하는 디자인 요소로 사용 됩니다.대부분은 단락을 끊어주는 분위기 전환용으로 <hr>을 사용하며 css를 이용해 <hr>의 기본 디자인을 제거 후 사용 하는 경우가 많습니다.HTML<p>동해물과 백두산이 마르고 닳도록<br/>하느님이 보우하사 우리나라 만세<br/>무궁화 삼천리 화려 강산<br/>대한 사람 대한으로 길이 보전하세</p> <hr><p>남산 위에 저 소나무 철갑을 두른 듯<br/>바람 서리 불변함은 우리 기상일세<br/>무궁화 삼천리 화려 강산<br/>대한 사람 대한으로 길이 보전하세</p>출력동해물과 백두산이 마르고 닳도록하느님이 보우하사 우리나라 만세무궁화 삼천리 화려 강산대한 사람 대한으로 길이 보전하세 남산 위에 저 소나무 철갑을 두른 듯바람 서리 불변함은 우리 기상일세무궁화 삼천리 화려 강산대한 사람 대한으로 길이 보전하세

HTML <br> 태그 - 텍스트 줄바꿈

html 문서에서는 엔터를 입력하여 줄을 바꿔준다해도 출력시 한줄로 표현됩니다. 대신 html에서는 줄을 바꿔주는 태그 <br>을 입력하여 줄을 바꿀 수 있습니다.HTML안녕하세요.<br>안녕하세요.<br><br>안녕하세요.출력안녕하세요.안녕하세요.안녕하세요.<br> 태그는 실무에서 <br>, <br/>, <br /> 이렇게 세가지로 사용되는데 사실 어떤 <br> 태그를 쓰더라도 html5 문서에서는 무리없이 해석한다. 하지만 굳이 각 표현의 특징 나누자면 <br>은 html5의 규격에 가깝고 <br />은 xhtml의 규격에 가깝다는 정도...필자는 호환성과 가독성을 위해 <br />을 사용하고 있지만 선택은 여러분의 자유입니다.

HTML <p> 태그 - 문단 정의

<p> 태그는 문단을 만들때 쓰는 태그로 <p>와 </p>사이에 삽입되는 텍스트는 하나의 덩어리(문단)를 구성하게 됩니다.종종 <p> 태그를 사용하지 않고 줄바꿈 태그인 <br/>로 문단의 효과를 낸 코드를 종종 볼 수 있는데 이는 잘못된 방법이며 브라우저가 제대로 인식할 수 있도록 <p>태그를 익히는것이 좋습니다.HTML<p>첫번째 문단 입니다.</p><p>두번째 문단 입니다.</p> 출력첫번째 문단 입니다.두번째 문단 입니다.

HTML 특수문자 코드 도감(엔티티코드)

HTML 문서에서 꺾쇠 괄호나 따옴표등을 태그로 인식하지 않고 그대로 화면에 표시하고 싶을때 사용하는 특수문자 코드이다.많은 특수문자 코드가 있지만 중요한 몇개를 제외하면 사용할 일이 없다. 자주 사용하는 특수문자 코드   && << >> ©© ™™ ↑↑ ↓↓ ←← →→ ×× ÷÷ (( )) "" ´´ ·· || 그외 특수문자 코드 공백  –– −− °° ΔΔ αα ÀÀ àà ÇÇ €€ —— ±± ºº ΛΛ ββ ÁÁ áá çç ¢¢ …… √√ ªª ΘΘ γγ ÂÂ ââ ÐÐ ££ §§ ∞∞ ¹¹ ΞΞ δδ ÃÃ ãã ðð ¥¥ ¶¶ ∝&prop; ²² ΠΠ εε ÄÄ ää ÑÑ ¤¤ †&dagger; ×× ³³ ΣΣ ζζ ÅÅ åå ññ ƒ&fnof; ‡&Dagger; ÷÷ ¼¼ ΦΦ ηη ÆÆ ææ Š&Scaron; ©© ¡¡ ∼&sim; ½½ ΨΨ θθ ÈÈ èè š&scaron; ®® ¿¿ ≈≈ ¾¾ ΩΩ ιι ÉÉ éé ßß ™™ ‰&permil; ≅&cong; ∴&there4; ∇∇ κκ ÊÊ êê ÞÞ •• ·· ≡&equiv; ◊&loz; ∫∫ λλ ËË ëë þþ << ‘‘ ≤≤ ∩∩ ∑∑ μμ ÌÌ ìì ´´ >> ’’ ≥≥ ∪∪ ∏∏ νν ÍÍ íí ¨¨ ‹&lsaquo; ‚&sbquo; ≠≠ ∧&and; ⊆&sube; ξξ ÎÎ îî ¸¸ ›&rsaquo; ““ ′′ ∨&or; ⊇&supe; οο ÏÏ ïï ˆ&circ; «« ”” ″″ ∈∈ ⊂⊂ ππ ÒÒ òò ˜&tilde; »» „&bdquo; ℘&weierp; ∉∉ ⊄&nsub; ρρ ÓÓ óó ҐҐ "" ¬¬ ℑ&image; ∋&ni; ⊃⊃ ς&sigmaf; ÔÔ ôô ґґ && ¦¦ ℜ&real; ∠&ang; ⊕&oplus; σσ ÕÕ õõ ІІ µµ  ℵ&alefsym; ♠&spades; ⊗&otimes; ττ ÖÖ öö іі ‾&oline; ¯¯ ⋅⋅ ♣&clubs; ⌈&lceil; υυ ØØ øø ЇЇ ⁄&frasl; &ensp; ∗&lowast; ♦&diams; ⌉&rceil; φφ Œ&OElig; œ&oelig; її ∂∂ &emsp; ↵&crarr; ♥&hearts; ⌊&lfloor; χχ ÙÙ ùù ЄЄ ⊥&perp;   ↑↑ ⇑&uArr; ⌋&rfloor; ψψ ÚÚ úú єє ∅∅ ‌&zwnj; ↓↓ ⇓&dArr; ⟨&lang; ωω ÛÛ ûû ₪₪ ∀∀ ‍&zwj; ←← ⇐⇐ ⟩&rang; ϑ&thetasym; ÜÜ üü ☺☺ ∃∃ ‼‼ →→ ⇒⇒ ♀♀ ϒ&upsih; ÝÝ ýý ☻☻ ∄∄ №№ ↔↔ ⇔⇔ ♂♂ ϖϖ Ÿ&Yuml; ÿÿ ██

브라우저 캐시로 인해 이미지나 css가 안읽어 지는 경우

html이나 css를 수정했음에도 브라우저 캐시로 인해 로딩이 안되는 경우가 있다.시간이 지나면 자연히 로딩이 되겠지만 성격이 급한 우리 클라이언트들은 기다려 주지 않는다.이때 filemtime 함수를 사용해 파일변경날짜를 변수로 넣어주면 캐시 문제가 해결된다. 사용방법[파일명]?v=<?php echo filemtime('[파일경로]'); ?> 예제default.css?v=<?php echo filemtime('./css/default.css'); ?>img_logo.png?v=<?php echo filemtime('./img/img_logo.png'); ?>

웹사이트 파비콘(favicon) 제작

파비콘은 즐겨찾기(favorites)와 아이콘(icon)의 합성어로, 주소창 도메인 앞에 표시되는 아이콘이다.이 파비콘은 사이트를 대표하는 아이콘으로 사이트에 대한 이미지와 신뢰를 줄 수 있다. 1. 포토샵으로 파비콘 사이즈 16x16 이미지 제작파비콘 제작시에는 배경이 투명한 png파일로 제작하는것이 좋다. 2. 파비콘 변환CONVERTICO 에서 손쉽게 무료 변환이 가능하다. http://convertico.com 3. 사이트 상단 <head></head> 사이에 소스 삽입 <link rel="shortcut icon" href="/favicon.ico" type="image/x-ico" /> ※ 캐쉬로 인해 파비콘 적용이 늦어 질 수 있으니 적용이 잘 안된다면 브라우저 캐쉬를 지워보는것이 좋다.

자바스크립트 iframe 자동 높이 조절

iframe에서 내용의 높이에 따라 높이가 자동 조절되는 자바스크립트이다. 자바스크립트<script type="text/javascript">function resizeIframeToFitContent(iframe){ var height = 600; var theFrame = window.frames[iframe.id]; theFrame.frameElement.height = height; height = parseInt(theFrame.document.body.scrollHeight); theFrame.frameElement.height = height;}</script> HTML <iframe id="myiframe" name="myiframe" src="[아이프레임 경로]" width="100%" onload="resizeIframeToFitContent(this)" scrolling="no" frameborder="0"></iframe>

HTML <h1>~<h6> 태그 - 제목 표시

제목 크기와 중요도에 따라 <h1>~<h6> 까지 사용 가능하며 <h1>의 중요도가 가장 높고 <h6>으로 갈수록 중요도가 떨어진다. <h1>~<h6> 태그는 일반 텍스트보다 크고 진하게 표시된다. HTML<!doctype html><html lang="ko"> <head> <meta charset="UTF-8"> <title>h1~h6 태그</title> </head> <body> <h1>h1 태그 입니다.</h1> <h2>h2 태그 입니다.</h2> <h3>h3 태그 입니다.</h3> <h4>h4 태그 입니다.</h4> <h5>h5 태그 입니다.</h5> <h6>h6 태그 입니다.</h6> </body></html> 결과h1 태그 입니다. h2 태그 입니다. h3 태그 입니다. h4 태그 입니다. h5 태그 입니다. h6 태그 입니다.

접속자집계

오늘: 6
어제: 66
전체: 120072