HTML (7)
  1. 2012.06.23[HTML] 메타 태그를 사용하여 사이트 검색 로봇 액세스 차단 방법
  2. 2012.05.08[JavaScript] 웹 브라우저의 즐겨찾기 추가 스크립트(1)
  3. 2012.03.13[CSS] 초기화(Reset) 코드
  4. 2011.11.15[HTML] HTML5 설명 및 기본 마크업
  5. 2010.12.16[HTML] 문자 세트 및 기호 간접 표현식
  6. 2010.12.16meta 태그를 이용한 Internet Explorer 랜더링 설정
  7. 2010.11.19[XHTML] h1~h6 값을 이용하여 제목 만들기
[HTML] 메타 태그를 사용하여 사이트 검색 로봇 액세스 차단 방법

메타 태그(Meta tag)를 사용하여 사이트 검색 로봇 액세스 차단 방법

페이지가 다른 사이트에 연결되어 있더라도 페이지의 콘텐츠가 Google 웹 색인에 열거되지 않도록 완전히 차단하려면 no index 메타 태그를 사용합니다. 그러면 Googlebot이 페이지를 가져오는 즉시 no index 메타 태그를 보게 되고 해당 페이지가 웹 색인에 표시되지 않습니다.

메타 태그(Meta tag) 코드

이 방법은 서버에 대한 루트 액세스 권한이 없을 때 페이지별로 사이트에 대한 액세스를 제어할 수 있어 유용합니다. 어떤 로봇도 사이트의 페이지에 대해 색인을 생성하지 못하게 하려면 페이지의 <head> 섹션에 다음 메타 태그를 추가합니다.

<meta name="robots" content="noindex">

Google 로봇을 제외한 다른 모든 로봇이 사이트의 페이지에 대해 색인을 생성하도록 허용하려면 다음 메타태그를 추가합니다.

<meta name="googlebot" content="noindex">

다른 페이지에 연결되어 있는 경우에도 페이지에 noindex 메타 태그가 있으면 Google은 검색결과에 해당 페이지를 표시하지 않습니다. 하지만 다른 검색엔진에서는 이 태그가 다르게 해석될 수도 있으며, 이 경우 해당 페이지에 대한 링크가 검색결과에 표시될 수 있습니다.

페이지를 크롤링해야 noindex 메타 태그가 있는지 알 수 있으므로 Googlebot이 크롤링하지 않은 경우 noindex 메타 태그를 확인하지 못해 올바르게 처리하지 못할 수도 있습니다. 페이지가 계속 검색결과에 표시된다면 태그를 추가한 이후 Google에서 사이트를 아직 크롤링하지 않았기 때문일 가능성이 큽니다. 또한 robots.txt 파일을 사용하여 해당 페이지를 차단할 경우에도 태그를 확인할 수 없습니다.

내용 출처/참고 자료 Google 웹마스터 도구: 도움말
0 Comment,  0  Trackback

본 게시물에 대한 질문은 댓글을 통하여 받습니다. 바른말, 고운 말을 사용하여 남겨주세요. :)

[JavaScript] 웹 브라우저의 즐겨찾기 추가 스크립트

현재 페이지 즐겨찾기 추가 기능

즐겨찾기 추가 기능은 JavaScript로 구현하여 웹 브라우저의 즐겨찾기 추가 기능을 활용합니다.

Internet Explorer, Firefox, Opera에서만 지원하며, 그 외의 웹 브라우저는 알림메시지를 보여줍니다.

현재 페이지 즐겨찾기 추가 구현 JavaScript

JavaScript 코드 안내
  • • 아래의 링크를 클릭하면 기능을 시험해보실 수 있습니다.

JavaScript 코드 적용 방법 및 다운로드

JavaScript 코드 삽입 화면
  • 스킨 페이지(Skin.html)의 <head> 와 </head> 사이에 아래의 코드가 적용되어야 합니다.

<head>
<script>
function addBookmark(){
//var title = "[Viewit] 통신, IT, 모바일, 스마트폰 앱스 블로그";
//var url = "http://viewit.kr";
var title = document.title; //현재 보고 있는 페이지의 Title
var url = location.href; //현재 보고 있는 페이지의 Url
if(window.sidebar && window.sidebar.addPanel){ // Firefox
window.sidebar.addPanel(title, url,"");
}
else if(window.opera && window.print){ // Opera
var elem = document.createElement('a');
elem.setAttribute('href',url);
elem.setAttribute('title',title);
elem.setAttribute('rel','sidebar');
elem.click();
}
else if(document.all){ // Internet Explorer
window.external.AddFavorite( url, title);
}
else{
alert("이용하시는 웹 브라우저는 기능이 지원되지 않습니다.\n\nCtrl+D 키를 누르시면 즐겨찾기에 추가하실 수 있습니다.");
return true;
}
}
</script>
</head>

