HTML의 태그 제외-HTML 튜토리얼-php.cn

HTML의 Aside 태그 속성

전역 속성

이벤트 속성

HTML의 Aside 태그 예시

예시 1 – 태그 포함

예 #2 – 외부 태그

예시 #3 – 스타일 태그

결론

집

웹 프론트엔드

HTML 튜토리얼

HTML의 태그 제외

王林

Sep 04, 2024 pm 04:21 PM

html html5 HTML Tutorial HTML Properties HTML tags

HTML의 Aside 태그는 주로 웹페이지의 중요한 내용을 표시하는 데 사용됩니다. 웹페이지의 주요 내용에 초점을 맞추는 하이라이터 역할을 합니다. HTML에서 이 태그는 웹페이지를 구분하거나 파티션을 만들 때도 사용되지만, 웹페이지의 주요 내용에만 집중할 목적으로 사용됩니다. 이는 웹페이지 디자인을 더 쉽게 만드는 데 사용되며, 이는 포함된 HTML 문서에 더 명확성을 제공합니다. 웹페이지에서 별도 태그의 기본 배치 영역은 사이드바 또는 설명 상자에 있습니다.

구문:

<body>
<aside>
<p>some text</p>
</aside>
</body>

로그인 후 복사

태그 내의 HTML 코드에 포함된
태그입니다. 이는 작성자의 약력, 광고, 페이지 정의, 프로필 세부 정보 및 일부 중요한 링크를 정의하는 데 사용됩니다. 웹페이지 내 어디에서나 사용할 수 있습니다. 주로 HTML 5 내에서 사용됩니다.
기사 요소 내에서나 이 기사 요소 외부에서 사용해야 합니다. 기사 요소와 함께 이 태그를 사용하는 동안 기사의 콘텐츠가 포함되어야 합니다. 그리고 기사 요소 외부에서 사용될 때마다 전체 웹페이지와 관련된 데이터를 포함해야 합니다.
이는 HTML에서 블록 수준 요소로 간주됩니다.
내에서 블록 수준 요소와 인라인 요소를 모두 사용할 수도 있습니다. 태그를 추가하거나 텍스트 요소에 추가하세요. HTML의 특정 속성에 의존하지 않습니다.
하지만 다른 태그와 마찬가지로<제쳐두고> 태그는 이벤트 속성뿐만 아니라 전역 속성도 지원합니다.

HTML의 Aside 태그 속성

아래는 HTML의 Aside 태그 속성입니다.

전역 속성

태그가 지원하는 여러 전역 속성이 있으며 그 중 일부는 다음과 같습니다.

accesskey: 특정 속성을 강조 표시하는 단축키로 사용됩니다.
class: 포함된 요소에 하나 이상의 클래스 이름을 정의하는 데 사용됩니다.
contenteditable: 편집 가능 여부에 관계없이 요소의 세부정보를 제공하는 데 사용되는 이 속성입니다.
data: 이 속성은 사용자 정의 데이터를 필수 페이지나 애플리케이션에 비공개로 수집하는 데 도움이 됩니다.
드래그 가능: 요소가 드래그 가능한지 여부를 정의합니다.

이벤트 속성

태그는 이벤트 속성도 지원합니다. 그 중 일부는 다음과 같습니다:

onafterprint: 이 속성은 문서가 인쇄될 때마다 스크립트를 실행하는 데 사용됩니다.
onerror: 오류가 발생할 때마다 이 속성이 실행됩니다.
onmessage: 이 스크립트는 메시지가 트리거될 때 발생합니다.
onpageshow: 사용자가 한 페이지에서 다른 페이지로 이동할 때마다 이 이벤트 속성이 이 이벤트에 적용됩니다.
onstorage: 이 속성은 웹 저장소 영역이 업데이트될 때마다 스크립트를 실행합니다.

HTML의 Aside 태그 예시

태그를 정의하는 몇 가지 예를 살펴보고 이 태그가 HTML 5에서 실제로 어떻게 사용되는지 살펴보겠습니다.

예시 1 – 태그 포함

코드:

<html>
<body>
<h1>A. P. J. Abdul Kalam</h1>
<article>
<aside style="float:right;width:20%; background-color:deepskyblue;padding:20 20px;">
<img src="APJ.jpg" style="height:40%; width:100%;">
</aside>
<p style="width:80%;padding:20px;">
Dr.A.P.J Abdul Kalam was known as one the most  famous personality in the India.  His full name was Avul Pakir Jainulabdeen Abdul Kalam. His whole life journey comes in between  15 october 1931 – 27 july 2015 . .In this time he was worked as aerospace scientist .  Rameswaram ,Tamil Nadu was his birthplace. As well as he was completed his education in physics and aerospace engineering from Tamilnadu state itself. He was provide service to the nation as being  11<sup>th</sup> president of India from 2002 to 2007.  He almost spend  4 decades of service as being scientist and science administrator , majorly he was active participants at the Defence Research and Development Organisation (DRDO) and in  most famous organization of India i.e  and Indian Space Research Organization (ISRO).  Due to his active participation in those  organization  and had part of India’s military missile development  he was known as Missile Man of India. He played very important role in nuclear test which is taken by India for Pokharan -2 nuclear test in the year 1998.<br> He was well known personality in all reputed fields like education, aerospace, military, public service and into the writing. He died on 27 July 2015, aged 83</p>
</article>
</body>
</html>

로그인 후 복사

출력:

HTML의 태그 제외

예 #2 – 외부 태그

코드:

<html>
<head>
<title>Aside tag</title>
<style>
.demo {
font-size:30px;
font-weight:bold;
}
h1 {
font-size:30px;
color:purple;
font-weight:bold;
}
p {
font-size:20px;
margin:20px 0;
}
</style>
</head>
<body>
<div class = "demo"><u>Delhi factory tragedy</u></div>
<aside>
<h1>Delhi fire tragedy: Meet fireman Sunil Kumar who saved more than dozen lives</h1>        <p>
Meet fireman Sunil Kumar, who along with his team, saved the lives of more than a dozen of people from the bag manufacturing factory fire in Delhi's Anaj Mandi area this morning. The early morning fire had left over 40 dead and many injured.<br>As soon as Sunil Kumar, who is also a President award winner, arrived at the spot with his team from Prasad Nagar, it was very difficult for the fire tender to reach the site from the main road, but somehow one fire tender entered while other fire tenders were waiting on the road
.</p>
</aside>
</body>
</html>

로그인 후 복사

출력:

HTML의 태그 제외

예시 #3 – 스타일 태그

코드:

<body>
<article>
<h1>Miss South Africa crowned 2019 Miss Universe</h1>
<p>Miss Universe 2018 Catriona Gray of the Philippines crowns the new Miss Universe 2019, South Africa's Zozibini Tunzi, during the pageant at Tyler Perry Studios in Atlanta, Georgia, on December 8, 2019.
</p>
<img src="Miss.jpg" style="height:10%; width:20%;">
</article>
<p>The two runners-up for the crown were Miss Mexico and Miss Puerto Rico.</p>
</body>

로그인 후 복사

출력:

HTML의 태그 제외