HTML 이미지 삽입하기

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

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

src속성은 이미지 파일의 경로를 지정하기 때문에 반드시 있어야함.
웹 문서가 있는 폴더와 이미지가 같은 폴더에 있다면 src속성에 이미지 파일 이름.형식 만 적으면 되지만
하위 폴더에 있다면 ex)images폴더 “images/이미지파일이름.형식” 같처럼 넣어줘야 한다.
alt속성에는 화면 낭독기 등에서 이미지를 대신해서 읽어 줄 텍스트를 입력하기 때문에 필수적이진 않음.

---

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

＜img＞태그로 이미지 파일을 삽입하면 원래 이미지 크기대로 표시됨.
이미지 파일을 수정하지 않고 웹 브라우저 창에서 보이는 이미지 크기만 조절하고 싶다면 width와 height 속성을 사용한다.
width는 이미지의 너비
height는 이미지의 높이
를 지정한다. 2개 모두를 사용할 수도 있고 1개만 사용할 수 있다.
1개만 지정하면 나머지 속성은 비율을 자동으로 계산하여 적용된다.

width와 height속성에서 사용할 수 있는 단위는 퍼센트(%)와 픽셀(px)이 있다.
픽셀을 사용할 때는 px단위를 쓰지 않고 숫자만 입력하고 퍼센트는 %를 입력함.

width=”50%”
width=”150”
이런식으로 사용.

둘의 차이는 px로 설정할 경우 웹 브라우저 창의 크기와 상관없이 고정된 픽셀의 크기로 표시가 되고
%로 할 경우 웹 브라우저 창 크기에따라서 유동적으로 이미지의 크기가 변한다.

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

와 같이 씀