[HTML] 링크와 이미지

1. 링크

<a> 태그

  - Anchor의 약자로, 링크 올릴 때 사용한다.

  - 텍스트나 단락, 이미지 등 다양한 HTML 요소에 사용할 수 있다.

 

1-1 href 속성

<a href="주소">내용</a>

  - href 속성은 Hypertext reference의 약자로, 링크를 올릴 때 사용한다.

  - 주소에 원하는 사이트의 URL를 입력한다.

  - 내용을 클릭하면 원하는 사이트를 접속할 수 있다.

 

1-2 target 속성

    <h1>_blank</h1>
    <a href="http://tistory.com" target="_blank">티스토리</a>
    
    <h1>_self</h1>
    <a href="http://tistory.com" target="_self">티스토리</a>

  - target="_blank" : 새 창이나 새 탭에서 웹 페이지가 열린다.

  - target="_self" : 현재 탭에서 웹 페이지가 열린다.

 

1-3 title 속성

<a href="http://tistory.com" title="티스토리">티스토리</a>

 

 

  - title="내용" : 링크 위에 마우스를 올려놓으면 해당 내용이 나타난다.

 

1-4 Style 적용

<style>
    a:link{color: grey; }
    a:visited{color: red; }
    a:hover{color: blue; }
    a:active{color: green; }
    a{text-decoration: line-through;} 
</style>
<a href="http://google.com">티스토리</a>

  - a:link : 한 번도 방문한 적이 없는 상태 (기본설정)

  - a:visited : 한 번이라도 방문한 적이 있는 상태

  - a:hover : 링크에 마우스를 올려놓은 상태

  - a:active : 링크를 마우스로 누르고 있는 상태

  - a{text-decoration: none;} : 링크 아래에 밑줄이 사라진다.

  - a{text-decoration: underline;} : 링크 아래에 밑줄이 그어진다. (기본설정)

  - a{text-decoration: overline} : 링크 위에 밑줄이 그어진다.

  - a{text-decoration: line-through} : 링크 중간에 밑줄이 그어진다.

 

 

 

2. 이미지

img

<img src="이미지 위치" alt="대체문자열">

  - 이미지를 삽입할 때는 <img> 태그를 사용한다.

  - <img> 태그는 종료 태그가 없는 빈 태그이며, 위 코드와 같이 입력한다.

  - 이미지가 로딩될 수 없는 경우 이미지 대신 나타날 텍스트를 설정할 수 있다.