[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 기초(태그 작성법, 저장 방법, 대소문자 구별, 서버에 올리는 방법)