본문 바로가기
말하는나무 PR. Mahannamu/맞춤제작 견적서 Customization Quote Request

logo 부분 (2)

by Mr.코딩 2023. 7. 22.


[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 버튼은 "이미지 교체"를 표시합니다.