All about {Web}

HTML5 - New Structural Tags : <footer>

Web Design/HTML & HTML 52018. 4. 28. 14:07

HTML5 - New Structural Tags ( 구조 태그 ) :  <footer></footer>
01. <section></section>
02. <article></article>
03. <aside></aside>
04. <header></header>
05. <hgroup></hgroup>
06. <footer></footer>
07. <nav></nav>

06. <footer></footer>
footer 요소는 보통 작성자, 연관된 문서에 대한 링크, 저작권 정보, 기타 흡사한 정보를 담습니다.

source )
<!DOCTYPE html>
<html>
<body>
<footer>
  <p>Posted by: Hege Refsnes</p>
  <p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.</p>
</footer>
<p><strong>Note:</strong> The footer tag is not supported in Internet Explorer 8 and earlier versions.</p>
</body>
</html>

result )


저작자표시 (새창열림)

'Web Design > HTML & HTML 5' 카테고리의 다른 글

[HTML] Tag ; a, abbr, acronym  (0) 2018.05.07
HTML5 - New Structural Tags : <nav>  (1) 2018.04.28
HTML5 - New Structural Tags : <header>  (0) 2018.04.28
HTML5 - New Structural Tags : <hgroup>  (0) 2018.04.28
HTML5 - New Structural Tags : <aside>  (0) 2018.04.28

HTML5 - New Structural Tags : <header>

Web Design/HTML & HTML 52018. 4. 28. 14:03

HTML5 - New Structural Tags ( 구조 태그 ) :  <header></header>
01. <section></section>
02. <article></article>
03. <aside></aside>
04. <header></header>
05. <hgroup></hgroup>
06. <footer></footer>
07. <nav></nav>

04. <header></header>
- header 요소는 소개 또는 내비게이션 그룹을 나타냅니다.
- header 요소는 제목 요소를 포함하지 않아도 됩니다.
- 섹션의 차례나 검색 폼, 관련 로고 등을 감싸는 용도로도 사용할 수 있습니다.
- header 요소는 섹션 컨텐츠는 아닙니다.

source)
<!DOCTYPE html>
<html>
<body>
<article>
  <header>
    <h1>Most important heading here</h1>
    <h3>Less important heading here</h3>
    <p>Some additional information here.</p>
  </header>
  <p>Lorem Ipsum dolor set amet....</p>
</article>
</body>
</html>

result)

Most important heading here

Less important heading here

Some additional information here.
Lorem Ipsum dolor set amet....



저작자표시 (새창열림)

'Web Design > HTML & HTML 5' 카테고리의 다른 글

HTML5 - New Structural Tags : <nav>  (1) 2018.04.28
HTML5 - New Structural Tags : <footer>  (0) 2018.04.28
HTML5 - New Structural Tags : <hgroup>  (0) 2018.04.28
HTML5 - New Structural Tags : <aside>  (0) 2018.04.28
HTML5 - New Structural Tags : <article>  (0) 2018.04.28

HTML5 - New Structural Tags : <hgroup>

Web Design/HTML & HTML 52018. 4. 28. 12:59

HTML5 - New Structural Tags ( 구조 태그 ) :  <hgroup></hgroup>
01. <section></section>
02. <article></article>
03. <aside></aside>
04. <header></header>
05. <hgroup></hgroup>
06. <footer></footer>
07. <nav></nav>

05. <hgroup></hgroup>
heading group : hgroup 요소는 섹션의 제목을 나타냅니다. 이 요소는 섹션의 제목이 몇 개의 레벨을 가질 때(단계를 가질 때, 예를 들어 부제목이나 태그 영역tagline 등)h1~h6 요소들을 그룹짓기 위해 사용됩니다.

