웹이야기 (23)
  1. 2011.11.17[HTML] Google 크롬을 활용한 HTML5 웹사이트 확인
  2. 2011.11.15[HTML] HTML5 설명 및 기본 마크업
  3. 2011.09.17[JavaScript] 티스토리 접속자를 2차 도메인으로 연결해주는 방법
  4. 2011.09.15인터넷 익스플로러(Internet Explorer)의 교차 사이트 스크립팅(XSS)4
  5. 2011.08.04티스토리에 구글 번역기(Google Translate Web Element) 설치 방법
[HTML] Google 크롬을 활용한 HTML5 웹사이트 확인
2011. 11. 17. 13:41웹이야기/웹/HTML

Google 크롬의 확장 프로그램으로 웹사이트가 HTML5 언어로 제작되었는지 알아볼 수 있습니다.

Google 크롬 웹 스토어 (Google Chrome Web Store)
  • • 크롬 웹 스토어는 구글에서 운영하는 운영하는 웹 기반 앱 스토어이며, 2010년 5월 19일 구글 I/O 컨퍼런스에 발표하여 2010년 12월 6일부터 운영중에 있습니다.
  • • 웹 스토어의 어플리케이션은 사용자가 Google 크롬, Google 크롬 OS에서 설치 및 실행을 할 수 있습니다.
  • • 웹 스토어의 어플리케이션은 HTML으로 제작되었으며, Google 크롬 브라우저를 기본으로 사용하고, 웹 스토어에 어플리케이션 등록과 설치의 비용은 무료입니다.

Google 크롬을 실행한 후 크롬 웹 스토어 (Chrome Web Store)로 접속합니다.

크롬 웹 스토어 검색창에 'html5 powerd'라고 입력한 후 엔터를 누릅니다. (검색이 진행됩니다.)

검색 결과에 'HTML5 Powerd' 어플리케이션이 보이면 'Chrome에 추가' 버튼을 눌러서 실행합니다.

설치 확인 창이 나오면 '설치'을 눌러서 설치를 진행합니다.

HTML5 Powered 확장 프로그램의 설치가 완료되면,
북마크(즐겨찾기) 아이콘 왼쪽에 HTML5 로고가 보여집니다.

HTML5 Powerd 확장 프로그램의 정보를 볼 수 있습니다.

