HTML5+CSS3]3-1 이미지

https://www.youtube.com/user/easyspub

 

easyspub

⭐웹 페이지에서 사용할 수 있는 이미지 파일은 파일 크기가 크지 않으면서도 화질이 좋아야 하기 때문에 몇 가지 파일 형식만 사용할 수 있다.

 

✔웹에서 사용할 수 있는 이미지 파일 형식

👉GIF

표시할 수 있는 색상 수가 최대 256가지

파일 크기가 작아서 아이콘이나 불릿에 주로 사용

투명한 배경이나 움직이는 이미지를 만들 수 있다.

 

👉JPG

GIF보다 다양한 색상과 명암을 표현할 수 있다.

 

👉PNG

투명 배경을 만들 수 있다.

다양한 색상도 표현할 수 있다.

 

✔<img>태그 : 이미지 삽입하기

기본형

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

👉웹 문서에 이미지를 삽입할 때 <img>태그에 src속성을 사용하여 이미지 파일이 있는 경로를 알려주어서 사용한다

 

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

현재 HTML 문서에서 이미지 파일까지 찾아가기 위한 길을 정확히 지정한다.

 

👉내 컴퓨터의 이미지 파일 경로 지정하기

 같은 경로에 있다면 src속성에 간단히 이미지 이름만 적고, 하위 폴더에 이미지가 있다면  폴더명과 함께 이미지 파일 이름을 적는다.

 

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

웹 이미지 파일 경로를 src속성의 값으로 지정한다.단, 인터넷에 접속할수 있어야 화면에 표시된다.

주의해야 할 점은 다른 사람이 올린 사진이나 이미지는 저작권자의 허락 없이 다른 곳에 옮기거나 다운로드해 사용하면 안된다.

 

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

ex) <img src="이미지 파일경로.파일형식" alt="대체 텍스트">

👉이미지를 설명하는 대체 텍스트를 삽입할 때 사용한다.

alt속성을 이용하면 이미지에 대한 설명을 넣을수 있고 alt속성의 텍스트를 화명 낭독기가 읽을수 있다.

연결 속도가 느리거나 이미지를 제대로 표시할 수 없는 상황에 사용한다.

👉alt속성을 사용할 때 이미지 파일에서 보이는 글자들을 그대로 넣어 주어야 한다.

 

ex) <img src="이미지 파일경로.파일형식" alt="">

👉블릿이나 작은 아이콘처럼 특별한 의미 없이 화면을 꾸미기 위해 사용한 이미지에는 대체 텍스트를 지정하지 않아도 된다.

👉이런경우 alt=""으로 지정한다.

 

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

👉브라우저 창에 원하는 크기로 조정해 넣고 싶을때 사용한다.

👉width, height 속성을 사용하지 않으면 원본 이미지 크기 그대로 브라우저 화면에 표시된다.

이미지 크기를 조정하여도 이미지 파일의 용량은 그대로이다.

작은 이미지를 크게 표시할 경우, 화질이 나빠질 수 있다.

 

✔ <figure>,  <figcaption>태그 : 이미지에 설명 글 붙이기

👉<figure>태그 : 설명 글을 붙일 대상 지정

👉기본형 : <figure> 요소 </figure>

👉웹 문서 안에서 한 단위가 되는 요소를 묶을 때 사용한다.

이미지에 설명 글을 넣으려면 이미지를 <figure>태그로 묶어 주어야 한다.

 

👉<figcaption>태그 : 설명 글 붙이기

👉기본형 : <figcaption> 설명 글 </figcaption>

👉설명 글이 필요한 대상은 <figure>태그로 묶고 설명 글은 <figcaption>으로 묶는다.

 

ex)

<figure>

<img src="이미지 파일경로.파일형식" alt="대체 텍스트">

<figcaption> 설명 글 </figcaption>

 </figure>