'html' 카테고리의 글 목록 (5 Page)

META 태그는 홈페이지에 대한 정보를 나따낼때 사용 합니다.

그리고 속성으로 http-equiv를 사용 하면 브라우저를 동적으로 작동 할 수 있습니다.

속성에 name에 해당하는 값을 넣어 홈페이지 정보를 알리고

그리고 name에 해당하는 content를 넣어 name에 해당하는 내용을 알수 있습니다.

예를 들어

<meta name="Author" content="RANGS"> //Author:페이지 제작자가 RANGS라는 거구요

<meta name="Generator" content="Microsoft FrontPage 4.0"> //페이지를 프론트 페이지로 제작

<meta name="Copyright" content="2003 RANGS"> //저작권에 관한 정보

<meta name="Keywords" content="html,tag,mata,메타,태그"> //검색엔진에서 검색되는 키워드

<meta name="Description" content="META 태그에 관한 정보"> //페이지에 대한 정보

그리고 동적인 부분이라는 것에 대한 예를 보면

<meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> //문자 인코딩

<meta http-equiv="Refresh" content="60"> //60초 마다 새로고침

<meta http-equiv="Refresh" content="5;url='url'">//주소로 5초후 이동

<meta http-equiv="Pragma" content="no-cache"> //캐쉬가 되지 않게
//캐쉬 만료(파기)일

<meta http-equiv="Page-Enter" content="revealtrans(duration=1,transition=12)">
//페이지 들어갈때 트랜지션 효과(장면 전환 효과)

<meta http-equiv="Page-Exit" content="revealtrans(duration=1,transition=12)">
//페이지 나갈때 트랜지션 효과(장면 전환 효과)

등등

이밖에도 많은 정보를 알릴수가 있습니다.

===================================================

lkm2902 (2003-10-24 17:40 작성)

*메타태그

메타태그에 대해서 알아봅시다.
메타태그는 홈페이지의 문서정보를 담는 태그입니다.
누가 언제 어디서 제작하여, 어느 서버에 올렸는지 홈페이지의 제작한 정보를 담는 태그입니다.

<meta> 태그는 홈페이지에 대한 일반적인 정보를 나타낼 때 사용하며, 홈페이지 작성자 및 날짜, 그리고 홈페이지 검색시 검색 키워드 등을 지정할 수 있다. 이 곳에서 설정한 내용은 브라우저상에 나타나지 않으며
<meta name="Author" content="김아무개">

<body>
메타 태그의 활용
</body>

↑ 위와 같이 사용을 합니다. ↓ 아래에 있는 메타태그를 head에 넣으면 되겠습니다.

<meta name="Author" content="김아무개">
홈페이지를 만든 사람.

<meta name="Keywords" content="ASP강좌">
Altavista 등의 검색 엔진에서 홈페이지를 검색할 때 참조하는 키워드.

<meta name="Description" content="방문해 주셔서 감사합니다. ">
홈페이지에 대한 간략한 설명을 적는다.

<meta http-equiv="refresh" content="10;url='next.htm' ">
10초 후에 'next.htm' 로 이동한다.

<meta http-equiv="Content-Type" content="text/html; charset=ks_c_5601-1987 ">
브라우저상에서 한글이 깨져 보이는 경우, 한글의 코드를 지정하면 한글이 깨져 보이는 현상을 개선할 수 있다. 단 Charset을 "ks_c_5601-1987"로 지정하면 완성형 코드만을 볼 수 있다.

<meta http-equiv="Page-Exit" content="RevealTrans(Duration=5, Transition=23) ">
현재 페이지에서 빠져나갈 때 전환 기법을 사용하여 페이지를 닫는다.

<meta http-equiv="Page-Enter" content="RevealTrans(Duration=5, Transition=23) ">
다른 페이지로 넘어갈 때 전환 기법을 사용하여 페이지를 연다.

