HTML 이미지 링크 입니다
지난 시간에 HTML에 이미지 삽입을 해보았습니다. 이번엔 HTML에 이미지를 삽입 후 링크 거는 방법과 링크를 걸 때 주의사항을 알아보겠습니다. HTML 태그를 사용해서 이미지 삽입을 먼저 합니다. 그리고 A 링크를 통해서 스크립트나 페이지 링크로 이동 시키면 됩니다.
먼저 img 태를 사용해보겠습니다. img 태그는 이미지를 삽입하는 태그 입니다.
src : 이미지가 위치한 주소 입니다.
지난 카테고리에 html을 선택해서 지난 강좌를 참고하셔도 됩니다.
그럼 img 태그를 이용해서 미리 준비한 이미지 파일을 삽입 시켰습니다.
이미지는 html 파일 하위 sss1.jpg 에 있습니다.
브라우저 보기를 하면 이미지가 큰게 보이네요
이미지가 너무커서 width 값과 height값을 지정해서 줄여보도록 하겠습니다.
width ,height 에는 픽셀값과 퍼센트 값을 적용할 수 있습니다. 50% 로 줄여 보겠습니다.
width 와 height에 50% 를 적용하면 50% 만 보이게 됩니다.
이제 img 태그에 a 링크를 걸면 됩니다.
a 링크 기본 사용 법은 <a href="주소">html 오브젝트 태그 혹은 텍스트</a>입니다.
아래 예제가 기본 사용 법이지요
이미지 링크를 사용할 거라서 불러온 img 테그를 <a></a>사이에 삽입하면 됩니다.
나이제 html 할 줄 알아 라고 하시는 분들은 가장 많이 실수 하는 부분이 바로 태그를 닫지 않아서 html 이 이상해 지는 겁니다.
처음 접하시는 거라면 반드시 습관처럼 <a></a> 를 먼저 입력하신 후 필요한 추가 코딩을 해야 합니다.
저는 10년 넘게 프로그램을 하고 있지만 아직 태그를 열고 닫고 부터 먼저 합니다.
html 이미지 링크 태그 입니다. 이제 주소를 넣으면 되겠네요
주소값에 이미지를 클릭하면 이동하는 페이지나 주소를 넣으면 됩니다.
주의 사항 입니다 이미지 링크가 끝났지만 일반적으로 놓치는 부분이 있습니다. 바로 이밎에 border처리를 해줘야 하는데요 이것을 하지 않으면 스타일에 따라 이미지 테두리에 사각형이 생길 수도 있습니다.
역시 습관처럼 사용하세요
이미지 태그에 border="0" 을 삽입합니다.
이건 옵션인데요 현재 페이지에서 이동할 지 혹은 새창을 띄울지 하는 부분 입니다.
target="_blank" 를 a 태그에 삽입하면 새칭에 뜹니다.
target은 여러 옵션이 있는데요
_blank : 새창
_self : 현재 창
_top : 모든 프레임을 무시하고 화면 전체
이미지링크.zip위 예제를 첨부파일로 올립니다.
