HTML5 cite 엘리먼트(element)

웹표준/HTML5 훑어보기 2010. 6. 25. 19:52

HTML5 cite 엘리먼트(element)

cite 엘리먼트는 인용할때 사용한다. 요약구문이있다면 그 출처를 밝히는셈이다.

중요한점은 title of a work 즉 작업의 제목을 밝히는셈이다.


<p>내가좋아하는책은 나관중의<cite>삼국지</cite>이다.
내가좋아하는 만화책은 <cite>전략삼국지</cite>이다</p>

<p><q>이예제는 틀렸습니다</q>, <cite>아무개</cite>가 말했다.</p>

첫번째 문장은 삼국지라는 책의 제목을 인용 하고있다. 명확한 출처이다. 흔히 착각하는 것으로 위의
예제에서 아래는 틀린예제이다.아래는 작업의 출처가 아닌 이름을 인용하고 있다.

또 주의할 점은 과도하게 많은 것을 인용하지않는다. 정확한것만 인용해야한다. 아래예제 참조


<p>According to <cite>the Wikipedia article HTML</cite>,
 as it  stood in mid-February 2008</p>

<p>According to the Wikipedia article <cite>HTML</cite>,
 as it  stood in mid-February 2008</p>

첫번째 코딩은 the Wikipedia article HTML을 다 cite로 코딩해버렸다 정확하지않다 문장에서
정확한 의미있는것만 인용한다 따라서 HTML만 감싸는게 올바르다.


설정

트랙백

댓글

HTML5 small 엘리먼트(element)

웹표준/HTML5 훑어보기 2010. 6. 25. 19:08

HTML5 small 엘리먼트(element)

small 엘리먼트는 주석(side comment)을 사용할때 사용된다. 작게 표시되는데 주의할 점은 그렇다고 small엘리먼트가 의미하는바가 강조의 반대는 아니란점이다. 주석의 역할로 글씨가 작을 뿐이지 주석도 중요한 부분이될 수 있다.


<footer>
 <address>contact<a href="mailto:js@example.com">아무개</a>
 </address>
  <p><small>© copyright 2038 Amuga</small></p>
</footer>

<p>나무<strong><small>식물로서..</small></strong></p>

첫번쨰예는 간단한 연락처로 주석을 사용하고 있다

ㅈ두번째 역시 주석이지만 strong을 사용해 중요하다는 것을 알려주고 있다.


설정

트랙백

댓글

HTML5 em, strong, i , b 엘리먼트(element)

웹표준/HTML5 훑어보기 2010. 6. 24. 23:35

HTML5 em, strong, i , b  엘리먼트(element)

이들은 나타나는 글시체때문에 (이탈릭,볼드) 햇갈려하는 엘리먼트들이다 하나하나 살펴보자

em과 strong

em엘리먼트는 강한 강조(stress smphasis)할 때 사용된다. 반면 strong은 강조성이기도하지만 그보다 중요함(importance)를 나타내고자할 때 사용된다.아래예를보자


<p>나의 가장 사랑스런운 <em>고양이</em></p>
<p>나의 가장 <em>사랑스런운</em> 고양이</p>

<p>경고 :이 <strong>물건</strong>을 건드리지마시오</p>

첫번째문장은 고양이를 두번쟤문장은 사랑스러운을 강조한다.

세번째 문장은 물건의 중요성을 말해주는것이다.

i 와 b

i엘리먼트는 em처럼 이탈릭체로 나타난다. 역항은 이탈릭의표현적 역할이다.또한 일반구문과는 다르다는 것으로 구별(taxonomy)할 떄 사용된다. 한편 b엘리먼트 역시 strong처럼 굵은 글씨로 나타난다. b엘리먼트역시 표현적역할과 더불어 문장을 이끄는(lead) 역할을 한다


<p><i>뭐라고뭐라고</i>
그는말했습느다 그리고<i>줘라고줘라고</i>덧붙였습니다.</p>
<p><b>6가지방법이있다.</b>하나는....둘은...</p>

첫번째 문장의 i는 남이말한것을 집어주어 표현하고있다. b의 경우는 6가지..로 문장을 이끄는역할을 한다.


설정

트랙백

댓글

HTML5 div 엘리먼트(element)

웹표준/HTML5 훑어보기 2010. 6. 23. 23:39

HTML5 div 엘리먼트(element)

html5전에는 div엘리먼트가 거의 다른 엘리먼트를감싸고 그룹엘리먼트로 역할했다.

하지만 html5와서는 그 역할이 세분화되었다.

For example, a blog post would be marked up using article, a chapter using section, a page's navigation aids using nav, and a group of form controls using fieldset

위의 요약문을 보면알듯이 블로그포스트는 article ,챕터영역은section,네비게이션은 nav, 역할분담이되었다.

월드와이드웹에서는 div를 콘텐츠가 마땅히 맞지않는곳이있을때 쓰라고 권유한다.

개인적인 생각이지만 아마도 이벤트 레이어같은 의미를 중시하는것보다 스크립트와 함께 기능적 영역을 담당하는곳에 쓰일 것으로 보인다.

마지막으로 특별한 기능이없다고 설명하는요약문

div element has no special meaning at all. It represents its children. It can be used with...............



설정

트랙백

댓글