0 Box in - 네모난 박스가 바깥에서 안쪽으로 만들어지면서 이미지 변환
1 Box out - 네모난 박스가 안쪽에서 바깥쪽으로 만들어지면서 이미지 변환
2 Circle in - 원이 바깥에서 안쪽으로 만들어지면서 이미지 변환
3 Circle out- 원이 안쪽에서 바깥쪽으로 만들어지면서 이미지 변환
4 Wipe up - 이미지의 아래에서 위쪽으로 수직 이동하면서 변환
5 Wipe down - 이미지의 위쪽에서 아래로 수직 이동하면서 변환
6 Wipe right - 이미지의 왼쪽에서 오른쪽으로 수평 이동하면서 변환
7 Wipe left - 이미지의 오른쪽에서 왼쪽으로 수평 이동하면서 변환
8 Vertical blinds - 수직 브라인드가 쳐지는 형태로 이미지 변환
9 Horizontal blinds - 수평 브라인드가 쳐지는 형태로 이미지 변환
10 Checkerboard across - 바둑판 형태의 격자가 왼쪽에서 오른쪽으로 생기면서 이미지 변환
11 Checkerboard down - 바둑판 형태의 격자가 위에서 아래로 생기면서 이미지 변환
12 Random dissove - 안개낀 형태로 이미지가 바뀌면서 변환
13 Split vertical in - 왼쪽과 오른쪽 끝에서 중앙으로 수직이동하면서 이미지 변환
14 Split vertical out - 중앙에서 왼쪽과 오른쪽 끝으로 수직 이동하면서 이미지 변환
15 Split Horizontal in - 위쪽과 아래쪽에서 중앙으로 수평이동하면서 이미지 변환
16 Split Horizontal ou - 중앙에서 위쪽과 아래쪽으로 수평이동하면서 이미지 변환t
17 Strips left down - 오른쪽 위에서 왼쪽 아래로 이동하면서 이미지 변환
18 Strips left up - 오른쪽 아래에서 왼쪽 위로 이동하면서 이미지 변환
19 Strips right down - 왼쪽 위에서 오른쪽 아래로 이동하면서 이미지 변환
20 Strips right up - 왼쪽 아래에서 오른쪽 위로 이동하면서 이미지 변환
21 Random bars horizontal - 수평선이 무작위로 생기면서 이미지 변환
22 Random bars vertical - 수직선이 무작위로 생기면서 이미지 변환
23 Random - 임의로 지정됨
내용출처: www.nzeo.com

====================================================

hkpark999 (2002-12-10 21:04 작성)

메타데이타는 데이타를 위한 데이타입니다.

보통 컴퓨터에서는 메타데이타를 크게 2가지 목적을 위해 사용하고 있읍니다.

하나는 데이타의 표현하기 위한 것입니다.

예를 들어 위의 문장은 굵은 글씨로 글이 쓰여져 있습니다. "하나는 데이타의 표현하기 위한 것입니다."라는 문장은 사용자 입장에서 보면 데이타가 되겠지요.

그런데 이것을 굵은 글씨로 화면에 보이게 하라 는 것이 어디엔가 데이타로 표현 되어 있겠지요. 이러한 데이타를 메타 데이타라고 합니다. 즉 데이타를 꾸미기(?) 위한 데이타라고 이야기 할 수 있죠.

우리가 ms-word나 아래 한글로 타이핑 할 때 글씨를 빨강색으로 보이게도 하고, 또 제곱 글자 처럼 작은 글자로 위로 올라 가게 보이게하기도 합니다. 또는 이탤릭 체로 보이게 할 수도 있읍니다. 우리 눙에는 안보이지만 컴퓨터 프로그램은 파일 내 어디엔가 이런 정보를 담아 두겠지요. 이러한 것을 메타데이타라고 합니다.

그러나 메타데이타는 글자의 모양이나 색깔 등을 표현하는 것 이외에도 문장의 제목이나 단락, 혹은 쪽(page), 장(chapter)등을 표현 할 수 도 있읍니다.

