인라인 레이어(inline layer)를 추가하려면 <ilayer> 태그를 사용합니다. HTML의 <ilayer> 태그는 텍스트 흐름 안에서 실제 공간을 차지하는 레이어를 만들 때 사용되며, 이후에 작성되는 내용은 해당 레이어가 차지한 공간 뒤에 자연스럽게 배치됩니다.
<ilayer>와 <layer> 태그의 차이점
<layer> 태그는 텍스트 흐름 위에 레이어를 생성합니다. 따라서 이후에 오는 내용이 새로 만든 레이어 아래로 들어갈 수 있습니다.
반면 <ilayer> 태그는 문서 흐름 안에서 공간을 점유하는 인라인 방식의 레이어를 만든다는 점이 핵심적인 차이입니다.
참고: <ilayer>와 <layer> 태그는 과거 넷스케이프(Netscape) 4.x에서만 지원된 비표준 태그로, 현재의 최신 브라우저에서는 지원되지 않습니다. 현대 웹 개발에서는 CSS의 position, top, left, z-index 속성을 사용해야 합니다.
<ilayer> 태그의 주요 속성
HTML <ilayer> 태그는 다음과 같은 속성을 지원합니다.
| 속성 | 값 | 설명 |
|---|---|---|
| above | layer name | z-order에서 현재 레이어 바로 위에 위치할 인라인 레이어의 이름입니다. |
| background | URL | 인라인 레이어의 텍스트와 이미지가 표시될 배경 이미지의 파일명 또는 URL입니다. |
| below | layer name | z-order에서 현재 레이어 바로 아래에 위치할 인라인 레이어의 이름입니다. |
| bgcolor | rgb(x,x,x) #xxxxxx colorname | 인라인 레이어 배경에 사용할 색상입니다. |
| clip | number | 인라인 레이어에서 실제로 보이는 영역의 좌표입니다. |
| height | pixels | 인라인 레이어의 높이(픽셀 단위)입니다. |
| left | number | 인라인 레이어 왼쪽 면의 위치입니다. 현재 인라인 레이어가 다른 레이어(부모 레이어)에 포함되어 있다면, 위치는 부모 레이어를 기준으로 계산됩니다. |
| name | layer name | 인라인 레이어의 이름입니다. |
| pagex | number | 브라우저 창을 기준으로 한 인라인 레이어 왼쪽 면의 위치입니다. |
| pagey | number | 브라우저 창을 기준으로 한 인라인 레이어 상단의 위치입니다. |
| src | URL | 인라인 레이어 내부에 표시될 페이지의 URL입니다. |
| top | number | 인라인 레이어 상단의 위치입니다. 부모 레이어에 포함되어 있는 경우에는 부모 레이어를 기준으로 위치가 결정됩니다. |
| visibility | show hide inherit | 인라인 레이어의 표시 여부를 결정합니다. |
| width | pixels | 인라인 레이어의 너비(픽셀 단위)입니다. |
| z-index | number | z-order 내에서 인라인 레이어의 순서를 나타냅니다. z-index 값이 높은 레이어일수록 값이 낮은 레이어보다 위에 배치됩니다. |
예제
다음 코드를 실행하면 <ilayer> 태그의 동작 방식을 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML ilayer Tag</title> </head> <body> This <ilayer top = "4">word</ilayer> is shifted down, while this <ilayer left = "10">one</ilayer> is shifted over. With a negative value, words can be moved <ilayer top = "-4">up</ilayer> and to the <ilayer left = "-10">left</ilayer>. </body> </html>
위 예제에서 양수 값을 사용하면 단어가 아래나 오른쪽으로 이동하고, 음수 값을 사용하면 위나 왼쪽으로 이동하는 것을 확인할 수 있습니다.
현대 웹 개발에서의 대체 방법
현재 브라우저에서는 <ilayer> 태그가 작동하지 않으므로, 같은 효과를 내려면 CSS의 상대 위치(relative positioning)를 활용해야 합니다.
<p> This <span style="position: relative; top: 4px;">word</span> is shifted down, while this <span style="position: relative; left: 10px;">one</span> is shifted over. </p>
CSS의 position: relative와 z-index를 조합하면 레이어의 겹침 순서까지 자유롭게 제어할 수 있으며, 모든 최신 브라우저에서 일관되게 동작합니다.