검색

교회행정과IT

글자와 그림에 링크를 설정해 지정된 경로로 이동

- 작게+ 크게

크리스천비전
기사입력 2016-06-09

▲그레이스미션대학교 행정처장 구자혁 교수.     © 크리스천비전


   HTML 문서를 구성하는 기본 태그 명령어 중 글자 및 이미지의 링크 설정 방법을 알아보자.

 

1. 이미지 링크 설정 태그

   이미지 링크 설정 태그란 홈페이지에 이미지를 삽입시키는 태그이다.  홈페이지에서 일반적으로 사용하는 이미지 파일은 .GIF 및 JPG 파일을 사용한다.

 

<img src="이미지 파일 경로(주소)" alt="그림 설명">

 

   이미지 파일 경로는 필수이며 그림 설명은 옵션이다.  Img는 이미지(IMAGE)를 의미하며 src는 소스(SOURCE)를 의미한다.

  

   이미지를 홈페이지에 삽입하기 위해서는 우선적으로 포토샵(photoshop)등의 이미지 툴을 이용하여 홈페이지에 어울리는 적당한 크기로 이미지의 크기를 조정하여 GIF 및 JPG 파일로 저장한 후 FTP 및 WEB FTP방법으로 서버의 일정한 경로(예로> image 혹은 img 경로)를 만든 후 이곳에 업로드 한다.

 

2. 이미지 크기 설정 태그

   이미지 크기 설정 태그는 옵션 항목으로 설정을 하지 않으면 이미지의 원 크기 그대로 홈페이지에 나타난다.  경우에 따라 이미지 크기를 줄이거나 크게 할 필요가 있는 경우 이미지의 폭(WIDTH)과 높이(HEIGHT)를 지정하여 홈페이지에서 보여주도록 설정할 수 있다.  이 경우 사용하는 태그이다.  이미지의 크기는 픽셀(PIXEL) 이라는 하는 화상의 크기를 나타내는 단위로 사용한다.  일반적으로 모니터 크기가 800*600 혹은 1024*768 픽셀임을 감안해서 홈페이지를 제작하고 이미지의 픽셀을 설정해야 한다.

 

링크 방식

<img src="이미지 파일 경로(주소)" width="가로크기" height="세로크기">

 

   설정 값을 저장한 후 FTP를 통해서 서버에 업로드 후 웹 브라우저를 이용하여 홈페이지 주소에서 확인 기존 이미지 크기에 비해서 폭과 높이가 변경되는 것을 확인할 수 있다.

 

3.  링크 설정 태그

   링크 태그는 홈페이지에서 특정 단어 혹은 이미지를 마우스로 클릭하면 링크된 경로로 이동하도록 설정하는 태그이다.  이런 홈페이지 내부에서 링크되는 것을 하이퍼 링크라고 한다.

  

   링크 태그를 사용할 때 주의점은 이미지 태그와 같이 하이퍼 링크 시킬 주소가 반드시 웹에서 직접 연결되는 주소가 되어야 한다.  링크 시키는 경로는 자체 홈페이지 경로의 HTML파일 및 이미지 파일로도 연결이 가능할 뿐 아니라 외부 홈페이지의 HTML파일 및 이미지로도 연결시킬 수 있다.

  

   홈페이지 링크 태그의 사용 방법은 링크가 되는 주소의 시작을 <a href=”주소”> 와 같이 시작하고 링크시키는 단어 혹은 이미지 뒤에 </a>와 같이 쌍으로 연결하여 링크 부분이 설정되도록 지정해야 한다.

 

(1) 사용 방법 – 단어연결

<a href="링크 주소">연결단어로 링크</a>

 

   메모장을 이용하여 링크될 주소가 있는 HTML 문서를 편집한다.  다음에 FTP를 이용하여 서버에 업로드 후 웹 브라우저를 이용하여 웹 주소로 연다.  마지막으로 웹 브라우저에서 링크 클릭 시 하이퍼 링크 연동을 확인한다.

 

(2) 사용 방법 – 이미지 연결

<a href="링크 주소">연결어, 이미지</a>

 

   같은 방식으로 텍스트 대신 이미지로 링크 설정하도록 HTML 문서를 편집한다.  다음에FTP를 이용하여 서버에 편집한 HTML 문서 업로드 후 웹 브라우저의 웹 주소로 확인한다.  마지막으로 마우스로 이미지 선택 지정한 홈페이지로 이동하는 하이퍼 링크를 확인한다.

 

트위터 페이스북 카카오톡 카카오스토리 band naver URL복사
URL 복사
x

PC버전

Copyright ⓒ 크리스천비전. All rights reserved.