메타데이타의 가장 좋은 예는 html태그입니다.

<*font color=red*>,<*b*>,<*h1*>,<*head*>,<*body*>등으로 글자의 색상이나, 문맥 등을 표현 하지요. 이러한 html은 또 구조화 되어 있어서 메타데이타를 데이터에 관한 구조화된 데이터 (structured data about data) 라고 부르기도 합니다.

구조화의 의미는, html태그내에 head나 body가 있고 body내에는 table이 올 수 있고, table내에는 tr이, tr내에는 td가 올 수 있는 것처럼 상위에서 하위로 구조(treeㄹ형태)를 이루고 잇다는 의미이지요.

메타데이타의 또 다른 역할은 데이타를 찾기 위한 인덱스(Index)구실을 한다는 것입니다.

우리가 책의 내용을 찾을 때 책 앞의 목차나 책 뒤의 색인을 보고 찾으면 빨리 찾을 수 잇읍니다. 우리가 많이 사용하는 데이타베이스도 이러한 메타데이타가 잘 구성 되어 있기 때문에 빨리 데이타를 찾을 수 있습니다.

이 경우, 메타데이타는 데이타를 빨리 찾기 위해 만들어 둔 데이타가 되겠지요.

전자의 경우나 후자의 경우나 메타데이타는 데이타를 사용하는 사람에게는 보이지 않읍니다. 그러나 기계(컴퓨터)는 메타 데이타를 내용을 이해하고 이용(?)합니다.

요약해서 이야기 하면 메타데이타는

(1) 데이타를 꾸미기(?) 위한 데이타

(2) 데이타를 빨리 찾기 위해 만들어 둔 데이타

http://kin.naver.com/detail/detail.php?d1id=1&dir_id=109&eid=feotkgqXdt2nTQwAv2p5aU5jqr6wdnjY&qb=uN7FuMXCsdcgsMu79g==&pid=fLVM9woi5Thsstfart0sss--219571&sid=SNsO9%40L-2kgAABSFqVU

저작자표시 비영리 (새창열림)

Posted by 갓리버리

메타태그의 구성 및 설명

님이 메타 테그에 대해서 혼란스러워하니 최대한 쉽고 간단하게 설명 하겠습니다.

일반적으로 많이 쓰이고 기본적인 메타 테그에 대해서 개념을 잡는것이 중요하겠군요.

먼저 META TAG 라는 것은..

웹페이지에 관한 정보를 제공하는 특별한 HTML 태그입니다.

일반적인 HTML 태그들과는 달리, 메타 태그는 웹페이지의 표현에는 영향을 미치지 않습니다.

그 대신에, 누가 그 페이지를 만들었으며, 얼마나 자주 갱신되는지, 그 페이지는 무엇에 관한 것인지 등과 같은 정보를 제공하며, 그 페이지의 내용을 함축적인 키워드로 표시합니다.

많은 검색엔진들이 인덱스를 만들 때, 이 정보를 이용하게 되죠.

메타 태그는 <HEAD> 와 </HEAD> 태그 사이에 위치하며 문서 전체에 대한
간단한 요약내용을 담고 있으며 브라우저 상에는 메세지가 나타나지 않습니다.

대표적인 예로.

검색엔진에서 키워드 검색 이라는것을 많이 사용했죠.(지금은 거의 효과가 없지만)

meta name에 keyword 라고 정하고 content에 그 홈페이지에 관한 키워드들을 넣어두면..

검색엔진(검색 로봇)이 HEAD안에 들어간 키워드를 보고 찾아갑니다.

위와 같이 키워드를 첨가하죠.

META TAG의 속성에는

1)http-equiv

2)name

3)charset

4)schame

등이 있는데 hrrp-equiv 속성과 name속성만 알고 있으면 될것 같습니다.

1)님이 물어보신 HTTP-EQUIV 속성 은..

