HTML의 버튼에 이미지 포함
이 기사에서는 HTML의 <button> 요소에 이미지를 포함하는 몇 가지 방법에 대해 설명합니다. HTML 버튼 내부의 그림을 수정하거나 설정하는 것을 의미합니다.
<button> 태그 내부의 <img> 태그를 사용하여 HTML 버튼에 이미지 포함
이 <img> 태그는 HTML 페이지에 이미지를 포함하는 데 사용됩니다. 이미지는 말 그대로 웹 페이지에 배치되지 않습니다. 이미지는 주어진 경로를 통해 웹페이지에 연결됩니다. 이 태그는 특정 이미지를 위한 공간을 생성합니다. 태그에는 src 및 alt라는 두 가지 필수 속성이 있습니다. HTML에서 <button> 태그를 사용하여 클릭 가능한 HTML 버튼을 만들 수 있습니다. <button> 태그 안에 <img> 태그를 배치하면 이미지가 포함된 클릭 가능한 HTML 버튼이 생성됩니다.
예를 들어 HTML 본문 내에서 <button> 태그를 엽니다. type을 button으로 지정합니다. 그런 다음 <img> 태그를 열고 src 속성에 이미지 URL을 지정합니다. 다음으로 height와 width를 각각 80과 100으로 설정합니다. 마지막으로 다음 줄에서 이전에 열린 모든 태그를 닫습니다.
아래 예에서는 <button> 요소를 만들고 그 안에 이미지를 삽입하여 버튼 내부에 삽입했습니다. URL 단축기를 사용하여 src 태그에 이미지의 짧은 URL을 배치했습니다. 따라서 이미지가 있는 버튼을 HTML로 만들 수 있습니다.
예제 코드:
<body>
<button type="button"> <img src="/img/DelftStack/logo.png" height ="90" width="480" /></button>
</body>
<input type="image">태그를 사용하여 HTML 버튼에 이미지 포함
<input> 태그는 데이터를 입력할 수 있는 입력 필드를 지정합니다. HTML에는 많은 입력 유형과 제어 위젯이 허용됩니다. 그 중 일부는 <input type="button">, <input type="color">, <input type="email">, <input type="text">입니다. type 속성을 image로 설정하고 src를 설정하여 입력 유형에 이미지를 포함할 수 있습니다. 버튼 역할을 하게 됩니다.
예를 들어, HTML 본문 내에서 <input> 태그를 열고 type을 image로 지정합니다. 그런 다음 src 속성에 이미지 URL을 입력합니다. 다음으로 style 속성을 작성하고 border를 double로 설정합니다. 또한 height와 width를 80과 170으로 추가합니다. 그런 다음 입력 태그와 이전에 열린 모든 태그를 닫습니다.
아래 예는 HTML 페이지에 이미지를 삽입하는 방법을 보여줍니다. <type="image"> 태그는 작업에 이미지를 삽입하거나 사용하고 있음을 지정합니다. 인라인 CSS를 사용하여 이미지의 테두리, 높이 및 너비를 설정했습니다. 이미지를 버튼처럼 보이게 하기 위해 이렇게 했습니다. double 값은 이미지 버튼 외부에 이중 테두리가 사용되도록 지정합니다. 높이와 너비는 이미지를 일정한 크기로 만드는 데 도움이 됩니다. 이미지의 높이와 너비를 지정하지 않으면 이미지가 로드될 때 페이지가 깜박일 수 있습니다. 이런 식으로 HTML 버튼에 이미지를 포함할 수 있습니다.
예제 코드:
<input type="image" src="/img/DelftStack/logo.png" style="border: double;" height="90" width="480"/>
Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.
LinkedIn