반응형
ㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇ
1. area 태그
area 태그는 이미지 맵에서 특정 영역을 클릭할 때 하이퍼링크를 선택하는 데 사용되는 태그입니다. 이 태그는 map 요소 내에서만 사용할 수 있습니다. 속성은 총 3개가 있습니다.
1.1 coords 속성
선택 영역을 지정하는 속성입니다. coords 속성은 이미지의 좌표를 사용하여 영역을 정의합니다.
1.2 href 속성
링크 URL을 지정할 수 있는 속성입니다. 클릭 시 이동할 페이지의 URL을 지정합니다.
1.3 shape 속성
선택 형태를 지정할 수 있는 속성입니다. 다양한 형태(원, 사각형, 다각형 등)를 사용하여 영역을 설정할 수 있습니다.
아래는 area 태그의 예제입니다.
<!DOCTYPE html>
<html>
<head>
<title>area</title>
</head>
<body>
<h1>area 예제</h1>
<img src="asample.jpg" usemap="#예제">
<map name="예제">
<area shape="circle" coords="200,250,25" href="예제.html" />
</map> </body>
</html>
2. article 태그
article 태그는 사이트에서 재배포 또는 재사용 가능한 콘텐츠를 포함할 때 사용되는 태그입니다. 속성은 따로 존재하지 않습니다.
아래는 article 태그의 예제입니다.
htmlCopy code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>article 공부</title>
</head>
<body>
<article>
<h4>article 태그는?</h4>
<p>독립적인 콘텐츠를 표시할 때 사용합니다.</p>
</article>
<footer> ---------------------------------- </footer>
</body>
</html>
3. aside 태그
마지막으로, aside 태그에 대해 알아보겠습니다. 해당 태그는 웹 페이지에서 주 내용을 표시한 후 사이드바를 추가로 구성할 때 사용됩니다. 속성은 따로 존재하지 않습니다.
아래는 aside 태그의 예제입니다.
<html>
<head>
</head>
<body>
<section>
<h1>aside 태그 공부하기</h1>
<p>사이드바 구성</p>
</section>
<aside>
<p>참고 도서</p>
</aside>
<footer></footer>
</body>
</html>
여기까지 area, article, 그리고 aside 세 가지 태그에 대해 살펴보았습니다
ㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇ
반응형