IT수업/HTML+CSS

it수업 1~2주차 (8) Img태그

워제하 2024. 1. 3. 22:14

 

먼저 새로운 폴더를 만드는데 이름은 images로 만든다.

 

1. 첫번째 방법 : images폴더 안에 강아지 사진을 넣는다.

2. 두번째 방법 : 포털사이트에서 이미지를 검색 한 뒤 해당 이미지의 주소를 넣는다.

 

 

 

<실행 화면>

 

 

이 코드만 쳤을 경우 1, 2번째 사진이 나온다.

 

이 코드를 치면 3번째 사진이 나오는데 사진을 클릭하면 네이버로 넘어가는 것을 볼 수 있다.

 

 

 

● svg 이미지

 

똑같이 images폴더에 svg이미지를 넣는다.

 

 

●svg이미지는 '벡터이미지'로 이미지를 줄이거나 늘려도 화질에 영향을 받지 않는 이미지이다.

 

 

<실행화면>

 

 

 

 

 

 

 

 

 

강아지사진 출처 : https://pixabay.com/ko/photos/%EA%B0%9C-%EB%8F%99%EB%AC%BC-%EA%B0%95%EC%95%84%EC%A7%80-%EC%95%A0%EC%99%84-%EB%8F%99%EB%AC%BC-4390885/

핑크 강아지 사진 출처 : https://blog.naver.com/forest5812/223086896149

svg 고양이 사진 출처 : https://svgsilh.com/ko/image/1801287.html

'IT수업 > HTML+CSS' 카테고리의 다른 글

it수업 1~2주차(10) Form태그  (0) 2024.01.04
it수업 1~2주차 (9) video 태그  (0) 2024.01.03
it수업 1~2주차 (7) a태그  (0) 2024.01.03
it수업 1~2주차(6) table태그  (0) 2024.01.03
it수업 1~2주차(5) table  (0) 2024.01.03