source)
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>hgroup</title>
  </head>
  <body>
    <hgroup>
      <h1>대제목</h1>
      <h3>(부제목)</h3>
    </hgroup>
    <p>내용</p>
    <section>
    <h2>중제목1</h2>
      <article>
        <h4>소제목1</h4>
        <p>내용</p>
      </article>
      <article>
        <h4>소제목2<h4>
        <p>내용</p>
      <article>
    </section>
    <section>
      <hgroup>
        <h2>중제목2</h2>
        <h3>(부제목)</h3>
      </hgroup>
      <article>
        <h4>소제목1<h4>
        <p>내용</p>
      </article>
      <article>
        <h4>소제목2</h4>
        <p>내용</p>
      </article>
    </section>
  </body>
</html>


저작자표시 (새창열림)

'Web Design > HTML & HTML 5' 카테고리의 다른 글

HTML5 - New Structural Tags : <footer>  (0) 2018.04.28
HTML5 - New Structural Tags : <header>  (0) 2018.04.28
HTML5 - New Structural Tags : <aside>  (0) 2018.04.28
HTML5 - New Structural Tags : <article>  (0) 2018.04.28
HTML5 - New Structural Tags : <section>  (0) 2018.04.26

HTML5 - New Structural Tags : <aside>

Web Design/HTML & HTML 52018. 4. 28. 11:56

HTML5 - New Structural Tags ( 구조 태그 ) :  <aside></aside>
01. <section></section>
02. <article></article>
03. <aside></aside>
04. <header></header>
05. <hgroup></hgroup>
06. <footer></footer>
07. <nav></nav>

03. <aside></aside>
aside 요소는 주위 요소의 내용과 접점을 이루는 섹션으로, 보통 사이드바 형태로 표현됩니다.
인용구, 광고, 네비게이션 용도로 사용할 수 있지만, 단순한 삽입구에 사용하는 것은 적합하지 않습니다.
source )
<!DOCTYPE html>

<html>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<aside>
   <h4>Code is Poetry</h4>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</aside>
<p><strong>Note:</strong> The aside tag is not supported in Internet Explorer 8 and earlier versions.</p>
</body>
</html>

result )
Lorem ipsum dolor sit amet, consectetur adipisicing elit

Note: The aside tag is not supported in Internet Explorer 8 and earlier versions.



저작자표시 (새창열림)

'Web Design > HTML & HTML 5' 카테고리의 다른 글

HTML5 - New Structural Tags : <header>  (0) 2018.04.28
HTML5 - New Structural Tags : <hgroup>  (0) 2018.04.28
HTML5 - New Structural Tags : <article>  (0) 2018.04.28
HTML5 - New Structural Tags : <section>  (0) 2018.04.26
HTML - META tag  (0) 2018.04.26

HTML5 - New Structural Tags : <article>

Web Design/HTML & HTML 52018. 4. 28. 01:57

HTML5 - New Structural Tags ( 구조 태그 ) :  <article></article>
01. <section></section>
02. <article></article>
03. <aside></aside>
04. <header></header>
05. <hgroup></hgroup>
06. <footer></footer>
07. <nav></nav>

02. <article></article>
article의 사전상 의미가 신문이나 잡지에서 기사를 뜻하는 것처럼 article태그 역시 웹상의 실제 내용을 말한다. 보통 블로그의 포스트나 웹사이트의 내용, 사용자가 등록한 코멘트, 독립적인 웹콘텐츠 항목이 모두 여기에 해당한다.
<section>과 <article>태그를 사용하는데 있어 자주 혼동하곤 하는데, 독립적으로 배포하거나 재사용하더라도 완전히 하나의 콘텐츠가 된다면 article태그를 쓰면 된다.
article태그에 비해 section태그는 콘텐츠 기준이라기 보다 헤더와 섹션, 푸터와 구분하기 위한 기능상의 구분이다. 즉, section태그를 이용해 콘텐츠 영역을 구분해 놓고, article태그를 이용해 내용을 채워나간다고 생각하면 된다.