이름과 값의 쌍으로 이루어지는데 실제 문서를 보내기 전에 브라우저에 보낼 MIME (각 문서의 타입)문서 헤더에 이름/쌍 값을 포함시킬것을 서버에 지시하는 것입니다.

HTTP-EQUIV 속성에는 Content-Type, Refresh, Expires 속성이 있습니다.

HTTP-EQUIV="Content-Type" - 웹문서의 언어를 설정합니다.

HTTP-EQUIV="Refresh" - 문서를 자동으로 업데이트 합니다.

HTTP-EQUIV="Expires" - 문서의 유효기간을 지정합니다.

콘텐트 타입의 사용예: <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=euc-kr">

-콘텐트 타입은 드일위버나 어데터 프로그램에서 페이지를 생성하면 자동으로 첨부되어지는 메타 테그인데 만약 이 테그가 들어가지 않는다면 간혹 홈페이지 글이 다른 언어로 깨어지거나 변형되어 집니다.이유는 익스플러러에서 콘텐트 타입을 인식하지 못했기 때문이죠.

콘텐트 타입은 언어마다 여러가지 있습니다.

한국어는 charset=euc-kr 입니다.

리프레시 업데이트 사용예: <meta http-equiv="REFRESH" content="15;URL=http://galaxy.channeli.net/jakalky/sitemap.htm">

-홈페이지를 방문하고 자동으로 다름 페이지로 이동하게 할때 사용합니다.

"몇 초후에 자동으로 어디로 이동합니다"라는 것으로 많이 사용합니다.

문서의 유효기간 사용예: <META HTTP-EQUIV="expires" CONTENT="Sun, 30 Aug 1998 09:32:45 GMT">

-보안에 관계되는 문서 같은 경우 한번 보고 나면 문서가 파기되며
다시 보려고 하는경우 리로드해야만 보이는 웹문서를 보신 기억이 있을겁니다.
보통 멤버쉽으로 운영되는 웹사이트에서 개인 프로필을 본다음 다른 사이트로
갔다가 브라우저의 back버튼을 이용해서 프로필 화면으로 다시 와보면
파기된 문서라는(Expires) 메세지를 받게 되는데 이런경우가 해당됩니다.

GMT를 사용해서 표준시각으로 파기될 날짜를 지정할수도 있습니다.

2)HTTP-EQUIV 속성외에 META 테그에 대한 속성에는 NAME 속성 이 있습니다.

name과 content 로 이루어지는데 키워드를 알려주거나 페이지 저작자등의 속성을 알려주는것입니다.

name의 속성에는 keywords,subject,description등이 있습니다.

NAME="Description" - 문서의 요약이 들어갑니다.

NAME="Keywords" - 검색어를 입력하며 각 검색어는 ,(콤마)로 분리되야 합니다.

NAME="Author" - 페이지 제작자를 적습니다. 저작권에 관한 부분이라고 생각하셔도 됩니다.

NAME="subject"-홈페이지의 제목을 정합니다.어떠한 주제를 다루느냐 하고 입력해놓은 부분입니다..

데스크립션의 사용예: <META name="Description" content="html의 모든것,메타 테그의 상세한 설명!" >

-name의 description옵션입니다.
이는 검색엔진이 해당하는 페이지를 찾고나서 간략한 요약을 표시해 줄때 뜨는 내용이죠..
그 내용은 content안의 글이 나오게 됩니다...
따라서 자신의 홈페이지에 대해 가장 알맞고 효과적인 설명을 해줘야 겠습니다.

지금은 잘 쓰이지 않습니다.

키워드의 사용예: <META NAME="Keywords" CONTENT="HTML, tags, reference, attributes, 태그강좌,">

-가장 중요한 부분입니다..
자신의 홈페이지를 찾을때 해당하는 검색어를 지정해주는 내용입니다.
name의 keyword옵션이 바로 그러한 검색어를 지정해주는 기능을하죠..
content란에는 해당하는 검색어를 넣어야 합니다.

하지만 지금은 검색엔진에서 잘쓰이지 않습니다.

