HTML : 시맨틱 웹(Semantic Web) - <aside>

HTML : 시맨틱 웹(Semantic Web) - <aside>

---

HTML : 시맨틱 웹(Semantic Web) - <aside>

---

HTML : 시맨틱 웹(Semantic Web) - <aside>

<aside>

• 문서의 주 내용과 직접적인 연관은 없지만 간접적으로 연관이 있을 때 사용한다.
• 영어의 단어 뜻이나 블로그 류의 추가적인 콘텐츠(광고 등)를 나타날 때 사용한다.
• <nav>와는 성격이 다르다.
  • <aside>는 부가적인 내용이지만 굳이 없더라도 문제가 되지 않는다.

 

---

예제

Salamanders are a group of amphibians with a lizard-like appearance, including short legs and a tail in both larval and adult forms.

The Rough-skinned Newt defends itself with a deadly neurotoxin.

Several species of salamander inhabit the temperate rainforest of the Pacific Northwest, including the Ensatina, the Northwestern Salamander and the Rough-skinned Newt. Most salamanders are nocturnal, and hunt for insects, worms and other small creatures.

<style>
aside {
    width: 40%;
    padding-left: .5rem;
    margin-left: .5rem;
    float: right;
    box-shadow: inset 5px 0 5px -5px #29627e;
    font-style: italic;
    color: #29627e;
}

aside > p {
    margin: .5rem;
}

p {
    font-family: 'Fira Sans', sans-serif;
}

</style>

<p>Salamanders are a group of amphibians with a lizard-like appearance, including short legs and a tail in both larval and adult forms.</p>

<aside>
    <p>The Rough-skinned Newt defends itself with a deadly neurotoxin.</p>
</aside>

<p>Several species of salamander inhabit the temperate rainforest of the Pacific Northwest, including the Ensatina, the Northwestern Salamander and the Rough-skinned Newt. Most salamanders are nocturnal, and hunt for insects, worms and other small creatures.</p>

 

---

기술 요약

콘텐츠 카테고리 : 플로우 콘텐츠, 구획 콘텐츠

가능한 콘텐츠 : 플로우 콘텐츠

태그 생략 : 종료 태그 생략 불가

가능한 상위 요소 : 플로우 콘텐츠를 허용하는 모든 요소 <aside> 요소는 <address>의 하위 요소가 될 수 없다

---

 

HTML : 콘텐츠 카테고리 (Contents Category)

 

HTML : 시맨틱 웹(Semantic Web)