source )
<!DOCTYPE html>
<html>
<body>
<article>
  <h1>Code is Poetry.</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua.</p>
</article>
<p><strong>Note:</strong> The article tag is not supported in Internet Explorer 8 and earlier versions.</p>
</body>
</html>

result )

Code is Poetry.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Note: The article tag is not supported in Internet Explorer 8 and earlier versions.



저작자표시 (새창열림)

'Web Design > HTML & HTML 5' 카테고리의 다른 글

HTML5 - New Structural Tags : <hgroup>  (0) 2018.04.28
HTML5 - New Structural Tags : <aside>  (0) 2018.04.28
HTML5 - New Structural Tags : <section>  (0) 2018.04.26
HTML - META tag  (0) 2018.04.26
HTML vs HTML5  (0) 2018.04.25

HTML5 - New Structural Tags : <section>

Web Design/HTML & HTML 52018. 4. 26. 10:30

HTML5 - New Structural Tags ( 구조 태그 ) : <section></section>



01. <section></section>
02. <article></article>
03. <aside></aside>
04. <header></header>
05. <hgroup></hgroup>
06. <footer></footer>
07. <nav></nav>

01. <section></section>
HTML Section 요소 (<section>) 는 문서의 일반적인 구획을 나타냅니다. 즉, (전형적으로 제목을 가지고 있는) 컨텐츠의 주제 그룹을 말합니다. 각 <section>은 식별되어야하며, 일반적으로 (<h1>-<h6> 요소들을 자식으로 가집니다.

- 제목으로 시작하는 컨텐트를 의미적으로 그룹핑하기 위해 사용됩니다.
- section요소를 사용할 수 있는 예로는 챕터나 탭으로 구분된  대화상자에서 탭된 페이지, 또는 논문의 번호가 매겨진 색션이 될 수 있습니다. 홈페이지에서는 소개, 뉴스 아이템, 연락처등이 섹션으로 분리될 수 있습니다.
- 요소의 컨텐츠를 배포해도 이치에 맞다면 section요소대신 article요소를 사용할것을 권장합니다.
- section요소는 일반적인 컨테이너 요소는 아닙니다. 요소가 단순히 스타일링을 위한 목적이나 스크립팅의 편의를 위해서 필요할때 section요소보다는 div요소를 사용할것을 권장합니다.

<!DOCTYPE html>
<html>
<body>

<section>
  <h1>WOOIN21</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat.</p>
</section>

<section>
  <h1>CODE IS POETRY.</h1>
  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>

<p><strong>Note:</strong> The section tag is not supported in Internet Explorer 8 and earlier versions.</p>

</body>
</html>

WOOIN21

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

CODE IS POETRY.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Note: The section tag is not supported in Internet Explorer 8 and earlier versions.

 


저작자표시 (새창열림)

'Web Design > HTML & HTML 5' 카테고리의 다른 글

HTML5 - New Structural Tags : <aside>  (0) 2018.04.28
HTML5 - New Structural Tags : <article>  (0) 2018.04.28
HTML - META tag  (0) 2018.04.26
HTML vs HTML5  (0) 2018.04.25
[HTML] 메타태그 - viewport (뷰포트)  (0) 2018.04.13

HTML - META tag

Web Design/HTML & HTML 52018. 4. 26. 04:21

HTML - All about META tag



META tag (메타 태그)란 키워드 검색엔진에 특정 홈페이지 또는 HTML문서에 대한 색인정보 즉, 키워드와 약간의 정리된 내용(콘텐츠)을 표현하는 HTML Tag이다.
META태그는 <head>와 </​head> 사이에 들어가며 <meta>태그는 메타 데이터로 HTML문서가 가지고 있는 유용한 정보를 담아 주는 곳이다. 활용 목적에 따라서 여러가지 형식으로 사용할수 있다.

※ META Tag의 종류 :

01. <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
     /* 현재 페이지 한글입력, 한글 인코딩 */

02. <meta content=kr name=content-language>
     /* 언어 설정 */

03. <meta content="IE=Edge" http-equiv="X-UA-Compatible">
     /* 인터넷 익스플로러 최신버전으로 랜더링한 후에 열으라는 메타주소 */

04. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     /* 인터넷 익스플로러 최신버전으로 랜더링한 후에 크롬이 깔려있다면 크롬으로 랜더링하라는 메타주소 */

05. <meta name="keywords" content="html5, jQuery, MariaDB">
     /* Keyword Search Engine에 검색되기 위한 키워드 설정 */

06. <meta content="META란 무엇인가?" name="description">
     /*해당 페이지의 설명, 제목과 더불어 서술되는 내용 요약. space포함 150이내(text) */

07. <meta content="May, 25, 2018" name=creation_date>
     /* 만든 날짜 */

08. <meta name="build"  content="2018.5.25">
     /* 갱신일자 */

09. <meta content="25 May 18" name=Author-Date>
     /* 제작일자 */

10. <meta http-equiv="Cache-Control"  content="No-Cache">
    /* No-Cache로 설정해놓으면 갱신이 빠름. 좋은점은 인덱스 페이지 리딩이 무척 빨라짐. */

11. <meta http-equiv="Pragma" content="No-Cache">
    /* 캐쉬가 되지 않게 하는 태그, 매번 새로고침 효과 */

12. <meta http-equiv="Expire" content="-1">
    /* 캐쉬 완료(파기)시간 정의  */

13. <meta content="1 Days" name="revisit-after">
    /* 검색엔진 재 방문 시기 */

14. <meta content="ALL" name="ROBOTS">
    /* 보안 및 공개 설정시 설정 */

15. <meta name="writer" content="anonymous">
    /* 만든 이  */

16. <meta name="copyright" content="anonymous">
    /* 회사 이름 */

17. <meta name="Distribution" content="anonymous" >
    /*  배포자  */

18. <meta http-equiv="imagetoolbar" content="no">
    /*  그림위에 마우스 오버시 이미지 관련 툴바가 생기지 않음  */

19. <meta http-equiv="refresh" content="2; URL=http://daum.net">
    /* content="대기시간(초); URL=이동할 페이지 주소 */

저작자표시 (새창열림)

'Web Design > HTML & HTML 5' 카테고리의 다른 글

HTML5 - New Structural Tags : <article>  (0) 2018.04.28
HTML5 - New Structural Tags : <section>  (0) 2018.04.26
HTML vs HTML5  (0) 2018.04.25
[HTML] 메타태그 - viewport (뷰포트)  (0) 2018.04.13
HTML5 브라우저 호환 테스트  (0) 2018.04.10

HTML vs HTML5

Web Design/HTML & HTML 52018. 4. 25. 22:47

HTML  vs  HTML5 [HyperText Markup Language 5]
HTML 5 is an Evolution, Not a Revolution. ( HTML 5는 혁명이 아닌 진화이다. )

※ HTML의 진화 :
1995 :  HTML 2.0
1997 :  HTML 3.2
1998 :  Web Standard Project
2000 :  XHTML 1.0
2000~2004 :  The Growth of the Web
2004 :  HTML5 - The Rise of the HTML 5

※ HTML5가 아닌 것들 :
CSS3 Transitions
Web Sockets
Geolocation
SVG
CSS3 @font-face

 

※ HTML 5가 HTML과 다른 점 :
01.웹문서의 첫 머리에 선언하는 문서타입( DOCTYPE )의 선언이 간편화
HTML 4 :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 5 :
<!doctype html> /* 대소문자 관계 없음 */

02. 언어셋 인코딩 (Character Encoding )
 HTML4 :
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
HTML5 :
<meta charset="utf-8">

03. HTML5에 추가된 새로운 요소들 (HTML 5 New Elements ; 26 elements )

 article

 aside

 audio

 canvas

command 

details

datalist

embed

figcaption

 figure

footer

header

hgroup

keygen

mark

meter

nav

 output

progress

rp

ruby

section

source

summary

time

video

 

 

 

 

 

저작자표시 비영리 변경금지 (새창열림)

'Web Design > HTML & HTML 5' 카테고리의 다른 글

HTML5 - New Structural Tags : <article>  (0) 2018.04.28
HTML5 - New Structural Tags : <section>  (0) 2018.04.26
HTML - META tag  (0) 2018.04.26
[HTML] 메타태그 - viewport (뷰포트)  (0) 2018.04.13
HTML5 브라우저 호환 테스트  (0) 2018.04.10

[HTML] 메타태그 - viewport (뷰포트)

Web Design/HTML & HTML 52018. 4. 13. 19:37

[HTML] 메타태그 - viewport (뷰포트)

- 사전적 의미 :
viewport 미국식 [|vju:pɔ:rt]  영국식 [|vju:pɔ:t]
1. (컴퓨터의) 보임창
2. (우주선의) 창문

 

○ 사용이유 : 디바이스(PC, Tablet, Smart Phones)의 해상도에 따라서 적절하게 대응하는 반응형 웹(Responsive Web)을 만들기 위하여 사용

○ 사용방법 :
<head> ...... </head> 태그 안에 삽입
<meta name="viewport" content="속성=값, ......">

○ viewport content properities; (속성)과 value(값)
- width (뷰포트 너비) ;  device-width (값)
- height (뷰포트 높이) ;  device-height (값)
- user-scalable (확대 or 축소 가능여부) ;  yes or no(값)
- initial-scale (초기 축소/확대 값) ;  1 ~ 10 (값)
- minimum-scale (최소 확대/축소 값) ;  1 ~ 10 (값)
- maximum-scale (최대 확대/축소 값) ;  1 ~ 10 (값)

ex)
<!DOCTYPE>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    </head>
    <body>
        Contents
    </body>
