WEB1 HTML- 속성과 img

웹페이지 상에 이미지를 올릴 때 쓰는 img 태그와 속성을 배웠다.

 

웹페이지 상에 이미지를 올릴떄는 <img>태그를 쓰면 되는데 이것만으로는 어떤 이미지를 불러올지에 대한 정보가 부족하기 때문에 이미지가 올라가지지 않기 때문에 속성이라는 것이 만들어지게 되었다.

 

이미지를 올릴때에는 <img>태그 옆에 source의 줄임말인 src를 써주고 올리고 싶은 이미지 파일을

자기가 만든 HTML 파일이 있는 폴더 안에 같이 넣은 후 src 뒤에 이미지 파일명을 써주면 된다.

이것을 정리하면 <img src= 이미지파일명.jpg> 이다.

 

이렇게 <img> 태그를 쓴 후 실행시켜보면 아래와 같이 웹상에서 뜨는 것을 알 수가 있다.

 

이미지가 너무 큰데 이렇게 너무 크다 싶으면 이미지 크기를 조정하는 방법이 있다.

그것은 widrh라는 속성을 사용해서 크기를 조정하면 된다.

 

이렇게 <img> 태그 안에 width 속성을 사용해서 크기를 조정해주면 된다.

width="크기"

 

width속성으로 크기를 조정해주니 이렇게 크기가 작아진 것을 볼 수 있다.

 

 

 

*느낀 점

태그 안에 속성이라는 것을 사용해서 어떤 이미지를 올릴 것인가 지정하고 크기도 조종할 수 있다는 것을 오늘 알았는데 앞으로 태그마다 어떠한 다양한 속성을 사용할 수 있는지 검색을 통해서 알아봐야겠다는

생각이 들었다.