[HTML/CSS] #7 이미지 삽입하기, 비율 조정, alt

안녕하세요

오늘은 이미지 삽입하는 방법에 대해서 알아볼게요

이미지는 <img>라는 태그를 이용하여 삽입할 수 있습니다.

 

---

 

1. 삽입할 이미지 선택하기

삽입할 이미지를 선택하는 방법에는 두 가지가 있습니다.

하나는 이미지의 링크를 사용하는 것, 하나는 이미지를 다운로드해서 사용하는 것입니다.

먼저, 첫 번째로 이미지 링크를 사용해서 삽입해봅시다.

 

---

넣고 싶은 이미지나 사진을 검색해서 맘에 드는 이미지를 하나 찾아봅시다.

이미지를 찾은 후에 이미지를 우클릭하게 되면 이미지 주소 복사라는 버튼이 있습니다

눌러서 이미지 링크를 복사해주세요

<h1>이미지 삽입하</h1>
<img src="https://example.com/images/example.png">

위와 같이 코드를 작성하시고 img 태그 src속성의 속성값을 아까 복사해둔 이미지 링크로 바꿔주세요.

 

---

그러면 이렇게 이미지가 잘 삽입된 것을 확인할 수 있습니다.

 

---

 

이번엔 다운로드한 이미지를 삽입해봅시다.

<h1>이미지 삽입하기</h1>
<img src="mcthemax.jpg">

위처럼 코드를 작성하면 html파일이 존재하는 폴더 내에 있는 mcthemax.jpg라는 사진을 삽입하라는 뜻입니다.

 

 

---

이미지가 잘 삽입된 것을 확인할 수 있습니다.

 

---

 2. 속성 Alt

 

alt 속성에 대해서 알아봅시다

alt는 이미지의 주소가 예기치 못하게 변경되거나 해당되는 이미지를 찾을 수 없을 때 대체되어 나타나는 텍스트를 말합니다.

<h1>이미지 삽입하기</h1>
<img src="mcthemax.jpg" alt="엠씨더맥스">

 위처럼 코드를 작성해봅시다.

이미지가 표시될 때는 잘 삽입되어 있지만

 

---

 

만약에 예기치 못한 오류로 이미지를 찾을 수 없을 때 위 사진처럼

사진이 삽입되지 않고 엠씨더맥스라는 대체 텍스트가 보입니다.

 

---

3. 크기, 비율 조정

삽입된 이미지의 크기를 조절하는 방법에 대해서 알아봅시다.

이미지의 크기는 속성 width (가로)와 height (세로)로 조절할 수 있습니다.

<h1>이미지 삽입하기</h1>
<img src="mcthemax.jpg" width="800px" height="500px;">

<h1>이미지 삽입하기</h1>
<img src="mcthemax.jpg" style="width:800px;height:500px;">

 위의 두 코드 모두 사용할 수 있습니다

이미지의 가로를 800px, 높이를 500px로 설정한 것입니다.

 

---

 이미지의 비율과 크기가 바뀌어 잘 삽입된 것을 알 수 있습니다.