HTML의 이미지 링크

HTML의 이미지 링크는 웹사이트의 한 페이지에서 다른 페이지로 이동하는 데 도움이 되므로 거의 모든 페이지에서 발견됩니다. 널리 사용되는 조합은 HTML 앵커 태그 HTML의 img 태그 를 사용합니다. 이 조합을 사용하면 사용자가 이미지를 클릭하여 한 페이지에서 다른 페이지로 이동할 수 있습니다. 이 주제에 대해 더 자세히 알아보기 전에 먼저 앵커와 이미지 요소의 작동 및 렌더링을 개별적으로 이해한 다음 이를 결합하여 연결된 이미지를 만들어 보겠습니다.

HTML 앵커 태그

HTML 앵커 태그는 다른 웹페이지나 웹에서 호스팅되는 멀티미디어 콘텐츠에 대한 HTML 하이퍼링크를 만드는 데 사용됩니다. 앵커 태그의 작동 방식과 기본 속성을 이해하려면 아래 구문을 참조하세요

여기를 클릭하세요!!

위 예에서 "href" 속성은 "여기를 클릭하세요!!"라는 텍스트를 클릭하는 동안 사용자를 리디렉션할 웹페이지의 URL을 지정합니다.

아래에서 전체 코드를 살펴보겠습니다.

출력 

–>

위의 예를 통해 다음과 같은 관찰을 할 수 있습니다

1. 방문하지 않은 링크는 밑줄이 그어진 파란색으로 표시됩니다. 예를 들어 방문하지 않은 링크입니다
2. 방문한 링크는 밑줄이 그어져 보라색으로 표시됩니다. 예를 들어 이미 방문한 링크입니다
3. 활성 링크는 밑줄이 그어진 빨간색으로 표시됩니다. 예를 들어 활성 링크입니다

HTML 이미지 태그

인터넷을 검색하는 동안 다양한 형태의 멀티미디어가 포함된 여러 웹페이지를 접하셨을 것입니다. 특히 이미지는 오늘날 거의 모든 대화형 웹 페이지와 웹사이트에서 찾을 수 있는 인기 있는 멀티미디어 형식입니다. 아래 예를 통해 이미지 태그와 HTML의 구현을 이해해 보겠습니다.

구문

<img src="/static/imghwm/default1.png" data-src="smiley.gif" class="lazy" alt="Smiley face"    style="max-width:90%"  style="max-width:90%">

이제 img 태그의 각 속성이 어떻게 작동하는지 살펴보겠습니다.

1. src: src 속성은 이 태그를 사용하여 로드하려는 이미지 파일 경로를 정의합니다. example.com/images/dummy.png와 같은 형식으로 웹에서 호스팅되는 이미지 또는 웹 페이지와 동일한 서버에서 로컬로 호스팅되는 이미지 파일에 연결할 수 있습니다.
2. alt: alt 속성은 네트워크 연결이나 기타 문제로 인해 이미지가 로드되지 않는 경우 표시할 이미지의 텍스트와 설명을 정의합니다.
3. 너비 및 높이: 두 속성의 너비와 높이는 웹 페이지에 표시하려는 이미지의 너비와 높이를 정의합니다. 그렇지 않으면 이미지는 기본적으로 100% 높이와 너비로 작동합니다.

이제 웹페이지에 이미지를 로드하는 데 필요한 전체 HTML 코드를 살펴보겠습니다. 다음 이미지를 로컬 드라이브의 "image_test" 폴더에 "sunset.png"라는 이름으로 저장합니다.

이제 동일한 폴더에 다음 HTML 코드를 사용하여 sunset.html이라는 HTML 파일을 생성해 보겠습니다.

이제 컴퓨터의 브라우저로 이동하여 .html 파일의 경로를 입력하세요. 내 파일은 D 드라이브에 저장되어 있으므로 경로는

D:/image_test/sunset.html

이제 렌더링된 HTML 페이지가 브라우저에 일몰 이미지를 로드한 것을 볼 수 있습니다. CSS와

의 도움으로 태그를 사용하면 요구 사항에 따라 이미지 주위에 텍스트를 표시할 수도 있습니다. 앵커 및 img 태그는 모두 Google Chrome, Safari, Microsoft Edge, Firefox 및 Internet Explorer와 같은 모든 브라우저와 호환됩니다.

HTML에 연결된 이미지

이제 앵커 태그와 이미지 태그가 개별적으로 작동하는 방식을 예를 통해 이해했으므로 이제 두 기능을 결합하여 사용자가 클릭하면 새 웹페이지로 리디렉션되는 시나리오를 달성하는 방법을 이해하겠습니다. 이미지의. 이미지를 클릭할 수 있게 만들고 사용자를 다른 웹페이지로 리디렉션하려면 앵커 태그에 이미지를 중첩하기만 하면 됩니다. 아래 예에서는 전 세계에서 사용되는 상위 3개 웹 검색 엔진을 나열해 보겠습니다. 목록에는 3개 검색 엔진의 로고가 표시되며, 로고 중 하나를 클릭하면 사용자가 해당 검색 엔진 페이지로 리디렉션됩니다. "redirection test"라는 폴더를 만들고, 같은 폴더에 아래 이미지를 저장해 보겠습니다

1. 구글

2. 야후

3. 빙

이제 동일한 파일에 imageredirection.html이라는 이름의 .html을 생성하겠습니다. imageredirection.html에는 다음 코드가 포함됩니다.

이제 브라우저에서 HTML 페이지에 액세스해야 하며 여기에 로컬 경로 "D:/redirectiontest/imageredirection.html"을 입력하겠습니다. 그런 다음 브라우저는 HTML 파일을 렌더링하여 다음 결과를 생성합니다.

–>

사용자는 로고를 클릭하여 해당 검색 엔진으로 이동할 수 있습니다. 위의 예에서 HTML은 여러 태그를 결합하고 이와 같은 복잡한 기능을 달성할 수 있는 간단하고 유연한 언어라는 것을 알 수 있습니다. img와 앵커 태그를 사용하는 조합은 널리 사용되는 조합입니다. 추가 HTML 코딩을 사용하면

또는

. HTML이 출시된 각 버전에서 제공하는 뛰어난 유연성과 단순성은 UI 및 UX 디자이너가 일상적인 활동을 위해 인터넷을 탐색하는 동안 볼 수 있는 대화형의 직관적인 웹 페이지를 디자인하는 데 도움이 됩니다.

추천기사

HTML의 이미지 링크에 대한 안내였습니다. 여기에서는 구문과 함께 다양한 유형의 HTML 태그에 대해 설명합니다. 또한 다른 추천 도움말을 통해 자세히 알아볼 수도 있습니다.

1. HTML 속성
2. HTML 형식 태그
3. HTML 이미지 태그
4. HTML 프레임

위 내용은 HTML의 이미지 링크의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!