HTML5 figure, figcaption 엘리먼트(element)

웹표준/HTML5 훑어보기 2010. 6. 23. 23:10

HTML5 figure, figcaption 엘리먼트(element)

이 둘은 새로 등장한 엘리먼트이다. figure 엘리먼트는 그림,사진,일러 코드리스트등과 같이 캡션을 할때 사용한다.


<figure>
 <img src="images/igoogle.gif" alt="구글로고">
 <figcaption>Bubbles at work</figcaption>
</figure>

위의 예제는 구글 로고이미즈를 보여주는사례이다.앞서말했듯이 비디오 역시 가능하다.


<figure>
 <video src="football.mov"></video>
 <figcaption>제작 어쩌고 저쩌고</figcaption>
</figure>

당연하지만 여러그림이 들어 가도 상관없다.


<figure>
 <img src="images/daum.gif" alt="다음">
 <img src="images/naver.gif" alt="네이버">
 <img src="images/google.gif" alt="구글">
 <figcaption>각포탈사이트 :다음,네이버,구글</figcaption>
</figure>

단 figcaption은 figure엘리먼트안에서 바로 다음이나 아니면 맨아래 쓴다.


설정

트랙백

댓글

HTML5 dl, dt, dd 엘리먼트(element)

웹표준/HTML5 훑어보기 2010. 6. 23. 22:02

HTML5 dl, dt, dd 엘리먼트(element)

이들은 description 서술, 정의 하는 엘리먼트들이다.

dl엘리먼트(element)

dt,dd 엘리먼트를 자식엘리먼트로 가진다. 오직 이들만 포함한다

HTML5 dl, dt, dd 엘리먼트(element)

dt는 정의할것이나 서술할 대상을 포함한다 한편 dd는 그것에 대해 이야기해준다


<dl>
 <dt>티스토리</dt>
 <dd>전문블로그지원</dd>
 <dt>네이버</dt>
 <dd>포탈사이트</dd>
 <dd>네이버지식인</dd>
</dl>

위는 간단한에제 dt를먼저쓰든 dd를 먼저쓰든 상관없다.dt는 한번만 주로 사용한다. 그럼 여러번 사용한예는 다음과 같다.영어에서 색깔이라쓰이는 두단어에대해설명해주고있다.


<dl>
 <dt>color</dt>
 <dt>colour</dt>
 <dd>빛의 스펙트럼(분광)의 조성차(組成差)에
 의해서 성질의 차가 인정되는 시감각(視感覺)의 특성. </dd>
</dl>



설정

트랙백

댓글

HTML5 li 엘리먼트(element)

웹표준/HTML5 훑어보기 2010. 6. 23. 00:25

HTML5 li 엘리먼트(element)

li 엘리먼트는 기존에 ul, ol의 자식엘리먼트이다.

  • 어쩌고
  • 저쩌고
  1. 어쩌고
  2. 저쩌고

ol엘리먼트에서 start 속성엘리먼트와 li의 value엘리먼트와 겹칠경우 value값이 나타난다.

  1. 어쩌고
  2. 저쩌고

마지막으로 이번 html5에는 menu 엘리먼트가 추가되었다 li는 menu 엘리먼트의 자식엘리먼트로도 활용된다.


설정

트랙백

댓글

HTML5 ul 엘리먼트(element)

웹표준/HTML5 훑어보기 2010. 6. 23. 00:15

HTML5 ul 엘리먼트(element)

순서의미를 부여하지않는 ul엘리먼트는 그대로 사용된다.

I have lived in the following countries:

  • Norway
  • Switzerland
  • United Kingdom
  • United States

설정

트랙백

댓글

HTML5 ol 엘리먼트(element)

웹표준/HTML5 훑어보기 2010. 6. 23. 00:04

HTML5 ol 엘리먼트(element)

ol엘리먼트는 순서있는 리스트를 보여줄때 사용한다. html5에서 달라진접은 별반없다. li엘리먼트를 자식엘리먼트로 포함한다

  1. 알파
  2. 베타
  3. 감마

새로 부여된 속성엘리먼트 reserved

reserved는 순서를 꺼꾸로 나타내게한다

  1. 알파
  2. 베타
  3. 감마

위와 같이 한다면 역순으로 정렬된다

start

시작순서 번호를 나타내는 start엘리먼트는 그대로 사용된다.


설정

트랙백

댓글

HTML5 blockquote 엘리먼트(element)

웹표준/HTML5 훑어보기 2010. 5. 29. 13:33

HTML5 blockquote 엘리먼트(element)

blockquote는 어떤문서 다른사이트의 페이지의 구문을 요약할때쓰는 엘리먼트일다. blockquote엘리먼트안에는 반드시 다른 소스로 부터 가져온것이있어야한다.사이트 주소의경우는 cite속성 엘리먼트를 내부에 사용한다.

간단한 예제

뉴스 박지성은 이번경기에서 어쩌고저쩌고 그래서....골을..

위의예제는 http://news.com라는 사이트로부터 내용을 가져오고있다.

요약된구문에 요약된것을 사용할 수도있다.blockquote내부에 blockquote를 사용할수도 있다는뜻.아래예제

그가말하기를...

나는 뭐 어쩌고저쩌고


설정

트랙백

댓글