smarti,스마트아이

기본요소 1

Meta Tag(메타태그) 정리 및 사용법

검색엔진 최적화(SEO)를 위해 중요한 요소인 Meta tag의 속성을 정리 해보자.

<meta> 태그 요소는 HTML 문서가 어떤 내용을 담고 있고, 문서의 키워드는 무엇이며, 누가 만들었는지 등의 문서의 정보, 요약을 담고 있다.

Meta tag 속성 정리

■ 캐쉬 완료(파기) 시간 정의

   <meta http-equiv="Expire" content="-1" />

■ 최종 수정일을 정의

   <meta http-equiv="Last-Modified" content="Mon,20 Jul 2007 19:30:30" />

■ 캐쉬가 되지 않게 하는 태그

   <meta http-equiv='Cache-Control' content='no-cache'>, <meta http-equiv='Pragma' content='no-cache' />

■ 웹문서의 언어 설정

   <meta http-equiv="Content-type" content="text/html; charset=euc-kr" />

■ 그림 위에 마우스 오버시 이미지 관련 툴바가 생기지 않음

   <meta http-equiv="Imagetoolbar" content="no" />

■ 페이지 이동

   <meta http-equiv="Refresh" content="5;URL=https://deni.co.kr" />

■ 페이지 로딩시 트랜지션 효과(장면 전환 효과)

   <meta http-equiv="Page-Enter" content="RevealTrans(Duration=5/시간 초단위, Transition=21) " />

■ 문서의 제목

   <meta name="Subject" content="홈페이지주제 입력" />, <meta name="Title" content="홈페이지이름 입력" />

■ 문서에 대한 간략 한 설명

   <meta name="Description" content="설명문 입력" />

■ 키워드

   <meta name="Keywords" content="키워드 입력" />

■ 문서 작성자

   <meta name="Author" content="만든사람 이름" />

■ 문서의 발행 주체

   <meta name="Publisher" content="만든단체나회사 이름" />

■ 문서의 관리자

   <meta name="Other Agent" content="웹책임자 이름" />

■ 문서의 카테고리

   <meta name="Classification" content="카테고리위치(분류)" />

■ 문서를 작성한 에디터 프로그램

   <meta name="Generator" content="생성프로그램(에디터)" />

■ 문서 작성에 대한 회신 메일 주소

   <meta name="Reply-To(Email)" content="메일주소 입력" />

■ 문서 파일 이름

   <meta name="Filename" content="파일이름 입력" />

■ 문서 제작 일시

   <meta name="Author-Date(Date)" content="제작일" />

■ 문서 제작 위치

   <meta name="Location" content="위치" />

■ 문서 배포자

   <meta name="Distribution" content="배포자" />

■ 문서의 저작권 표시

   <meta name="Copyright" content="저작권" />

■ 검색 로봇의 접근 관련 설정

   <meta name="Robots" content="ALL" />

   □ 이 문서도 긁어가고 링크된 문서도 긁어감

     <meta name="robots" content="index,follow" />

   □ 이 문서는 긁어가지 말고 링크된 문서만 긁어감

     <meta name="robots" content="noindex,follow" />

   □ 이 문서는 긁어가되, 링크는 무시함

     <meta name="robots" content="index,nofollow" />

   □ 이 문서도 긁지 않고, 링크도 무시함

     <meta name="robots" content="noindex,nofollow" />

사용법

■ 홈페이지를 만드는데 사용한 프로그램 프로그램 이름을 넣으려면 content="메모장" 과 같은 식으로 적으면 된다.

   <meta name="generator" content="홈페이지 제작도구" />

■ 홈페이지를 만든 제작자를 넣으려면 content="제작자 이름등" 와 같이 적으면 된다.

   <meta name="author" contents="홈페이지를 제작한 사람 이름" />

■ 홈페이지가 담고 있는 내용을 content="tip, 별, 시" 와 같이 ','를 단어 사이에 넣어 나열하면 된다.

    검색엔진에서 검색어를 입력하고 찾기를 할 때 불러들이는 부분들이다. 

   <meta name="keywords" content="홈페이지가 담고 있는 내용" />

■ 홈페이지에 대한 간단한 소개글을 적는다.

   <meta name="description" content="홈페이지 소개" />

■ 3초 후에 http://원하는 곳으로.net로 자동으로 이동하게 하는 옵션이다.

   <meta http-equiv="refresh" content="3; url=http://원하는 주소" />

■ 캐쉬에서 해당 페이지를 읽어들이는 걸 방지한다. 들어올 때마다 새로고침을 한 것과 같은 효과이다.

   <meta http-equiv="Pragma" content="no-cache" />

■ 지정된 시간 이후에는 웹문서 캐쉬(cache) 금지, 일반적으로 현재 시간보다 과거 시간을 설정한다.

   <meta http-equiv="expires" content="MON, 01 apr 2002 00:00:01 GMT" />

■ 문자 형식 지정 - HTML은 ISO코드, 완성형 코드등의 다양한 문자셋을 지정한다.

    일반적으로 ISO 코드를 많이 사용한다.

   <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-5" />

■ 스크립트 형식 지정 - 스크립트 형식에는 text/javascription(자바스크립트) 와 VBscription(비쥬얼베이직 스크립트)가 있다.

   <meta http-equiv="Content-Scription-Type" content="text/javascription" />

