-
실습 - 이미지 클리하면 알림창 나타내기HTML&CSS/실습 2023. 1. 28. 17:28
나의 풀이
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #content{ width:50%; margin:auto; } </style> </head> <body> <div id="content"> <img src="./images/cup-1.png" onclick="alert('이미지를 클릭하였습니다')"> </div> </body> </html>해설풀이
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #container { width:300px; margin:auto; margin-top:50px; } </style> </head> <body> <div id="container"> <img src="./images/cup-1.png"> </div> <script> const img = document.querySelector('#container') img.onclick = function(){ alert('이미지를 클릭 하였습니다'); } </script> </body> </html>'HTML&CSS > 실습' 카테고리의 다른 글
css 실습 - 순서없는목록만들기 (0) 2023.02.02 실습 - 이미지 클릭 하면은 이미지 주소 표시하기 (0) 2023.01.30 HTML 실습 - 지원 양식 만들기 (0) 2023.01.22 HTML 실습 - 모집 poster만들기 (0) 2023.01.22 HTML 실습 - 이미지삽입 (0) 2023.01.22