Semantics: Aside as sidebar
์ฌ์ดํธ ์ ์ฒด์ ์ฌ์ด๋๋ฐ๋ฅผ ๊ตฌํํด์ผ ํ๋๋ฐ, HTML5 ์๋งจํฑ ํ๊ทธ ์ค์๋ ํค๋ ํธํฐ ์ฌ์ง์ด ๋ฉ์ธ์ ์์ด๋ ์ฌ์ด๋๋ฐ๋ผ๋ ๊ฐ๋ ์ ์๋ค. ๊ฐ์ฅ ๊ฐ๋ ์ ์ผ๋ก ๊ทผ์ ํด๋ณด์ด๋ ๊ฒ์ผ๋ก <aside>๊ฐ ์๋๋ฐ, ์ด๋ฅผ ์ฌ์ด๋๋ฐ ๋งํฌ์ ์ผ๋ก ์ฌ์ฉํด๋ ๊ด์ฐฎ์์ง ๊ถ๊ธํด์ ๋ฆฌ์์นํด๋ด.
์ผ๋จ W3์ ์ ์๋ ๋ค์๊ณผ ๊ฐ๋ค.
The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content.
๋ณด๋ค์ํผ ์์ฃผ ๋๋ฆฌ๋ญ์คํ ์ ์์ด๊ธฐ ๋๋ฌธ์ ์๋ณธ์ฃผ์์์ ํด์์ฃผ์์ ๊ฐ์ ํค๋ฐฐ๋ ๋ง์๋๋ฐ, ๋คํํ๋ W3๊ฐ ์ด๋ฅผ ์ธ์งํ๊ณ '์ฌ์ดํธ ์ ์ฒด์ ์ฌ์ด๋๋ฐ๋ก ์จ๋ ๋๋ค'๊ณ ์ปจํ์ ํด ์ฃผ์๋ค๊ณ ํ๋ค. ํ์ง๋ง ์ฌ๊ธฐ์ ๋ค์ ํ ๋ฒ ํค๋ฐฐ๊ฐ ๋ฒ์ด์ง๋๋ฐ, ์ด๋ฒ์ '๊ทธ๋ผ ๋ฌด์์ด ์ฌ์ดํธ์ tangentialํ๊ฒ ๊ด๋ จ๋ ์ปจํ ์ธ ์ด๋'๊ฐ ์์ ์ด๋ค. '๋ฉ์ธ ๋ก๊ณ ' ๋ฐ '๋ฉ์ธ ๋ด๋น๊ฒ์ด์ ', ๊ทธ๋ฆฌ๊ณ '๋ค๋ฅธ ์ฐ๊ด ์ปจํ ์ธ '๋ก ๊ตฌ์ฑ๋ ์ฌ์ด๋๋ฐ๋ฅผ ๋งํฌ์ ํ๋ ๊ฒฝ์ฐ๋ฅผ ์๋ก ๋ค๋ฉด,
์๋ณธ์ฃผ์์๋ค์ ๋ก๊ณ ๋ ๋ด๋น๊ฒ์ด์ ์ ์ปจํ ์ธ ๊ฐ ์๋ ๋ ๋ฆฝ๋ ์๋ฆฌ๋จผํธ์ด๋ฏ๋ก aside ๋ด์ ๋ค์ด๊ฐ์๋ ์ ๋๋ค๊ณ ๋งํ๋ค. ๋ฐ๋ผ์ ๊ทธ๋ค์ ๋งํฌ์ ์ ์๋์ ๊ฐ๋ค.
<body> <div class="sidebar"> ย ย <h1>Title of the website</h1> ย ย <nav> ย ย ย ย <h1>Main navigation</h1> ย ย ย ย <ul> ย ย ย ย ย ย <li><a href="#">1</a></li> ย ย ย ย ย ย <li><a href="#">2</a></li> ย ย ย ย ย ย <li><a href="#">3</a></li> ย ย ย ย </ul> ย ย </nav> ย ย <!-- aside inside sidebar --> ย ย <aside> ย ย ย ย <h1>My last tweets</h1> ย ย ย ย <ul> ย ย ย ย ย ย <li><a href="#">quoque... </a></li> ย ย ย ย ย ย <li><a href="#">inleceb... </a></li> ย ย ย ย ย ย <li><a href="#">locaaer... </a></li> ย ย ย ย </ul> ย ย </aside> </div><!-- /sidebar -->
๋ฐ๋๋ก ํด์์ฃผ์์๋ค์ ๋ก๊ณ ๋ ๋ด๋น๊ฒ์ด์ ์ญ์ ์ฌ์ดํธ ๊ทธ ์์ฒด์ ์ข ์์ ์ธ ์ปจํ ์ธ ๋ก ๋ณผ ์ ์์ผ๋ฏ๋ก aside ๋ด์ ๋ฃ์ ์ ์๋ค๊ณ ์ฃผ์ฅํ๋ค.
<body> <!-- aside as sidebar --> <aside> ย ย <h1>Title of the website</h1> ย ย <nav> ย ย ย ย <h1>Main navigation</h1> ย ย ย ย <ul> ย ย ย ย ย ย <li><a href="#">1</a></li> ย ย ย ย ย ย <li><a href="#">2</a></li> ย ย ย ย ย ย <li><a href="#">3</a></li> ย ย ย ย </ul> ย ย </nav> ย ย <section class="tweets"> ย ย ย ย <h1>My last tweets</h1> ย ย ย ย <ul> ย ย ย ย ย ย <li><a href="#">quoque... </a></li> ย ย ย ย ย ย <li><a href="#">inleceb... </a></li> ย ย ย ย ย ย <li><a href="#">locaaer... </a></li> ย ย ย ย </ul> ย ย </section> </aside><!-- /sidebar -->
์ฌ์ด๋๋ฐ๋ฅผ ์ปจํ ์ธ ์ ๋์์ธ ์ค ์ด๋ ์ชฝ์ ๊ฐ๋ ์ผ๋ก ๋ณผ ์ง์ ๋ฐ๋ฅธ ์ด์์ธ๋ฐ, ๋ ผ๋ฆฌ์ ์ผ๋ก๋ ์ ์๊ฐ ๋ง๋ค๊ณ ์๊ฐํ๋ฉด์๋ ๊ฐ์ธ์ ์ผ๋ก๋ ๋ค์ ๋งํฌ์ ์ด ์ข๋ ๋ง์์ ๋ ๋ค.
Reference:
Sidebar and Aside are different















