HTML5 br 엘리먼트(element)

웹표준/HTML5 훑어보기 2010. 7. 1. 15:14

HTML5 br 엘리먼트(element)

br 엘리먼트(element)

br엘리먼트는 라인을 끝을때 사용한다. 반드시 콘텐츠의 내용을 끊을 때 사용해야한다.

아래 예를 보자


<p>어쩌고 저쩌고<br>
그리고 말야<br>
저쩌고어쩌고라네요</p>

<p><a ...>34덧글</a><br>
<a ...>덧글을 다세요</a></p>

<p><a ...>34덧글</a></p>
<p><a ...>덧글을 다세요</a></p>

첫번째 예는 적절한예이다. 내용의 문장을 필요할때 br엘리먼트로 끊어주고 있다. 두번째는 틀린예이다 앞서 말했듯이.콘텐츠 즉텍스를 끊을떄 사용하지 문단 엘리먼트를 끊을때 사용하지않는다. 올바른 사용은 p 엘리먼트를 사용하여 맨아래와 같이 사용해 줘야 한다.


설정

트랙백

댓글

HTML5 span 엘리먼트(element)

웹표준/HTML5 훑어보기 2010. 6. 30. 15:54

HTML5 span 엘리먼트(element)

div엘리먼트처럼 span엘리먼트역시 특별한 의미를 가지지는 않는다. text-level의엘리먼트들의 용도외에 css별도 기꾸밈또는 기능적 으로 필요할 때 사용된디.


<h1><span>타이틀</span></h1>

위같은예에서h1엘리먼트 강조 또는 이미지대채, 꾸밈선택등의 기능으로 사용할 수 있다.


설정

트랙백

댓글

HTML5 bdo 엘리먼트(element)

웹표준/HTML5 훑어보기 2010. 6. 30. 15:46

HTML5 bdo 엘리먼트(element)

텍스트의방향을 바꿀수 있는 는 엘리먼트이다. ABC로 적었다면 CBA로 정렬가능하다.


<p>HTML5훌어보기</p>

<p><bdo dir="ltr">HTML5훌어보기</bdo></p>
<p><bdo dir="rtl">HTML5훌어보기</bdo></p>

속성엘리먼트 dir에서 rtl은 오른쪽에서 왼쪽, ltr은 왼쪽에서 오른쪽으로 정렬된다.



설정

트랙백

댓글

  • Favicon of https://uiandwe.tistory.com No.190 2010.08.31 14:52 신고 ADDR 수정/삭제 답글

    오타!
    <p><bdo dir="rtr">HTML5훌어보기</bdo></p> 에서 속성값이 rtl로 되어야 합니다.
    왜안되나 한참 해멨네요 ㅎㅎ

HTML5 ruby, rt, rp 엘리먼트(element)

웹표준/HTML5 훑어보기 2010. 6. 30. 15:38

HTML5 ruby, rt, rp 엘리먼트(element)

루비주석을 다는엘리먼트로 텍스트위에 주석을 달아준다

ruby엘리먼트가부모 rt, rp는 그 자식엘리먼트이다.


...  
 <ruby>
 漢<rt>かん</rt>
 字<rt>じ</rt>
 </ruby>
 ...

위는 간단한예이다 결과는 아래와같이나온다

rp엘리먼트는 루비 괄호를 나타낼때사용한다.


...
<ruby>
漢 <rp>(</rp><rt>かん</rt><rp>)</rp>
字 <rp>(</rp><rt>じ</rt><rp>)</rp></ruby>
...



설정

트랙백

댓글

HTML5 mark 엘리먼트(element)

웹표준/HTML5 훑어보기 2010. 6. 29. 15:13

HTML5 mark 엘리먼트(element)

mark엘리먼트는 새로생긴엘리먼트이다. 별도로 언급한 것에대해 강조(highlight)를 표현할때 사용된다. 단 다른 강조의용도의 엘리먼트와 차이점이라면 여러번 쓰일때 사용하는것 이다.


