04-4 이미지 삽입하기

웹 사이트에 적절한 이미지가 있으면 정보를 시각적으로 전해 줄 뿐 아니라 지루하지 않게 해줌.

따라서 웹 사이트에서 이미지의 역할은 텍스트만큼 중요함.

사이트 전체 디자인뿐만 아니라 메뉴나 중요한 요소를 이미지로 처리하여 내용을 강조할 수 있음.

 

>> 이미지를 삽입하는 <img> 태그

예시 : <img src="이미지 파일 경로" alt="대체용 텍스트">

<img> 태그에서 알아야 할 속성은 src와 alt임.

src속성은 이미지 파일의 경로를 지정하여 웹 브라우저에 알려주는 역할을 하며 반드시 있어야함.

alt속성에는 화면 낭독기 등에서 이미지를 대신해서 읽어 줄 텍스트를 입력합니다.

 

>> 이미지 파일 경로를 나타내는 src 속성

이미지나 음악, 동영상 파일 등을 웹 문서에 삽입할 때에는 경로를 주의해야 함.

경로란 현재 html 문서에서 이미지 파일이 있는 곳까지 어떻게 찾아가야 하는지를 알려줌.

이미지 파일의 경로를 정확하게 입력하지 않으면 이미지가 화면에 나타나지 않음.

이미지 파일의 경로는 웹 문서 파일의 위치를 기준으로 정해짐.

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

만약 하위 폴더에 이미지파일이 있다면 슬러쉬를 입력해줘야함 

ex) <img src="images/tangerines.jpg">

 

>> 이미지를 텍스트로 대신 설명하는 alt속성

웹 문서에 이미지를 삽입할 때는 화면 낭독기와 같은 보조 기기에서 이미지를 대신해서 읽어 줄 텍스트를 함께 넣을 수 있음. ex) <img src="images/tangerines.jpg" alt="레드향">

 

>> 이미지 크기를 조절하는 width, height 속성

width속성 : 이미지의 너비를 지정함

height : 이미지의 높이를 지정함

2개 속성 모두 사용할 수 있고 1개만 사용할 수도 있음.

width나 height 중 1개만 지정해도 나머지 속성은 비율을 자동으로 계산하여 나타냄.

•  % : 현재 웹 브라우저 창의 너비와 높이를 기준으로 이미지 크기를 결정(창의 너비에 비례)   width="50%"
• px(픽셀) : 이미지의 너비나 높이를 해당 픽셀 크기만큼 표시(고정된 크기)   width="150"

 

 

<<알아두면 좋아요>>

=== 웹에서 사용하는 대표적인 이미지 파일 형식 ===

웹에서 사용하는 이미지는 인터넷으로 전송해야 하므로 파일 크기가 크지 않으면서 화질이 좋아야 합니다.

주로 JPG(또는 JPEG)나 PNG 파일 형식을 사용함.

아이콘이나 로고처럼 작은 이미지일 경우에는 GIF파일을 사용하기도 함.