[HTML&CSS] Image and Hyperlink

돌아가고 싶다면 여기를 클릭해!!!
(글을 읽다보면 알 수 있을거야)

웹페이지에 글과 표만 빼곡하면 어떨까? 혹은 우리에게 제공되는 것이 하나의 페이지 뿐이라면? 이를 해결하기 위해 우리는 이미지와 하이퍼링크를 사용한다. 글만 있는 지루한 웹페이지를 벗어나 글과 그림이 조화로운 웹페이지를 만들고, 다른 웹페이지와 연결까지 된다면 이전에 만들 수 있던 것과는 차원이 다를 것이다. 오늘 정리하고 공부해 볼 부분은 웹 페이지에 이미지와 하이퍼링크를 넣을 수 있는 여러 태그들이다!!!

과연 모든 이미지 파일들을 웹에서 사용가능할까?
웹에서는 파일 크기가 크지 않고 화질이 좋은 GIF, JPG/JPEG, PNG 파일만 사용이 가능하다. 그럼 이제 어떻게 이미지를 넣을 수 있는지 알아보자.

이미지 관련 태그

이미지 삽입

<img src="경로" 속성="속성값">
이미지 삽입을 위한 태그는 <img>이며 이때 src와 alt를 속성이라고 부른다.

이미지 태그 관련 속성

src 속성

이미지 파일의 경로를 지정하며, 웹 문서 파일의 위치를 기준으로 정해진다. src 속성은 필수 속성으로 없으면 안됨!!!

alt 속성

이미지를 설명해주는 대체 텍스트이다. 이미지가 로딩이 안되는 경우 화면에 표시된다. 생략 가능!

<img src="source" alt="이미지 설명">

width & height 속성

이미지의 크기를 수정할 수 있게 도와주는 속성으로 이미지의 용량은 변하지 않음. 생략 가능!

<img src="source" alt="" width="50" height="50">

figure, figcaption 속성

이미지에 설명을 붙여주는 속성이다.
<figure> ~ </figure> 설명을 붙일 대상을 지정
<figcaption> ~ </figcaption> 설명 글

<figure>
	<img src="source" alt=" ">
    <figcaption> 설명설명 주절주절 </figcaption>
</figure>

링크 관련 태그

링크 만들기

링그를 만들기 위한 태그는 <a> </a> 태그이며 두가지 방법으로 사용이 가능하다.
<a href="주소" 속성="속성값"> ~ </a> 텍스트를 통한 링크
<a href="주소" 속성="속성값"><img src="경로"> </a> 이미지를 통한 링크

링크 태그 관련 속성

href 속성

<a href="주소"> ~ </a>
링크의 주소를 담는다. href는 필수 속성으로 없어서는 안됨!!!

target 속성

<a href="주소" target="속성값"> ~ </a>
새 탭에서 링크를 열고 싶은 경우 사용할 수 있는 속성이다.
target의 속성값으로는 _blank, _self, _parent, _top이 있다.

이 외에도 <a> 태그에 사용할 수 있는 속성으로는 download, rel, hreflang 등이 있다.

한 페이지에서 다른 페이지로 이동하는 링크 외에도 한 페이지 안에서 점프하는 링크가 존재한다. 이를 앵커(anchor)라고 한다.

앵커

<태그 id="앵커 이름"> ~ </태그> 이 부분으로 이동할 것이다.
<a href="#앵커 이름"> ~ </a> 이 링크를 누르면 이동할 것이다.

내가 이 글 상단으로 움직여볼게! 얍!!!
이렇게 한 페이지 안에서 다른 부분으로 넘어갈 수 있게 도와준다.