<p>나는<mark>누구누구</mark>를 사랑해요</p>
<p>..............</p>
<p><mark>누구누구</mark>는 어쩌고저쩌고..</p>

단순한 단어만 아니라 문장 역시 가능하다.다른곳에서 가져오는 쿼트엘리먼트와 차이점이라면 역시 앞서 언급한것을 요약한다는점이다.아래는 그 예제


<p>따러사 <mark>어쩌고저쩌고</mark>라고 한다</p>
<p>..............</p>
<p>앞서<mark>어쩌고저쩌고</mark>라고 말했듯이..</p>


설정

트랙백

댓글

HTML5 sub, sup 엘리먼트(element)

웹표준/HTML5 훑어보기 2010. 6. 29. 14:51

HTML5 sub, sup 엘리먼트(element)

sup 엘리먼트는 윗글자(superscript) sub 엘리먼트는 아랫글자(subscript)를 나타낼때 사용한다.

일단 가장 간단한 예


<p>간단한<sup>[1]</sup>예</p>
<p>간단한<sub>(1)</sub>예</p>

약어의 의미에 abbr과 sup, 변수수학적수에 var과 sub엘리먼트는 서로 친숙하다 다음예를 보자

Mmicle Jordan

x10, y10

위와같은 것의 소스는다음과 같다.


<p><abbr>M<sup>micle</sup></abbr> Jordan</p>
<p><var>x<sub>10</sub></var>, <var>y<sub>10</sub></var></p>



설정

트랙백

댓글

HTML5 code, var , samp, kbd 엘리먼트(element)

웹표준/HTML5 훑어보기 2010. 6. 28. 16:17

HTML5 code, var , samp, kbd 엘리먼트(element)

code 엘리먼트

code엘리먼트는 컴퓨터의 언어의 일부분을 나타낼 때사용한다.

HTML5 pre 엘리먼트(element)의 역항을 참조해서 먼저볼것

pre 엘리먼트안에서 사용된다. 이금 계속 올리고 있는 html포스팅의 예제도 pre엘리먼트 안에code를 사용한 것이다.

이제까지 포스팅에서의 예제들이 이방식으로 사용되었고 다음예제는 긴코드가아니라도 일부분이 문장에서 언급될 때 사용되는 경우이다.


<p>함수<code>activate()</code>를 사용하고 또다른
함수<code>ajax()</code>를 사용하면</p> .....


var 엘리먼트

var 엘리먼트는 변수를 표현할때 사용한다. 간단한예


<p>만약에<var>n</var>의 뭐뭐가 있다면...</p>

samp 엘리먼트

code엘리먼트가 프로그램 코드를 보여웠다면 samp엘리먼트는 그 출력결과를 보여주는것이다 예로 c언어의 소스를 code엘리먼트로 보여주었다면, 그 코드를 실행할때 나오는 결과는 samp엘리먼트로 보여준다.


<p>실행하면 컴퓨터는 <samp>너무많은값이입력</samp>
이라고 출력될 것이다.</p>

<pre>
 <samp>첫번재계산은 어쩌고저쩌고 
두번재계산은 어쩌고저쩌고</samp>
</pre>

kbd 엘리먼트

kbd엘리먼트는 키보드입력이나 다른 명령 커맨드등을 표현할때 사용한다.


<p>실행시킬려면 
<kbd><kbd>Shift</kbd> + <kbd>F3</kbd></kbd>
를 누르세요</p>



설정

트랙백

댓글

HTML5 time 엘리먼트(element)

웹표준/HTML5 훑어보기 2010. 6. 28. 16:03

HTML5 time 엘리먼트(element)

time엘리먼트는 24시간기준의 시간을 표현하거나 그레고리안 달력을 표현 할 때 사용한다.HTML5에서 새로 생긴 엘리먼트로 속성엘리먼트 datetime과 pubtime이 있다.datetime은 신간이나 날짜를 더 부여하며, pubtime은 옶션으로 time엘리먼트가 발행된 날자임을 지시하는것이다.


