WWW (3)
  1. 2011.11.17[HTML] Google 크롬을 활용한 HTML5 웹사이트 확인
  2. 2011.11.15[HTML] HTML5 설명 및 기본 마크업
  3. 2010.11.19[HTML 요소] H# 태그 - 제목 구성 방법
[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
[HTML 요소] H# 태그 - 제목 구성 방법
2010. 11. 19. 21:20웹이야기/웹/HTML

H#(H1 ~ H6) 태그 요소 설명

H# 태그는 문서에서 일반적으로 본문의 제목(Heading)을 지정하기 위해 사용하며, H1에서 H6까지 전부 6개의 항목이 있습니다. 기본적으로 볼드(Bold)체가 적용되고 H1이 가장 큰 제목을 나타내며, 가장 큰 글자로 표시합니다. 작성 시에는 body의 시작과 body 끝 사이에 포함되어야 하고 필요에 의해 여러 개의 제목으로 사용이 가능합니다.

H1 태그의 출현 횟수에 대해 HTML과 XHTML의 권고안에서 특별히 언급하지는 않지만, H1 태그는 그 문서의 큰 제목(타이틀)을 나타내기 때문에 원칙적으로 하나의 문서에 한 번만 지정해야 합니다. 하지만, H1 태그는 여러 섹션으로 이루어진 문서에는 여러 개의 H1 태그가 들어갈 수도 있습니다.

H1 ~ H6 태그 요소를 활용한 제목 구성 방법

보이는 글씨(폰트)의 크기(큰 크기 우선순위로 나열): [가장 큼] h1 > h2 > h3 > h4 > h5 > h6 [가장 작음] 위의 값은 기본 크기 값이며, Style Sheet(CSS)를 이용하여 사용자 임의의 글씨 크기로 수정할 수 있습니다.

다음과 같이 <body> 와 </body> 사이에 작성해야하며, <h1> 제목 </h1> 과 같이 사용합니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <title>view IT - http://viewit.kr</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  </head>
  <body>
    <h1>Heading 1 - h1 제목이 나타납니다.</h1>
    <h2>Heading 2 - h2 제목이 나타납니다.</h2>
    <h3>Heading 3 - h3 제목이 나타납니다.</h3>
    <h4>Heading 4 - h4 제목이 나타납니다.</h4>
    <h5>Heading 5 - h5 제목이 나타납니다.</h5>
    <h6>Heading 6 - h6 제목이 나타납니다.</h6>
  </body>
</html>

H1 ~ H6 태그 적용 내용 미리 보기

웹/HTML 관련 자료 더보기

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

파이어폭스(Firefox) 주소 명령 체계  (0) 2011.07.14
[폰트] 세리프(Serif)와 산세리프(Sans-Serif)의 차이점  (0) 2010.12.20
[HTML] HTML 문자 엔티티 및 ISO-8859-1 문자 세트  (0) 2010.12.16
[HTML 요소] meta 태그 - 웹 브라우저 렌더링 설정  (0) 2010.12.16
구글 크롬(Google Chrome) 주소 명령 체계  (0) 2010.12.16
 Comment,    Trackback

티스토리툴바