[html] 이미지를 업로드하면 화면에 출력되는 태그?
Bard
<img src="images/image.jpg" alt="This is an image.">
HTML에서 이미지를 업로드하면 화면에 출력되는 태그는 <img> 태그입니다. <img> 태그는 이미지를 웹 페이지에 삽입하는 데 사용됩니다. <img> 태그에는 다음과 같은 속성이 있습니다.
- src 속성: 이미지 파일의 URL을 지정합니다. (src는 source의 약자입니다.)
- alt 속성: 이미지의 대체 텍스트를 지정합니다. 이미지가 로드되지 않을 때 대체 텍스트가 표시됩니다.
- width 속성: 이미지의 너비를 지정합니다.
- height 속성: 이미지의 높이를 지정합니다.
img 태그로 올려진 이미지 위에 커서가 나타나면 [이미지 삭제 버튼]과 [이미지 교체] 버튼이 나타나도록 하려면 JS를 써야 하지?
Bard
네, img 태그로 올려진 이미지 위에 커서가 나타나면 [이미지 삭제 버튼]과 [이미지 교체] 버튼이 나타나도록 하려면 JavaScript를 사용해야 합니다. 다음은 JavaScript 코드의 예입니다.
const img = document.querySelector("img");
img.addEventListener("mouseover", () => {
const deleteButton = document.createElement("button");
deleteButton.textContent = "이미지 삭제";
const replaceButton = document.createElement("button");
replaceButton.textContent = "이미지 교체";
img.appendChild(deleteButton);
img.appendChild(replaceButton);
});
네, img 태그로 올려진 이미지 위에 커서가 나타나면 [이미지 삭제 버튼]과 [이미지 교체] 버튼이 나타나도록 하려면 JavaScript를 사용해야 합니다. 다음은 JavaScript 코드의 예입니다.
이 코드는 img 태그에 마우스가 오버되면 deleteButton과 replaceButton 버튼을 생성하고 img 태그에 추가합니다. deleteButton 버튼은 "이미지 삭제"를 표시하고, replaceButton 버튼은 "이미지 교체"를 표시합니다.
'말하는나무 PR. Mahannamu > 맞춤제작 견적서 Customization Quote Request' 카테고리의 다른 글
이 코드만으로 14개의 섹션(구역)이 생성된 거지? (0) | 2023.07.23 |
---|---|
오류를 바로잡은 코드인데, 내가 바라는 모양이 아니다. (0) | 2023.07.23 |
헤더 부분 - 우상단 명령 버튼들 추가 (0) | 2023.07.23 |
헤더 부분 - 기본 (0) | 2023.07.23 |
빌드 테스트 1 (0) | 2023.07.22 |
logo 부분 (0) | 2023.07.22 |
이미지(로고) 삽입 (0) | 2023.07.20 |
견적서 양식 웹페이지를 만들려고 한다. 어떻게 해야 할까? (0) | 2023.07.16 |