03-1 이미지

웹에서 사용하는 이미지 형식

  1. GIF(Graphic Interchange Form)
  2. JPG/JPEG(Joint Photographic Experts Group)
  3. PNG(Portable Network Graphics)

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

<img src="images/road.jpg" alt="">

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

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

'경로'란 현재 HTML문서에서 이미지 파일까지 찾아가기 위한 길이다.

하위 폴더의 경우 '/'기호를 사용하고, 상위 폴더의 경우 '..'기호를 사용한다.

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

(인터넷 익스플로러)웹 문서에 넣고 싶은 이미지를 마우스 오른쪽 버튼으로 클릭해 [속성]을 선택한 후 속성 창에서 [주소]부분을 복사하면 된다.

(크롬)웹 문서에 넣고 싶은 이미지를 마우스 오른쪽 버튼으로 클릭하고 [이미지 주소 복사]를 선택하면 이미지 경로를 알 수 있다.

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

<img> 태그의 alt 속성을 이용하면 이미지에 대한 설명을 넣을 수 있고 alt 속성의 텍스트를 화면 낭독기가 시각장애인에게 읽어 줄 수 있다.

또한 대체 텍스트를 사용하면 연결 속도가 느리거나 이미지를 제대로 표시할 수 없는 상황에서 이미지 자리에 alt 속성에 쓴 내용이 표시되어 어떤 이미지가 사용되었는지 짐작할 수 있다.

<img src="home.jpg" alt="홈으로 가기">

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

<img src="images/road.jpg" width="250" height="90" alt="사려니 숲길">

Tip! 그림판을 이용해 이미지 크기를 조절하고 [크기 조정]을 통해 조절된 크기값을 알아내 다른 곳에서 사용할 수 있다.

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

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

<figcaption> 태그 - 설명 글 붙이기

<figure>
    <img src="images/oreum-1.jpg" alt="용눈이 오름">
    <figcaption>[그림 1-1] 용눈이 오름</figcaption>
</figure>

results matching ""

    No results matching ""