05_HTML 이미지 삽입

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

- <img>태그에서 알아야 할 속성은 src와 alt속성입니다.

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

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

기본형

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

 

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

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

- 경로란 현재 HTML 문서에서 이미지 파일이 있는 곳까지 어떻게 찾아가야 하는지 알려줍니다.

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

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

Tip 사이트에서 사용하는 이미지 파일을 쉽게 관리하려면 별도의 폴더에 이미지만 따로 저장하는 것이 좋습니다.

 

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

- alt속성을 지정하면 인터넷이 불안정하거나 이미지 파일 경로를 잘못 넣었을 때처럼 이미지를 제대로 표시할 수 없는 경우에 이미지 대신 텍스트가 나타납니다.

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

- width는 이미지의 너비를, height는 이미지의 높이를 지정하며, 속성은 2개 모두 사용할 수도 있고 1개만 사용할 수도 있습니다.

- width와 height 속성에서 사용할 수 있는 단위는 퍼센트(%)와 픽셀(px)이 있습니다.

---

웹 요소에 설명 글 붙이기

• <figure>태그와 <figcaption>태그

- <figure>태그는 도표나 일러스트, 이미지, 소스 코드 등 독립된 콘텐츠를 나타냅니다.

- <figure>태그는 <table>태그나 <img>태그를 대신해서 사용하는 것이 아니라 문서의 내용과 구별되는 요소라는 의미에서 붙이는 것입니다.

- <figure>태그 주로 <figcaption>태그와 함께 사용해서 설명 글을 추가할 때 사용합니다.

- <figure>태그와 <figcaption>태그를 사용해서 설명 글을 붙일 수 있습니다.

- <figure>태그 안에 <img>태그를 여러 개 사용하면 그림 여러 장에 같은 설명 글 붙일 수도 있습니다.

 

• srcset속성 사용해서 이미지 삽입

- srcset의 속성이란 여러 상황을 고려해서 한꺼번에 이미지 정보를 여러 개 알려 주고, 화면 너비나 해상도에 따라 이미지를 적절하게 표시하는 것입니다.

- srcset라는 이름에서 알 수 있듯 이미지 코드를 여러 개 지정할 수 있습니다.

기본형

<img src="기본 이미지" srcset="[파일1, 파일2, 파일3, ...]" alt="대체 텍스트">

 

• W 서술자 사용하기

- 조건을 지정할 때 w를 사용하면 파일이름 너비 형식으로 이미지를 삽입합니다.

- w는 이미지 파일의 너비를 가리킵니다.

 

• X 서술자 사용하기

- X는 장치의 픽셀 비율(pixel ratio)을 가리킵니다.

- 주로 맥 컴퓨터의 경우 해상도가 높으므로 맥용으로 고화질 사진을 제공할 때 많이 사용합니다.

- x값이 클수록 고화질 이미지를 연결할 수 있습니다.

- 예를 들어 일반화면에서는 000.png를 표시하고, 고해상도 화면에서는 000.png 2x로 표시합니다.