티스토리 뷰

IT tech Coding/html

[html] 테그를 사용해서 기존의 이미지를 놓고 그 위에 input 요소를 배치할 수 있는가?

Coding Life 2024. 9. 29. 08:16
반응형

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image with Inputs</title>
    <style>
        .image-container {
            position: relative;
            display: inline-block;
        }
        .image-container img {
            display: block;
        }
        .input-overlay {
            position: absolute;
            background: rgba(255, 255, 255, 0.5);
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>

<div class="image-container">
    <img src="your-image.jpg" alt="Image" width="600">
    <input type="text" class="input-overlay" style="top: 50px; left: 100px;" placeholder="Input 1">
    <input type="text" class="input-overlay" style="top: 150px; left: 200px;" placeholder="Input 2">
    <input type="text" class="input-overlay" style="top: 250px; left: 300px;" placeholder="Input 3">
</div>

</body>
</html>

<canvas> 태그는 그래픽을 그리는 데 사용되며, HTML 요소를 직접적으로 <canvas> 내에 배치할 수는 없습니다. 그러나 이미지 위에 <input> 요소를 배치하는 방법은 가능합니다. 이를 위해서는 <canvas> 태그와 별도로 이미지와 <input> 요소를 포함한 HTML 구조를 만들어야 합니다.

아래는 이미지를 배경으로 하고 그 위에 여러 개의 <input> 요소를 배치하는 방법의 예입니다.



HTML 코드:
html
코드 복사
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image with Inputs</title>
    <style>
        .image-container {
            position: relative;
            display: inline-block;
        }
        .image-container img {
            display: block;
        }
        .input-overlay {
            position: absolute;
            background: rgba(255, 255, 255, 0.5);
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>

<div class="image-container">
    <img src="your-image.jpg" alt="Image" width="600">
    <input type="text" class="input-overlay" style="top: 50px; left: 100px;" placeholder="Input 1">
    <input type="text" class="input-overlay" style="top: 150px; left: 200px;" placeholder="Input 2">
    <input type="text" class="input-overlay" style="top: 250px; left: 300px;" placeholder="Input 3">
</div>

</body>
</html>

설명:
.image-container: 이미지와 <input> 요소를 감싸는 컨테이너입니다. position: relative;를 사용하여 내부 요소들이 이미지 위에 위치하도록 설정합니다.
.input-overlay: 각각의 <input> 요소를 이미지 위에 배치합니다. position: absolute; 속성을 사용하여 원하는 위치에 요소들을 배치할 수 있습니다. 각 <input> 요소의 위치는 top과 left 속성으로 조정합니다.
이미지: img 태그를 사용하여 이미지를 배경으로 합니다.
이 방법을 사용하면 <canvas>가 아닌 일반 이미지 위에 필요한 위치에 <input> 요소를 배치할 수 있습니다. <canvas> 태그 내부에 직접적으로 <input>을 추가할 수 없지만, 이 방법을 통해 비슷한 효과를 얻을 수 있습니다.

반응형
저작자표시 비영리 변경금지

'IT tech Coding > html' 카테고리의 다른 글

개발중입니다. 라고 화면에 표시하기... 코드  (0) 2024.09.09
IME 문제로 키보드 안될때, 한글 입력시 rㅏ 이런식을 될때  (0) 2023.03.04
yml 파일은 도대체 뭔가?  (0) 2023.02.07
html 검색창 Enter키 동작하는 짧은 코드  (0) 2022.12.15
textarea 태그 사용시 첫 공백 생기는 현상에 대한 처리방법  (0) 2022.10.25
댓글