1. 우선 검색엔진이 웹페이지를 발견하기 쉽게 히는 작업이 필요하다. 매트 커츠는 검색엔진 최적화를 위해 검색엔진이 웹페이지를 수집하도록 하라고 조언했다. 방법은 이렇다. 웹 게시자는 robots.txt(로봇.txt) 파일을 만들어 웹서버의 루트 디렉토리에 배치한다. 로봇.txt는 인터넷 검색엔진 배제표준으로, 사이트의 어느 부분을 구글 색인에서 제외해야 하는지 혹은 수집해야 하는지를 알린다.
이 작업이 단순해 보이지만, 이게 없다면 검색 엔진이 해당 웹페이지를 수집하는 데 어려움을 겪는다고 매트 커츠는 설명했다. 일단은 검색엔진이 접근하게는 만들어야 한다는 이야기다. 구글코리아는 국내 웹사이트는 대체로 이 작업을 하지 않아, 검색엔진이 웹페이지를 수집하지 못하는 경우가 많다고 설명을 덧붙였다.
정부 관련 웹사이트 중에는 국세청, 대법원, 방송통신위원회, 문화재청, 외교통상부, 정부민원서비스, 고용노동부 워크넷, 보건복지부, 우정사업본부, 국립국어원, 국사편찬위원회 등이 검색엔진의 접근을 막아둔 곳이다.
2. 표준 HTML을 사용하는 것도 도움이 된다. 물론 표준 HTML은 검색엔진 최적화뿐 아니라, 다양한 기기와 웹브라우저에 웹사이트를 보여주는 데에도 유용하다. 사람들에게 보여주기 위해 이트를 운영한다면 표준 HTML을 적용해 웹사이트를 운영하라는 이야기다. 액티브X나 AJAX, 플래시를 반드시 사용해야 한다면 가장자리 링크는 HTML로 만드는 게 좋다고 매트 커츠는 강조했다.
3. 웹페이지에 제목을 입력하는 것을 잊지 말아야 한다. 매트 커츠는 짧게 보이는 검색 결과는 웹페이지 제목과 메타디스크립션에 의해 결정되는 경우가 많다고 말했다. 그런데 국내 웹사이트는 웹페이지 제목이 없거나 웹페이지마다 제목이 같다고 매트 커츠는 꼬집었다. 웹페이지에 제목을 입력하고 메타디스크립션을 만드는 것은 상점이 쇼윈도에 물건을 멋지게 전시하는 것에 비교할 수 있다. 웹페이지 제목이 매력적이고 유혹적이라면 클릭을 부른다는 게 매트 커츠의 설명이다.
구글이 운영하는 웹마스터 페이지를 방문하면 “검색결과의 첫 번째 행은 웹페이지의 제목”이라는 말이 있다. 웹페이지의 쇼윈도인 검색 결과에 웹페이지 정보를 잘 포장해서 보여주는 게 중요하다는 이야기다.
4. 글을 잘 활용해야 한다. 이 말은 3번과도 이어지는 설명이다. 검색엔진은 특정 웹페이지에 대한 정보를 웹페이지 제목, 메타디스크립션, 웹페이지 내 글로 파악한다. 특히 웹페이지를 이미지로 꾸밀 때에도 설명글(알트텍스트)은 필수다. 해당 이미지가 무엇에 대한 것인지는 글로 써야 검색엔진이 파악하기 좋다. 이미지와 동영상 파일을 검색엔진이 이해하는 게 아니라, 거기에 쓰인 설명을 바탕으로 검색 결과에 노출할 지를 정한다.
메타디스크립션이나 웹페이지 제목, 이미지 설명 등을 입력할 때는 사람들이 검색할 때 자주 쓰는 단어를 유념해야 한다고 매트 커츠는 강조했다. “미국에서는 USB 메모리를 메모리스토리지, 플래시드라이브, 섬드라이브 등 다양한 이름으로 부르는데 USB를 파는 쇼핑몰이 이 중에서 하나의 이름만 설명에 넣진 않을 것”이라는 설명은 웹페이지의 설명글이 얼마나 중요한지를 보여준다. 특히 페이지 내 정보가 글로도 잘 설명된 웹사이트는 시각장애인이 웹사이트를 둘러보기에도 좋다.
5. 매트 커츠는 웹상에 링크가 많이 돌아다니는 게 좋다고 말했다. 블로그를 쓰거나 소셜미디어에 웹페이지를 소개하는 것도 방법이다. 물론 링크를 여러 웹페이지에 심으려는 노력이 과도해 스팸이 되면 안 된다고 매트 커츠는 설명했다.
6. 마지막으로, 매트 커츠는 웹표준을 다시 한 번 강조했다. 인터넷 익스플로러만 지원하는 웹사이트가 있다고 치자. 매트 커츠는 “인터넷 익스플로러 점유율은 80%로 매우 높은 수준이지만, 인터넷 익스플로러만 지원한다면 전체 방문자의 20%는 배제하는 셈”이라며 “웹사이트는 웹브라우저에 상관 없이 구동돼야 한다”라고 말했다.
별로 얼마 없는 정보지만,
그래도 다른나라에서 내 블로그를 보고 정보를 얻어가는게 너무 좋다
댓글을 달아도 알아볼순 없지만 그래도 너무좋다 !
그냥 좋다고….ㅋㅋㅋㅋㅋㅋ
웹표준수업때 받은 자료를 블로그에 빨리 정리하고싶다
왜 내가 학원다닐때 대충했는지 모르겠다
구글도 좋고 워드프레스도 좋다(잘 사용할줄은 모르지만 …..)
뭐 매일 만지다보면 나아지겠지
어쨋든 우선취직부터하고 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
정리하자고!!ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
아-_-근데 학교 물리치료과 썼다고 부모님한테 어떻게 말씀드리지?
안그래도 잘다니던 직장때려친것도 모르실텐데…흠…………..ㅎㅎㅎ
빨리 위젯사용하는법도 알아서
이제 사진들도 여기다가 올려야겠다 ficker인가?? 빨리달아야지
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
댓글을 보니 영어공부도 너무하고싶어지네 하하하하하하하하
앞으로도 수고하자고!! 송연화씨~~~
http://html.nhndesign.com/blog/47789#pic5 참고
출처 : http://fulgidstone.tistory.com/50
1.
Ext js로 window바탕화면형 홈페이지를 만들었는데 다른 div를 열었을 때 flash동영상이 가려지지 않고 위에 올라타버리는 문제가 발생
2.
object태그나 embed태그에 z-index를 아무리 낮게 잡아주어도 문제 미해결
:: select태그를 z-index를 아무리 낮추어잡아도 다른 div태그보다 상위에 나타나는 것과 비슷한 상황
3.
<object width=”480″ height=”385″>
<param name=”allowFullScreen” value=”true”></param>
<param name=”allowscriptaccess” value=”always”></param>
<param name=”wmode” value=”opaque”></param>
<param name=”movie”
value=”http://www.youtube.com/p/A27CFEDE8D8D1FFA&hl=ko_KR&fs=1″>
</param>
<embed src=”http://www.youtube.com/p/A27CFEDE8D8D1FFA&hl=ko_KR&fs=1”
type=”application/x-shockwave-flash” width=”480″ height=”385″ allowscriptaccess=”always”
allowfullscreen=”true” wmode=”Opaque”></embed>
</object>
4.
wmode속성 삽입
- mode속성을 주었더니 문제없이 javascript로 생성된 div가 정상적으로
embeded된 동영상 위에 올라감. (동영상이 가려짐)
원인 : 유튜브에서 제공하는 동영상 태그엔 이 속성값이 들어가 있지 않아서 발생된 문제
*** 크로스 브라우저를 위해 param태그에도 wmode값을 줬음
5. wmode 속성
div등 html태그중에서 범위를 지정해줄 수 있는 태그들은 포토샵등의 프로그램에서의 레이어와 비슷한 개념을 가짐.
ex1)
포토샵에서 해당 레이어를 상위에 위치시킬려면 레이어창에서 해당 레이어를 다른 레이어보다 위에 두면됨.
ex2)
html태그에선 z-index속성을 이용해서 해당 태그를 상위 혹은 하위에 놓을 수
있음.
그런데. embed된 동영상의 경운 z-index가 적용되지 않음.
다만, embed태그에는 wmode라는 속성이 있어서 이 것을 이용하면 걱정없이 동영상의 위치순서를 지정할 수 있음.
wmode은 세가지 값을 가집니다.
(1) Window – 기본 값입니다.
모든 객체보다 상위에 위치. embed된 동영상이 어떤 div등 html태그보다 상위에 위치하도록 설정
(2) Opaque – embed된 동영상이 어떤 div등 html태그보다 하위에 위치하도록 설정
즉, 해당 위치에 div등 html태그요소가 있을 때 동영상이 가려지겠금 설정
(3) Transparent – Opaque와 비슷 Opaque와 다른 점은 투명도를 줄 수 있음
즉, 완전히 가려지지 않고 일정 수치값만큼 보일 수 있게금 할 수 있음
vmode를 사용하면 다른 태그와 겹칠 때 발생되는 문제를 해결
http://www.css3maker.com/
http://jsdo.it/login/?redirect=%2Fcode%2Fnew
http://www.clearboth.org/css3_2_by_isdn386/
<META NAME=”Generator” CONTENT=”페이지 제작툴”>
<META NAME=”Author” CONTENT=”제작자”>
<META NAME=”Keywords” CONTENT=”컴색 키워드”>
<META NAME=”Description” CONTENT=”페이지의 요약설명”>
<META NAME=”Copyright” CONTENT=”저작권 정보”>
<META NAME=”Subject” CONTENT=”홈페이지주제 입력”>
<META NAME=”Title” CONTENT=”홈피이름”>
<META NAME=”Publisher” CONTENT=”만든단체 또는 회사”>
<META NAME=”Other Agent” CONTENT=”홈피 책임자”>
<META NAME=”Classification” 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 HTTP-EQUIV=”content-type” CONTENT=”text/html; CHARSET=utf-8″> <!– /문자인코딩/ –>
<META HTTP-EQUIV=”Refresh” CONTENT=”60″> <!– //60초 마다 새로고침 –>
<META HTTP-EQUIV=”Refresh” CONTENT=”3;url=http://stepo.tistory.com/”> <!– //주소로 3초후 이동 –>
<META HTTP-EQUIV=”Pragma” CONTENT=”no-cache”> <!– //캐쉬가 저장 되지 않게 함 –>
<META HTTP-EQUIV=”Expires” CONTENT=” Mon, 08 Sep 2011 12:00:00 GMT”> <!– //캐쉬 만료일 –>
<META HTTP-EQUIV=”Imagetoolbar” CONTENT=”no”>
<!– //익스플로러에서 이미지 마우스 오버시 이미지툴바 표시 안함 –>
<META HTTP-EQUIV=”Page-Enter” CONTENT=”revealtrans(duration=1, transition=23)”>
<!– //페이지 들어갈 때 장면 전환 효과 –>
<META HTTP-EQUIV=”Page-Exit” CONTENT=”revealtrans(duration=1, transition=23)”>
<!– //페이지 나갈 때 장면 전환 효과 –>
<!– 각 옵션의 선택사항 :
Page-Enter : 페이지 들어갈 때 효과 줌
Page-Exit : 페이지 나올 때 효과 줌
blendtrans : 점점 밝게 또는 점점 어둡게 나타나도록 설정
revealtrans : 문서 전환 효과 지정
duration : 시현 시간 지정
transition=0 사각형 작아지기
transition=1 사각형 커지기
transition=2 원 작아지기
transition=3 원 커지기
transition=4 위에서 아래로
transition=5 아래이서 위로
transition=6 왼쪽에서 오른쪽
transition=7 오른쪽에서 왼쪽
transition=8 수직 블라인드
transition=9 수평 블라인드
transition=10 체크무늬 왼쪽에서 오른쪽으로
transition=11 체크무늬 위에서 아래로
transition=12 랜덤 뿌리기
transition=13 수직 2등분 가운데로 모움
transition=14 수직 2등분 바깥으로 퍼짐
transition=15 수평 2등분 가운데로 모움
transition=16 수평 2등분 바깥으로 퍼짐
transition=17 45도 오른쪽 위에서 왼쪽 아래로
transition=18 45도 오른쪽 아래에서 왼쪽위로
transition=19 -45도 왼쪽 위에서 오른쪽 아래로
transition=20 -45도 왼쪽 아래에서 오른쪽 위로
transition=21 수평 랜덤
transition=22 수직 랜덤
transition=23 1~22 랜덤 선택
–>
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5,
h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong,
sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td
{margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit;
font-size:100%; font-family:inherit; vertical-align:baseline;}
/* remember to define focus styles!!*/
:focus {outline:0;}
body {line-height:1; color:black; background:white;} 한글로 할때는 line-height:1.2로 준다
ol, ul{line-style:none;}
/* table still need ‘cellspacing=”0″‘ in the markup */
table {border-collapse: separate; border-spacing:0;}
caption, th, td {text-align:left; font-weight:nomal;}
blockquote:before, blockquote:after, q:before, q:after {content: “”;}
blockquote,q {quotes:”" “”;}