author의 사용예: <NAME="Author" CONTENT="hyunjung,Kim">

-이 페이지를 만든이의 이름을 넣습니다.

잘쓰이지 않습니다.

서브젝트의 사용예: <META name="Subject" content="메타 테그">

-해당하는 페이지에 관한 제목을 설정하는 부분이죠..
어떠한 주제를 다루느냐 하고 입력해놓은 부분입니다..
검색 로봇이 사용합니다.

지금은 잘쓰이지 않습니다.

3)charset 속성은 인터넷 익스플로러만 제공하는데 이 속서으이 값은 문서에서 사용하는 문자셋의 이름입니다. 되도록 이 속성대신에 http-equiv와 content 속성을 사용할것을 권장하는군요.

4)schame는 이 속성을 사용하여 속성의 값을 해석할때 사용할수 있는 방법을 명시할수 있습니다. 이 방법은 <head>의 프로파일 속성에서 (이 문서을 더 잘 설명해 줄수 있는 관련된 프로파일의 URL) 지정한 프로파일에 정의되 있어야 합니다.

결론-

현재 검색엔진에 홈페이지를 검색하는 방식은 메타 테그를 잘 이용하지 않기 때문에 과거와 달리 현재는 거의 신경을 쓰지 않습니다.

키워드를 넣는다거나 데스크립션과 서브젝트는 네어버,야후에 홈페이지를 등록할때 프로파일과 안내문으로 대신하기 때문이죠.

다만 HTTP-EQUIV의 refresh나 Content-Type, Expires등은 필요에 의해서 쓰입니다.

http://kin.naver.com/detail/detail.php?d1id=1&dir_id=109&eid=feotkgqXdt2nTQwAv2p5aU5jqr6wdnjY&qb=uN7FuMXCsdcgsMu79g==&pid=fLVM9woi5Thsstfart0sss--219571&sid=SNsO9%40L-2kgAABSFqVU

저작자표시 비영리 (새창열림)

Posted by 갓리버리

탭인텍스

보통 로그인을 할때 아이디 입력하고 탭키눌러 패스워드 입력하고

엔터를 많이 친다.
그런데 아이디 입력하고 탭키 눌렀더니 엄한곳에 커서가 이동하는

경우가 있는데 이건 table 안의 tr, td 에 따라 순차적으로 이동하는

html 태그의 습성이므로 이럴때 사용하라고 있는것이 tabindex 라

는 태그다.

사용방법 예)

HTML코드:

<tr>
   <td>아이디</td>
   <td><input type=text name=name tabindex=1></td>
</tr>
<tr>
   <td>비밀번호</td>
   <td><input type=password name=passwd tabindex=2></td>
</tr>

tabindex 의 값을 1,,,2,,,,3,,,으로 주선 탭키를 누를때마다 1번부터

순차적으로 이동을 한다.

저작자표시 비영리 (새창열림)

Posted by 갓리버리

노프레임사이트만들기

노프레임 사이트 만들기

3. 다음과 같은 형태의 사이트가 있다고 생각하여 봅시다.

3. 흔히 볼수 있는 레이아웃이며 nzeo.com 에서도 사용하고 있는 레이아웃입니다.

3. 위의 레이아웃같은 경우 총 3 부분으로 나누어 집니다.

상단 메뉴
외부로그인 좌측메뉴	내용 HTML 또는 제로보드

3. 이것을 HTML 로 표시하면 다음과 같습니다.

3. <table border=1 width=400>
3. <tr>
3. <tr><td align=center colspan=2>
<t3. r> <tr>상단 메뉴
3. <tr></td>
3. </tr>
3. <tr>
3. <tr><td width="97">
3. <tr><tr>외부로그인
3. <tr><tr><br>
3. <tr><tr>좌측메뉴
<tr><tr>
3. <tr><td width="287">
3. <tr><tr>내용 HTML<br>
3. <tr><tr>또는 제로보드</div>
3. <tr></td>
3. </tr>
3. </table>

