HTML5 - 이미지, 링크 다루기(<img>태그, <a>태그)

반응형

<img> 태그

<img src="이미지경로" alt="이미지가나오지않을때나오는 텍스트" width="200", height="200">

이미지 안에 width와 height 넣을 수 있으나 css로 관리하는 게 더 좋습니다.

 

See the Pen Untitled by 박상훈 (@yvksigii-the-typescripter) on CodePen.

<a> 태그

<a href="www.google.com" target="_blank" title="구글바로가기">구글</a>

<a> 태그는 현재창에서 바로 열리는 게 기본값입니다.

target="_blank" : 새로운 탭에서 열리는 것 의미합니다.

target="_self" : 기본값 현재창에서 열리는 걸 의미합니다.

title : 마우스를 올렸을 때 툴팁 텍스트를 어떤 내용으로 출력할지 여부를 결정합니다.

href : 하이퍼링크 줄임말을 의미하며 이동할 경로를 적으시면 됩니다.

See the Pen Untitled by 박상훈 (@yvksigii-the-typescripter) on CodePen.