웹 페이지에 하이퍼링크와 이미지 표시하기 – HTML5

웹 페이지에 하이퍼링크 표시하기

HTML에서 빼놓을 수 없는 태그 중 이미지와 하이퍼링크가 있습니다. 예전 WWW(World Wide Web)이 등장하기 전 텍스트로만 인터넷 서비스(telnet, gopher, ftp, netfind 등등)를 이용할 때는 사용자가 직접 문서나 원하는 정보를 찾아야 했으나 검색엔진과 웹페이지의 등장(그리고 웹브라우저의 등장)으로 이미지를 클릭하거나 하이퍼링크를 클릭하는 것만으로도 사용자가 원하는 문서에 접근이 가능해졌습니다. 지금의 웹페이지에서 핵심 기능이라 할 수 있는 하이퍼링크와 이미지 표현 방법에 대해 살펴봅니다.

 

---

웹페이지에 표현하고자 하는 이미지 파일은 JPEG/JPG, PNG, GIF 정도로 사용할 수 있습니다. 표시 가능한 색상 수가 256가지뿐이지만 작은 용량으로 움직이는 영상(움짤)을 간단하게 구현 가능한 GIF 파일, 사진촬영에 널리 사용되는 대표적인 그래픽 파일 형태인 JPEG/JPG, 그리고 투명한 배경을 만들 수 있으며 다양한 색상도 표현 가능한 PMG 파일이 있습니다. (Tiff, BMP 등의 형태 그리고 벡터 이미지도 가능하지만 오늘은 보편적으로 사용되는 이미지 파일을 기준으로 삼았습니다.)

 

---

<img> 태그는 src 속성과 alt 속성을 이용하여 웹 페이지에 이미지 파일을 띄울 수 있도록 합니다. 이때 src 속성은 이미지 파일의 디렉터리와 파일명을 지정할 수 있고, alt 속성은 이미지를 설명하는 대체 텍스트입니다.

이미지 파일 두 개가 출력된 것을 확인합니다. 여기서 유의해야 할 점은 작성하는 HTML 파일 위치를 기준으로 하위 디렉터리는 /로 표시하며 상위 디렉터리는 .. (double point)로 표시해야 합니다.

이번엔 실제 웹에 있는 이미지 파일을 연결하여 화면에 띄워봅니다. 구글에서 픽사 베이를 검색하여 사이트 접속 후 마음에 드는 이미지에 커서를 옮기고 오른쪽 마우스를 클릭하게 되면 여러 가지 메뉴가 뜹니다. 그때 이미지 주소 복사하여 작성하고 있는 html 마크업 파일에 붙이기 하면 아래와 같이 이미지 파일이 연결되어 출력되는 것을 확인할 수 있습니다. (아이콘 이미지도 수고스럽게 만들지 않고 이런 형태로 무료 아이콘 이미지를 연결하여 사용하게 될 예정입니다. ^^)

<img> 태그에는 앞서 언급된 이미지 대체 텍스트를 삽입할 때 사용하는 alt 속성과 이미지 크기를 지정할 수 있는 width, height 속성이 있습니다. alt 속성은 화면에 이미지 출력이 실패했을 때 해당 텍스트를 띄우게 됩니다.

<figure><figcatipn> 태그를 이용하여 이미지에 설명을 부여할 수 있습니다.

 

이제 <a> 태그의 속성을 살펴본 후 하이퍼링크를 작성해 봅니다. 링크는 이미지를 클릭하거나 특정 텍스트를 클릭했을 때 연결된 곳으로 이동하는 기능을 의미합니다.

 

속성	설명
href	링크 문서 또는 주소 지정
target	링크 내용이 표시될 위치를 지정
download	링크한 내용을 다운로드
rel	현재 문서와 링크한 문서와의 관계 표시
hreflang	링크한 문서의 언어를 지정
type	링크한 문서의 파일 유형을 반환

 

네이버로 이동 텍스트를 클릭하거나 아래 이미지를 클릭하게 되면 네이버 홈페이지로 이동하게 링크되었습니다. 다만 텍스트를 클릭했을 때 <a> 태그의 target 속성을 이용하여 브라우저의 새로운 탭 또는 창을 열어 링크됩니다. target 속성값에 대해 살펴봅니다.

 

 

target 속성 값	설명
_blank	링크 내용이 새로운 창에서 열림
_self	링크 내용이 현재 화면에서 열림(default)
_parent	프레임을 사용할 때 링크 내용을 부모 프레임에 표시
_top	프레임을 사용할 때 프레임에서 벗어나 링크 내용을 전체 화면에 표시

index.html 새로 작성하여 <ifame>태그를 사용하여 프레임 형태로 main.html 파일을 불러봅니다.

iframe 태그 사용

특정 페이지로 이동이 아닌 같은 페이지에서 이동을 할 수도 있습니다. 하나의 페이지가 아주 길게 작성되었을 경우(예를 들면 위키피디아 웹페이지) 앵커(anchor) 기능을 사용하여 페이지 아래 또는 위로 이동할 수 있습니다. (플라스크에서도 구현했던 기능이네요^^)

<태그 id="앵커 이름"> 텍스트 또는 이미지</태그>

<a href="#앵커 이름">텍스트 또는 이미지</태그>

 

html 시작점에 앵커를 지정하고 제일 하단에 home으로 연결되는 링크를 만들어 지정된 앵커로 이동하게끔 만들었습니다. 이제 페이지가 아무리 길어지더라도 맨 밑에 있는 home 텍스트를 클릭하면 최상단으로 이동할 수 있습니다.

이외에도 <map><area> 태그를 이용하여 한 이미지에 영역을 구분하고 해당 영역을 클릭할 때 원하는 페이지로 링크하는 방법도 있습니다만 자세한 설명은 다음 기회로 미룹니다. 한 이미지로 두 개 이상의 링크를 연결할 수 있는 태그가 있다 정도로 알아둡니다.

 

---

HTML이 웹 페이지를 만드는 기초 언어이다 보니 세부적인 내용까지 모두 살펴보기엔 시간+노력이 낭비되는 느낌입니다. 개괄적인 내용 파악을 목적으로 HTML을 훑어보고자 합니다. 세부적인 내용들은 필요할 때 다시 들여다보는 것으로 하고 최초 다짐한 학습 취지에 맞게끔 너무 세부적이다 싶은 내용은 과감히 넘어갑니다. 그래도 플라스크를 공부하다 애매했던 개념들이 조금씩 잡혀갑니다. 아무리 쉬운 내용이더라도 직접 타이핑해보고 결과물을 확인하느라 생각만큼 학습 속도가 빠르진 않지만 그래도 꾸준히 나아가고자 합니다.