<p>첫째날 <time datetime="2006-09-23"> 토요일</time>.</p>

<article>
 <h1>간단한 토크</h1>
 <footer>발행<time pubdate>2009-08-30</time>.</footer>
 <p>어쩌고 저쩌고</p>
</article>

<p>I've liked model trains since at least 1983.</p>

첫예제는 간단한 예이다. 두번째예는 pubdate 를 사용하여 발행날자임을 나타낸다. pubdate속성은 html5에서 도입되었다가 삭제됬다

마지막 예제는 굳이 곳 시간을 time엘리먼트로 할필요는없이 해줘도 된다는 예제이다.

time엘리먼트는 날짜 시간을 나타내지 어느 시점을 나타내는 것이 아니다 예로 빙백이 일어난후 몇시간 이라든지 쥐라기시대이후 등 서술문에서 이런것을 time엘리먼트로 감싸지않는다.


설정

트랙백

댓글

HTML5 dfn,abbr 엘리먼트(element)

웹표준/HTML5 훑어보기 2010. 6. 28. 14:56

HTML5 dfn, abbr 엘리먼트(element)

dfn 엘리먼트(element)

dfn엘리먼트는 문장에서 정의할 단어를 감싼다. 다음은 티스토리에 대한 예.


<p><dfn>티스토리</dfn>는 한국 서비스형 블로그</p>

abbr 엘리먼트(element)

abbr엘리먼트는 약어나 두음자어를 나타낼 때사용한다. API (application programming interface)를 예로 보자.


<p><abbr>API</abbr>는 뭐뭐는 어쩌고 저쩌고</p>
<p><abbr tittle="application program
ming interface">API</abbr>는...</p>

tittle은 얄자를 API 설명해주고 있다. dfn은 약자를 정의해 주는 것이다 따라서 같은 코딩의 뜻을,

다음과 같이 사용할 수도 있다.


<p><abbr tittle="application programming inte
rface">API</abbr>는...</p>
<p><dfn tittle="API">Application Progr
amming Interface</dfn>는...</p>

두 코딩은 같은 의미이다. 단 생각해볼점은 다음과 같다.

abbr 엘리먼트의 tittle은 검색엔진에서 검색되지않는다 까라서 코딩할때 tittle로 넣을것인지 인라인 텍스트로 dfn으로 넣을것인지 고려해야한다.예제를 생각하면 검색할때 API가 검색되길 바라는지 Application Programming Interface가 검섹되기를 바라는지 뜻이다.

마지막으로 같은 abbr의 내용이 있다면 여러번 tittle속성을 사용할 필요없다.


<p><abbr tittle="application programming inte
rface">API</abbr>는...
또한<abbr>API</abbr>는 뭐뭐는 어쩌고 저쩌고..</p>



설정

트랙백

댓글

HTML5 q 엘리먼트(element)

웹표준/HTML5 훑어보기 2010. 6. 26. 12:24

HTML5 q 엘리먼트(element)

blockquote엘리먼트와 만찬가지로 요약구문을 쓸때사용한다 단 q엘리먼트의 경우는 단문이며 인라인이다


<p>아무개가 말하길<q>뭐라고뭐라고했고</q>난 뭔말인지못랐다.</p>

<p>정부의<cite>청와대</cite>에서는
<q cite="http://www.president.go.kr/kr/index.php">어쩌고
 저쩌고</q>라고 했다</p>

<p>그는 "뭐라고뭐라고" 말했다</p>

첫번째 예는 올바르게사용된경우이다.

두번째 예는 cite 송성엘리먼트를 사용하여 그출처를 밝혀준것이다. 주의할 점은 cite속상엘리먼트와 cite엘리먼트는 다르단것을 명심하자

마지막예제는 잘못된것 q엘리먼트대신에 그냥 따옴표를쓰고 있다. 어떤그림으로 대체하는것은 올바르지만 코딩에서 이렇게 하는 것은 올바르지않다.


설정

트랙백

댓글