[html] mark 태그

 

 

[html] mark 태그

 

mark 태그는 사용자에게 관계된 텍스트를 강조하고자 할 때 사용합니다.

 

▶브라우저 지원


 

ie9+, chrome 6.0+, firefox 4.0+, safari 5.0+, opera 11.1+

 

▶mark 요소 사용 예

 

1. 검색 결과에서 찾은 키워드를 두드러지게 표시하여 사용자가 원하는 것을 쉽게

 

   찾을 수 있도록 함.

 

2. 인용할 때 특정 텍스트를 강조하게 위해

 

 

strong, em,  mark 태그 차이

 

텍스트를 강조하는 의미에서 세 가지가 쓰일 수 있는데, 각기 용도가 다릅니다

 

em.  강세를 둔 강조. emphasized text 약자로  이탤릭체로 표시함.


강조의 위치는 문장의 의미를 바꿈

 

<p><em>Cats</em> are cute animals.</p>   '고양이'에 강조

<p>Cats are <em>cute</em> animals.</p>   '귀여움'에 강조

 


strong. 강조된 중요성. 제목, 문단 등에 사용하여 다른 것과 구분짓는 용도이며 굵은 글씨체로 표시함.

 

문장의 의미를 바꾸지 않음.

 

 

mark 참조 목적으로 강조된 문서의 텍스트. 인용문 일부에 주의를 끌기 위해


<blockquote>
<mark>mark</mark> 요소는 인용문의 특정 부분에 주의를 끌기 위해 사용될 수 있다.
</blockquote> 

 

em 태그는 css에서 font-style: italic; 과 같은 효과

 

strong 태그는 css에서는 font-weight: bold;과 같은 효과임.

 

▶html 작성 예

 

 

<strong>MARK 요소</strong>
<blockquote>
<mark>mark</mark> 요소는 인용문의 특정 부분에 주의를 끌기 위해 사용될 수 있다.
</blockquote>

 


<strong>EM 요소</strong>
<p><em>Cats</em> are cute animals.</p>   
<p>Cats are <em>cute</em> animals.</p>

 

 

 

▶css

