<!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) | 2025.01.20 |
|---|---|
| 웹 페이지 로딩 화면 구현하기: 초보자도 쉽게 따라 할 수 있는 가이드 (0) | 2024.12.17 |
| 개발중입니다. 라고 화면에 표시하기... 코드 (0) | 2024.09.09 |
| IME 문제로 키보드 안될때, 한글 입력시 rㅏ 이런식을 될때 (0) | 2023.03.04 |
| yml 파일은 도대체 뭔가? (0) | 2023.02.07 |
