이미지는 모든 웹 페이지의 공통 구성 요소입니다. 또한 다른 페이지에 대한 링크를 만드는 좋은 방법입니다. href 속성이 있는 앵커 태그와 이미지 태그의 조합을 사용하여 두 페이지 간의 링크 역할을 하는 이미지를 만들 수 있습니다. 다음 단계에 따라 이 작업을 수행할 수 있습니다.
- div 요소를 만듭니다. 여기에는 이미지 요소, 앵커 태그 및 링크를 설명하는 데 사용할 수 있는 모든 것이 포함됩니다.
- 다음으로 앵커 태그를 생성합니다. 태그에는 다른 페이지에 대한 링크를 가리키는 하이퍼텍스트 참조(href)가 있습니다. 링크를 이동하려는 사이트 또는 파일로 href를 설정합니다.
- 여는 태그와 닫는 태그 사이에
태그를 만들어 보겠습니다. 이미지 태그는 자동으로 닫힙니다. src라는 속성 추가 링크에 사용 중인 이미지의 URL 또는 경로를 가리킵니다.
- 사용자가 이미지를 클릭할 수 있다는 것을 알 수 있도록 이미지를 설명하는 무언가를 만드십시오. 이것은
태그, 태그,요소,
태그 등 원하는 모든 것이 될 수 있습니다.
작업 샘플은 아래 코드 편집기에 있습니다. 확실히 그것을 가지고 놀기 위해 약간의 시간을 할애하십시오!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Image Link</title> <style> div { width: 500px; display: flex; flex-flow: column wrap; } img { width: 100%; } caption { width: 100%; height: 50px; } </style> </head> <body> <div> <a href="https://www.goldengate.org/" target="_blank" referrerpolicy="no-referrer"> <img src="https://images.unsplash.com/photo-1449034446853-66c86144b0ad?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80" alt="Golden Gate Bridge" refer/> </a> <caption> An icon in the San Francisco skyline, the Golden Gate bridge shines in the twilight night sky. Click the image to learn more information about the Golden Gate bridge. </caption> </div> </body> </html>마지막 참고 사항:
<a>캡션 주위에만 – 그것이 링크가 참조하는 것이기 때문입니다. 사용자는 사진을 클릭하면 링크 대상이 있는 새 탭이 열릴 것으로 예상했습니다(이것이 target=”_blank” 구문이 수행하는 작업입니다). 따라서<a>를 유지하십시오. 링크를 둘러싸고 있는 태그와 그림을 설명하는 텍스트를 남겨두거나<a>텍스트와<img>주위에 태그를 지정합니다. . 두 가지 방법 모두 실행 가능한 옵션입니다.