안녕하세요. 메론커피입니다

[HTML] 이미지 넣기
– img 태그
– src
– width, height
– alt
– border

에 대한 정보입니다

<img> 태그

<img>태그를 사용하여 이미지를 넣을 수 있습니다.
또한 아래의 속성들을 추가하여 이미지를 원하는 데로 수정할 수 있습니다

ex)

<img src=”cat_image.jpg”>

<img src=”cat_image.jpg” width=”300px”>

<img src=”cat_image.jpg” alt=”이미지가 없습니다” width=”300px” height=”250px”>

ㅁ 속성의 순서는 바뀌어도 상관없습니다

ex)

<img src=”cat_image.jpg” alt=”이미지가 없습니다” width=”300px” height=”250px”>

<img src=”cat_image.jpg” alt=”이미지가 없습니다” width=”300px” height=”250px”>

<’img> 태그 속성

SRC(이미지 경로 또는 이미지 URL)

<img src=”이미지 URL”>

img 태그를 사용할 때 src 속성을 입력하여 이미지 경로 또는 이미지 URL을 입력해주어야 이미지가 출력됩니다

ex)

<img src=”https://meloncoffee.com/wp-content/uploads/2021/12/cat-g6f9aa4217.jpg”>

WIDTH, HEIGHT(이미지 크기를 설정하는 경우)

<img src=”이미지 URL” width=”가로 사이즈” height=”세로 사이즈”>

width(가로 사이즈)와 height(세로 사이즈)를 입력하여 이미지의 크기를 조절할 수 있습니다
ㅁ 입력하지 않을 경우 원본 이미지 사이즈로 출력이 됩니다
ㅁ 사이즈 단위는 px, % 등을 사용할 수 있습니다

ex)

<img src=”https://meloncoffee.com/wp-content/uploads/2021/12/cat-g6f9aa4217.jpg” width=”100″ height=”100″>

이미지를 불러올 수 없는 경우 대체 텍스트(alt)

<img alt=”대체 텍스트”>

ex)
<img alt=”이미지를 불러올 수 없습니다”>

이미지 테두리 설정(border)

<img border=”숫자”>

이미지 테두리의 사용 여부와 굵기를 설정할 수 있습니다

ㅁ 이미지에 하이퍼링크를 만들 경우 border 값을 0을 입력하여 테두리를 없앨 수 있습니다

ex)

<img src=”cat.png” border=”0″>