</html>

- 기본형
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
user-scalable 값을 지정하지 않으면 축소/확대가 가능
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
user-scalable 값을 no로 지정하면 축소/확대가 불가능

-
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, minimun-scale=.5, maximum-scale=2" />
축소/확대가 가능하고 축소는 0.5 (2분의1)까지 확대는 2배까지 가능.

저작자표시 (새창열림)

'Web Design > HTML & HTML 5' 카테고리의 다른 글

HTML5 - New Structural Tags : <article>  (0) 2018.04.28
HTML5 - New Structural Tags : <section>  (0) 2018.04.26
HTML - META tag  (0) 2018.04.26
HTML vs HTML5  (0) 2018.04.25
HTML5 브라우저 호환 테스트  (0) 2018.04.10

HTML5 브라우저 호환 테스트

Web Design/HTML & HTML 52018. 4. 10. 16:01

HTML5 브라우저 테스트 ::  내가 사용하는 브라우저가 HTML5를 얼마나 지원하는지 알아보자!

http://html5test.com/

내가 사용하고 있는 브라우저 테스트

01. Microsoft Edge - 555점 만점에 471점 ( Microsoft Edge 41.16299.248.0 )

02. Google Chrome - 555점 만점에 520점

03. Apple Safari - 555점 만점에 209점 ㅠㅠ

04. Opera - 555점 만점에 520점

05. 번외 Whale - 555점 만점에 515점

 

저작자표시 (새창열림)

'Web Design > HTML & HTML 5' 카테고리의 다른 글

HTML5 - New Structural Tags : <article>  (0) 2018.04.28
HTML5 - New Structural Tags : <section>  (0) 2018.04.26
HTML - META tag  (0) 2018.04.26
HTML vs HTML5  (0) 2018.04.25
[HTML] 메타태그 - viewport (뷰포트)  (0) 2018.04.13

티스토리툴바