JavaScript 코드 사용 방법
  • 활용할 때에 사용해야 할 코드입니다.

<a href="javascript:addBookmark();">이 페이지를 즐겨찾기에 추가하기</a>

JavaScript 코드 문서 다운로드

내용 출처/참고 자료 Lael's World (http://lael.be/469)
1 Comment,  0  Trackback

본 게시물에 대한 질문은 댓글을 통하여 받습니다. 바른말, 고운 말을 사용하여 남겨주세요. :)

[CSS] 초기화(Reset) 코드

CSS (종속형 시트, Cascading Style Sheet: 캐스케이딩 스타일 시트)

웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일 시트이며 문서 전체의 일관성을 유지할 수 있고, 세세한 스타일 지정의 필요를 줄어들게 하여 더 편리하게 코딩할 수 있습니다.

CSS 초기화(Reset) 코드

<style type="text/css">
@charset "utf-8";

/* base */
body{font:0.75em Gulim, "굴림", Dotum, "돋움", sans-serif;color:#333}
body, div, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, p, form, fieldset, input, table, tr, th, td{margin:0;padding:0}
h1, h2, h3, h4, h5, h6{font-weight:normal;font-size:100%}
ul, ol, li{list-style:none}
fieldset, img{border:none}

/* a-style */
a{color:#333333;text-decoration:none}
a:hover, a:active{color:#FF4500;text-decoration:underline}
</style>

CSS 코드 문서 다운로드

0 Comment,  0  Trackback

본 게시물에 대한 질문은 댓글을 통하여 받습니다. 바른말, 고운 말을 사용하여 남겨주세요. :)

[HTML] HTML5 설명 및 기본 마크업

HTML5 (Hypertext Markup Language; 하이퍼 텍스트 마크업 랭귀지)

HTML5 기본 설명
  • • HTML5는월드 와이드 웹(WWW; HTML 4.01, XHTML 1.0, DOM Level 2 HTML)에 대한 차기 버전의 마크업 언어입니다.
  • • 현재 자주 사용되는 Adobe Flash, Microsoft Silverlight, Sun Java FX와 같은 플러그인의 애플리케이션(Active X 등)을 대처하기 위함을 목적으로 하고있습니다.

HTML5 기본 마크업
  • • 구조적인 요소(div 대체, header 등) 및 멀티미디어 요소(플러그인 없이 멀티미디어 재생, audio 등)가 추가되었습니다.
  • • 일부 요소의 의미가 변경 및 문서 선언이 간소화 되었습니다.
  • • HTML5 기본 마크업 코드는 아래의 내용을 참조하시기 바랍니다.

<!DOCTYPE html>
<html lang="ko">
 <head>
  <meta charset="utf-8"/>
  <title>제목을 입력하세요.</title>
 </head>
<body>
 <header>header 값</header>
 <nav>nav 값</nav>
 <article>
  <section>
   section 값
  </section>
 </article>
 <aside>aside 값</aside>
 <footer>footer 값</footer>
 </body>
</html>

HTML 코드 문서 다운로드

0 Comment,  0  Trackback

본 게시물에 대한 질문은 댓글을 통하여 받습니다. 바른말, 고운 말을 사용하여 남겨주세요. :)

[HTML] 문자 세트 및 기호 간접 표현식

특수문자 코드

문 자 엔티티 번호 엔티티 이름 설 명
" &#34; &quot; 인용부호
' &#39; &apos; 아포스트로피
& &#38; &amp; 앰퍼샌드
< &#60; &lt; 보다 작음
> &#62; &gt; 보다 큼

HTML ISO-8859-1

ISO-8859-1는 대부분의 브라우저에 설정된 기본 문자입니다.

첫 번째 128 문자는 원래 아스키는 문자 (숫자 0-9, 대문자와 소문자 영어 알파벳과 일부 특수 문자)로 설정됩니다.

ISO-8859-1의 높은 부분 (160-255 코드)은 서유럽 국가와 몇 가지 일반적으로 사용되는 특수 문자에 사용된 문자가 포함되어 있습니다.

이는 독립체 또는 예약 문자를 구현하는 쉽게 키보드로 입력할 수 없는 문자를 표현하는 데 사용됩니다.

ISO 8859-1 부호

문 자 엔티티 번호 엔티티 이름 설 명
  &#160; &nbsp; non-breaking space
¡ &#161; &iexcl; inverted exclamation mark
¢ &#162; &cent; cent
£ &#163; &pound; pound
¤ &#164; &curren; currency
¥ &#165; &yen; yen
¦ &#166; &brvbar; broken vertical bar
§ &#167; &sect; section
¨ &#168; &uml; spacing diaeresis
© &#169; &copy; copyright
ª &#170; &ordf; feminine ordinal indicator
« &#171; &laquo; angle quotation mark (left)
¬ &#172; &not; negation
­ &#173; &shy; soft hyphen
® &#174; &reg; registered trademark
¯ &#175; &macr; spacing macron
° &#176; &deg; degree
± &#177; &plusmn; plus-or-minus 
² &#178; &sup2; superscript 2
³ &#179; &sup3; superscript 3
´ &#180; &acute; spacing acute
µ &#181; &micro; micro
&#182; &para; paragraph
· &#183; &middot; middle dot
¸ &#184; &cedil; spacing cedilla
¹ &#185; &sup1; superscript 1
º &#186; &ordm; masculine ordinal indicator
» &#187; &raquo; angle quotation mark (right)
¼ &#188; &frac14; fraction 1/4
½ &#189; &frac12; fraction 1/2
¾ &#190; &frac34; fraction 3/4
¿ &#191; &iquest; inverted question mark
× &#215; &times; multiplication
÷ &#247; &divide; division
내용 출처/참고 자료 W3Schools.com (HTML ISO-8859-1 Reference)
0 Comment,  0  Trackback

본 게시물에 대한 질문은 댓글을 통하여 받습니다. 바른말, 고운 말을 사용하여 남겨주세요. :)

