[Do it] 03장 이미지와 하이퍼링크

2023-12-28 1 분 소요

01. 이미지

파일 형식	설명
GIF(Graphic Interchange Form)	표시할 수 있는 색상의 수가 최대 256까지 뿐이지만 다른 이미지 파일형식에 비해 파일 크기가 작기 때문에 아이콘이나 불릿 등 작은 이미지에 주로 사용합니다. 투명한 배경이나 움직이는 이미지를 만들수 있다는 장점이 있습니다.
JPG/JPGE(Joint Photographic Experts Group)	사진을 위해 개발된 형식으로 GIF보다 다양한 색상과 명암을 표현한 수 있습니다. 저장을 반복하다 보면 화질이 떨어질 수도 있습니다.
PNG(Portable Network Graphics)	투명 배경을 만들면서 다양한 색상도 표현할 수 있으며 네트워크용으로 개발되었기 때문에 최근 많이 사용합니다.

웹문서에 이미지를 삽입할 때는 <img> 태그를 사용합니다. 이때 src 속성을 사용해 이미지 파일이 있는 경로를 알려주어야 하면에 이미지를 표시할 수 있습니다.

<img src="경로" [속성="값"]>

src 속성 - 이미지 파일 경로 지정하기

이미지를 웹 문서에 넣으려면 src 속성에 정확한 파일 경로를 지정해야 합니다. 경로란 현재 HTML 문서에서 이미지 파일까지 찾아가기 위한 길이라고 말할 수 있습니다. 이것이 정확하지 않으면 이미지가 표시되지 않을 수 있습니다.

웹 문서의 파일과 이미지 파일이 같은 경로에 있다면 src속성에는 간단히 이미지 파일의 이름만 적으면 됩니다.

index.html,lotus.jpg이 같은 폴더에 있다면 src속성에 파일 이름만 적으면 됩니다.

    <img src="lotus.jpg">

반면, 웹 문서가 있는 폴더에 하위 폴더를 만들고 그 폴더에 이미지 파일을 저장했다면(우리가 흔히하는 이미지들만 모아 놓는 폴더 생성..) src속성에 하위 폴더와 할께 이미지 파일 이름을 적어야합니다.

    <img src="images/lotus.jpg">

이미지가 삽입된 웹 문서를 다른 사람에게 공유할 때는 html 문서와 함께 이미지 파일이 있는 폴더도 함께 전달해 주어야합니다.

웹 상의 링크를 복사해 이미지 경로 지정하기

인터넷에 올라와 있는 이미지 링크를 복사해 이미지 경로를 지정해보겠습니다.

브라우저에서 웹 페이지에 넣고 싶은 이미지를 마우스 우클릭으로 이미지 주소 복사를 선택하면 이미지 경로를 알 수 있습니다.

이 경로를 src의 속성값으로 주면됩니다. 그리고 웹 이미지는 인터넷에 접속할 수 있어야 화면에 표시됩니다.

우클릭으로 안나온다면 속성에 들어가 주소 부분을 복사해서 사용하면 됩니다.

alt 속성 - 이미지를 설명해 주는 대체 텍스트

alt 속성은 이미지를 설명하는 대체 텍스트를 삽입할 때 사용합니다. 대체 텍스트란 웹 문서에 삽입한 이미지같이 시각적인 요소의 내용을 알 수 없는 시각장애인 같은 이들을 위해 이미지를 설명하는 속성입니다.

alt속성의 텍스트를 화면 낭독기가 시각장애인에게 읽어 줄 수 있습니다.

alt=" "

width, height 속성 - 이미지 크기 조정하기

Twitter Facebook LinkedIn