blockquote{border-left:10px solid #D5D5D5; padding:5px;}
mark{background-color:yellow;}
em{color:red;}
strong{color:#6B9900;font-size:20px;}

 

 

▶실행화면

 

 

 

mark.html파일 다운받아 실행해 보세요~

 

 

  참조 : http://www.w3.org/html/wg/drafts/html/master/#the-mark-element

 

[html 기초] b, strong, em, i, cite, small 태그

 

[html] pre, code 태그 차이

 

 

지구별에
html 2015. 3. 3. 17:13

댓글을 달아 주세요

[html] abbr 태그

 

 

[html] abbr 태그

 

abbr 태그는 두문자어(acronym)와, 약어(abbreviation )에 사용하는 요소로, 브라우저나 검색엔진에

 

유용한 정보를 줍니다.


넷스케이프가 abbr 요소를 만들고, 마이크로소프트가 acronym을 만들어

 

두 요소 다 html4까지 사용하고 있었지만, 두 정의가 혼동스럽고 브라우저 지원도

 

저마다 달라, html5부터 acronym은 퇴화 요소로 규정합니다.

 

html5부터는 두문자어와, 약어에 모두 abbr 태그를 사용합니다.

 

참고

 

acronym: 단어의 머리글자를 딴 말. NATO는 North Atlantic Treaty Organization의 두문자어임

              '나토'라고 읽음.

 

abbreviation: 쉽게 알아들을 수 있도록 줄인 말. BBC는 British Broadcasting Corporation의 축약어.

                  '비비씨'로 읽음(각 철자를 분리해서 발음함.)

 

*abbr 요소는 인라인 요소

 

 

 

▶사용 예:

 

<abbr title="HyperText Markup Language">HTML</abbr>

 

<abbr title="Incorporated">Inc.</abbr>

 

▶실행 화면

 

HTML
Inc.

 

 

주로 title 속성과 함께 사용하는데, title은 abbr에 대한 설명 문구입니다.

 

abbr 태그를 사용하면 firefox, opera에선 기본값으로 점선 밑줄로 표시되며,


 

ie8, safari, chrome은 스타일에 변화가 없습니다..

 

모든 브라우저에서 일관적으로 표시하도록 아래처럼 스타일링을 해주는 것이 좋습니다.

 

abbr {border-bottom: 1px dotted black;}

 

▶실행 화면

 

HTML
Inc.

 

 

 

 

▶브라우저 지원:

 

ie7+, chrome 2.0+, firefox 1.0(1.7)+, opera 1.3+, safari

 

참조 사이트:

 

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr 

 

http://html5doctor.com/the-abbr-element/

 

  

HTML5 퇴화 요소(deprecated, obsolete 차이)

 

html5shiv 삽입하기 (ie6-8에서 html5 적용하기)

 

HTML5 기본 레이아웃

 

지구별에
html 2015. 3. 2. 15:42

댓글을 달아 주세요

HTML5 퇴화 요소(deprecated, obsolete 차이)

 

 

HTML5 퇴화 요소(deprecated, obsolete 차이)

 

예전에 table에서 퇴화 속성에 대해 적은 적이 있는데, 어떤 분이 퇴화 속성인데 왜

 

여전히 정상적으로 작동하는지 질문하신 분이 계셨습니다.

 

table 태그, tr 태그, th 태그, td 태그와 table 속성 정리

 

 

저도 궁금하던 차였는데, 마침 글을 읽다가  deprecated, obsolete 차이에 대해 나온 글이 있어서

 

정리해 보았어요.

 

더불어 html5에서 퇴화로 규정된 태그를 살펴볼까 합니다.

 

우선 용어 정의부터....

 

제 블로그엔 '퇴화 요소' '퇴화 속성'이란 단어가 많이 등장하는데

 

deprecated와 obsolete를 저는 통일해서 '퇴화'라고 설명해 놓았습니다.

 

하지만 두 단어엔 차이가 있습니다.

 

 

deprecated

 

사전적 정의: computers. to mark as obsolete to warn against its use in the future so that it may be phased out.

 

W3C의 정의: 사용되지 말하여 하며, 여전히 지원을 계속하고 있지만, 미래 버전에서 곧 사라질 수 있음.

 

obsolete 
 

사전적 정의: no longer in use/ outmoded in design, style, or construction

 

W3C의 정의: 지원에 대한 보증이 없음. 퇴화 요소는 더 이상 명세에도 규정되지 않음.

 

 

 

요약해서 말하자면, obsolete는 이미 퇴화된 것이며,

 

deprecated는 현재 브라우저에서 지원을 계속하고 있지만, 곧 퇴화될 것임을 의미합니다.

 

어찌되었든, 두 단어로 규정된 태그, 속성들은 사용하지 않는 것이 좋습니다.

 

 

 

 

 

HTML5에서 퇴화 요소

 

font 태그

 

대신에 font 속성을 사용하세요.

 

글꼴을 지정하는 font 속성 배우기

 


center 태그

 

대신에 text-align:center

 

text-align 속성으로 정렬하기 (left, right, center, justify)

 


dir, menu 태그

 

대신에 ul 태그

 

목록을 만드는 ul 태그


 
s, strike 태그 

 

대신에 text-decoration: line-through

 

text-decoration 속성(none, underline, overline, line-through)


u 태그

 

대신에  text-decoration: underline;


 

applet 태그

 

대신에 object이나 embed 태그

 

object 태그 정리

 

embed 태그

 


bgsound 태그

 

대신에 audio 태그

 

audio 태그로 음악 파일 삽입하기

 


frame, frameset, noframes 태그

 

대신에 iframe을 사용하거나 css

 

iframe 태그 사용법

 


isindex 태그

 

대신에 form 태그

 

form 태그(html 양식 만들기)

 


acronym 태그

 

대신에 abbr 를 사용하세요~

 

[html] abbr 태그

 

 

 

[참조 사이트]

 

http://www.w3.org/TR/html401/conform.html#deprecated

 

http://www.codehelp.co.uk/html/deprecated.html

 

http://www.thefreedictionary.com

지구별에
html 2015. 2. 27. 16:47

댓글을 달아 주세요

이미지맵 태그(map, area 태그)

 

 

이미지맵 태그(map, area 태그)

 

map 태그는 이미지맵을 만드는 태그입니다.

 

이미지맵이란 클릭할 수 있는 영역을 지닌 이미지를 말합니다.

 

map 요소는 몇 가지의 area 요소를 포함합니다.

 

area 요소는 이미지맵에서  영역을 지정합니다.

 

사용 예:

<img src="zoo.png" alt="zoo" usemap="#zoo">

 


<map name="zoo" id="zoo">
<area shape="rect" coords="10, 8, 150, 292" alt="giraffe" href="giraffe.html" target="_blank">
<area shape="circle" coords="186, 259, 31" alt="bird" href="bird.html" target="_blank">
 </map>

 

 

 

 

map 요소의 name(또는 id) 속성은 img 요소의 usemap 속성과 관계가 있습니다.

 

따라서, usemap과 name 이름은 동일해야 함.

 

name과 id를 반복해서 쓴 이유는, name 속성이 xhtml에서는 퇴화 속성이기 때문.

 

▶함께 사용할 수 있는 속성

 

속성 속성값 설명
alt text area 대체 텍스트. Href 속성이 있으면 필수
coords   area의 좌표. 0,0이 상단 왼쪽임
  x1, y1, x2, y2 사각형 모양일 때(shape="rect") 좌, 상, 우, 하
  x, y, radius shape="circle"일 때 원형 중앙과 반지름의 좌표
  x1, y1, x2, y2,
…. xn, yn
다각형(shape="poly") 끝의 좌표. 첫번째와 마지막 좌표 쌍이 동일하지 않으면, 브라우저는 다각형 가까이에 마지막 좌표 쌍을 추가할 것임
href url area 링크 주소
nohref   area 연결 링크가 없음. html5에서 지원하지 않음.
shape   area 모양
  default 기본값으로 전체 영역
  rect 사각형 모양
  circle 원형   
  poly 다각형  
target   url 을 열 곳
  _blank 문서를 새 창에 
  _parent 부모 창에 엶(부모가 없으면 _self 처럼 표시)
  _self 클릭한 바로 그 창에 엶, 기본값
  _top 전체 브라우저 창에 엶
  framename 지정된 프레임 안에 엶
↓↓html5에 새로 추가된 속성↓↓
download 파일 이름 사용자가 링크를 클릭하면 target이 다운로드됨(선택적)
herf 속성을 설정될 때만 사용. 값이 생략되면 원래 파일이름이 사용 됨.
(ie, safari 지원 하지 않음)
예: download="sample"
hreflang 언어 코드 url의 언어 코드
예: hreflang="en"
media 미디어쿼리 url이 최척화된 미디어나 장치를 지정
예(media="screen and (min-color-index:256)")
rel   현재 문서와 url의 관계
  alternate 문서의 대안 버전. 예: rel="alternate"
  author 저작자
  bookmark  
  help 도움말
  license 저작권 정보
  next  
  nofollow  
  noreferrer  
  prefetch  
  prev  
  search 검색 도구
  tag  
type 미디어 유형 url의 미디어 유형(MIME type)
예:(type="image/gif")

 

좌표를 지정할 때 어려울 수 있으므로, 이미지맵 생성기를 이용하면 편리합니다. 

 


 

■  이미지맵 생성기

 

사용법:

1. 사이트 접속 후, 이미지를 올립니다.

2. 사각형(rectangle), 원형(circle), 다각형(polygon) 중 탭을 선택합니다.

3. 이미지의 시작 지점과 끝 지점을 선택합니다.

4. [to html]을 클릭하면 좌표가 입력된 코드가 생성 됨.

 

 

<img src="zoo.png" alt="zoo" usemap="#zoo">
<map name="zoo" id="zoo">
<area shape="rect" coords="10, 8, 150, 292" alt="giraffe" href="giraffe.html" target="_blank">
<area shape="circle" coords="186, 259, 31" alt="bird" href="bird.html" target="_blank">
 </map>

 

 

위의 코드에서 shape="rect"는 사각형 모양이며 (아래 이미지에서 기린)

shape="circle"은 원형(아래 이미지에서) 새

구글 크롬에서 실행하여, 새의 이미지를 클릭하고 나면 이렇게 파란색으로 표시가 되네요.

 

 

 

map.zip파일 다운받아 실행해 보세요~

 

 

<참고 사이트>

 

http://www.w3schools.com/tags/tag_area.asp

 

http://www.html-5-tutorial.com/map-and-area-elements.htm

지구별에
html 2015. 2. 25. 16:02

댓글을 달아 주세요

  1. neo 2015.03.09 11:40  수정/삭제  댓글쓰기

    역시 map태그는 드림위버가 편한거같아요 ㅋㅋ

[html5] figure 태그, figcaption 태그

 

 

[html5] figure 태그, figcaption 태그

 

책이나 잡지에서 이미지, 차트 등이 나올 때 이를 설명하는 문구와 함께 소개됩니다.

 

figure 요소는 이처럼 사진, 도표, 삽화, 오디오, 비디오, 코드 등을 담는 컨테이너 역할을 하는 태그이고,

 

figcaption 요소는 이에 대한 설명하는 문구를 담는 태그 입니다.

 

figcaption 요소는 선택적이며, figure 요소 안에 사용합니다 (내용 앞 뒤로 올 수 있음)

 

figcaption 요소는 figure 요소에서 한 번만 사용할 수 있으며

 

figure 안에는 여러 가지의 자식 요소(img, code 등)을 포함할 수 있습니다. 
 

 

▷ 브라우저 지원

 

 

ie 9.0+, chrome 6.0+, firefox 4.0+, safari 5.0+, opera 11.1+

 

 

 

사용 예 1.

 

<figure>
  <img src="zoo.jpg" alt="zoo">
</figure> 

 

 

사용 예 2.

 

<figure>
  <img src="monkey.jpg" alt="monkey in the trees">
  <figcaption>나무에 있는 원숭이 무리 (사진:지구별에)</figcaption>
</figure>

 

 

사용 예 3.

 

<figure id="zoo">
  <img src="lion.png" alt="lion">
  <img src="tigar.png" alt="tigar">
  <img src="bear.png" alt="bear">
  <figcaption>동물원 동물들. 왼쪽에서 오른쪽으로 사자, 호랑이, 곰</figcaption>
</figure>

 

 


 

▷html, css 작성 예를 보겠습니다.

 

html

<article>  
<h3>Cheetah</h3>
<p>Cheetahs have adorned the courts of kings, queens, and empero...
 </p>
<figure>
<img src="cheetah.png" alt="cheetah">
<figcaption>지구별 동물원의 치타</figcaption>

</figure>

</article>

 

 

css

figure{background-color:#E4F7BA; padding:10px;}

 

 

▷실행화면

 

 figure 와 figcaption은 둘 다  블록 요소입니다.

 

 

▷ figure와 aside 차이

 

내용이 단순히 관련돼(느슨하게) 있고, 필수적인 내용이 아니면 aside

내용이 직접적인 관련이 있지만, 문맥상  그것의 위치가 중요하지 않으면 figure

 

 

[html5] aside 태그

 

[html5] article vs section 차이

 

웹사이트 운영자라면 알아야할 html, css 상식

 

HTML5 기본 레이아웃

 

지구별에
html 2015. 1. 20. 11:33

댓글을 달아 주세요

IE 문서 모드란(meta http-equiv="x-ua-compatible" content="IE=edge")

 

 

IE 문서 모드란(meta http-equiv="x-ua-compatible" content="IE=edge" )

 

 

오늘은 메타 태그 중 아래 코드에 대해 알아보겠습니다.

 

<meta http-equiv="x-ua-compatible" content="IE=edge" >

 

 

content="IE=edge"는 IE브라우저에서, 각 버전 중 가장 최신 표준 모드를 선택하는 문서 모드입니다.(IE6부터 IE11까지)

 

문서 유형 (document type) 선언과 함께 사용해야 유효합니다.

 

<!DOCTYPE html> /*가장 최신의 웹표준을 지원하는 HTML5 DOCTYPE을 추천함 */

 

 

DOCTYPE 선언하는 이유와 버전별 선언 정리 (HTML5, HTML 4, XHTML)

 

 

 

IE11에서는,  문서 모드가 곧 퇴화될 것이며 앞으로 사용되지 말아야할 것으로 규정합니다.

 

현재로서, IE11는 edge mode가 추천하는 문서 모드입니다.

 

참조: Document modes are deprecated

 

사용 예

 

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
..
..

 

 

 

 

그런데, 문서 모드란 무엇일까요?

 

 

문서 호환성 모드(document compatibility modes) 이해하기

 

IE 구버전은 IE가 웹페이지를 번역하고 표시하는 방법을 선택할 수 있도록 했습니다.

 

Quirks mode비표준 모드가 기본값이며, 구버전의 브라우저로 보는 것처럼 페이지를 표시하고,

 

Standards mode표준 모드(또는 strict mode엄격 모드)는 업계의 표준을 지원하도록 표시합니다.

 

이때 역시 문서 유형 선언(예: <!DOCTYPE>)을 있어야 하는데, 문서 유형 선언을 하지 않으면 quirks mode 로 표시함

 

비표준 모드quirks mode, 표준 모드 standards mode 차이와 DOCTYPE

 

IE7까지 두 가지 호환 모드만을 지원했기에, IE6 표준에 따라 설계된 페이지는 IE7 표준에 따라 설계된 페이지를

 

의도대로 표시할 수 없었습니다.

 

 

IE8은 새로 생긴 표준에서 여러 특질들을 추가 지원했는데, 일부 특징들이 앞서 발행된 표준과 달랐기 대문에,

 

웹 개발자가 어느 표준인지 선택하도록 하는, 문서 호환성 document compatibility 개념을 도입했습니다.

 



즉 meta요소를 사용하여, 웹페이지에 X-UA-Compatible header를 추가해


IE 버전을 지정하도록 한 것입니다.

 

<meta http-equiv="X-UA-Compatible" content=" ">

 

IE9 역시 새로 생긴 표준을 위한 추가적 지원을 도입했는데(HTML5, CSS3, SVG같은)


표준들이 여전히 개발중이었기에, 일부 행동들은 다양한 표준의 초기버전과 달랐습니다.

 

IE10은 추가적인 표준 지원을 추가하고, 또한 HTML5 명세에서 지정된 변화에 부합하기 위해

 

quirks mode를 업데이트합니다. 

 

이것은 quriks mode가 지금 표준 모드와 비슷한 특징들에 접근했다는 것을 의미합니다.

 

사이트가 IE에서 올바로 표시되지 않는다면, 가장 최신 웹 표준 지원을 위해 사이트를 업데이터하거나,(권장)


IE를  이전 버전의 브라우저에서 보는 것처럼 내용을 표시하도록 할 수 있습니다.

 

 

 

IE 문서 모드 종류

 

 

웹페이지가 IE 각 버전에 맞게 표준 모드로 제한함.
(IE를 그 버전에 지원된 특징들에 제한하도록 함)

 

    <meta http-equiv="x-ua-compatible" content="IE=9" > /*IE9 표준 모드*/
    <meta http-equiv="x-ua-compatible" content="IE=8" > /*IE8 표준 모드*/
    <meta http-equiv="x-ua-compatible" content="IE=7" > /*IE7 표준 모드*/

 

 

지정한 버전에 맞는 표준 모드로 표시하거나, Quriks mode로 표시함

다른 문서 유형DOCTYPE 값을 사용하는 웹페이지 모음을 가지고 있을 경우 유용함.
 

    <meta http-equiv="x-ua-compatible" content="IE=EmulateIE9" >
    <meta http-equiv="x-ua-compatible" content="IE=EmulateIE8" >
    <meta http-equiv="x-ua-compatible" content="IE=EmulateIE7" >

 

 

edge mode, IE 버전 중 가장 최신 모드로 표시

 

<meta http-equiv="x-ua-compatible" content="IE=edge" >

 

 

※ 항상 DOCTYPE과 함께 사용함
※ 맨 위에서 언급한 것처럼 IE 문서 모드는 곧 퇴화될 예정이며, 현재는 edge mode를 추천함.

 

참조:

 

Specifying legacy document modes

 

Understanding the need for document compatibility modes

 

 

 

지구별에
html 2015. 1. 16. 08:30

댓글을 달아 주세요

[html5] main 태그

 

 

[html5] main 태그



main 요소는 문서의 주요한 내용을 담는 태그입니다.

 

<div id="main">과 같은 역할

 

문서에서 main은 하나 이상 있어선 안 되며, 페이지 당 한 번 사용할 수 있습니다.

 

사이드바, 네비게이션 링크, 저작권 정보에 있던 내용을 main에서 반복해서 사용할 수 없습니다.

 
또한 main은 article , aside, footer, header, nav의 자손이어선 안 됩니다.


main 요소가 문서 영역을 구분짓는 용도로 사용하진 않기 때문.  
 


▶브라우저 지원


ie 지원하지 않음, chrome 6.0+, firefox 4.0+, safari 5.0+, opera 11.1+

 

main 요소를 ie에서 지원할 때까지 "main" ARIA role 추가하는 것도 좋습니다.

 

<main role="main"> 내용</main>

 

 

*ARIA role이란?

ARIA(WAI-ARIA)는 HTML 요소에 추가할 수 있는 속성 집합임.

 

ARIA role을 실행을 하지만 아직 원래 요소의 역할을 구현하지 않은 브라우저 지원하기 위해 사용.


<main role="main"> 은  기술적으로 군더더기지만 일부 사용자를 돕고, 아무도 해치지 않음.
 
role의 또 다른 사용 예.

<a href="#" role="button" aria-label="Delete item 1">삭제</a>

 

위에서 a 태그를 사용해 링크로 사용하고 있지만 기능은 링크보다 버튼에 더 가까움. 

 

스크린리더는 이것을 버튼으로 듣게 됨.


위의 role="botton"은 속성 선택자로 사용할 수도 있음.

 
*[role="button"] {  /* 버튼 스타일 지정 */}

 

 

더 궁금하신 분은 아래 링크를 참조해 주시고

 

나중에 ARIA role에 대해 추가적인 글을 써 보도록 하겠습니다~

 

[참조]
http://stackoverflow.com/questions/10403138/what-is-the-purpose-of-the-role-attribute-in-html
http://w3c.github.io/aria-in-html/


 

 

 

HTML5 기본 레이아웃

 

[html5] header 태그

 

 [html5] nav 태그

 

[html5] article vs section 차이

 

웹사이트 운영자라면 알아야할 html, css 상식

지구별에
html 2015. 1. 14. 09:56

댓글을 달아 주세요

meta viewport (메타 뷰포트 태그) 사용법

 

 

meta viewport(메타 뷰포트 태그) 사용법

 

 

얼마 전에 meta 태그 사용법이란 글을 썼는데 

 

[html] meta 태그 사용법

 

위 글에서 다루지 못한(빠진) 것들을 다루어 보려고 해요.

 

힌트를 주신 admin 님께 감사합니다.^^

 

오늘 다룰 부분은 meta viewport(메타 뷰포트 태그) 입니다.

 

웹페이지 소스를 보면 간혹 head 에 이런 meta 구문을 보신 적이 있으실 거예요.

 

<meta name="viewport" content="width=device-width">

 

 

meta viewport 태그는 애플이 아이폰, 아이패드 등 자사의 모바일 브라우저의

 

뷰포트(viewport) 크기 조절을 위해 만들었습니다. (뷰포트에 대한 설명은 본문 참조)

 

meta viewport 태그는 W3C 명세에는 없지만,(따라서 표준이 아님)

 

iOS 장치(아이폰 운영체제 브라우저 safari)가 널리 사용됨에 따라 사실상 표준처럼

 

사용되고 있고, 다른 브라우저들(Opera, Android,  Mobile firefox(Fennec) 등)도 이 태그를 채택하게 됩니다.

 

 

그런데, IE10(snap mode) 은 뷰포트 크기 조절을 위해 meta viewport 태그 대신에  표준으로 제안된

 

@viewport rule을 사용합니다.

 

@viewport는 W3C에 제안된 표준이고, Opera Mobile 11에서도 지원합니다.

 

그럼에도 여전히 viewport meta 설정을 고수하는 브라우저들이 있습니다.

 

따라서 아이폰과 IE10 브라우저 양쪽을 타켓으로 웹페이지를 설계하려면  현재는 두 가지 방식으로

 

viewport 크기 조절 하는 것이 필요합니다.   

 

 

 예

<head>
<meta name='viewport' content='width=device-width' /> 
<style type='text/css'>
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }
</style>
</head>

 

 

이 페이지에서는 viewport란 무엇인고, 왜 필요한지 알아보고,  meta viewport 태그 사용법을 다루겠습니다.

 

css @viewport rule은 다음 시간에 다루어 볼게요

 

 

viewort란?

 

viewport란 우리말로 보임창, 즉 화면 상의 화상 표시 영역을 뜻합니다.

 

데스크탑(pc)의 뷰포트와 모바일 뷰포트는 약간 다릅니다.

 

 

- 데스크탑(pc)의 뷰포트는 웹브라우저 창(visible area)의 뷰포트와 같음.

 

   사용자가 브라우저 창의 크기를 조절하면서 뷰포트 크기를 조절할 수 있음.

 

   웹페이지가 뷰포트보다 작으면, 스크롤로 나머지를 볼 수 있음.

 

이미지 출처: 애플

 

- 모바일 뷰포트는 웹브라우저 창(visible area)보다 크거나 작을 수 있음.


   그리고 창, 스크롤바, 크기조절 버튼이 없음. 


   대신, 상하좌우로 움직이거나, 더블탭이나, 확대 축소(zoom in/out)를 통해 뷰포트 배율을 바꿀 수 있음.(크기가 아니라)

  

 

뷰포트 980px



이미지 출처: 애플

 

 

viewport 크기 조절이 필요한 이유?

 

 

데스크탑에 기반하여 설계된 웹페이지를 모바일에서 보면 기본 뷰포트가 980px이기 때문에


내용이 작게 보입니다. (위 이미지'뷰포트 980' 참조)


뷰포트 설정을 하게되면 다양한 모바일 기기에서도 페이지의 너비나 화면 배율을 설정할 수 있습니다.


모바일 장치에 최적화된 웹페이지를 만들려면 html 문서 head에 뷰포트 설정을 포함해야 합니다.  



뷰포트 너비 320로 설정한 화면


 

 

 

meta viewport 태그 사용법 (간단 설명)

 

간단 설명과 긴 설명으로 구분했어요. 필요하신 부분을 골라서 보세요

 

1. viewport 너비 설정

 

<meta name="viewport" content="width=500">

 

너비는 px 단위이며 meta 태그에서는 단위 생략함 

 

content에 여러 속성값을 쓸 경우 쉼표로 분리함.

 


 

2. 너비를 장치너비로 설정(추천)

 

<meta name="viewport" content="width=device-width">

 

브라우저 너비를 장치 너비에 맞추어 표시함.

 

 

3. 너비를 장치높이로 설정

 

<meta name="viewport" content="height=device-height">

 

 

4. 초기 화면 배율(initial-scale) 설정(zoom 레벨 설정)

 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

1.0은 100%와 같음. initial-scale은 긴 설명 참조


 

5. 최소 최대 화면 배율 설정(minimum and maximum scale)


<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">


최소 설정은 사용자가 너무 극닥적으로 화면 축소하는 것을 방지함 

 

(위 예에서는 초기값과 최소 화면 배율 설정을 같이 함)

 
 

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=3.0">

 

최대 화면 배율 설정은 극단적으로 화면 확대하는 것을 방지함.


(위 예는 최소와 최대 배율을 같이 사용한 예)

 

(minimum-scale, maximum-scale값은 긴 설명 참조)

 

 

6. 사용자가 크기 조절하기를 원치 않을 때


<meta name = "viewport" content = "user-scalable=no, width=device-width">

 

 

 

meta viewport 태그 사용법 (긴 설명)

 

(Safari Developer Library 사이트를 번역 정리한 것입니다)

 

1. viewport

 

iOS(아이폰 운영체제)에서 페이지를 표시할 때 사용하며,  창 크기를 바꿈

 

▷구문


<meta name = "viewport" content = "width = 320, initial-scale = 2.3, user-scalable = no">

 

▷설명

 

보통 viewport meta 태그는, 뷰포트의 너비와 초기 배율(zoom 레벨)을 설정하기 위해 사용.

 

예> 웹 페이지가 980px보다 폭이 좁으면, 뷰포트의 너비를 내용에 알맞도록 설정해야 함.


iOS에 기반한 웹을 디자인하려면, width를 device width로 설정해야 함.

 

하기 표 1은, viewport meta key와 그들의 기본값에 의해 지원되는 속성을 서술함. 


여러 개의 속성을 쓰려면  쉼표로 구분된 목록을 사용 함.

 

여러 개의 속성을 설정할 때 다음 규칙을 따른다.


-  세미콜론(;)을 구분 문자로 사용하지 말 것
- 공백은 구분 문자로 작동할 수 있지만, 쉼표를 추천함.
- 숫자 속성으로, 값이 숫자가 아닌 문자를 포함하지만 숫자로 시작되면, 숫자 접두어는 속성값으로 사용된다.

 

예> 1.0x는 1.0과 같음. 123x456은 123과 같음. 매개변수가 숫자로 시작하지 않으면 값은 0임.

 

장치의 치수(dimension)을 참조할 때, 숫자 값 대신2에 사용된 항수를 사용해야 함
 
예> width 320 대신 device-width, height 480 대신 device-height 사용(세로 화면에서)

 

모든 viewport 속성을 일일이 설정할 필요 없음.


일부 값이 설정되기 만하면 iOS 사파리는 다른 값을 추론한다.


예> scale 1.0으로 설정하면 사파리는 뷰포트 너비를  세로화면에서 device-width로 가정하고,


가로 화면에서 device-height 로 가정함.


width 980px과 initial scale 1.0으로 원하면, 둘을 모두 설정해야 한다.


예> width를 device-width로 설정하기


<meta name = "viewport" content = "width = device-width">

 

초기 화면 배율 1.0으로 설정하기


<meta name = "viewport" content = "initial-scale = 1.0">

 

초기 화면 배율 설정하고 크기 조절을 사용하지 않게 하기 


<meta name = "viewport" content = "initial-scale = 2.3, user-scalable = no">

 

표 1

속성값 설명
width 뷰포트의 너비(px).
기본값 : 980
범위 : 200~10,000 px
속성값은 표2처럼 항수(예:device-width)
로 설정할 수도 있음.
----------------------------------
height 뷰포트의 높이(px)
기본값 : width 속성값과 장치 영상의 가로 세로 비에  기초하여 계산됨.
범위 : 223~10,000 px
속성값은 표2처럼 항수로 설정할 수도 있음.
----------------------------------
initial-scale 뷰포트의 초기 배율(곱하는 수)
기본값 : 보이는 영역에서 웹페이지에 맞추기 위해 계산됨
범위 : minimum-scale과 maximum-scale 속성값으로 결정됨
----------------------------------
minimum-scale 뷰포트의 최소 배율값
기본값 : 0.25
범위 : 0~ 10.0
----------------------------------
maximum-scale 뷰포트의 최대 배율값
기본값 : 5.0
범위 :  0~ 10.0
----------------------------------
user-scalable

사용자가 화면을 축소/확대(zoom in/out))

할 수 있는지 여부를 결정
(사용자가 뷰포트의 배율을 변경할 수 있든 아니든)
yes는 크기 조절을 가능하게 설정(기본값)
no는 크기 조절이 불가능하게 설정
no로 설정하면 웹페이지가 input 영역에서 텍스트를 입력할 때 스크롤되는 것도 방지한다.

 

표 2

속성값 설명
device-width 장치 너비(px)
device-height 장치 높이(px)

*meta 태그에서 px은 생략함
 

2. apple-mobile-web-app-capable


웹응용프로그램을 전체 화면에서 작동시킬지를 설정 

 

▷구문

 

<meta name="apple-mobile-web-app-capable" content="yes">

 

▷설명


content가 yes면, 전체화면 모드로 작동함. no면 작동하지 않음.


기본값은 Safari가 웹 내용을 표시하도록 사용하는 것.

 

웹페이지가 window.navigator.standalone (읽기 전용 Boolean 자바스크립트 속성)을 사용하여

전체 화면 모드로 표시할지 결정할 수 있음.

 

3. apple-mobile-web-app-status-bar-style

 

웹 응용프로그램을 위한 상태 막대의 스타일 설정

 

▷구문


<meta name="apple-mobile-web-app-status-bar-style" content="black">

 

▷설명


apple-mobile-web-app-capable에 서술한 것처럼 전체화면 모드를 먼저


지정하지 않으면 효과가 없음.

 

content가 default이면, 상태 막대는 보통으로 나타남.(기본값)


black으로 설정하면, 상태 막대는 검은색 배경임.


black-translucent 이면 상태바 막대는 검정과 반투명


*default 또는 black으로 설정하면  웹 내용은 상태 막대 아래 표시됨.

 

*black-translucent로 설정하면, 웹 내용이 전체 화면에 표시됨,

 일부는 상태 막대로 인해  흐릿해짐.


4.  format-detection


iOS safari 웹페이지에서 가능한 전화번호의 자동 탐색이 가능하거나 불가능하게 설정


▷구문


<meta name="format-detection" content="telephone=no">

 

▷설명


기본적으로 iOS safari는 전화번호처럼 형식화된 어느 문자열이든 감지하여


전화로 호출하는 링크를 만듦.


telephone=no 라고 지정하면 이 특정을 불가능하게 함.

 

 

 

<같이 참조하면 좋은 글>

 

▣ http://www.quirksmode.org/mobile/metaviewport/  에서 ideal viewport 를 보면, 모바일 브라우저별

 

이상적인 뷰포트가 나옵니다.

 

 https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html#//apple_ref/doc/uid/TP40008193-SW8

 

 http://benfrain.com/understanding-the-viewport-meta-tag-and-css-viewport/


[css] 미디어 쿼리, @media query 이해하기


'html' 카테고리의 다른 글

IE 문서 모드란(meta http-equiv="x-ua-compatible" content="IE=edge")  (0) 2015.01.16
[html5] main 태그  (0) 2015.01.14
meta viewport (메타 뷰포트 태그) 사용법  (12) 2015.01.09
[html5] footer 태그  (0) 2015.01.07
[html5] aside 태그  (2) 2015.01.06
[html5] nav 태그  (4) 2015.01.05
지구별에
html 2015. 1. 9. 17:36

댓글을 달아 주세요

  1. zxc1449 2015.01.12 11:25  수정/삭제  댓글쓰기

    반응형 웹에 꼭 필요한 태그인것같아요! 좋은 글 감사합니다

  2. 처학 2015.01.12 11:28  수정/삭제  댓글쓰기

    뷰포트는 안드로이드에선 인식하지 않는건가요?

    • 지구별에 2015.01.12 11:55 신고  수정/삭제

      현재는 메타 뷰포트 태그를 다른 브라우저(Opera, Android, Mobile firefox)에서도 채택하여 사용하고 있습니다.
      이 태그를 지원하지 않는 브라우저는 IE10 모바일 브라우저(스냅 모드)입니다.
      그리고 메타 뷰포트 태그는 표준이 아니라서
      현재 제안된 표준 @viewport rule이 정식으로 표준이 되면
      나중에 어찌될지 모르겠습니다

    • 처학 2015.01.13 17:37  수정/삭제

      허허.. 이렇게 자세하게.. 답변감사합니다

    • 지구별에 2015.01.14 11:09 신고  수정/삭제

      내용 수정 사항 있습니다 ㅠ.ㅠ
      when snapped, IE10 ignores the meta viewport tag for any viewport smaller than 400 pixels in width (which it is, when in snap mode).

      ie10(스냅 모드)의 경우 뷰포트 너비 400px보다 작을 경우
      메타 뷰포트 태그를 무시한다는 내용입니다 ㅎ

  3. 지나가다 2015.05.11 00:17  수정/삭제  댓글쓰기

    좋은정보감사해요. 도움 되었어여

  4. 물주님 2016.02.21 21:59  수정/삭제  댓글쓰기

    뷰포트 찾아다녔는데 좋은 내용 보고갑니다 ㅠㅠ
    덕분에 이해가 잘됬어요!

  5. 123 2017.05.10 20:59  수정/삭제  댓글쓰기

    좋은 정보 감사합니다

  6. 로지 2017.06.06 13:50  수정/삭제  댓글쓰기

    안녕하세요!
    뷰포트 정보 잘보고 갑니다.
    하지만 뷰포트를 잘 기입했는 데도 불구하고
    적용이 되지를 않는 데 도대체 뭐 때문인지를 모르겠네요..

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width, target-densitydpi=device-dpi" />

    이렇게 적용하였습니다.

  7. 가가가 2017.10.19 16:48  수정/삭제  댓글쓰기

    웹페이지가 뷰포트보다 작으면 스크롤로 나머지를 볼 수 있다하셨는데, 웹페이지가 뷰포트보다 커야 되는 거 아닌가요?? 제가 이해를 못 한건지.. 궁금하네요

  8. 코코넛냠냠 2018.09.05 15:07 신고  수정/삭제  댓글쓰기

    다른 글 보고 헤매다가 이 글 보고 이해했네요
    자세하게 잘 설명해 주셔서 감사합니다

[html5] footer 태그

 

 

[html5] footer 태그

 

footer 요소는 문서에 대한 꼬릿말로서, 그 문서에 대한 정보를 담고 있어야 합니다.

 

대체로 footer가 문서의 끝에 오는 경우가 많지만, 꼭 끝에 올 필요는 없습니다.

 

▶사용 예

 

글쓴이 정보, 저작권 정보, 연락처 정보, 사이트 맵, 맨 위로 돌아가기, 관계된 문서 등.

 

참고로, 글쓴이에 대한 연락처 정보는 address 요소에 속합니다. 

 

 

한 문서에 여러 개의 footer 요소를 지닐 수 있습니다.

 

footer 요소는 문서의 영역을 구분짓는 sectioning 요소가 아닙니다. 새로운 문서를 소개하지는 않으니까요.

 

▶브라우저 지원 

 

ie9.0+, chrome 6.0+, firefox 4.0+, safari 5.0+, opera 11.1+

 

 

 

▶html/css 적용 예를 보겠습니다

 

사용 예 1

 

<body>
 <footer><a href="#">목차로 가기</a></footer>
 <div>
  <h1>FOOTER ELEMENT</h1>
  <p>본문 내용</p>
</div>
<footer><a href="#">목차로 가기</a></footer>
</body>

 

 

사용 예 2

 

 <body>
<article>
<footer>
<p><a href="#">Back to index</a></p>
</footer>
<h3> Footer Element </h3>
<p>The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element.</p>

...

... 

</article>
<footer class="footer">
<p><a href="#">About us</a>
<a href="#">Terms of Service</a>
<a href="#">Sitemap</a></p>
<p>Copyright  © 2015 지구별 안내서 </p>
</footer>
</body>

 

▶실행화면

footer.html

 

 

Back to index와 회색 배경색 칠해진 부분은 footer 요소로 만든 것입니다.

 

참조 : http://www.w3.org/wiki/HTML/Elements/footer

 

   

header 태그

 

[html5] nav 태그

 

[html5] aside 태그

 

html5shiv 삽입하기 (ie6-8에서 html5 적용하기)

'html' 카테고리의 다른 글

[html5] main 태그  (0) 2015.01.14
meta viewport (메타 뷰포트 태그) 사용법  (12) 2015.01.09
[html5] footer 태그  (0) 2015.01.07
[html5] aside 태그  (2) 2015.01.06
[html5] nav 태그  (4) 2015.01.05
[html5] header 태그  (1) 2015.01.02
지구별에
html 2015. 1. 7. 10:28

댓글을 달아 주세요

[html5] aside 태그

 

 

[html5] aside 태그

 

오늘은 aside 요소를 다룰 텐데요

 

▶우선 aside 영어 뜻을 먼저 살펴 보겠습니다.

 

aside 명사 


a remark about someting that is not the main subject of your discusstion
토론의 주요한 주제가 아닌 것에 대한 논평

 

http://www.macmillandictionary.com/dictionary/british/aside_6

 

중요하게 눈여겨 볼 부분은 '주요한 주제가 아니라는 것'

 

이처럼 aside 태그는 주요한 내용이 아니라 부차적인 내용을 담는 태그입니다.

 

aside 요소는, article 요소 안쪽 또는 바깥 쪽에 올 수 있습니다.

 

article 태그 안쪽에 aisde가 있을 때는, aritcle의 본문 내용과 관련 있는 내용이어야 하고,

 

article 태그 바깥쪽에 aisde가 있을 때는, 전체 웹페이지와 관계 있는 내용이어야 합니다.

(div id="sidebar"와 같은 역할)

 

▶브라우저 지원

 

ie9.0+, chrome 6.0+, firefox 4.0+, safari 5.0+, opera 11.1+

 

사용 예 1. 블로그 글이나, 기사에 관계된 내용


이때 aside는 article 요소 안쪽에 사용 됨. 


 

<article>        
<header>위키피디아</header>        
<section>

위키피디아는 의미있는 웹 기반의 자유로운 백과사전으로, 전 세계 누구나 참여할 수 있다.

....

....

</section>        
<aside>

"지구상에 모든 사람이 모든 인류 지식에 자유롭게 접근할 수 있는 세계를 상상해 보라.
그것이 우리가 하는 일이다"

</aside>
</article>

 

 

 이때 aside는 아래 이미지에서 중앙 부분의 짧은 발췌문이라고 보면 이해하기 쉬울 거예요.

 

 

이미지 출처: http://en.wikipedia.org/wiki/File:Pull-Quote.PNG

 

 

사용 예 2. 전체 웹 페이지에 관계된 내용

 

블로그에서 흔히 볼 수 있는 사이드바의 메뉴를 생각하면 됩니다.

 

또 이 영역에 광고를 담을 수도 있습니다. 이때 aside는 article 밖에 위치합니다

 

<article>     
<header>지구별 안내서</header>
<section>본문 내용</section>
</article>
<aside>        
<h3>전체 글 목록 보기</h3>        
<a href="#">HTML</a>        
<a href="#">CSS</a>        
<a href="#">자바스크립트</a>
</aside>

 

 

제 블로그에서 오른쪽 사이드바를 생각하면 됩니다.

 

 

 

 

참조: http://www.html5-tutorials.org/new-section-tags/aside-tag/


주의: 아래 사이트에 따르면 사이드바 역시 article 로 묶을 수 있다고 나오네요. 


대신 본문 내용과 구별된 또 다른 article 이겠지요....


http://www.w3schools.com/tags/tag_aside.asp


 

 

 

HTML5 기본 레이아웃

 

article vs section 차이

 

header 태그

 

nav 태그

 

HTML 기초(태그 작성법, 저장 방법, 대소문자 구별, 서버에 올리는 방법)

 

'html' 카테고리의 다른 글

meta viewport (메타 뷰포트 태그) 사용법  (12) 2015.01.09
[html5] footer 태그  (0) 2015.01.07
[html5] aside 태그  (2) 2015.01.06
[html5] nav 태그  (4) 2015.01.05
[html5] header 태그  (1) 2015.01.02
[html5] article vs section 차이  (2) 2014.12.30
지구별에
html 2015. 1. 6. 11:46

댓글을 달아 주세요

  1. admin 2015.01.06 15:27  수정/삭제  댓글쓰기

    저도 현재 HTML 코딩쪽에 근무중인데도 배워가는게 참 많네요

    • 지구별에 2015.01.06 17:17 신고  수정/삭제

      아... 코딩 쪽에 일하시는군요... ^^ 저는 아직 배워가는 단계라 혹시 지적할 부분이 있으면 주저 말고 말씀해주세요~

[html5] nav 태그

 

 

[html5] nav 태그

 

지난 시간엔 header 요소를 배웠습니다.

 

[html5] header 태그

 

오늘 배울 nav 태그는 사이트에서 주요한 네비게이션 역할을 하는 링크 그룹을 담을 때 사용합니다.

 

nav 요소를 사용하면, 스크린 리더를 이용하는 사용자가 네비게이션을 쉽고 빠르게

 

찾을 수 있고, 필요하지 않을 경우 건너뛰기 할 수도 있습니다.
 

nav 요소는 header나 article 요소 안에 올 수 있습니다.

 

▶사용 예

 

네비게이션 링크

이전 페이지로 가기(previous), 다음 페이지로 가기 버튼(next)

목차

 


▶브라우저 지원

 

ie9.0+, chrome 6.0+, firefox 4.0+, safari 5.0+, opera 11.1+

 

 

 

▶html/css 작성 예

 

html

 <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Guest</a></li>
      <li><a href="#">Noitce</a></li>
    </ul>
  </nav> 


css

nav{background-color:#FFE08C;} 

nav ul{position:relative;margin:0px; padding:0px;}
ul li{display:inline;}

 

▶실행화면

nav.html

 

 

 

위 이미지에서 노란색으로 된 Home Guest Notice 링크 그룹이 nav 태그를 이용하여 만든 것입니다.

 

맨 아래 footer에 About Privacy Policy Contact Us 또한 링크 그룹이지만 주요한 네비게이션 역할을

 

하는 것이 아니기 때문에 nav를 사용하지는 않았습니다. 또 nav 없이 footer만으로도 충분하고요


추가: 하지만 명세에 따르면 footer 안에 nav 태그를 삽입할 수 있습니다. 

 

 

 

HTML5 기본 레이아웃

 

article vs section 차이

 

웹사이트 운영자라면 알아야할 html, css 상식

 

'html' 카테고리의 다른 글

[html5] footer 태그  (0) 2015.01.07
[html5] aside 태그  (2) 2015.01.06
[html5] nav 태그  (4) 2015.01.05
[html5] header 태그  (1) 2015.01.02
[html5] article vs section 차이  (2) 2014.12.30
HTML5 기본 레이아웃  (0) 2014.12.24
지구별에
html 2015. 1. 5. 15:05

댓글을 달아 주세요

  1. 완전변태 2015.01.05 15:40  수정/삭제  댓글쓰기

    주인장님 ^^ 덕분에 많은 것을 알아갑니다. 우연찮게 들려서 글들 쭉 보고 있는데, 뉴! 가 떠있군요 ㅎㅎㅎ 정말 꼼꼼하신 분 같습니다.
    새해 복 많이 받으시고 건강하십쇼^^

  2. 지구별에 2015.01.05 21:15 신고  수정/삭제  댓글쓰기

    감사합니다 자주 찾아주시니 고맙습니다 ㅎ 꼼꼼한 성격은 아니지만 그러려고 노력한답니다^^

  3. admin 2015.01.06 11:27  수정/삭제  댓글쓰기

    li에 inline 값을 주면 따로 float:left 값을 주지 않아도 저렇게 정렬이 되나요?

    • 지구별에 2015.01.06 11:46 신고  수정/삭제

      네 메뉴를 수평 정렬할 때 display:inline, inline-block, inline-table 사용하거나 float를 사용할 수 있어요.
      아래 드롭다운 메뉴 만들기(기초편) 참조해주세요^^
      http://aboooks.tistory.com/329

[html5] header 태그

 

 

[html5] header 태그

 

<header>요소는 사이트 네비게이션이나 페이지에 대한 정보를 담는 태그로, 페이지 상단에 위치합니다.

 

<section>의 머릿말을 담기도 함. <div id="header">와 같은 역할.


보통 하나 이상의 제목 요소( h1-h6 나, hgroup)나 사이트 로고, 저작권 정보를 포함합니다.

 

명세에 따르면 최근에는 <nav>요소를 포함할 수 있습니다.

 

한 문서에 여러 개의 <header>요소가 있을 수 있습니다.  

 

다만,  <footer> <address> 또는 다른 <header> 안에 <header>를 둘 수 없습니다. 
 


▶브라우저 지원


ie9.0+, chrome 6.0+, firefox 4.0+, safari 5.0+, opera 11.1+

 
 

▶html/css 작성 예입니다.

 

html

<header>
    <h1>HEADER</h1>
    <p>The header element represents the header of a section.</p>
</header>

 

css

header{background-color:#6495ed;padding:10px;}

 

 

▶실행화면

header.htm

 

 

 

 

 

실행화면에서 보는 것처럼, header는  블록 요소입니다.

 

 

 

 

오늘이 2014년 마지막 날이네요. (이 글을 12월 31일 썼는데 실수로 발행이 안 되었네요 ㅎ)

 

모두들 한 해 어떻게 보내셨나요?^^

 

저는 올 한 해를 뒤돌아 보면 하고 싶은 것 하고, 먹고 싶은 것 다 먹으며 잘 지낸 것 같지만

 

마음 한켠에 무언가 채워지지 않는 게 있는 것 같아요.

 

내년에는 이 빈 마음을 채우기 위해 살아가고 싶습니다.

 

그럼 오늘도 잘 마무리 하시고, 내년에 뵙겠습니다.

 

새해 복 많이 받으세요 ^_^

 

   

HTML5 기본 레이아웃

 

[html5] article

'html' 카테고리의 다른 글

[html5] aside 태그  (2) 2015.01.06
[html5] nav 태그  (4) 2015.01.05
[html5] header 태그  (1) 2015.01.02
[html5] article vs section 차이  (2) 2014.12.30
HTML5 기본 레이아웃  (0) 2014.12.24
IE6~8을 IE9처럼 보이게 만들기(ie7/ie8/ie9.js 사용법)  (2) 2014.12.19
지구별에
html 2015. 1. 2. 10:56

댓글을 달아 주세요

  1. 박하나 2016.03.13 14:16  수정/삭제  댓글쓰기

    퍼블리싱 처음 시작하면서 지구별안내서가 많은 도움이 되고 있습니다. 태어나서 처음 해보는 거고 취업한지 일주일 정도되서 회사에 폐끼치지않으려고 집에서도 이렇게 지구별안내서 보면서 공부하고 있네요 전글인가? 임신3개월쨰라고 하셨는데 아이는 잘 크고 있나요? 이런 글들 올려줘서 너무 감사합니다. 몰랐던게 쉽게쉽게 이해가 되어 좋아요

[html5] article vs section 차이

 

 

[html5] article, section 차이

 

html5에 새로운 요소들을 알아보겠습니다

 

첫 타자로 article과 section 입니다.

 

 

<article> 요소

 

article 요소는 내용이 각기 독립적이고, 홀로 설 수 있는 내용을 담습니다.

 

주로 블로그 글, 포럼 글, 뉴스 기사 등을 article로 묶을 수 있습니다.

 


▶브라우저 지원


ie9.0+, chrome 6.0+, firefox 4.0+, safari 5.0+, opera 11.1+


 

▶사용 예

 

<article>
        <h1>쇼셜네트워크</h1>

        <p>온라인의 가상공간을 통해...</p>
        ...
</article> 

 

 

 

 

<section> 요소

 

section은 서로 관계 있는 문서를 분리하는 역할을 함.

 

주로, 문서를 다른 주제로 구분짓기 위해 사용됨 

 

▶브라우저 지원
 

ie9.0+, chrome 6.0+, firefox 4.0+, safari 5.0+, opera 11.1+

 

▶사용 예
 

<section>
        <h1>HTML5</h1>

        <p>웹 문서를 만드는 HTML 최신 규격...</p>
        ...
</section>

 

 
article, section, div 차이

 

article 역시 section처럼 문서를 분리하는 역할을 하므로 section과 비슷한 점이 많습니다.

 

또한 section은 div와 자주 혼동되는데 어떻게 구분할 수 있을까요?

 

1. 내용이 독립적이고 스스로 설 수 있는 내용이라면 article을 사용
2. 내용이 서로 관계가 있다면 section
3. 의미적으로 관계가 없다면 div를 사용. (div는 오직 내용을 묶는 역할)

 

 

article 은 스스로 설 수 있는 내용이라는 점에서 section보다 좀 더 구체적인 의미를 지닙니다.

 

 

여러 개의 section을 article로 묶을 수 있고

 

마찬가지로 여러 개의 article을 section으로 묶을 수 있습니다.

 

 

 

사용 예 1.

<article>
   사람
    <section>뚱뚱한 사람</section>
    <section>마른 사람</section>
</article>

 

사용 예 2.

<section id="content">
    <article>블로그 글1</article>
    <article>블로그 글2</article>
    <article>블로그 글3</article>
</section>

 

참조 사이트

http://www.brucelawson.co.uk/2010/html5-articles-and-sections-whats-the-difference/
http://stackoverflow.com/questions/7549561/section-vs-article-html-5


 

HTML5 기본 레이아웃

 

웹사이트 운영자라면 알아야할 html, css 상식

 

html5shiv 삽입하기 (ie6-8에서 html5 적용하기)

 

IE6~8을 IE9처럼 보이게 만들기(ie7/ie8/ie9.js 사용법)

 

 

지구별에
html 2014. 12. 30. 15:52

댓글을 달아 주세요

  1. kmg8280 2017.01.05 13:49  수정/삭제  댓글쓰기

    좋은 글 잘보고갑니다.

  2. 마법사 31 2020.10.06 21:17 신고  수정/삭제  댓글쓰기

    도움 많이 받았어요 ~

HTML5 기본 레이아웃

 

 

HTML5 기본 레이아웃

 

오늘부터 HTML5에 대해 조금씩 다뤄 보도록 하겠습니다.

 

 

▶HTML4 기본 레이아웃

 

HTML4까지 기본적인 레이아웃을 만들려면 이렇게 작성했습니다. 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" http://www.w3.org/TR/html4/loose.dtd">/*1*/
<html lang="ko">
<head>

<title>HTML4</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">/*2*/
<style> CSS 스타일</style>
</head>

<body>
<div id="header"> 머릿부분(페이지 제목 등)</div>
<div id="menu">메뉴</div>
<div id="contents">본문 내용</div>
<div id="footer">꼬리말(저작권 정보 등)</div>
</body>
</html>

 

 

1. HTML4의 DOCTYPE 선언

 

비표준 모드quirks mode, 표준 모드 standards mode 차이와 DOCTYPE

 

DOCTYPE 선언하는 이유와 버전별 선언 정리 (HTML5, HTML 4, XHTML)

 

2. HTML4의 문자 부호화 방식

 

[html] meta 태그 사용법

 

 

레이아웃을 만들 때 보통 div를 만들고 고유 id를 부여해 스타일을 주었습니다.

 

 

▶HTML5에서는 이렇게 바뀝니다.

 

<!DOCTYPE html>/*1*/
<html lang="ko">

<head>
<title>HTML5</title>
<meta charset="utf-8">/*2*/
<!--[if lt IE 9]> /*3*/
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<style>CSS 스타일 </style>

</head>
<body>
<header> 머릿부분(페이지 제목 등) </header>
<nav> 메뉴</nav>
<section> 본문 내용 </section>
<footer>꼬리말(저작권 정보 등)</footer>
</body>
</html>

 

 

1. HTML5의 DOCTYPE 선언

 

2. HTML5의 문자 부호화 방식

 

3. IE9 이하 버전에서 HTML5에 대응하기 위한 자바스크립트

 

html5shiv 삽입하기 (ie6-8에서 html5 적용하기)

 

 

<div id="header"> 대신에 <header>

<div id="menu"> 대신에 <nav>

<div id="contents"> 대신에 <section>

<div id="footer"> 대신에 <footer>요소를 사용했습니다.

 

이들 요소는 모두 html5에 새로 도입된 의미적인 요소(sematic element)입니다.

 

 

 

 

HTML5 의미적 요소

 

semantic의 뜻은 '의미의' '의미론적인' 입니다.

 



div, span 같은 비의미적인 요소는 내용에 대해 아무것도 말해주는 것이 없지만

 

img는 이미지를 담고,  table은 데이터가 들어가 표를 담고,  form의 양식을 담고 있다는 점에서, 

 

태그 자체에 의미를 담고 있습니다.

 

검색 엔진은 의미적인 요소를 토대로 정보를 분석하고 결과물을 추출합니다.

 

 

HTML5의 새로운 의미적 요소는 다음과 같습니다.

 

header
nav
section

article
aside
footer
main
mark
summary
time
details
figcaption
figure 

이미지 출처: http://www.w3schools.com/html/html5_semantic_elements.asp

 

이제 레이아웃을 만들 때 태그 작성이 좀 더 간결해졌습니다.

 

또 누가 보더라도  헤더와, 본문, 사이드바, 푸터 를 쉽게 구분 할 수 있게 되었습니다. 

 

다음 시간부터터 각 요소에 대해 하나씩 알아보겠습니다~

 

 

▶ TIP

 

* HTML5 표준에서는 <html> <body> 태그를 생략해도 유효합니다.

 

하지만 <html>요소에서 페이지 언어를 지정하므로 생략을 절대 권하지는 않습니다

 

(언어 선언은 스크린 리더나, 검색 엔진에 중요함)

 

또 html, body를 생략하면 DOM과 XML 소프트웨어와 충돌할 수  있고,


body를 생략할 경우  ie9에서 에러를 일으킬 수 있습니다.

 

* HTML5 표준에서는 <head> 역시 생략할 수 있습니다

 

기본값으로, 브라우저는 body 앞 모든 요소에 head 요소를 추가합니다.


* HTML5에서 <title> 요소는 필수입니다. 타이틀은 되도록 의미 있게 만듭니다. 

 

* 문서의 언어와 문자 부호화 방식은 가능한한 초반에 규정 합니다.

 

브라우저가 문서를 올바로 렌더링히고, 검색 엔진이 색인을 만들 때 적절히 할 수 있도록이요

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>HTML5</title>
</head>

 

참조 사이트 : http://www.w3schools.com/html/html5_syntax.asp

 

 

 

HTML 기초 (markup, 브라우저 종류/ XHTML, XML, HTML5, DHTML 차이)

 

HTML 기초(태그 작성법, 저장 방법, 대소문자 구별, 서버에 올리는 방법)

 

head 에 들어가는 태그 (title, style, script, meta 태그)

 

CSS란? (HTML과 CSS의 차이, CSS 작성법)

 

지구별에
html 2014. 12. 24. 11:37

댓글을 달아 주세요

IE6~8을 IE9처럼 보이게 만들기(ie7/ie8/ie9.js 사용법)

 

 

IE6~8을 IE9처럼 보이게 만들기(ie7/ie8/ie9.js 사용법)

 

우리나라에서 자주 사용하는 브라우저는 인터넷 익스플로러(IE)와 크롬(chrome) 정도로

 

구분할 수 있을 것 같은데요. 사용하는 버전도 다양해서 IE만 보자면 IE11버전 점유율이 가장 높고

 

IE7이 20% 정도, IE8이 30% 정도 입니다. (이건 구글 애널리틱스에 기반한 제 개인적인 통계입니다.)

 

브라우저 점유율 (IE, 크롬 점유율 비교)

 

 

블로그 운영자라면,  이 수치는 무시할 수 없는 수준이고, 웹사이트 개발자라면 1% 미만도 안 되는 IE6 이용자까지도

 

고려해서 사이트를 설계해야 할 경우도 있습니다.

 

 

 

IE 구 버전(IE6~8)의 문제

 

인터넷 익스플로가 초반에 무료로 배포되면서 우리나라에는 유독 IE 이용자가 많습니다.

 

다른 브라우저(크롬, 사파리, 파이어폭스 등)에 비해 IE 구버전은 표준과 호환이 안 되는 문제가

 

있고 더구나 IE6에 내재하는 버그가 많아 표준 브라우저에서 보이는 것과 다르게 표시될 수 있습니다.

 

IE7은 보다 많이 개선되었지만 CSS2.1 지원이 부족합니다. 

 

특정 브라우저 버전에 맞게 스타일 시트를 작성하는 것도 방법이겠지만, 이는 복잡하고 시간 소모적입니다.

 

이보다 더 쉽고 간단한 방법이 있습니다.

 

 

IE7 자바스크립트 라이브러리

 

IE7이라 부르는 자바스크립트 라이브러리를 사용하는 것인데요.

 

IE7은 IE가 표준을 준수하는 브라우저처럼 행동하게 만드는 자바스크립트 라이브러리입니다.


이 자바스크립트 라이브러리로 수많은 HTML, CSS 문제들을 고치고,

 

투명 PNG가 IE5, IE6에서 올바르게 작동하도록 할 수 있습니다.

 

 

사용법 : 아래 붉은색으로 된 코드를 <head> 안에 넣습니다. <style>태그 앞 뒤로 넣을 수 있음.

 

if lt ie7 는 ie7 이하일 경,우 if lt ie8은 ie8 이하일 경우라는 뜻으로, 해당 ie를 제외한 다른 브라우저들은

 

이 구문을 주석으로 보고 무시합니다.

 

 

IE7.js

 

IE5.5~6 을 IE7처럼 보이게 만듦.

 

 

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js"></script>
<![endif]-->

 

 

IE8.js

 

IE5.5~7을 IE8처럼 보이게 만듦

 

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->

 

*IE8.js 파일을 사용하면 IE7.js를 추가할 필요가 없음.

 

 

IE9.js

 

IE5.5~8을 IE9처럼  보이게 만듦

 

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

 

*IE9.js를 사용하면 IE7/IE8.js를 추가할 필요 없음.

 

위의 코드는 구글 코드로

 

직접 파일을 다운 받아 업로드 하는 방법도 있습니다.

 

 

자바스크립트 라이브러리 직접 다운받기

 

1. 아래 사이트 접속 후

 

http://code.google.com/p/ie7-js 

 


 

2. 화면 왼쪽에 downloads 에서 ie7-2.1(beta4).zip  파일을 다운 받습니다.

 

(아래 이미지에서 빨간색 화살표 부분)

 

 

 

3. 압축을 풀면 [ie7] 폴더가 생성되고 그 안에 [src] 폴더가 있는데요,

 

ie7 폴더 안의 파일과 src 파일은 본래 같은 파일이지만, src 파일은 읽을 수 있는 내용이고

 

메인 폴더 안의 파일은 압축되어 있어 읽기가 힘듭니다.

 

4. 업로드 할 때는 사이트에 [ie7]을 만들고 그 안에 필요한 파일과 아래 blank 파일을 넣습니다

 

-ie9.js

-blank.gif

 

 

ie7-squish.js 파일은 뭔가요?

 

ie7.js에 의해 고쳐지지 않는 가장 중요한 버그가 아래 셋입니다.(ie6 이하 버전에서 발생)


-이중 여백 float 버그(double margin float bug)
-스크롤되지 않는 내용 버그(unscrollable content bug)

-있었다 사라지는 버그(Peekaboo bug )

 

이 버그는  ie7-squish.js 파일로 교정될 수 있습니다.

 

ie7.js에 이 부분을 포함하지 않는 이유는 , 이 때문에 일부 요소의 행동을 바꿀 수 있어 레이아웃에

 

손상을 초래할수 있어 그렇다고 합니다. 

 

ie7-squish.js 파일도 추가하려면 다음처럼 합니다.(ie7 폴더가 있다고 가정할 때)

 

 <!--[if lt IE 9]>
 <script src="ie7/IE9.js"></script>
 <script src="ie7/ie7-squish.js"></script>
 <![endif]-->
 

 

아래는 참고 삼아 읽어보시면 좋습니다.

 

http://ie7-js.googlecode.com/svn/test/index.html

 

위 사이트는 각 자바스크립트 라이브러리가 교정하고 있는 상세 목록입니다.

 

간단하게 정리하면 다음과 같습니다.


 

IE7.js에서 담고 있는 것

 

 

-다음 css 선택자를 지원

자식 선택자 >
인접형제 선택자 +
일반형제 선택자  ~
.multiple.classes  
:hover 
:first-child 
[attr] 
[attr="value"] 
[attr~="value"] 
[attr|="value"] 
[attr^="value"] 
[attr$="value"] 
[attr*="value"]

 

- fixed positioning 지원(background-attachement나 position:fixed )

- background-image 속성과, img 요소에서 png alpha transparency 지원
- min-width, min-height, max-height, max-width 지원
- overflow:visible 지원

 

 
IE8.js에서 담고 있는 것

 

-다음 css 선택자 지원


::after
::before
:active
:focus
:lang()


IE9.js에서 담고 있는 것

 

-다음 css 선택자 지원

:checked

:disabled 
:empty 
:enabled 
:indeterminate 

:first-of-type 
:last-child 
:last-of-type 

:not() 
:nth-child() 

:nth-last-child() 
:nth-last-of-type() 

:nth-of-type() 

:only-child 
:only-of-type 
:root 

:target

 

-opacity 속성 지원

 

-다음 요소의 렌더링을 지원하고, 기본적 스타일을 제공함.


article, aside, audio, canvas, details, figcaption, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, summary, time, video

 

참고로, 자바스크립트는 사용자가 꺼 놓으면 작동하지 않습니다.

 

또 저는 ie7을 사용하고 있는데, 이 자바스크립트 라이브러리를 추가했을 때 아무것도 표시되지 않네요.

 

제 브라우저의 설치 결함 때문인지도 모르겠습니다.

 

 

 

html5shiv 삽입하기 (ie6-8에서 html5 적용하기)

 

크로스브라우징, 웹표준과 핵(hack)

 

haslayout 이란 (IE버그 해결책)

 

비표준 모드quirks mode, 표준 모드 standards mode 차이와 DOCTYPE

 

DOCTYPE 선언하는 이유와 버전별 선언 정리 (HTML5, HTML 4, XHTML)

 

지구별에
tags : ie7.js, ie8.js, ie9.js, It
html 2014. 12. 19. 15:41

댓글을 달아 주세요

  1. 알송달송IT세상 2014.12.19 18:12  수정/삭제  댓글쓰기

    주석처리해노흔 이런 것들이 무슨의미인지 알았습니다 좋은 글 잘 봤습니다

html5shiv 삽입하기 (ie6-8에서 html5 적용하기)

 

 

html5shiv 삽입하기 (ie6-8에서 html5 적용하기)

 

며칠째 글이 잘 써지지가 않네요.

 

이야기를 하지 않으려 했지만, 앞으로 글이 올라오는 주기가 길어지면

 

주인장이 어딘가 변했다고 생각을 하실 수도 있어 말씀 드립니다.

 

지금 제가 임신 3개월째입니다.^^ 그래서인지 무슨 일을 하나 끝내기에

 

체력이 많이 딸려요. 개인적으로 하고 있는 일도 있어... 예전만큼 글을 자주 올리지는 못할 것 같아요.

 

일주일에 2회 정도로 생각하고 있어요. 컨디션이 좋아지면 더 열심히 해야겠죠..

 

사실 월요일부터 gradient 속성을 정리해 보려 했는데, 공부해야 할 부분이 너무나

 

광범위하더라고요. 아니면 현 시점이라 그런 생각이 부쩍 드는지 모르겠어요.

 

버거운 gradient 속성 정리는 다음으로 미루고 html5부터 다뤄 보기로 했어요.

 

오늘은 html5에 들어가기에 앞서, 낮은 버전의 브라우저에서도 html5의 새로운 요소를

 

적용하는 방법을 알아보겠습니다.

 

 

 

 

html5의 새로운 요소들은 최근 브라우저에서 모두 지원이 가능합니다.

 

그리고, 모든 브라우저는(최신이든 오래되었든) 알려지지 않은 새로운 요소는 자동으로 인라인 요소로 처리합니다.

 

이 때문에, 오래된 브라우저에게(심지어 ie6에게도) 새로운 요소를 어떻게 처리할지 알려주는 방법이 있습니다.

 

예를 들어, html5에 새로운 요소 몇가지만 보면

 

header, section, footer,

 

이들 요소는 블록 요소입니다.

 

오래된 브라우저가 이들 요소를 올바로 처리할 수 있도록 이들 요소를 모두 display:block으로

 

지정할 수도 있습니다.

 

header, section, footer, nav, main, aside, article, figure
{display:block;}

 

 

IE 구버전의 문제

 

하지만, ie6~8은 알려지지 않는 요소는 인식할 수 없는 문제가 있었습니다.

 

새로운 요소들은 자식을 가질 수 없고, css의 스타일 적용도 되지 않았습니다. 

 

그러던 중 Sjoerd Visscher가 IE에서 알려지지 않은 요소에도 CSS 스타일을 적용할 수 있도록

 

흥미로운 기술을 언급합니다.

 

즉 <head> 안에 아래 스크립트를 추가하는 것이지요.

 

document.creatElement(elementname)


이렇게 하면  css 엔진이 그 이름을 지닌 요소를 인식하도록 만듧니다. 

 

 

예를 들어 <neo>라는 가상의 html 요소가 있다고 했을 때

 

<neo>이 요소는 가상으로 만든 html 요소임 </neo>

 

아래 css를 추가하면,

 

neo {
    display: block;
    background-color: yellow;
    padding: 20px;
    }

 

이렇게만 해도 최근 브라우저에는 바탕 화면 노란색에 블록 요소로 표시합니다.

 

하지만 ie 버전이 이 새로운 요소와 css를 인식하도록  <head>안에 아래 스크립트를 추가합니다.

 


 

<head>
<script>document.createElement("neo")</script>
<style>
neo {
    display: block;
    background-color: yellow;
    padding: 20px;
    }
</style>
</head>

 

 

▶ie7에서 실행한 화면  

 

전혀 새로운 가상의 요소를 사용했는데도 스타일이 정상 적용되었습니다.

 

 

위 스크립트만으로 모든 것이 해결되는 것은 아니었던 터라

 

Sjoerd Visscher는 좀 더 발전된 형태의 html5shiv를 고안합니다. (html5shim도 같은 말)

 

html5shiv는  ie 8과 이전 버전에서 html5 요소의 스타일링을 가능하게 하는데,

 

아래 shiv 코드를 <head> 안에 넣으면 ie9 이하 버전은 이 구문을 읽고 이해합니다.

 

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

 

 

위 코드는 구글코드로, 이렇게 해도 작동은 하지만, 최신 버전을 바로 업데이트시키지 못하므로

 

직접 아래 사이트에서 다운받아 삽입하는 방법이 좋습니다.

 

 

https://github.com/aFarkas/html5shiv

 

 

1. 위 사이트 접속후,  Manual installation 에 나온 파일을 다운 받습니다.

 

( Ctrl+f 로 latest zip package라고 검색하여 다운)

 

 

2. 압축을 푼 후, html5shiv.js  파일을 원하는 폴더로 업로드시킵니다.

 

3. <head> 안에 아래 조건부 주석을 삽입합니다.

 

(src안의 주소는 알맞은 폴더명을 적어주셔야 합니다.

예로 myfolder 안에 이 파일이 있다면 src="myfolder/html5shiv.js" )

 

<head>

<!--[if lt IE 9]>
  <script src="html5shiv.js"></script>
<![endif]-->

<style>

</style>

</head>

 

 

ie6~8버전에서 프린트를 할 경우  latest zip package에서 다운 받은 파일 중

 

html5shiv-printshiv.js 을 사용하세요. 이 파일은 html5shiv.js 내용까지 포함합니다.

 

html5의 새로운 요소를 사용한 아래 파일 다운받아 실행해 보세요~ 

 

html5.htm

 

 

※<!--[if lt IE 9]> 이런 구문을 조건부 주석(conditional comment)라고 하는데,

 

조건부 주석에 관해서는 아래 링크 참조해주세요.

 

크로스브라우징, 웹표준과 핵(hack)

 

 

  참조 사이트

 

http://www.w3schools.com/html/html5_browsers.asp

 

http://www.paulirish.com/2011/the-history-of-the-html5-shiv/

지구별에
html 2014. 12. 18. 16:57

댓글을 달아 주세요

[html] meta 태그 사용법

 

 

[html] meta 태그 사용법

 

html 강좌 초기에 <head>에 들어가는 태그란 제목에서

 

잠깐 meta 태그를 언급했습니다.

 

head 에 들어가는 태그 (title, style, script, meta 태그)

 

 

html을 공부하는 사람뿐 아니라 블로그나 웹사이트를 운영하는 분들은  자신의 사이트가

 

좀 더 상위 노출되길 바라는 마음에서 이 meta 태그를 어떻게 활용할까 생각해 보셨을 법한데요.

 

오늘은 이 meta 태그 사용법을 자세히 알아 볼까 합니다.

 

 

우선 기초적인 부분을 공부하고 맨 마지막에 현재 meta 태그가 검색 엔진에서

 

어떻게 쓰이고 있는지, 잘 활용하는 방법도 알아볼게요.

 

 

 


meta태그는 metadata(정보에 대한 정보를)제공하는 역할을 합니다.

 

쉽게 말해, 사이트 자체에 대한 정보나, 저작자, 문서의 언어 등을 말합니다.

 

화면에는 별달리 표시되는 것이 없지만, 검색 엔진이나 브라우저에 읽힙니다.

 

meta 태그는 보통 name과 value 쌍으로 사용 됩니다.

 

예:

 

검색 엔진을 위한 키워드에서,


<meta name="keywords" content="HTML, CSS, JavaScript">

 

사이트에 대한 설명,


<meta name="description" content="html css 자바스크립트 강좌">

 

사이트 저작자 표시,


<meta name="author" content="지구별에">
 

 

html 에서 <meta> 태그는 끝내는 태그가 없으며,

 

xhtml에서는, <meta />로 대신합니다. 

 

예: <meta name="author" content="지구별에" />

 

 

그럼 각각의 속성에 대해 알아볼게요~

 

 

name 속성

 

▶ 문법 : <meta name="value">

 

메타 정보에 대한 이름, 즉 뒤에 쌍으로 나오는 content 정보에 대한 이름

 

예: <meta name="author" content="지구별에">

 

에서 name="author"는 content="지구별에"에 대한 이름입니다.

 


http-equiv 속성을 설정하면, name 속성은 사용하지 않음.

 


▶ 속성값 : keywords | description | author | generator | application-name

 

keywords 문서에 대한 핵심어(keywords)를 쉼표로 분리하여 표시

 

                 문서에 대한 정보를 검색 엔진에 제공.


description 문서에 대한 설명. 검색 엔진은 검색 결과와 함께 이 설명을 가져감 


author 저자 이름

 

generator 그 문서를 생성하기 위해 사용된 소프트웨어

 

application-name  문서를 표시하는 웹 어플리케이션 이름

 

 

 


content 속성

 

▶ 문법 : <meta content="text">

 

name 속성과 http-equiv와 연관된 값을 줌.


▶ 속성값


text : 메타 정보에 대한 내용

 

예: <meta name="keywords" content="HTML, CSS">

     <meta http-equiv="content-type" content="text/html; charset=UTF-8">

 

 

http-equiv 속성

 

content 속성의 정보/값을 위한 HTTP header를 제공함.

 

http-equiv 속성은 HTTP 응답 header를 모방하기 위해 사용될 수 있음.

 

html4 에서는 문자설정(chracter set)을 할 때 http-equiv 속성을 사용했지만

 

html5에서는 문자 설정 방법이 더욱 간단해짐. 

 

 

HTML 4.01: <meta http-equiv="content-type" content="text/html; charset=UTF-8">


HTML5: <meta charset="UTF-8">

 



▶ 문법 <meta http-equiv="content-type|default-style|refresh">

 

▶ 속성값

 

content-type 문서에 대한 문자 부호화 방식을 지정.

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

 

refresh 새로고침하기 위한 문서의 간격

<meta http-equiv="refresh" content="300">

 

이 속성의 사용을 권장하지 않음.


default-style 사용할 선호된 스타일 시트

<meta http-equiv="default-style" content="선호하는 스타일시트">

 

 

charset 속성(html5에서 새로운 속성)

 

html 문서의 문자 부호화 방식을 지정.

 
html4: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
위처럼 해도 여전히 가능하지만 html5 방식이 좀 더 효율적임.

 

html5:  <meta charset="UTF-8">


▶문법 <meta charset="character_set">

 

▶속성값


character_set   문서에 대한 문자 부호화 방식

 

이론상으로는 어느 문자 부호화방식으든 사용될 수 있지만 모든 브라우저가 모든 문자 부호화방식을

 

이해하는 것은 아님.  

 

UTF-8    유니코드를 위한 문자 부호화
 

모든 문자 부호 보기 http://www.iana.org/assignments/character-sets/character-sets.xhtml
 


scheme 속성 (html5에서 지원되지 않음)

 

content 속성의 값을 해석하기 위해 schme(format 이나 uri)를 지정.


▶문법: <meta scheme="format|URI">

 

▶속성값 format/URI 

 

: content 속성 내부 값의 format을 지정, 또는 정보를 담고 있는 url를 가리킴

 

 

지금까지 meta 태그의 여러 속성과 속성값을 배웠습니다.

 

저도 자료를 정리하면서 알게 된 것이지만 meta 태그가 결코 검색에 만능 태그는 아닙니다.

 

 

keywords에 대하여

 

meta 태그중 keywords 속성은 문서에 대한 핵심어를 검색 엔진에 전달해

 

상위 검색에 도움이 된다고들 알고 있지만, 초기 검색 엔진에서 이 keywords 는 상당히

 

중요한 요소였지만 현재는 스팸 여부를 진단하기 위해 마이크로소프트의 being에서 가져가는 것 말고는

 

오늘날 주요 검색 엔진은 keywords 을 더 이상 신경 쓰지 않는다고 합니다.

 

오히려 이 keywords 속성을 쓰지 말 것을 권유하기도 합니다. (http://www.thesitewizard.com/archive/metatags.shtml)

 

meta 태그가  상위에 노출되는 마술적인 해결책은 아니지만, 검색 엔진에서 사이트에 대한 올바른 정보를

 

제공하는 데 도움이 됩니다.

 

 

description 속성

 

예를 들어 사이트 정보를 설명하는 description 속성의 경우 사용했다고 해서, 상위 랭킹이 되지는 않지만,

 

사이트에 대한 정확한 정보가 나와 있을 때 사용자는 클릭할 가능성이 더 높습니다.

 

description을 쓰지 않을 경우, 또는 설명이 부정확할 경우 검색엔진은 페이지에 있는 것 중 다른 것으로 대체 합니다.

 

목차 중 상단에 있는 것을 노출시킨다든지...

 

 

<meta http-equiv="refresh" content="30">

 

페이지를 특정 시간 간격마다 새로 고침하는 refresh도 더 이상 사용하지 않는답니다.

 

사용자 통제를 빼앗고, 서버 측에서 하는 더 나은 방법이 있기 때문

 

 

<meta name="robots" content="noindex, nofollow">

 

이렇게 하면, 구글에서 자신의 사이트가 색인화되거나 링크 연결이 되지 않도록 설정할 수 있습니다.

 

주로 사이트가 개발중일 때, 자신의 사이트 중 일부 페이지가 구글에 노출되길 원치 않을 때 사용합니다.

 

 

<meta name="robots" content="index, follow">

 

라고 하면 다시 페이지를 색인화하고, 링크 연결이 됩니다.

 

 

그럼 자주 쓰는 meta 태그는?

 

description, author, charset 속성 정도가 될 것 같습니다.

 

[참조 사이트]

http://searchenginewatch.com/sew/how-to/2067564/how-to-use-html-meta-tags

http://www.thesitewizard.com/archive/metatags.shtml

http://www.w3schools.com/tags/tag_meta.asp

 

 

 

meta viewport (메타 뷰포트 태그) 사용법

 

[CSS] @viewport rule

 

HTML 기초(태그 작성법, 저장 방법, 대소문자 구별, 서버에 올리는 방법)

 

CSS란? (HTML과 CSS의 차이, CSS 작성법)

 

HTML 기초 (markup, 브라우저 종류/ XHTML, XML, HTML5, DHTML 차이)

지구별에
html 2014. 12. 17. 16:38

댓글을 달아 주세요

  1. 93m 2014.12.17 20:06 신고  수정/삭제  댓글쓰기

    좋은 정보 잘 보구 갑니다 :D. 즐겨찾기 등록해놓고 시간 짬 날때 필기 해놔야겠습니다..ㅋㅋ..
    <meta> 태그와 관련된 내용이 이렇게 다양할 줄은 몰랐네요. ㅋㅋ

    <meta> 태그중에 아는 거라곤 <meta charset="utf-8"/> 이것 뿐인지라..ㅠㅠ

    • 지구별에 2014.12.18 09:29 신고  수정/삭제

      감사합니다^^ meta 태그 중 자주 쓰이는 것은 본문 하단에 있으니까 그것도 참조해주세요. ^^

  2. admin 2015.01.07 18:21  수정/삭제  댓글쓰기

    viewport 속성도 넣어주시면 좋을거같아요~

    • 지구별에 2015.01.08 09:13 신고  수정/삭제

      명세에는 없어서 지나쳤는데...반응형 웹에서 viewport를 사용하나 봐요. 나중에 관련글을 써 볼게요 고맙습니다^^

  3. 2019.09.29 16:12  수정/삭제  댓글쓰기

    비밀댓글입니다

  4. 행복한시지프 2021.03.02 17:14 신고  수정/삭제  댓글쓰기

    감사합니다.

[html5] datalist 태그

 

 

[html5] datalist 태그

 

 

datalist 태그는 html5에 새로 추가된 속성으로, form 요소에서 미리 지정된 옵션 목록을 제공합니다.

 

쉽게 말해, 사용자들이 특정 글자를 입력하면 그에 해당하는 미리 지정된 목록을 보여줍니다.

 

 

▶사용 예:


  <input type="text" list="browser" >
  <datalist id="browser">
   <option value="Internet Explorer">
   <option value="Google Chrome">
   <option value="FireFox">
   <option value="Safari">
  </datalist>
 
사용 예에서 본 것처럼, datalist는  option목록을 지닌 <input>요소 안에서 사용하며

 

<input>의  list 속성은, <datalist>의 id와 같은 값을 사용해 함께 묶을 수 있어요.

 

예: <input list="browser"> <datalist id="browser">

 

▶브라우저 지원: ie10+, chrme 20+, ff 4.0+, opera 9.0+

 

 

 


 

html 작성 예를 보겠습니다~

datalist.html

 

 

 html

 <form action="url" method="get">
<h3>통학 수단을 선택하세요</h3>
<input list="trans" name="means">
<datalist id="trans">
  <option value="bus">
  <option value="car">
  <option value="bicycle">
  <option value="walk">
</datalist>
<input type="submit">
</form>

 



▶ 실행화면

 

b를 클릭하면 b에 해당하는 자동 완성 목록(bus/ bicycle)이 나타납니다.

 

오늘로서 html form 양식에 관련한 태그나 속성을 모두 알아 본 것 같네요.

 

아직까지 스크립트 언어를 몰라 form 양식과 연동시키기는 어렵지만

 

한 번 알아두면 써 먹을 기회가 있으리라 생각합니다...

 

 

어제 저녁  가수 신해철 씨의 안타까운 소식을 전해들었는데... 너무나 갑작스럽고

 

생각지도 못했던 일이라 실감이 안 나네요. 그의 음악을 들으며 커왔던 세대이기에

 

더 안타깝기 그지 없습니다. 다음 생에서 더 좋은 음악을 들려주시길 진심으로 기도합니다

 

 

 

form 태그(html 양식 만들기)

 

[html] input 태그

 

input type 속성

 

[html] button 태그

 

[html] label 태그

 

[html] option 태그

 

'html' 카테고리의 다른 글

html5shiv 삽입하기 (ie6-8에서 html5 적용하기)  (0) 2014.12.18
[html] meta 태그 사용법  (6) 2014.12.17
[html5] datalist 태그  (0) 2014.10.28
fieldset 태그, legend 태그  (0) 2014.10.27
[html] optgroup 태그  (0) 2014.10.24
[html] option 태그  (0) 2014.10.22
지구별에
html 2014. 10. 28. 13:32

댓글을 달아 주세요

fieldset 태그, legend 태그

 

 

[html] fieldset 태그, legend 태그


 

지난 시간에 optgroup 태그는 관계 있는 옵션들끼리 묶는 역할을 한다고 했습니다.

 

[html] optgroup 태그

 

fieldset 태그도 이와 유사합니다.

 

fieldset은 form 양식에서 관계된 요소들끼리 묶어주며,  관계 요소 주위에 박스를 그립니다.

 

fieldset은 주로 legend 태그와 함께 쓰이는데,  fieldset 요소에 대한 설명글 입니다.

 

fieldset 문법: <fieldset >내용</fieldset>

legend 문법: <legend>내용</legend>
 

 

▶함께 사용할 수 있는 속성

 

속성 속성값 설명
name text fieldset 이름
form form id fieldset이 속한 form의 id
disabled disabled form에서 관계 요소그룹이 비활성화 됨
문법: <fieldset disabled> , xhtml에서는 <fieldset disabled="disabled">
브라우저 지원: ie, safari 제외하고 주요브라우저 지원 함

 


▶html/css 작성 예

fieldset.htm

 

 

 html

 <form>
  <fieldset name="flower">
    <legend>flower</legend>

<input type="checkbox" name="flower" value="rose">rose<br>
<input type="checkbox" name="flower" value="ivy">ivy<br>
<input type="checkbox" name="flower" value="jasmin">jasmin<br>

  </fieldset>
</form>

 

 

 css

fieldset{
width: 200px;
background-color:#F361A6;
}

 

 

▶ 실행 화면입니다.

 

fieldset으로 묶은 부분에 선이 그려졌고, fledset에 대한 설명글 flower가 표시됩니다.

 

 

 

 다음 시간엔 datalist를 알아보겠습니다~

 

option 태그

 

select 태그

 

button 태그

 

input type 속성

 

'html' 카테고리의 다른 글

[html] meta 태그 사용법  (6) 2014.12.17
[html5] datalist 태그  (0) 2014.10.28
fieldset 태그, legend 태그  (0) 2014.10.27
[html] optgroup 태그  (0) 2014.10.24
[html] option 태그  (0) 2014.10.22
[html] select 태그  (2) 2014.10.21
지구별에
html 2014. 10. 27. 11:08

댓글을 달아 주세요

[html] optgroup 태그

 

 

[html] optgroup 태그

 

며칠 전 option 태그를 배웠습니다.

 

[html] option 태그

 

 

option은 select 태그나 datalist 태그 안에서 사용하여, 드롭다운 목록을 만드는 역할을 합니다.

 

optgroup 태그는  옵션 목록이 길 경우 관계 있는 옵션들끼리 묶어주는 기능을 합니다.

 

주로 label 속성과 함께 사용

 
문법: <optgroup label="female">내용 </optgroup>

 

▶함께 사용할 수 있는 속성

속성 속성값 설명
disabled disabled 옵션 그룹이 비활성화 됨
문법: <optgroup disabled>, xhtml에서는 <optgroup disabled="disabled">
label text 옵션 그룹에 대한 설명

 

 

html 작성 예를 보겠습니다~

 

 html

<h4> 신발 사이즈 선택</h4>
<select name="size" >
<optgroup label="female">
  <option value="225">225mm</option>
  <option value="230" >230mm</option>
  <option value="235">235mm</option>
 </optgroup>
<optgroup label="male">
  <option value="255">255mm</option>
  <option value="260" >260mm</option>
  <option value="265">265mm</option>
 </optgroup>
</select>

 

 

 

 

▶실행 화면

female 과 male로 구분이 되어 표시가 됩니다. 소스 파일 다운 받아 실행해 보세요

optgroup.htm

 

 

[html] input type 속성

 

textarea 태그

 

select 태그

 

button 태그

 

 

'html' 카테고리의 다른 글

[html5] datalist 태그  (0) 2014.10.28
fieldset 태그, legend 태그  (0) 2014.10.27
[html] optgroup 태그  (0) 2014.10.24
[html] option 태그  (0) 2014.10.22
[html] select 태그  (2) 2014.10.21
[html] button 태그  (1) 2014.10.20
지구별에
html 2014. 10. 24. 10:53

댓글을 달아 주세요

Powerd by Tistory, designed by criuce