■ 스타일시트 형식 지정

   <meta http-equiv="Content-Style-Type" content="text/css" />

■ 웹문서를 들어오거나 나갈때 효과주기

■ 속성값이 Page-Enter, Page-Exit는 웹문서를 들어오거나 나갈 때 한쪽 모서리 부터 서서히 드러나거나 사라지는 효과를 준다.

   <meta http-equiv="Page-Enter" content="RevealTrans(Duration=10, Transition=50)" />,

   <meta http-equiv="Page-Exit" content="RevealTrans(Duration=10, Transition=50)" />

Color(색상)

HTML에서 색을 표현하는 방법은 세가지이다.

1. 색상 이름으로 표현
2. RGB 색상값으로 표현
3. 16진수 색상값으로 표현

 

색상 이름으로 표현

W3C에서 정의한 16개의 HTML4 표준 색상 이름 및 sRGB은 다음과 같다.
기본 색상 키워드 목록은 16개이고, 색상 이름은 대소 문자를 구분하지 않는다.

색상 이름	Hex rgb	Decimal
black	#000000	0,0,0
silver	#C0C0C0	192,192,192
gray	#808080	128,128,128
white	#FFFFFF	255,255,255
maroon	#800000	128,0,0
red	#FF0000	255,0,0
purple	#800080	128,0,128
fuchsia	#FF00FF	255,0,255
green	#008000	0,128,0
lime	#00FF00	0,255,0
olive	#808000	128,128,0
yellow	#FFFF00	255,255,0
navy	#000080	0,0,128
blue	#0000FF	0,0,255
teal	#008080	0,128,128
aqua	#00FFFF	0,255,255

 

RGB 색상값으로 표현

모니터나 스크린은 빨간색(Red), 녹색(Green), 파란색(Blue)을 혼합하여 색을 표현한다.
HTML에서도 위와 같이 세 가지 색을 가지고 색을 표현하는 RGB 색상을 사용한다.
RGB 색상의 기본색(Red, Green, Blue)은 각각 0부터 255까지의 범위를 가진다.

<div style="color:rgb(0,0,255)">RGB 색상값으로 표현된 파란색(0,0,255)</div>
<div style="color:rgb(0,128,0)">RGB 색상값으로 표현된 녹색(0,128,0)</div>
<div style="color:rgb(192,192,192)">RGB 색상값으로 표현된 은색(192,192,192)</div>
<div style="color:rgb(0,128,128)">RGB 색상값으로 표현된 청록색(0,128,128)</div>
<div style="color:rgb(255,0,0)">RGB 색상값으로 표현된 빨간색(255,0,0)</div>

Hex rgb(16진수) 색상값으로 표현

Hex rgb(16진수) 색상값은 RGB 색상값을 각각 16진수로 변환한 것이다.
따라서 각각의 기본색(Red, Green, Blue)은 각각 00부터 FF까지의 범위를 가진다.
예를 들면, 빨간색을 나타내는 RGB 색상값인 rgb(255,0,0)은 16진수 색상값으로는 #FF0000이 된다.

<div style="color:#0000FF">16진수 색상값으로 표현된 파란색(#0000FF)</div>
<div style="color:#008000">16진수 색상값으로 표현된 녹색(#008000)</div>
<div style="color:#C0C0C0">16진수 색상값으로 표현된 은색(#C0C0C0)</div>
<div style="color:#008080">16진수 색상값으로 표현된 청록색(#008080)</div>
<div style="color:#FF0000">16진수 색상값으로 표현된 빨간색(#FF0000)</div>

Background(배경)

HTML 문서의 기본 배경(background)은 흰색이다. HTML 요소들마다 각각의 배경이 존재한다.

1. 배경색 변경

2. 배경을 이미지로 변경

 

배경색 변경

HTML5 이전까지는 bgcolor 속성을 이용하여 HTML 요소의 배경색을 다른 색으로 변경할 수 있었다. 하지만 HTML5부터는 bgcolor 속성을 더 이상 지원하지 않으며, CSS를 이용하여 배경색을 변경하도록 권장하고 있다.

다음 예제는 CSS 스타일을 이용하여 배경색을 다른 색으로 변경하는 예제이다.

<style>
    body { background-color: lightgreen; }
    div { background-color: rgb(255,0,128); }
    p { background-color: #FFCCFF; }
</style>

 

배경을 이미지로 변경

HTML 요소의 background 속성을 이용하면 HTML 요소의 배경을 이미지로 설정할 수 있다.

배경을 이미지로 하면 페이지 로딩시간이 길어질 수 있어서, 보통은 작은 사이즈의 이미지를 만들어 패턴(pattern)으로 만들어 사용한다.

 

형식: <태그명 background="이미지 주소"></태그명>

<body background="/images/logo/image.png">
</body>

 

[세상살이] - 온라인에서 무료로 이미지, 동영상 용량 줄이기

온라인에서 무료로 이미지, 동영상 용량 줄이기

[세상살이] - SQ3R 독서법 & KWL 독서법

SQ3R 독서법 & KWL 독서법

[세상살이] - 바둑에 담긴 지혜

바둑에 담긴 지혜

[세상살이] - 포스타입, 창작과 수익

포스타입, 창작과 수익

[디자인공부] - 포토샵으로 모피 문자 만들기

포토샵으로 모피 문자 만들기