크롬 확장 프로그램 관리자(명령어: chrome://settings/extensionSettings)에서
HTML5 Powerd가 설치된것을 확인하실 수 있습니다.

HTML5 언어로 제작된 제가 운영하는 Viewit 블로그에 접속한 화면입니다.
접속한 웹사이트가 HTML5 언어로 제작된 경우에는 HTML5 로고가 보여집니다.

HTML5 설명 및 기본 마크업 (Viewit)

'웹이야기 > 웹/HTML' 카테고리의 다른 글

[JavaScript] 웹 브라우저의 즐겨찾기 추가 스크립트  (1) 2012.05.08
[CSS] 초기화(Reset) 코드  (0) 2012.03.13
[HTML] HTML5 설명 및 기본 마크업  (0) 2011.11.15
인터넷 익스플로러(Internet Explorer)의 교차 사이트 스크립팅(XSS)  (4) 2011.09.15
파이어폭스(Firefox) 주소 명령 체계  (0) 2011.07.14
 Comment,    Trackback
[HTML] HTML5 설명 및 기본 마크업
2011. 11. 15. 16:20웹이야기/웹/HTML

HTML5 (Hypertext Markup Language; 하이퍼 텍스트 마크업 랭귀지)

HTML5 기본 설명
  • • HTML5는월드 와이드 웹(WWW; HTML 4.01, XHTML 1.0, DOM Level 2 HTML)에 대한 차기 버전의 마크업 언어입니다.
  • • 현재 자주 사용되는 Adobe Flash, Microsoft Silverlight, Sun Java FX와 같은 플러그인의 애플리케이션(Active X 등)을 대처하기 위함을 목적으로 하고있습니다.

HTML5 기본 마크업
  • • 구조적인 요소(div 대체, header 등) 및 멀티미디어 요소(플러그인 없이 멀티미디어 재생, audio 등)가 추가되었습니다.
  • • 일부 요소의 의미가 변경 및 문서 선언이 간소화 되었습니다.
  • • HTML5 기본 마크업 코드는 아래의 내용을 참조하시기 바랍니다.

<!DOCTYPE html>
<html lang="ko">
　<head>
　　<meta charset="utf-8"/>
　　<title>제목을 입력하세요.</title>
　</head>
<body>
　<header>header 값</header>
　<nav>nav 값</nav>
　<article>
　　<section>
　　　section 값
　　</section>
　</article>
　<aside>aside 값</aside>
　<footer>footer 값</footer>
　</body>
</html>

HTML 코드 문서 다운로드

[HTML] HTML5 기본 마크업.txt

웹/HTML 관련 팁 더보기 (Viewit)

'웹이야기 > 웹/HTML' 카테고리의 다른 글

[CSS] 초기화(Reset) 코드  (0) 2012.03.13
[HTML] Google 크롬을 활용한 HTML5 웹사이트 확인  (0) 2011.11.17
인터넷 익스플로러(Internet Explorer)의 교차 사이트 스크립팅(XSS)  (4) 2011.09.15
파이어폭스(Firefox) 주소 명령 체계  (0) 2011.07.14
[폰트] 세리프(Serif)와 산세리프(Sans-Serif)의 차이점  (0) 2010.12.20
 Comment,    Trackback
[JavaScript] 티스토리 접속자를 2차 도메인으로 연결해주는 방법
2011. 9. 17. 20:22웹이야기/티스토리

티스토리 접속자를 2차 도메인으로 자동으로 페이지를 전환하는 방법

JavaScript를 이용하여 ID.Tistory.com 접속자를 2차 도메인 페이지로 접속하게 하는방법입니다.

아래 주황색의 글씨에 보이는 항목을 수정하여 사용 가능하며, <head> 와 </head> 사이에 코드를 삽입해야 합니다.

<script type="text/javascript">
<!--
//자신의 티스토리 주소 입력
var url1 = 'viewit.tistory.com';

//자신의 독립 도메인 입력
var url2 = 'viewit.kr';
var online = document.URL;

if(online.match(url1)) document.location.href = online.replace(url1,url2);

//-->
</script>

JavaScript 코드 문서 다운로드

[Javascript] 티스토리 2차 도메인 자동연결.txt

티스토리 관련 팁 더보기 (Viewit)

'웹이야기 > 티스토리' 카테고리의 다른 글

[JavaScript] 클릭 한번으로 고유주소(URL) 복사되게 하는 방법  (0) 2012.03.05
티스토리 검색 결과, 카테고리 글, 태그 리스트에 애드센스 삽입하는 방법  (0) 2012.03.04
티스토리에 구글 애드센스 (AdSense) 섹션 타겟팅 적용하는 방법  (0) 2012.03.03
티스토리에 구글 번역기(Google Translate Web Element) 설치 방법  (0) 2011.08.04
[JavaScript] 티스토리 기본 단축키 및 사용자 단축키 지정 방법  (0) 2010.11.21
 Comment,    Trackback
인터넷 익스플로러(Internet Explorer)의 교차 사이트 스크립팅(XSS)
2011. 9. 15. 22:38웹이야기/웹/HTML

교차 사이트 스크립팅(XSS: Cross-Site Scripting)의 정의와 설명

교차 사이트 스크립팅(XSS)은 사이트 간 스크립팅 또는 크로스 사이트 스크립팅으로도 불립니다.

웹 애플리케이션에서 많이 나타나는 취약점의 하나로, 웹사이트 관리자가 아닌 이가 웹 페이지에 클라이언트 사이드 스크립트를 삽입하여 다른 사용자가 이를 실행하게끔 허용하는 취약점입니다.

Microsoft Internet Explorer 8 이상에서는 자동으로 이러한 악의적인 코드를 차단해 알림창이 보여주며, 사이트의 특정 페이지가 # 으로 표시되어 정상적으로 페이지를 볼 수 없게 합니다.

위키백과 '사이트 간 스크립팅(XSS)'

Internet Explorer에서 교차 사이트 스크립팅(XSS: Cross-Site Scripting)

다음은 Internet Explorer에서 교차 사이트 스크립팅(XSS) 기능을 해제하는 방법입니다.

교차 사이트 스크립팅(XSS) 기능은 보안 강화 기능이므로, 특별한 상황이 아니라면 해제하지 않도록 하는 것이 좋습니다.

특정 웹사이트 접속을 위하여 기능을 해제해야 하는 상황이라면, 이용 후에는 다시 기능을 작동시켜야 안전합니다.

위의 설명해드린것과 같이, 악의적인 코드가 삽입된 웹페이지에 접속하게 되면 위와 같이 경고 메시지가 나타나게 됩니다.

1. 인터넷 익스플로러(Internet Explorer)를 실행한 상태에서 톱니바퀴 아이콘(인터넷 옵션) (메뉴 > 도구 > 인터넷 옵션)을 클릭하여 인터넷 옵션을 실행합니다.

2. 보안 탭에서 '사용자 지정 수준(C)'을 클릭합니다.

3. '보안 설정 - 인터넷 영역' 창이 실행되면 스크롤을 아래쪽으로 내려 'XSS 필터 사용'을 찾아서, '사용 안함'에 체크하고 확인을 눌러줍니다.

4. 위와 같은 경고 메시지 창이 나타나도 무시하고 '예(Y)'를 클릭하여 위에서 선택한 사용 안함의 값을 적용합니다.

'웹이야기 > 웹/HTML' 카테고리의 다른 글

[HTML] Google 크롬을 활용한 HTML5 웹사이트 확인  (0) 2011.11.17
[HTML] HTML5 설명 및 기본 마크업  (0) 2011.11.15
파이어폭스(Firefox) 주소 명령 체계  (0) 2011.07.14
[폰트] 세리프(Serif)와 산세리프(Sans-Serif)의 차이점  (0) 2010.12.20
[HTML] HTML 문자 엔티티 및 ISO-8859-1 문자 세트  (0) 2010.12.16
 Comment,    Trackback
티스토리에 구글 번역기(Google Translate Web Element) 설치 방법
2011. 8. 4. 12:54웹이야기/티스토리

티스토리에 Google에서 제공하는 언어 번역기를 설치할 수 있습니다.

국내 거주 외국인 또는 외국에서 방문하는 방문객을 위한 언어 번역기를 설치해보세요.

구글 번역기(Google Translate Web Element) 설치 방법

다음의 설명을 확인하시기 바랍니다.
  • • 다음의 구글 번역기 사이트로 방문합니다. Google Translate Web Element
  • • 스텝 1: 번역 요소의 유형 - (a) 전체 웹페이지를 번역 추가 (b) 웹 페이지의 섹션으로 번역 추가
  • • 스텝 2: 언어 선택 - 웹페이지의 언어 선택. (※ 한국어로 운영중이니 'Korean'을 선택하시면 됩니다.)
  • • 스텝 3: 번역 언어와 번역 도구 모양 등을 지정하여 설정할 수 있습니다.
  • - 번역 언어(Translation languages): 모든 언어(All languages) 선택
  • - 표시 방법(Display mode): 인라인(Inline) 선택 (※ 티스토리의 사이드바에 설치하기 위함입니다.)
  • - 고급(Advanced): 'Automatically display the translation banner for the users speaking other languages than your page language (자동 페이지 언어 이외의 언어를 사용하는 사용자를위한 번역 배너를 표시)' 항목에 체크합니다. (※ 그외 항목은 선택하지 않아도 됩니다.)
  • • 스텝 4: 번역기 코드 복사와 티스토리의 스킨에 적용하여야 합니다.
  • - 티스토리의 관리자 페이지 > 스킨 > 'HTML/CSS 편집' 페이지로 이동합니다.
  • 번역기 도구를 설치할 적당한 위치를 지정하여 코드를 삽입합니다.

<s_sidebar_element>
<!-- Google 번역기 -->
<div id="google_translate_element"></div>
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'ko'
}, 'google_translate_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</s_sidebar_element>

