[HTML5] 시멘틱 태그 (2)

Posted by 놀란비룡
2016. 3. 21. 00:00 HTML5 / CSS3

시멘틱 태그 (2)

2번쨰 시간

<hn>태그 - 제목 표시하기

▶이 태그는 각 웹 콘텐츠 영역에서 제목을 표시할 때 사용하는 태그입니다. 제목 태그로 <h1>~<h6>까지 나누어져 있고, 숫자가 클수록 크기가 작아집니다.


▷ <hn> 내용 내용 내용 <hn>


제목을 지정하는 가장 기본적인 웹 표준 방식입니다. 가장 큰 제목은 <h1>을 그 뒤 부 제목들은 숫자를 줄여 나가는 식으로 사용할 수도 있고, 다른 문서 안에서 여러번 사용할 수 있습니다. 스타일을 다르게 적용하는 것으로 다른 형태로 표현도 가능합니다



<iframe>태그 - 외부 문서 삽입

▶HTML5에서는 기존의 프레임 세트(frameset) 구조를 허락하지 않지만, 웹 문서 안에 다른 문서를 가져와 표시하는 인라인 프레임(inline frame)은 계속해서 지원합니다.


▷ <iframe src="표시할 문서 주소" [속성="속성 값"]></iframe>


이 태그는 여러 속성을 이용할 수 있어서 여러 형태로 표현이 가능합니다



width 

 인라인 프레임의 너비 (픽셀 값으로 표시)

height 

 인라인 프레임의 높이 (픽셀 값으로 표시)

name 

 인라인 프레임의 이름

seamless 

 프레임 테두리를 없애서 본문처럼 나타낸다. 속성 값없이(seamless) 사용하고 크롬과 사파리에서만 지원

src 

 프레임에 표시할 문서의 주소를 지정



'HTML5 / CSS3' 카테고리의 다른 글

[HTML5] 시멘틱 태그 (2)  (0) 2016.03.21
[HTML5] 시멘틱 태그(1)  (0) 2016.03.07
[ HTML5 ] 특수기호  (0) 2016.03.06
[HTML5] 설명 안 한 노트패드++ 설정  (0) 2016.01.13
[HTML5] 간단한 설명  (0) 2016.01.05
이 댓글을 비밀 댓글로

[HTML5] 시멘틱 태그(1)

Posted by 놀란비룡
2016. 3. 7. 00:00 HTML5 / CSS3


여기서 배우게 될 태그는 모두 <body>와 </body> 사이에 들어갑니다

여기서 딱히 길게 시멘틱 태그 설명하려니 문장력이 딸려서 침묵하겠습니다


<header> - 머리말 / 제목

▶ <header> 태그는 말그대로 헤더(머리말) 부분입니다. 하위의 여러태그나 사이트의 제목도 될 수 있지만 <head>와는 전혀 다른 태그입니다. <head>는 웹 상에서는 표현되지 않는 내용들입니다. 헤더는 사이트 처음 시작 부분에서 사용하는 헤더는 보통 맨 위쪽이나 왼쪽에 넣고 사용하며, <form>태그를 써서 검색창을 만들거나, <nav>를 이용해 메뉴를 생성할 수 있습니다.

▷ <header> 내용 내용 내용 </header>
         <header>
                 <h1>뷁</h1>
                 <h2>그러하다</h2>
             <header>

 


<nav> - 문서를 연결하는 네비게이션 링크

▶ 동일 사이트 안의 문서나 다른 사이트의 문서로 연결하는 링크를 표현합니다. 보통 메뉴 부분에 많이 이용됩니다. XHTML이나 HTML에서는 별도의 <div>태그안에 'nav' 나 'menu'등의 다른 'id'를 설정해야 했지만, HTML5에서는 <nav>태그로 네비게이션이 어디있는지 알기 쉽습니다.

▷ <nav> 내용 내용 내용 <nav>
     ↘
<nav>
<ul>
<li><a href="#">뷁뷁</li>
<li><a href="#">뷁뷁</li>
<li><a href="#">뷁</li>
<li><a href="#">뷁</li>
</ul>
</nav>


'HTML5 / CSS3' 카테고리의 다른 글

[HTML5] 시멘틱 태그 (2)  (0) 2016.03.21
[HTML5] 시멘틱 태그(1)  (0) 2016.03.07
[ HTML5 ] 특수기호  (0) 2016.03.06
[HTML5] 설명 안 한 노트패드++ 설정  (0) 2016.01.13
[HTML5] 간단한 설명  (0) 2016.01.05
이 댓글을 비밀 댓글로