HTML 기초 하이퍼링크 걸기

#HTML 기초 하이퍼링크 걸기

 

하이퍼링크는 다른 웹이나 페이지로 넘어갈 수 있는 단어나 이미지입니다.

<a> 태그로 하이퍼링크를 정의하며 a는 anchor의 약자입니다.

사용자가 웹페이지에서 커서를 링크 위에 올리며 커서의 모양이 화살표에서

손모양으로 변하게 되는데 하이퍼링크가 걸려있다는 표시입니다.

 

#하이퍼링크 기본

<a href="www.daum.net"> 다음으로 연결 </a>

<a href="www.naver.com" target="_blank"> 네이버로 연결 </a>

 

#target 속성

타깃 속성은 각 링크가 클릭되었을 때, 새로운 페이지가 어디에 열리는지를 지정합니다.

_blank 속성은 링크를 클릭하면 새로운 윈도에서새로운 페이지를 엽니다.

_self 속성은 링크를 클릭하면 현재 윈도우에 새로운 페이지를 엽니다.

_parent 속성은 링크를 클릭하면 부모 프레임에 새로운 페이지를 엽니다.

_top 속성은 링크를 클릭하면 현재 윈도우에 새로운 페이지를 열고 모든 프레임을 취소합니다.

 

#파일 다운로드 링크 만들기

파일을 다운로드할 수 있도록 링크에 연결하는 것도 거의 비슷한 방법으로 할 수 있다

예를 들어 압축 파일을 다운로드하게 하려면 아래와 같이 링크를 생성하면 됩니다.

<a href="http://www.daum.net/data.zip"> 파일다운로드 </a>

 

#HTML 이미지 넣기

웹페이지에서 이미지는 <img> 태그로 정의됩니다.

<img src="daum.jpg" width="300" height="300">

여기서 <img> 태그는 이미지를 웹페이지에 삽입할 때 사용합니다.

src 속성은 이미지 이름을 지정합니다.

width, height 속성은 이미지의 가로, 세로 크기를 지정합니다.

기본적인 단위는 픽셀이며 % 단위를 사용하여 브라우저의 크기에 비례하여

상대적으로 이미지의 크기를 지정할 수 있습니다.

 

참고로 <alt> 속성을 사용하면 브라우저가 어떤 이유로 이미지를 화면에

표시하지 못했을 경우에 표시되는 대체 문자를 지정합니다.

<img src="daum.jpg" alt="이미지가 안 보이네요"> 이렇게 작성되었을 때

이미지가 안 나올 경우 "이미지가 안 보이네요"라는 글자가 보이게 됩니다.

 

#웹에서 사용하는 이미지 종류

JPEG - 실사 사진과 같이 복잡하고 많은 색상으로 이루어진 이미지에 적합합니다.

손실압축방식을 사용함으로 압축과정에서 약간의 데이터는 영구히 사라지며

파일크기는 작고 애니메이션은 지원하지 않습니다.

 

PNG - 클립아트와 같이 작은 수의 색상을 가진 이미지에 적합하며 투명배경을 지원합니다.

무손실압축방식을 사용하며 같은 품질의 이미지의 경우 JPEG보다는 크기가 큽니다.

 

GIF - 로고나 클립아트 형태의 이미지에 적합하며 무손실압축기법을 사용합니다.

투명배경을 지원하며 애니메이션도 지웝합니다.