3. 위를 보시면 파란색, 검은색, 빨간색으로 나누어 놓았습니다.

3. 즉 파란색 부분인 다음의 부분을 head.html 로 저장합니다.

3. <table border=1 width=400>
3. <tr>
3. <tr><td align=center colspan=2>
3. <tr> <tr>상단 메뉴
3. <tr></td>
3. </tr>
3. <tr>
3. <tr><td width="97">
3. <tr><tr>외부로그인
3. <tr><tr><br>
3. <tr><tr>좌측메뉴
<tr><tr>
3. <tr><td width="287">

3. 그리고 빨간색 부분을 foot.html 로 저장을 합니다.

3. <tr></td>
3. </tr>
3. </table>

3. 그럼 노프레임사이트를 만들때 이 head.html 파일과 foot.html 파일만 이용하면

3. 외부 레이아웃은 정해진 것입니다.

3. 물론 head.html 과 foot.html 의 경우 위의 모습은 모두 대략적인 형태입니다.

3. 그리고 마지막으로 head.html 의 외부로그인 에는 옆에 메뉴에서 외부로그인 사용법을 보시면 됩니다.

3. 실제 적용하기 위해서 제로보드에서는 게시판, 또는 그룹설정에서 다음과 같이 지정합니다.

3. 물론 ../ 라는 경로는 제로보드 보다 상위 디렉토리에 있다는 표시입니다.

3. 이때 주의하실점은 제로보드에서 head.html 파일을 읽어올때경로가 바뀐다는 것입니다.

3. 즉 <img src=a.gif> 등으로 이미지등을 호출하면 경로가 제로보드의 경로로 바뀌게 되어서

3. zb41/a.gif 으로 파일을 찾으려 하기 때문에 이미지가 깨어집니다.

3. http://abc.com/a.gif 나 /images/a.gif 등의 어디서나 확인할수 있는 절대 경로로 이미지등의 경로를

3. 지정해 주어야 합니다.

3. 일반 html 파일의 경우 다음과 같이 하면 됩니다.

3. 위의 소스는 head.html이나 foot.html이 같은 디렉토리에 있다는 가정입니다.

3. 이상은 노프레임 사이트 적용에 대한 매우 간단한 예입니다.

3. 수없는 시행착오를 거치면서 html에 대해서, 그리고 간단한 php에 대해서 공부를 하셔야지 원하는

3. 형태의 사이트를 만드실수 있습니다.

3. 제로보드는 조금 더 편리하게 하는 하나의 도구일 뿐이며 이를 사용해서 자신만의 개성을 나타내는 것은

3. 자신에게 달린 것입니다.

저작자표시 비영리 (새창열림)

Posted by 갓리버리

포지셔닝

static: 고정( top left의 값의 영향을 받지않는다.)

fixed: 스크롤을 내려도 움직이지 않는다.

relative: 부모의 위치값이 기준이되고

부모가 자식의 영역을 인정한다.

absolute:부모가 자식의 영역을 인정하지 않는다.

위치값을 주지않으면 부모의 종속값을 받는다.

	정적위치(static)	상대위치 (relative)	절대위치 (absolute)	고정위치(fixed)
기준위치	자기위치	자기위치	문서(html), 시작 위치는 static 기준으로 원래의 위치에 맞춰져 있음.	절대위치와 동일
부모의 크기	자식의 크기에 따라 변경	자식의 크기에 따라 변경되지만 위치를 변경함에 따라 부모의 크기가 변경되지는 않음	부모의 크기에 영향을 끼치지 않음	절대위치와 동일
자신의 크기	width:100%로 부모의 크기를 따름	width:100%로 부모의 크기를 따름	포함하고 있는 컨텐트의 크기 만큼 늘어남	절대위치와 동일
offset 사용(left,right.top,bottom)	불가	가능	가능	가능
스크롤	따라감	따라감	따라감	고정