HTML_이미지 요소

<img>태그

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

 

src 속성(필수)

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

 

alt 속성(필수)

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

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

src 속성과 더불어 반드시 들어가야 하는 속성입니다.(Ex. 간혹 웹에서 엑박표시시 나오는 설명글)

 

 

width/height 속성

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

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

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

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

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

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

이미지파일이 준비되어있지않지만 사이즈를 테스트해보고 싶다면?

src 속성 값(경로) : "http://placehold.it/가로x세로사이즈"

ex: <img src="http://placehold.it/500x200" alt="">

오른쪽 그림과 같이 사이즈를 확인해볼 수 있습니다.

 

 

상대경로와 절대경로

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

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

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

 

상대경로는 불러오는 페이지의 위치에 따라 이미지의 주소가 달라질 수 있습니다.

상대경로를 쓸 때는 .을 이용해 표현합니다.

./ : 현재 페이지가 있는 폴더 (생략가능)

../ : 상위폴더로 한번 이동  -> 상위폴더를 두 번 이동하려면 ../../형태로 표시합니다.

folder(폴더명)/ :현재폴더에서 하위폴더로 이동 명령

ex : <img src="./images/pizza.jpg" alt="">

 

이미지 파일 형식

gif : 256색으로 제한적 색표현, 용량이 작음. 애니메이션(움짤)과 투명이미지가 가능.

jpg : 높은 압축률과 자연스러운 색상표현, 사진이나 일반그림에 주로 사용. 투명이미지 지원안함.

png : jpg와 비교했을때 이미지 손실이 없고, 투명 이미지가 가능.