meta 태그를 이용한 Internet Explorer 랜더링 설정

HTML 문서내에 DTD 정의 유무에 따라 다음과 같이 렌더링해야 합니다.

DTD 정의가 있는 경우: Standard Mode

DTD 정의가 없는 경우: Quirks Mode

Standard Mode 설정 (DTD 정의가 있는 경우): <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Quirks Mode 설정 (DTD 정의가 없는 경우)

Internet Explorer 7 Standards 모드
  • <meta http-equiv="X-UA-Compatible" content="IE=7" />

Internet Explorer 8 Standards 모드
  • <meta http-equiv="X-UA-Compatible" content="IE=8" />

가장 최신 Internet Explorer 버전의 Standards 모드
  • <meta http-equiv="X-UA-Compatible" content="IE=Edge" />

0 Comment,  0  Trackback

본 게시물에 대한 질문은 댓글을 통하여 받습니다. 바른말, 고운 말을 사용하여 남겨주세요. :)

[XHTML] h1~h6 값을 이용하여 제목 만들기

제목을 꾸밀때 유용하게 이용해볼 수 있는 h1~h6

일반적으로 본문의 제목을 나타낼때 사용하며, body의 시작과 끝 사이에 포함되어야 하고 필요에 의해 여러개의 제목으로 사용이 가능합니다.

h1요소의 출현횟수에 대해 html과 xhtml의 권고안에서 특별히 언급하지는 않지만, h1요소는 그 문서의 큰 제목(타이틀)을 나타내기 때문에 원칙적으로 하나의 문서에 한번만 지정해야 합니다. (h1은 권고안에서 섹션의 가장 큰 제목을 나타내며 여러섹션으로 이루어진 문서에는 여러 h1이 들어갈 수도 있음) 그러므로, 검색 엔진에 따라서 해당 항목(h1, h2 등) 안의 내용에 비중을 두고 Index를 구축하기 때문에 적극 활용해 블로그를 운영할 콘텐츠를 만드는것이 좋습니다.

h1~h6 기본 예시 HTML

<!DOCTYPE html>
<html lang="ko">
  <head>
    <title>Viewit - http://viewit.kr</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  </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 [가장 작음]
위의 값은 기본 크기 값이며 Style Sheet(CSS)를 이용하여 사용자 임의로 크기를 수정할 수 있습니다.

h1~h6 기본 HTML 적용내용 미리 보기

0 Comment,  0  Trackback

본 게시물에 대한 질문은 댓글을 통하여 받습니다. 바른말, 고운 말을 사용하여 남겨주세요. :)