HTML에서 레이어(layer)를 추가하려면 <layer> 태그를 사용합니다. HTML의 <layer> 태그는 페이지 내 요소들의 위치를 지정하고, 스크립트를 통해 애니메이션 효과를 적용할 때 활용됩니다.
레이어는 하나의 창(window) 안에 존재하면서 메인 문서 위에 겹쳐져 있는 별도의 문서라고 생각하면 이해하기 쉽습니다. 즉, 각 레이어는 독립적인 영역으로서 서로 다른 위치와 배경색 등을 가질 수 있습니다.
레이어 태그 예제
아래 코드를 실행하면 HTML 페이지에 여러 개의 레이어가 추가되는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML layer Tag</title>
</head>
<body>
<layer id = "layer1" top = "250" left = "50" width = "200"
height = "200" bgcolor = "red">
<p>layer 1</p>
</layer>
<layer id = "layer2" top = "350" left = "150" width = "200"
height = "200" bgcolor = "blue">
<p>layer 2</p>
</layer>
<layer id = "layer3" top = "450" left = "250" width = "200"
height = "200" bgcolor = "green">
<p>layer 3</p>
</layer>
</body>
</html>참고: 레이어 태그의 호환성
<layer> 태그는 과거 넷스케이프(Netscape) 브라우저에서만 지원되던 비표준 요소로, 현재는 대부분의 최신 브라우저에서 지원되지 않습니다.
따라서 현대적인 웹 개발에서는 레이어 효과를 구현할 때 CSS의 position, z-index 속성과 함께 <div> 요소를 사용하는 것이 권장됩니다. 이러한 방식은 모든 브라우저에서 일관되게 동작하며, 유지보수 측면에서도 훨씬 유리합니다.