| 2023-09-19 1261 View 공개 |
HTML 이미지 위에 버튼 링크를 만들려면 다음과 같은 방법을 사용할 수 있다.
- 이미지 태그를 감싸는 <a> 태그를 추가한다.
- <a> 태그의 href 속성에 이동할 링크 주소를 지정한다.
- 버튼 스타일을 지정하기 위한 CSS를 추가한다.
다음은 예제 코드이다.
HTML<html>
<head>
<title>이미지 위에 버튼 링크 만들기</title>
</head>
<body>
<img src='https://example.com/image.png' alt='이미지'>
<a href='https://example.com/link'>
<button>버튼</button>
</a>
</body>
</html>
이 코드는 다음과 같이 출력됩니다.
<img src='https://example.com/image.png' alt='이미지'>
<a href='https://example.com/link'>
<button>버튼</button>
</a>
버튼 스타일을 지정하기 위한 CSS는 다음과 같다.
CSS.button {
background-color: #000;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
이 CSS는 버튼의 배경색을 검은색, 글자색을 흰색, 패딩을 10px 20px, 모서리를 둥글게 설정한다.
이러한 방법을 사용하여 이미지 위에 원하는 버튼 링크를 만들 수 있다.
다음은 몇 가지 추가 팁이다.
- 이미지와 버튼의 위치를 조정하려면 CSS의
position 속성을 사용한다.
- 이미지와 버튼의 크기를 조정하려면 CSS의
width 및 height 속성을 사용한다.
- 버튼에 아이콘을 추가하려면 CSS의
background-image 속성을 사용한다.
예를 들어, 다음 코드는 이미지 위에 위치한 버튼의 위치를 조정한다.
CSS.button {
position: absolute;
top: 10px;
right: 10px;
}
이 코드는 버튼을 이미지의 상단 오른쪽에 10px 떨어진 곳에 배치한다.
-6516936cd8c9d0.33481675.png)