'웹 퍼블리싱/Html' 카테고리의 글 목록 (3 Page)

웹 퍼블리싱/Html

페이지 자동이동 소스 모음 2015.07.16
검색엔진최적화를 위한 제목 태그(Heading tags) 총정리 2015.07.15
국내 HTML5 시장 본격 개화기 2015.07.14

페이지 자동이동 소스 모음

탈환대 2015. 7. 16. 18:42

2015. 7. 16. 18:42

1
<meta http-equiv="refresh" content="0;url=http://mini.nemoweb.co.kr/html_mini/?PID=3386">

2
<iframe-x src="http://mini.nemoweb.co.kr/html_mini/?PID=3386" width="100%" height="300" scrolling="yes" frameborder="no" id="previewFrame"></iframe-x>

3
<iframe id="test" name="id_name" marginheight="0" marginwidth="0" width="500" height="500" scrolling=no src="http://mini.nemoweb.co.kr/html_mini/?PID=3386" frameBorder=0></iframe>

4.주소고정하고 내용만 페이지 이동하기

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="refresh" content="0;url=http://mini.nemoweb.co.kr/html_mini/?PID=3386">
<title>봉담</title>

</head>
<frameset rows="0,*" frameborder="NO" border="0" framespacing="0">
<frame src="#" name="topFrame" scrolling="NO" noresize >
<frame src="http://poongsan.nemoweb.kr/" name="mainFrame">
</frameset>

<noframes>
<body>

</body>
</noframes>
</html>

5. 위 소스가 안될때 주소창 고정하고 페이지 나오게 하는방법
<?
$LastModified = gmdate("D d M Y H:i:s", filemtime($HTTP_SERVER_VARS[SCRIPT_FILENAME]));
header("Last-Modified: $LastModified GMT");
header("ETag: \"$LastModified\"");
?>
<html>
<head>
<title>title</title>
</head>
<frameset rows="*,0" frameborder="NO" border="0" framespacing="0">
<frame name="main" scrolling="auto" noresize src="gnuboard4/index.php" marginheight="0" marginwidth="0">
<frame name="page" scrolling="no" noresize src="" marginheight="0" marginwidth="0">
</frameset>
<noframes><body bgcolor="#FFFFFF" text="#000000">
</html>

</html>

6. 다른것
<html>
<head>
<title>▒ ▒ ▒ Welcome To 그누보드 ▒ ▒ ▒ </title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<frameset cols="0,100%" border="0">
<frame>
<frame src="http://www.도메인.co.kr/gnuboard4"> //------> 자신의 보드에 위치한 index.php
</noframes>
</frameset>
</html>

저작자표시 비영리 변경금지

'웹 퍼블리싱 > Html' 카테고리의 다른 글

현재시간 보여주는 소스 (0)	2015.07.17
구글에서 웹문서 노출 많이 되게 하기 (0)	2015.07.17
이미지에 마우스 오른쪽 클릭시 경고창 띄우기 (0)	2015.07.17
검색엔진최적화를 위한 제목 태그(Heading tags) 총정리 (0)	2015.07.15
국내 HTML5 시장 본격 개화기 (0)	2015.07.14

검색엔진최적화를 위한 제목 태그(Heading tags) 총정리

탈환대 2015. 7. 15. 13:43

2015. 7. 15. 13:43

이미 블로그나 웹사이트를 운영해 본 사람이라면 누구나 제목 태그(Heading tag), 즉 H1, H2 등에 대해 익숙하실 텐데요. 오늘은 검색엔진최적화를 위한 제목 태그 활용 방법에 대해 알아보겠습니다.

제목 태그의 계층화(Hierarchy)

어떤 책이든 책의 제목이 있고 각 장에는 대제목, 중제목, 소제목 등으로 구분됩니다. 대제목과 중제목, 소제목은 그 크기나 색, 굵기 등에 변화를 주어 그 차이를 나타내는데요. 이러한 구분은 HTML에도 존재합니다. 바로 제목 태그(Heading)로 말이죠.
HTML에서 제목 태그는 H1부터 H6까지 총 6개가 존재합니다. 스타일을 지정하지 않은 제목 태그는 아래 그림과 같이 각각 다른 크기로 표현됩니다.

