이미지 삽입하기

이미지를 삽입하는 img 태그

img 태그는 src 속성과 alt 속성이 반드시 필요하다. 

src 속성은 이미지 파일의 경로를 지정하고

alt 속성은 텍스트로 대신 설명한다.

(->인터넷 연결이 불안정하거나 이미지 파일 경로를 잘못 넣었을 경우)

 

src 속성은 현재 내가 작성한 파일의 위치를 기준으로 정해진다.

현재 html 파일과 이미지 파일(pig.jpg)이 같은 폴더에 있다면

<img src="pig.jpg">

 

 

현재 html 파일이 있는 폴더에 하위폴더(images) 안에 이미지 파일(pig.jpg)이 있다면 

<img src="images/pig.jpg" alt="아기돼지">
<h1>아기돼지</h1>

 

img 태그

 

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

이미지 파일의 크기가 너무 커서 크기를 조절하고 싶다면

width와 height를 이용하면 된다.

width는 너비, height는 높이 이다.

<img src="images/pig.jpg" alt="아기돼지" width="10%">
<img src="images/pig.jpg" alt="아기돼지" width="150">

%로 속성을 적용하면 현재 웹 브라우저 창의 너비와 높이를 기준으로 이미지 크기 결정

숫자로 속성을 적용하면 px 단위로 이미지 크기 결정 (웹 브라우저 창의 크기와 상관없이 고정된 크기로 표시됨)

 

 

 

Do it! HTML+CSS+자바스크립트 웹 표준의 정석 교재를 참고하여 작성했다.