웹 사이트는 그 (것)들의 앞에 오는 어떤 커뮤니케이션 매체와도 다르다. 프린트, 라디오, 심지어 텔레비전과 같은 이전 미디어 형식과 달리 웹 사이트를 설정하는 주요 기능 중 하나는 " 하이퍼 링크 "개념입니다.
일반적으로 "링크"라고도 알려진 하이퍼 링크는 웹을 매우 역동적으로 만드는 요소입니다. 다른 기사 나 다른 리소스를 참조 할 수있는 인쇄 된 발행물과 달리 웹 사이트에서는 이러한 링크를 사용하여 실제로 다른 페이지와 리소스로 방문자를 보냅니다. 다른 방송 매체가이를 수행 할 수 없습니다. 라디오로 광고를 보거나 TV로 볼 수는 있지만 웹 사이트에서 쉽게 할 수있는 방식으로 광고에 포함 된 회사로 연결되는 하이퍼 링크는 없습니다. 링크는 정말 놀라운 커뮤니케이션 및 상호 작용 도구입니다!
종종 웹 사이트에있는 링크는 동일한 사이트의 다른 페이지로 방문자를 안내하는 텍스트 콘텐츠입니다. 웹 사이트 탐색은 실제 텍스트 링크의 한 예이지만 링크는 텍스트 기반 일 필요는 없습니다. 웹 사이트에서 이미지를 쉽게 연결할 수도 있습니다. 이 작업이 어떻게 수행되는지 살펴보고 이미지 기반 하이퍼 링크를 사용하려는 경우를 살펴 보겠습니다.
이미지를 연결하는 방법
제일 먼저해야 할 일은 HTML 문서에 이미지 자체를 배치하는 것입니다. 이미지 기반 링크의 일반적인 용도는 사이트의 로고 그래픽으로 사이트의 홈페이지로 다시 연결됩니다. 아래의 예제 코드에서 우리가 사용하는 파일 은 우리 로고 의 SVG 입니다. 이미지 품질을 유지하면서 전체 파일 크기를 작게 유지하면서 다른 해상도에서도 이미지의 크기를 조정할 수 있으므로 이는 좋은 선택입니다.
이미지를 HTML 문서에 배치하는 방법은 다음과 같습니다.
이미지 태그 주위에 앵커 링크를 추가하고 이미지 앞에 앵커 요소를 열고 이미지 뒤에 앵커를 닫습니다. 이것은 텍스트를 링크하는 방법과 유사합니다. 단, 앵커 태그와 링크하려는 단어를 래핑하는 대신 이미지를 래핑하십시오. 아래의 예에서 우리는 "index.html"이라는 사이트의 홈페이지로 다시 연결됩니다.
이 HTML을 페이지에 추가 할 때 앵커 태그와 이미지 태그 사이에 공백을 넣지 마십시오. 그렇게하면 일부 브라우저에서는 이미지 옆에 약간의 진드기가 추가되어 이상하게 보입니다.
로고 이미지는 요즘 홈페이지 표준 버튼 역할을합니다. HTML 마크 업에는 이미지의 너비와 높이와 같은 시각적 스타일이 포함되어 있지 않습니다. 우리는 이러한 시각적 스타일을 CSS로 남겨두고 HTML 구조와 CSS 스타일을 명확하게 분리합니다.
CSS를 사용하면이 로고 그래픽을 대상으로 작성 하는 스타일 에 멀티 장치 친숙한 이미지의 반응 형 스타일 과 테두리 또는 CSS와 같이 이미지 / 링크에 추가하려는 모든 시각적 이미지를 포함하여 이미지 크기 조정이 포함될 수 있습니다 그림자를 떨어 뜨려 라. CSS 스타일과 함께 사용할 "후크"가 필요하면 이미지를 제공하거나 클래스 속성을 연결할 수도 있습니다.
이미지 링크의 사용 사례
그래서 이미지 링크를 추가하는 것은 꽤 쉽습니다. 지금까지 보았 듯이 이미지를 적절한 앵커 태그로 둘러 쌀 수 밖에 없습니다. 다음 질문은 "위에서 언급 한 로고 / 홈페이지 링크 예제 외에 언제 실제로 실제로이 작업을 수행하겠습니까?"
다음은 몇 가지 생각입니다.
- 해당 이미지의 더 큰 버전으로 링크되는 갤러리의 미리보기 이미지.
- 전자 상거래 웹 사이트의 제품 사진과 같이 콘텐츠를 나타내는 데 혼자 사용되는 이미지입니다.
- 블로그 기사 나 보도 자료와 같은 다른 콘텐츠의 일부인 티저 이미지는 사람들이 콘텐츠를 클릭하여 탭하거나 전체 기사를 읽는 데 필요한 대상 영역을 제공하도록 유도합니다.
- 사이트 내의 특정 기능 또는 페이지에 연결하기위한 단추로 사용되는 아이콘 이미지.
- 해당 사이트 또는 회사에서 중요한 다양한 소셜 미디어 사이트의 눈에 잘 띄는 로고를 사용하는 소셜 미디어 링크입니다.
- 양식 제출과 같은 특정 기능을위한 버튼으로 사용되는 이미지 (권장 사항은 웹 사이트 성능 측면에서 볼 때 CSS로만 구성된 버튼은 이미지 버튼보다 더 나은 선택입니다).
이미지를 사용할 때 알림
이미지는 웹 사이트의 성공에 중요한 역할을 할 수 있습니다. 위에 주어진 예제 중 하나는 다른 내용과 함께 이미지를 사용하여 해당 내용에주의를 끌고 사람들이 읽을 수있게하는 것입니다.
이미지를 사용할 때 올바른 이미지 주제, 형식 및 웹 사이트에서 사용하는 이미지가 웹 사이트 게재에 맞게 최적화 되어 있는지 확인하는 등 올바른 이미지를 선택해야합니다. 이것은 단지 이미지를 추가하는 많은 작업처럼 보일지 모르지만 그 결과는 그만한 가치가 있습니다! 이미지는 실제로 사이트의 성공에 많은 도움을줍니다.
사이트에서 적절한 이미지를 사용하는 것을 주저하지 말고 필요에 따라 이미지를 연결하여 컨텐트에 대화식으로 추가 할 수도 있지만 이러한 이미지 모범 사례를 염두에두고 웹 디자인 작업에서이 그래픽 / 링크를 올 바르고 신뢰할 수있게 사용하십시오.