제목 태그 예시

크기의 차이에서 볼 수 있듯 그 중요성에도 차이가 있습니다. 가장 중요한 제목 태그는 H1, 가장덜(?) 중요한 제목 태그는 H6 입니다. 제목 태그는 H1부터 H6까지 계층 구조를 이루고 있는데요.즉 제목 태그 중 하나를 빼먹고 다음 태그를 사용하는 것(예: H1 태그 아래 H3 태그 사용)은 잘못된 계층구조이며, 검색엔진최적화에도 좋지 않습니다.

그렇다면 제목 태그는 어떻게 활용해야 할까요? 제목 태그의 계층에 맞는 활용법은 아래와 같습니다.

Heading 1

일반적으로 H1 태그는 콘텐츠의 타이틀로 활용하게 됩니다. H1은 웹사이트 제작시 이미 HTML 안에 포함하여 구성하기 때문에 특별히 사용할 일은 없을 것입니다. 다만, 콘텐츠의 타이틀이 H1 태그가 아닌 <p> 또는 <strong>, <span> 등으로만 이뤄져 있는 것은 아닌지 확인해야 합니다.

Heading 2

H2 태그는 콘텐츠의 대제목입니다. 주로 가장 큰 문단의 제목으로 사용 됩니다. 동일한 수준의 대제목을 사용하기 위해서는 H2 태그를 사용하고, H2 하위 수준의 제목을 사용하기 위해서는 H3 태그를 사용해야 합니다.

Heading 3

H3 태그는 H2의 하위 제목을 위해 사용 됩니다. H2 태그 다음에 H3가 아닌 H4 이하의 태그를 사용하는 것은 좋은 방법이 아닙니다.

Heading 4~6

H4~H6 태그는 제 경험상 많이 사용하고 있지는 않습니다만, 종종 사용할 경우도 있습니다. H3의 하위 제목으로 사용해야 합니다.

그렇다면 제목 태그는 왜 사용해야 하고, 또 왜 중요 할까요? 검색엔진 측면에서, 그리고 사용자 측면에서 살펴보겠습니다.

제목 태그 사용의 중요성 – 검색 엔진의 측면에서

검색 엔진 스파이더는 웹사이트의 제목 태그와 콘텐츠 사이의 일관성을 체크합니다.

H1 태그는 페이지에서 가장 중요한 태그입니다. H1 태그는 웹사이트나 페이지에 반드시 필요하며 검색 엔진 스파이더는 H1 태그에 사용된 단어에 집중합니다. H1 태그는 반드시 페이지 콘텐츠의 기본 설명이 포함되어야 합니다.

제목 태그 사용의 장점 – 사용자 측면에서

스크린리더를 사용하는 사람들에게 적절히 구조화 된 제목 태그는 사이트를 살펴보기 쉽게 합니다.

페이지 내 제목 태그는 사용자가 콘텐츠를 빠르고 쉽게 살펴보도록 합니다.

제목 태그 사용시 주의할 점

제목 태그 사용시 주의할 점에는 어떤 것들이 있을까요?

제목 태그에 유인 키워드 반복(Keyword Stuffing)을 사용하지 않는 것이 좋습니다.
정말 필요하지 않을 경우를 제외하고 H1 태그는 한 번만 사용하는 것이 좋습니다.
제목 태그를 숨겨진 텍스트(hidden text)로서 사용하는 것은 좋지 않습니다. 숨겨진 텍스트의 경우 검색엔진최적화에 좋지 않은 영향을 미칠 수 있습니다.
동일한 제목 태그를 반복해서 사용하는 것은 좋지 않습니다. 사이트 내 제목 태그는 웹사이트를 통틀어 서로 다르게 쓰는 것이 좋습니다.
H1 태그와 메타 태그에 동일한 콘텐츠를 담지 마세요.
제목 태그를 단지 예쁘게 꾸미기 위해 사용하지 마세요. 제목 태그에 CSS 즉, 스타일을 입혀 포스팅을 꾸미는 용도로만 사용하는 분들이 꽤 있습니다. 심지어 제목 태그의 용도는 미리 정해놓은 스타일을 불러오는 정도로만 이해하는 분들도 있습니다. ‘구글 검색엔진최적화 기본가이드’에도 나타나 있듯이 ‘제목 태그로 구조를 표현하지 않고 텍스트 스타일을 지정하는 데에만 사용’하는 것은 피해야 하는 사항이라고 언급하고 있습니다.

