[HTML]이미지 넣는 방법&이미지 크기 변경

오늘은 html에서 이미지를 넣는 방법을 배웠습니다! 

글로만 채워지던 화면에 이미지가 들어가네요! 태그만으로 이미지가 나온다는게 정말 신기하네요..ㅎ 

이미지 태그는 <img></img>, image의 줄임말이라고 합니다!

---

우선 이미지를 삽입하는 방법을 알기 전에

이미지가 불러 올수 있게 되었는데, 다른 사람들은 안보인다는 경우가 생길 수 있습니다. 왜냐하면 절대경로와 상대경로 두가지의 경로가 있는데,

절대경로란?

내컴퓨터에 저장되어 있는 파일들로, 파일의 마우스 오른쪽 버튼을 누르면 속성에서 확인할 수 있습니다.

절대 경로를 사용하면 내 컴퓨터 안에 있는 이미지이기 때문에, 상대방이 웹상에서 이미지가 뜨지 않습니다. (웹 페이지 제작은 절대경로를 사용하지 않습니다.)

상대경로란?

상대경로는 서버 주소가 달라지더라도 이전 서버에서의 디렉토리 구조만 같다면 경로를 수정하지 않아도 되는 경로입니다. 현재 문서를 기준으로 경로를 연결하고 있어서, 루트 디렉토리를 사용하지 않기 때문입니다.

---

이미지 삽입하기

사진은 무료 이미지로 상업적으로 사용이 가능한 이미지들이 모여있는 사이트를 사용하였습니다.

https://pixabay.com/

• 우선 사용하고 싶은 이미지를 찾습니다.

저는 pixabay에서 이쁜 고양이 이미지를 가져왔습니다!

• 마우스 오른쪽 키를 클릭하여 '이미지 주소 복사'를 해줍니다!
• 주소를 복사하였으면, html을 이용할 수 있는 메모장을 열어줍니다!

<img src="https://cdn.pixabay.com/photo/2020/03/28/15/20/cat-4977436__340.jpg">

파란색의 공간에, 넣고자 하는 이미지의 주소를 복사하여 넣으면 됩니다

• <img src="">태그로 ""의 사이에 가져올 이미지의 주소를 붙여넣어 줍니다!
• 마지막으로.. 사실 처음에 저장부터 하면 좋지만, 파일의 이름을 .html로 저장을 해줍니다. ex)고양이.html

---

이미지를 불러올 때 사이즈를 정할 수도 있습니다.

가로(width), 세로(height), 픽셀(pixel)로 정해주면 됩니다.

<img width="가로픽셀" height="세로픽셀" src="이미지 주소">

가로와 세로 모두를 변경할 수 있지만, 비율이 달라지면서 이상해지기 때문에, 보통은 둘중 하나만 변경합니다.