※ 스킨(skin.html)의 사이드바 위치:
<s_sidebar_element>
블로그 이미지, 카테고리 등의 각종 사이드바 모듈
</s_sidebar_element>

HTML 코드 문서 다운로드

[Javascript] Google 번역기 코드.txt

구글 번역기를 사이드바에 설치 방법
  • • 스킨(skin.html)에 코드를 적용하고 다시 스킨 > 사이드바 설정으로 이동합니다.
  • • 사이드바의 기본 모듈에서 Google 번역기를 선택하고 '사이드바 꾸미기'로 추가하고 적용하면 됩니다.
  • • Viewit 블로그에 현재 적용된 화면입니다.

티스토리 관련 팁 더보기 (Viewit)

'웹이야기 > 티스토리' 카테고리의 다른 글

[JavaScript] 클릭 한번으로 고유주소(URL) 복사되게 하는 방법  (0) 2012.03.05
티스토리 검색 결과, 카테고리 글, 태그 리스트에 애드센스 삽입하는 방법  (0) 2012.03.04
티스토리에 구글 애드센스 (AdSense) 섹션 타겟팅 적용하는 방법  (0) 2012.03.03
[JavaScript] 티스토리 접속자를 2차 도메인으로 연결해주는 방법  (0) 2011.09.17
[JavaScript] 티스토리 기본 단축키 및 사용자 단축키 지정 방법  (0) 2010.11.21
 Comment,    Trackback

티스토리툴바