- 웹개발 시 정말 많은 용도로 사용 할 수 있는 <img> tag , <a> tag
- 이런기능도있었나? 싶을정도로 많은 기능이 있다.
- 자세히 알아보도록 하자.
01.이미지 삽입을 해주는 <img>태그
- <img> 태그는 줄바꿈이 없는 inline 요소이다.
- 이미지를 삽임하려면 <img> 태그를 사용한다
- <img> 태그는 종료 태그 없이 사용한다.
- <img> 태그의 속성
- src="/mingyu/mingyu.jpg" ☞ 문서에 표시할 이미지 파일을 지정한다.
- width="780px;" ☞ 이미지의 가로 폭 을지정한다 (px,% 단위)
- height="780px;" ☞ 이미지의 세로 폭 을지정한다 (px,% 단위)
- alt="이미지가없어요" ☞ 이미지가 표시되지 않을 때 대체 텍스트를 입력한다.
- usemap="#맵이름" ☞ 클라이언트 (웹브라우저) 측의 이미지 맵을 지정한다
- width,height 속성의 경우 둘중 하나만 지정되면 나머지 하나는 원본 크기에 비례해서 자동으로 지정된다.
<!-- <img>태그의 src 속성 -->
<!-- HTML 문서와 같은 폴더에 있는 경우 -->
<img src="mingyu.jpg">
<!--절대 경로의 경우 -->
<img src="https://min-nine.tistory.com/html/mingyu.jpg">
<!--
상대 경로의 경우
현재 위치가 https://min-nine.tistory.com/index.html의 경우
-->
<img src="html/mingyu.jpg">
<!-- <img>태그의 src 속성 END -->
02.하이퍼링크 삽입을 하는 <a>태그
- 기본 형식은 <a href="이동할 위치"> 링크를 걸어 줄 내용물 </a>
- <a>태그의 속성
- href="URL" ☞ 링크를 통해 이동하려는 곳의 경로나 주소(URL)을 표기한다.
- target="_blank" ☞ 링크된 내용이 포시될 창을 지정해준다
- _blank -> 새로운 창에서 링크된 페이지를 연다
- _self ->현재의 창에서 링크된 페이지를 연다
- _top -> 현재의 창이 프레임으로 구성된 경우 모든 프레임이 사라지고 하나의 화면에서 페이지를 연다
- _parent -> 부모 프레임에서 링크된 페이지를 연다
- 사용자지정 -> 링크된 페이지를 표시할 피레임의 이름을 적접지정한다
- download ☞ href 속성에 의해 지정된 파일을 직접 다운로드
- 링크 클릭시 href속성에 지정한 파일을 별도 브라우저에서 열지 않고 직접 다운로드 하여 표시
- title="추가적정보,마우스 호버 시 툴팁형태로 나타남"
- 동일/다른 페이지에서 특정 위치로 이동 할 수 있다.
- 링크를 삽입하는 부분
- 같은 페이지 내에서 이동하는 경우
- <a herf = "#이동할 특정 태그의 이름"> 내용 </a>
- 다른 페이지의 특정 위치로 이동하는 경우
- <a href = "페이지경로#이동할 특정 태그의 이름">내용</a>;
- 이동할 특정 태그의 이름 표기방법
- 태그 속성중 id 값을 사용한다.
- <div id="come_here"></div>
- 클릭 시 이메일을 보낼 수 있다
- <a href = "mailto:min-nine@tistory.com"> min-nine@tistory.com </a>
- 클릭 시 자바스크립트도 실행 할 수 있다
- <a href = "javascript:gotohome();">스크립트 실행</a>
- 클릭 시 파일로 저장 및 실행 할 수 있다.
- <a href = "music.mp3">음악재생 </a>
- <a href = "download.zip">다운로드</a>
