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

웹 디자인 - HTML/CSS

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

  0   

본문

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'); ?>

 

댓글목록

등록된 댓글이 없습니다.

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

HTML 문서에서 꺾쇠 괄호나 따옴표등을 태그로 인식하지 않고 그대로 화면에 표시하고 싶을때 사용하는 특수문자 코드이다.많은 특수문자 코드가 있지만 중요한 몇개를 제외하면 사용할 일이 없다. 자주 사용하는 특수문자 코드  &nbsp; &&amp; <&lt; >&gt; ©&copy; ™&trade; ↑&uarr; ↓&darr; ←&larr; →&rarr; ×&times; ÷&divide; (&#40; )&#41; "&quot; ´&acute; ·&middot; |&#124; 그외 특수문자 코드 공백&nbsp; –&ndash; −&minus; °&deg; Δ&Delta; α&alpha; À&Agrave; à&agrave; Ç&Ccedil; €&euro; —&mdash; ±&plusmn; º&ordm; Λ&Lambda; β&beta; Á&Aacute; á&aacute; ç&ccedil; ¢&cent; …&hellip; √&radic; ª&ordf; Θ&Theta; γ&gamma; Â&Acirc; â&acirc; Ð&ETH; £&pound; §&sect; ∞&infin; ¹&sup1; Ξ&Xi; δ&delta; Ã&Atilde; ã&atilde; ð&eth; ¥&yen; ¶&para; ∝&prop; ²&sup2; Π&Pi; ε&epsilon; Ä&Auml; ä&auml; Ñ&Ntilde; ¤&curren; †&dagger; ×&times; ³&sup3; Σ&Sigma; ζ&zeta; Å&Aring; å&aring; ñ&ntilde; ƒ&fnof; ‡&Dagger; ÷&divide; ¼&frac14; Φ&Phi; η&eta; Æ&AElig; æ&aelig; Š&Scaron; ©&copy; ¡&iexcl; ∼&sim; ½&frac12; Ψ&Psi; θ&theta; È&Egrave; è&egrave; š&scaron; ®&reg; ¿&iquest; ≈&asymp; ¾&frac34; Ω&Omega; ι&iota; É&Eacute; é&eacute; ß&szlig; ™&trade; ‰&permil; ≅&cong; ∴&there4; ∇&nabla; κ&kappa; Ê&Ecirc; ê&ecirc; Þ&THORN; •&bull; ·&middot; ≡&equiv; ◊&loz; ∫&int; λ&lambda; Ë&Euml; ë&euml; þ&thorn; <&lt; ‘&lsquo; ≤&le; ∩&cap; ∑&sum; μ&mu; Ì&Igrave; ì&igrave; ´&acute; >&gt; ’&rsquo; ≥&ge; ∪&cup; ∏&prod; ν&nu; Í&Iacute; í&iacute; ¨&uml; ‹&lsaquo; ‚&sbquo; ≠&ne; ∧&and; ⊆&sube; ξ&xi; Î&Icirc; î&icirc; ¸&cedil; ›&rsaquo; “&ldquo; ′&prime; ∨&or; ⊇&supe; ο&omicron; Ï&Iuml; ï&iuml; ˆ&circ; «&laquo; ”&rdquo; ″&Prime; ∈&isin; ⊂&sub; π&pi; Ò&Ograve; ò&ograve; ˜&tilde; »&raquo; „&bdquo; ℘&weierp; ∉&notin; ⊄&nsub; ρ&rho; Ó&Oacute; ó&oacute; Ґ&#1168; "&quot; ¬&not; ℑ&image; ∋&ni; ⊃&sup; ς&sigmaf; Ô&Ocirc; ô&ocirc; ґ&#1169; &&amp; ¦&brvbar; ℜ&real; ∠&ang; ⊕&oplus; σ&sigma; Õ&Otilde; õ&otilde; І&#1030; µ&micro; ­&shy; ℵ&alefsym; ♠&spades; ⊗&otimes; τ&tau; Ö&Ouml; ö&ouml; і&#1110; ‾&oline; ¯&macr; ⋅&sdot; ♣&clubs; ⌈&lceil; υ&upsilon; Ø&Oslash; ø&oslash; Ї&#1031; ⁄&frasl;  &ensp; ∗&lowast; ♦&diams; ⌉&rceil; φ&phi; Œ&OElig; œ&oelig; ї&#1111; ∂&part;  &emsp; ↵&crarr; ♥&hearts; ⌊&lfloor; χ&chi; Ù&Ugrave; ù&ugrave; Є&#1028; ⊥&perp;  &thinsp; ↑&uarr; ⇑&uArr; ⌋&rfloor; ψ&psi; Ú&Uacute; ú&uacute; є&#1108; ∅&empty; ‌&zwnj; ↓&darr; ⇓&dArr; ⟨&lang; ω&omega; Û&Ucirc; û&ucirc; ₪&#8362; ∀&forall; ‍&zwj; ←&larr; ⇐&lArr; ⟩&rang; ϑ&thetasym; Ü&Uuml; ü&uuml; ☺&#9786; ∃&exist; ‼&#8252; →&rarr; ⇒&rArr; ♀&#9792; ϒ&upsih; Ý&Yacute; ý&yacute; ☻&#9787; ∄&#8708; №&#8470; ↔&harr; ⇔&hArr; ♂&#9794; ϖ&piv; Ÿ&Yuml; ÿ&yuml; █&#9608;

HTML 문서 기본 구조

앞으로 자주 쓰이게 될 html문서 기본구조를 알아봅시다.기본구조는 크게 <!doctype>, <html>, <head>, <body> 네 가지 태그가 있습니다. HTML<!doctype html><html lang="ko"> <head> <meta charset="UTF-8"> <title>HTML을 시작해 볼까요</title> </head> <body> <h1>천천히 따라해보세요</h1> <p>쉽게 배울 수 있는 HTML5 / CSS3<br/> 언젠간 우리도 고수가 될 수 있겠지요?</p> </body></html>    <!doctype>은 문서유형을 지정하는 선언문 과거 HTML4에서는 여러가지 문서 유형이 있었지만 HTML5에서는 단 한줄로 간단하게 선언 가능웹 브라우저는 이 doctype 선언을 확인 후 HTML5에 맞추어 문서를 해석한다.  <html> 태그는 웹 문서의 시작을 알리는 태그 html 문서가 시작된다는 뜻으로 lang 속성을 사용해 문서에서 사용할 언어를 지정할 수 있다. 한국어의 약자는 ko이며 lang="ko"와 같이 작성하면 된다.<html>과 </html> 사이에는 <head> 태그와 <body> 태그가 포함된다.  <head> 태그는 브라우저의 정보를 주는 태그 웹 브라우저가 알아야 할 정보는 <head>에 입력된다. <title>, <meta> 등이 있다.  <body> 태그는 실제 브라우저에 표시될 내용 <body>에 포함된 내용은 브라우저에 실제 표시되는 내용이며 위 예제는 실제 아래와 같이 출력된다. 천천히 따라해보세요 쉽게 배울 수 있는 HTML5 / CSS3 언젠간 우리도 고수가 될 수 있겠지요?


접속자집계

오늘
72
어제
132
전체
120095