'웹 퍼블리싱 > Html' 카테고리의 다른 글
현재시간 보여주는 소스 (0) | 2015.07.17 |
---|---|
구글에서 웹문서 노출 많이 되게 하기 (0) | 2015.07.17 |
페이지 자동이동 소스 모음 (0) | 2015.07.16 |
검색엔진최적화를 위한 제목 태그(Heading tags) 총정리 (0) | 2015.07.15 |
국내 HTML5 시장 본격 개화기 (0) | 2015.07.14 |
현재시간 보여주는 소스 (0) | 2015.07.17 |
---|---|
구글에서 웹문서 노출 많이 되게 하기 (0) | 2015.07.17 |
페이지 자동이동 소스 모음 (0) | 2015.07.16 |
검색엔진최적화를 위한 제목 태그(Heading tags) 총정리 (0) | 2015.07.15 |
국내 HTML5 시장 본격 개화기 (0) | 2015.07.14 |
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>
현재시간 보여주는 소스 (0) | 2015.07.17 |
---|---|
구글에서 웹문서 노출 많이 되게 하기 (0) | 2015.07.17 |
이미지에 마우스 오른쪽 클릭시 경고창 띄우기 (0) | 2015.07.17 |
검색엔진최적화를 위한 제목 태그(Heading tags) 총정리 (0) | 2015.07.15 |
국내 HTML5 시장 본격 개화기 (0) | 2015.07.14 |
1. color는 글자에만 적용되는 게 아니다.
- 이미지가 없을 때의 대체 텍스트 색상
- 기본 보더 색상
- 목록 엘리먼트의 불릿 기호 또는 숫자 마커의 색상
- hr 엘리먼트의 선 색상
등으로도 적용된다고 합니다.
2. visibility 속성에는 collapse 값도 설정할 수 있다.
테이블 내부 요소에 한해 visibility : collapse를 설정하면 display : none과 같이 동작한다고 합니다(즉 공간을 차지하지 않는다는 얘기). 하지만 브라우저마다 동작이 다르고 특히 크롬에서는 visibility : hidden 처럼 동작합니다.
3. background 단축 속성에 3가지 값을 더 쓸 수 있다.
CSS3에서는 background-size, background-origin, background-clip 속성도 background 속성에 추가할 수 있습니다. 단, CSS3에 추가된 속성을 사용하려면 앞에 슬래시를 붙여야 한다고 합니다.
4. clip 속성은 엘리먼트가 절대 좌표일 때만 동작한다.
position: absolute 혹은 fixed 인 경우에 한해서만 적용된다고 합니다.
5. 수직 공간(위 또는 아래)에 대한 퍼센트는 높이가 아닌 너비에 비례한다.
margin-top/bottom, padding-top/bottom에 퍼센트를 쓰면 너비에 비례해서 값이 바뀌네요. 왜 이렇게 만든 걸까요…
6. border는 인셉션 같다.
border는 단축 속성인데 알고 보면 border에서 설정할 수 있는 각 속성들도 사실은 또 단축 속성이고…
7. text-decoration은 단축 속성이 됐다.
새로운 스펙에 따라 선 종류, 선 색상, 선 스타일을 한꺼번에 설정할 수 있다. 현재는 파이어폭스만 지원한다.
8. border-width 속성에는 medium, thin, thick 같은 키워드도 사용할 수 있다.
9. border-image는 아무도 안 쓴다.
데모에서 박스 크기 바꿔보면 안 쓰는 이유를 알 것도 같네요. -_-;;
10. empty-cells 라는 속성도 있다.
테이블의 빈 셀을 보여줄건지 / 아닌지 설정할 수 있는 속성. 심지어 IE8부터 모든 브라우저가 다 지원하네요.
11. font-style 속성에는 oblique라는 값도 있다.
우리가 “이탤릭”이라고 알고 있던 기울임꼴은 사실 oblique가 맞는 거고, 원래 “이탤릭”이라고 불리는 글꼴은 따로 있네요(위키피디아 Oblique Type 참고). “진짜 이탤릭”을 지원하는 폰트가 있다면 기대했던 모양과 달라질 수 있으니 현재 사용되고 있는 이탤릭체에 적절한 값은 olbique가 더 맞다는 얘기입니다.
12. word-wrap은 overflow-wrap과 같다.
word-wrap이 되려면 단어 단위로 줄이 바뀌어야 되는데 지금은 그냥 정해진 영역을 넘어간 내용을 자르고 있으므로 overflow-wrap과 같이 동작한다는 뜻입니다. 용어가 혼란스럽게 잘못 만들어졌다는 얘기인데, CSS 워킹 그룹의 Incomplete List of Mistakes in the Design of CSS (CSS 설계상의 실수)라는 글을 읽어보면 같은 내용이 나옵니다. W3C에서도 word-wrap을 overflow-wrap으로 대체하기로 했다고 하네요.
css 아키텍쳐 구성하기 (0) | 2024.03.11 |
---|---|
css 배경이미지 100%로 설정하는 방법 (0) | 2015.07.17 |
CSS 구글웹폰트 사용하기 (0) | 2015.07.17 |
이미 블로그나 웹사이트를 운영해 본 사람이라면 누구나 제목 태그(Heading tag), 즉 H1, H2 등에 대해 익숙하실 텐데요. 오늘은 검색엔진최적화를 위한 제목 태그 활용 방법에 대해 알아보겠습니다.
어떤 책이든 책의 제목이 있고 각 장에는 대제목, 중제목, 소제목 등으로 구분됩니다. 대제목과 중제목, 소제목은 그 크기나 색, 굵기 등에 변화를 주어 그 차이를 나타내는데요. 이러한 구분은 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 태그는 반드시 페이지 콘텐츠의 기본 설명이 포함되어야 합니다.
스크린리더를 사용하는 사람들에게 적절히 구조화 된 제목 태그는 사이트를 살펴보기 쉽게 합니다.
페이지 내 제목 태그는 사용자가 콘텐츠를 빠르고 쉽게 살펴보도록 합니다.
제목 태그 사용시 주의할 점에는 어떤 것들이 있을까요?
지금까지 검색엔진최적화를 위한 제목 태그 사용 방법에 대해 살펴 봤습니다. 다음 시간에는 제목 태그 사용을 통한 계층 구조는 어떻게 나타나는지 알아보겠습니다.
현재시간 보여주는 소스 (0) | 2015.07.17 |
---|---|
구글에서 웹문서 노출 많이 되게 하기 (0) | 2015.07.17 |
이미지에 마우스 오른쪽 클릭시 경고창 띄우기 (0) | 2015.07.17 |
페이지 자동이동 소스 모음 (0) | 2015.07.16 |
국내 HTML5 시장 본격 개화기 (0) | 2015.07.14 |
스마트워크 확산에 공공ㆍ대기업 수요 확대
가전ㆍ자동차 등 다양한 산업군 적용 확산
관심에 비해 주춤했던 국내 HTML5 시장이 올해 본격 개화할 전망이다. 스마트워크의 확산과 더불어 가전, 자동차 등 다양한 산업군에서 HTML5를 적용하는 사례가 늘 것으로 보인다.
14일 HTML5 업계에 따르면, HTML5에 대한 인식이 확산되면서 다양한 분야에서 사업이 진행될 것으로 기대되는 등 올 한해 국내 HTML5 시장 전망이 밝다.
지난해 HTML5 저작도구인 `다빈치'를 출시한 인크로스는 올해 스마트워크 도입을 고려하는 대기업들을 중심으로 HTML5 도입이 늘 것으로 보고 있다.
이 회사는 지난해 대우해양조선, 한진해운, 롯데칠성음료 등 다양한 분야의 대기업과 공공기관을 포함해 10여 곳의 고객사를 확보했다.
회사측에 따르면 이들 고객사는 스마트워크 구축을 위해 다양한 기기와 운영체제(OS)에 맞춰 별도 애플리케이션을 제작, 관리해야하는 문제에 있었다. 이 회사가 HTML5를 이용해 한번의 애플리케이션 제작으로 OS에 구애받지 않는 스마트워크 환경을 구현했다.
송호용 인크로스 본부장은 "스마트워크 시스템을 구축하는 대기업, 공공기관을 중심으로 많은 문의를 받고 있다"며 "과거에 비해 HTML5에 대한 고객사들의 이해도 높아져 올해 좋은 성과가 있을 것으로 기대한다"고 말했다.
오비고는 올해 차량과 스마트 TV분야에서 HTML5 도입이 늘 것으로 예상했다.
현대기아차를 비롯해 해외 주요 자동차 업계가 2015년 출시를 목표로 스마트카 개발에 나서고 있는데, HTML5이 스마트카 플랫폼 제작에 적극적으로 활용될 것으로 기대하고 있다.
현재시간 보여주는 소스 (0) | 2015.07.17 |
---|---|
구글에서 웹문서 노출 많이 되게 하기 (0) | 2015.07.17 |
이미지에 마우스 오른쪽 클릭시 경고창 띄우기 (0) | 2015.07.17 |
페이지 자동이동 소스 모음 (0) | 2015.07.16 |
검색엔진최적화를 위한 제목 태그(Heading tags) 총정리 (0) | 2015.07.15 |
브라우저 가로너비에 따라 제이쿼리 함수 적용 (0) | 2021.05.21 |
---|