비전공자를 위한 HTML/CSS-이미지 요소

<img>

<img>는 문서에 이미지를 삽입하는 태그로, 닫는 태그가 없는 빈 태그 입니다.

<img src="./images/pizza.png" alt="피자">

src 속성

<img>의 필수 속성으로 이미지의 경로를 나타내는 속성입니다.

 

alt 속성

이미지의 대체 텍스트를 나타내는 속성입니다.

대체 텍스트는 이미지를 대체하는 글을 뜻하며, 웹 접근성 측면에서 중요한 속성입니다.

src 속성과 더불어 반드시 들어가야 하는 속성입니다.

 

width/height 속성

이미지의 가로/세로 크기를 나타내는 속성입니다.

값의 단위는 필요하지 않으며, 값을 입력하면 자동으로 픽셀 단위로 계산됩니다.

width/height는 선택적인 속성이지만 이미지의 크기가 고정적이라면 width/height 속성을 선언하는 것이 성능적인 측면에서 좋습니다.

width/height 속성이 없으면 이미지는 원본 크기대로 노출되며,

둘 중 하나만 선언하면 나머지 한 속성은 선언한 속성의 크기에 맞춰 자동으로 비율에 맞게 변경됩니다.

반면 두 속성 모두 선언하면 이미지는 비율과 무관하게 선언한 크기대로 변경됩니다.

 

상대경로와 절대경로

src 속성에는 이미지의 경로가 들어가며, 이미지의 상대경로와 절대경로가 있습니다.

상대경로는 현재 웹 페이지를 기준으로 상대적으로 이미지의 위치를 나타내는 경로이고,

절대경로는 실제 그 이미지가 위치한 곳의 전체 경로입니다.

<!-- 상대경로 -->
<img src="./images/pizza.png" alt="피자">

<!-- 절대경로 -->
<img src="C:/users/document/images/pizza.png" alt="피자">
<img src="http://www.naver.com/pizza.png" alt="피자">

상대 경로에서의 './'는 페이지가 있는 현재 폴더를 나타냅니다.

 

이미지 파일 형식

• gif : 제한적인 색을 사용하고 용량이 적으며 투명 이미지와 애니메이션 이미지를 지원하는 형식
• jpg : 사진이나 일반적인 그림에 쓰이며 높은 압축률과 자연스러운 색상 표현을 지원하는 형식(투명을 지원하지 않는다.)
• png : 이미지 손실이 적으며 투명과 반투명을 모두 지원하는 형식

 

---

 

참고링크

 

 

 

HTML 요소 레퍼런스

https://developer.mozilla.org

이 페이지는 모든 HTML elements 들을 나열합니다.