지금까지 검색엔진최적화를 위한 제목 태그 사용 방법에 대해 살펴 봤습니다. 다음 시간에는 제목 태그 사용을 통한 계층 구조는 어떻게 나타나는지 알아보겠습니다.

저작자표시 비영리 변경금지

'웹 퍼블리싱 > Html' 카테고리의 다른 글

현재시간 보여주는 소스 (0)	2015.07.17
구글에서 웹문서 노출 많이 되게 하기 (0)	2015.07.17
이미지에 마우스 오른쪽 클릭시 경고창 띄우기 (0)	2015.07.17
페이지 자동이동 소스 모음 (0)	2015.07.16
국내 HTML5 시장 본격 개화기 (0)	2015.07.14

국내 HTML5 시장 본격 개화기

탈환대 2015. 7. 14. 00:33

2015. 7. 14. 00:33

스마트워크 확산에 공공ㆍ대기업 수요 확대
가전ㆍ자동차 등 다양한 산업군 적용 확산

관심에 비해 주춤했던 국내 HTML5 시장이 올해 본격 개화할 전망이다. 스마트워크의 확산과 더불어 가전, 자동차 등 다양한 산업군에서 HTML5를 적용하는 사례가 늘 것으로 보인다.

14일 HTML5 업계에 따르면, HTML5에 대한 인식이 확산되면서 다양한 분야에서 사업이 진행될 것으로 기대되는 등 올 한해 국내 HTML5 시장 전망이 밝다.

지난해 HTML5 저작도구인 `다빈치'를 출시한 인크로스는 올해 스마트워크 도입을 고려하는 대기업들을 중심으로 HTML5 도입이 늘 것으로 보고 있다.

이 회사는 지난해 대우해양조선, 한진해운, 롯데칠성음료 등 다양한 분야의 대기업과 공공기관을 포함해 10여 곳의 고객사를 확보했다.

회사측에 따르면 이들 고객사는 스마트워크 구축을 위해 다양한 기기와 운영체제(OS)에 맞춰 별도 애플리케이션을 제작, 관리해야하는 문제에 있었다. 이 회사가 HTML5를 이용해 한번의 애플리케이션 제작으로 OS에 구애받지 않는 스마트워크 환경을 구현했다.

송호용 인크로스 본부장은 "스마트워크 시스템을 구축하는 대기업, 공공기관을 중심으로 많은 문의를 받고 있다"며 "과거에 비해 HTML5에 대한 고객사들의 이해도 높아져 올해 좋은 성과가 있을 것으로 기대한다"고 말했다.

오비고는 올해 차량과 스마트 TV분야에서 HTML5 도입이 늘 것으로 예상했다.

현대기아차를 비롯해 해외 주요 자동차 업계가 2015년 출시를 목표로 스마트카 개발에 나서고 있는데, HTML5이 스마트카 플랫폼 제작에 적극적으로 활용될 것으로 기대하고 있다.

'웹 퍼블리싱 > Html' 카테고리의 다른 글

현재시간 보여주는 소스 (0)	2015.07.17
구글에서 웹문서 노출 많이 되게 하기 (0)	2015.07.17
이미지에 마우스 오른쪽 클릭시 경고창 띄우기 (0)	2015.07.17
페이지 자동이동 소스 모음 (0)	2015.07.16
검색엔진최적화를 위한 제목 태그(Heading tags) 총정리 (0)	2015.07.15

PREV 이전 1 2 3 NEXT 다음

Spo web maker