[비전공자를 위한 HTML/CSS] (7) 이미지

절대경로 : 실제로 이미지가 위치한 곳의 전체경로

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

  ./ - 현재 페이지가 있는 폴더.

  ../ - 현재 페이지가 있는 폴더의 상위 폴더.

  / - 최상단 폴더.

 

이미지 형식 : gif, jpg, png

  gif : 256가지의 제한적인 색을 사용해서 용량이 적음. 투명한 이미지와 애니메이션 지원.

  jpg : 사진이나 일반적인 그림에 쓰인다. 높은 압축률, 자연스러운 색상 표현하나 투명은 지원X

  png : 이미지 손실이 적은 형식. 투명, 반투명 모두 지원

 

이미지 요소 : 문서에 이미지를 삽입하는 역할을 한다. 빈태그 이며 필수속성으로 ' src '와 ' alt ' 갖고있다.

<img src="경로", alt="이미지 설명">

 

<img>의 속성

   (필수)

       src : 이미지의 경로를 나타내는 속성. ' 절대경로 '와 ' 상대경로 ' 있음.

       alt : 이미지의 대체 텍스트(이미지 설명)를 나타내는 속성. 웹 접근성 측면에서 중요. 스크린 리더기는 alt 내용을 읽음.

 

(선택적)

       width / height : 이미지의 가로/세로를 나타냄. 입력값의 단위 필요X.(픽셀로 계산). 둘 중 하나만 선언되면 선언된 속성에 맞게 자동으로 비율에 맞게 변경됨. 둘다 선언시 비율 무시.

 

이미지 크기가 고정적인경우 width/height 선언이 성능적인 측면에서 좋다.

 

<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTkHNDHKZ5_pfFw0k1MNwg7o-VL6Tc5Z36DxD3-UU8iO2PYykUBGcg6tcOpsvn2qTtqNzKc4ZIBRR640Q&usqp=CAU" alt="태극기" width=273 height=184>