[HTML] #6 html 링크와 이미지 (a 태그, 이미지 삽입)

 

자주 사용하는 링크와 이미지를 삽입하는 방법입니다.

---

링크 삽입

기본적인 방법 : <a href="링크 주소"></a>

예) <a href="https://www.tistory.com/"></a>

 

target 속성 값 추가 (어디에서 열 것인가 명시)

예) <a href="https://www.tistory.com/" target="_blank"></a>

 

_blank : 새 창이나 새 탭에서 오픈.
_self : 현재 프레임에서 오픈. (기본)
_parent : 부모 프레임(frame)에서 오픈.
_top : 현재 창의 가장 상위 프레임(frame)에서 오픈.
프레임(frame) : 이름 링크로 연결된 문서를 지정된 프레임(frame)에서 오픈.

 

 

<!-- A tag 기본 속성 href ,target -->
<a href="http://www.tistory.com">tistory</a><br>
<a href="http://www.tistory.com" target="_blank">tistory</a><br>
<a href="./01Style.html">01Style Page</a><br>
<a href="./01Style.html" target="myframe">01Style page</a><br>
바로 위에 링크를 눌렀을 때 아래에서 실행됨<br>
<iframe name="myframe" style="width:50%;height:50%"></iframe>

---

이미지 삽입

기본적인 사용 방법 : <img src="이미지 주소" alt="이미지를 받아올 수 없을 때 대신 표시할 문자열">

예) <img src="./img/html5.png">

 

현재 이미지가 저장된 폴더는 이렇게 되어있습니다.

 

 

<div>
<img src="./img/www.png" width=50 height=50>
월드 와이드 웹(World Wide Web, WWW, W3)은 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간</div>
<br>
<div>
<img src="./img/html5.png" width=50 height=50>
HTML5는 HTML의 완전한 5번째 버전으로 월드 와이드 웹 (World Wide Web)의 핵심 마크업 언어이다.
</div>
<br>
<div>
<img src="./img/css.png" width=50 height=50></a>
종속형 시트 또는 캐스케이딩 스타일 시트(Cascading Style Sheets, CSS)</div>
<br>
<div>
<img src="./img/noimage.png" alt="이미지가 없어요" width=50 height=50>
위치에 존재하지 않는 이미지 파일을 걸었을 때
</div>